@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100">
                <div class="card-header h2" id="title">Statystyki <span class="knt-color">{{ $testData->name }}</span>
                </div>
                <div class="card-body overflow-auto">

                    @php $x = 1; @endphp
                    @foreach ($testData->questions as $question)
                        <div class="question">
                            <h4>Pytanie {{ $x++ }}. {{ $question->question }}</h4>
                            <div class="question-options my-2">
                                <span class="text-nowrap pr-5">Czas na odpowiedź: <span>{{ $question->time }}s</span></span>
                                <span class="text-nowrap pr-5">Mnożnik punktów: <span>x{{ $question->multiplier }}</span></span>
                                <span class="text-nowrap pr-5">Typ: <span>{{ $question->open ? "otwarte" : ($question->arrange ? "ułóż według kolejności" : "zamknięte")}}</span></span>
                                <span class="text-nowrap pr-5">Liczba odpowiedzi:
                                    <span>
                                        @if($question->arrange)
                                            {{ round(count($question->playeranswers)/count($question->answers)) }}
                                        @else
                                            {{ count($question->playeranswers) }}
                                        @endif
                                    </span>
                                </span>
                                <button class="btn btn-sm btn-primary details" id="question{{ $x-2 }}">Szczegółowe odpowiedzi</button>
                            </div>
                            @if($question->photo)
                                <img class="question-img" alt="Obrazek"
                                     src="{{ asset('images/knt/question-photo/'.$question->photo) }}">
                            @endif

                            <div class="answers {{ $question->open ? "openAns" : "" }}">
                                @if($question->open)
                                    <h6 class="pt-1 font-weight-bold">Prawidłowa odpowiedź: &nbsp;</h6>
                                    @foreach ($question->answers as $answer)
                                        <span style="padding-top: 2px">{{ $answer->answer }}, </span>
                                    @endforeach

                                @elseif($question->closed)
                                    <table class="table table-sm w-100">
                                        @foreach ($question->answers as $answer)
                                            <tr class="py-1">
                                                <td class="w-25" style="min-width: 120px;">{{ $answer->answer }}</td>
                                                <td>
                                                    @php $percent = count($question->playeranswers) ? round(100*(count($answer->player_answers)/(count($question->playeranswers)))) : 0 @endphp
                                                    <div class="answersBar"
                                                         style="width:{{ $percent/2 }}%;">
                                                        {{  $percent }}%
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach

                                        @elseif($question->arrange)
                                            <table class="table table-sm w-100">
                                                <tr>
                                                    <td class="text-right">Miejsce odpowiedzi:</td>
                                                    <td>
                                                        <div class="custom-flex">
                                                        @for($i = 1; $i <= count($question->answers); $i++)
                                                            <div>{{ $i }}</div>
                                                        @endfor
                                                        </div>
                                                    </td>
                                                </tr>
                                                @foreach ($question->answers as $answer)
                                                    @php
                                                        $place = array_fill(0, count($question->answers),0);
                                                        foreach ($answer->player_answers as $answerr){
                                                            $place[$answerr->order_ans]++;
                                                        }
                                                    @endphp
                                                    <tr>
                                                        <td class="w-25">{{ $answer->answer }}</td>
                                                        <td>
                                                            <div class="custom-flex">
                                                            @for($i=0; $i < count($place); $i++)
                                                                <div>{{ count($answer->player_answers) ? round($place[$i]*100/count($answer->player_answers)) : 0 }}%</div>
                                                            @endfor
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                @endif
                                            </table>
                            </div>
                            @if($question->open)
                                <p class="answersTitle">Odpowiedzi:</p>
                                <div class="openAnswers">
                                    @if(count($question->playeranswers) > 0)
                                        @php $tmp = $question->playeranswers[0]->answer_open; $counter = 0 @endphp
                                        @foreach ($question->playeranswers as $answer)
                                            @if(empty($answer->answer_open))
                                                @continue;
                                            @endif
                                            @if($tmp != $answer->answer_open && !empty($tmp))
                                                <div>
                                                    {{ $tmp }}
                                                    @if($counter > 1)
                                                        <span>x{{$counter }}</span>
                                                    @endif
                                                </div>
                                                @php $counter = 0 @endphp
                                            @endif

                                            @php $tmp = $answer->answer_open; $counter++ @endphp
                                        @endforeach
                                        <div>
                                            {{ $tmp }}
                                            @if($counter > 1)
                                                <span>x{{$counter }}</span>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @include('blocks.knt.statistic-details')
@endsection

@section('style')
    <style>
        @media (max-width: 500px) {
            .question-img {
                width:100%;
            }
        }
        .custom-flex{
            display: flex;
            width: 30%;
            min-width: 120px;
            justify-content: space-between;
        }
        .custom-flex div{
            margin: 0 2%;
            width: 40px;
            text-align: center;
        }
        .openAns {
            display: flex;
            margin-top: 0 !important;
        }

        .openAns div {
            border: 3px solid #FFDE95;
            padding: 0 8px;
            font-size: 1.1em;
            height: 28px;
            line-height: 1em;
            border-radius: 15px;
        }

        .answersBar {
            margin-left: 2em;
            display: inline-block;
            background-color: #FFDE95;
            width: 0;
            min-width: 35px;
            transition-duration: 1s;
            padding: 3px 5px;
            white-space: nowrap;
            text-align: center;
            line-height: 1.3em;
            border-radius: 50px;
        }

        .knt-color {
            color: #135589;
        }

        .answersTitle {
            font-weight: 600;
            font-size: 1.4em;
            margin-bottom: 0;
        }

        .openAnswers {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .openAnswers div {
            border: 3px solid rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            position: relative;
            margin: 0.4em 1em;
            padding: 0 8px;
        }

        .openAnswers div span {
            position: absolute;
            right: -10px;
            top: -16px;
            font-size: 0.9em;
        }

        .answers {
            margin-top: 1.5em;
        }

        .question-options > span > span {
            font-weight: 400;
        }

        .question-options > span {
            font-weight: 700;
        }

        .question {
            border: 1px solid #999;
            padding: 1em;
            margin: 2em 0;
            border-radius: 10px;
            border-left: 8px solid #135589;
        }

        .question-img {
            max-width: 400px;
            max-height: 200px;
            display: block;
            margin: 0 auto;
        }
    </style>
@endsection


@section("scripts")
    <script type="text/javascript">
        $(() => {
            const detailsModal = $(".modal");
            const allAns = $("#answers_detail table");
            let playerData = "{{ $testData->questions }}";
            playerData = JSON.parse(playerData.replace(/&quot;/g,'"')); //decode

            detailsModal.hide();

            $(".details").on("click", (e)=>{
                const index = parseInt($(e.target).attr('id').replace("question", ""));
                detailsModal.fadeIn();
                const q = playerData[index];
                $("#question_detail").html(q['question']);

                allAns.html('');

                if(q['closed']){
                    $.each(q['answers'], (key, ans)=>{
                        $.each(ans['player_answers'], (key, pAns)=>{
                            const html = ansTemplate(pAns['user']['name'], ans['answer']);
                            allAns.append($.parseHTML(html));
                        });
                    });
                }else if(q['open']){
                    $.each(q['playeranswers'], (key, ans)=>{
                        const html = ansTemplate(ans['user']['name'], ans['answer_open']);
                        allAns.append($.parseHTML(html));
                    });
                }else if(q['arrange']){
                    let playerID = 0;
                    let collect = [];
                    $.each(q['playeranswers'], (key, ans)=> {
                        if(playerID !== ans['player_id']){
                            if(playerID !== 0) {
                                const html = arrangeAnsTemplate(collect['name'], collect['ans']);
                                allAns.append($.parseHTML(html));
                            }
                            collect['ans'] = [];
                            playerID = ans['player_id'];
                        }
                        collect['name'] = ans['user']['name'];

                        //search ans name
                        const answer = q['answers'].filter((v, i) => {
                            if (v['id'] === ans['answer_id']) return v;
                        })[0];

                        collect['ans'].push(answer ? answer['answer'] : '-');
                    });
                    const html = arrangeAnsTemplate(collect['name'], collect['ans']);
                    allAns.append($.parseHTML(html));
                }
            });

            $(".close").on("click", ()=>{
                detailsModal.fadeOut();
            });

        });

        const ansTemplate = (name, answer) => {
            return `<tr>
                        <td>${name}</td>
                        <td>${answer ? answer : "-"}</td>
                    </tr>`;
        }

        const arrangeAnsTemplate = (name, answers) => {
            const rowspan = answers.length;
            let ans = ``;
            for(let i = 1; i < rowspan; i++){
                ans += `<tr>
                            <td>
                                ${i+1}. ${answers[i] ? answers[i] : "-"}
                            </td>
                        </tr>`;
            }
            return `<tr>
                        <td class="align-middle" rowspan="${rowspan}">${name}</td>
                            <td>
                                1. ${answers[0] ? answers[0] : "-"}
                            </td>
                    </tr>${ans}`;
        }


        /*    function getStatisticData(){
                $.ajax({
                    method: 'GET',
                    url: '/knt/statisticdata/{{ app('request')->input('a') }}',
            headers: {
                'X-CSRF-TOKEN': token,
            },
            dataType: 'json',
            success: function (response) {
                testTable.html("");

                if (response.length === 0) {
                    testTable.html("<tr><td colspan='4'><h4>To już wszystkie testy</h4></td></tr>");
                } else {
                    response.forEach(function (element) {
                        element.created_at = convertDate(element.created_at);
                        element.initial_test = checkBoolean(element.initial_test);
                        element.active = checkBoolean(element.active);
                        const html = testTemplate(element);
                        testTable.append($.parseHTML(html));
                    });
                }
            },
            error: (error) => {
                console.log(error);
                testTable.html("<tr><td colspan='4'>Wystąpił błąd, spróuj ponownie</td></tr>");
            },
            complete: () => {
                testLoader.hide();
            }
        });
    }*/

    </script>
@endsection