@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100 pb-5">
                <div class="card-header h2">Nowy test</div>
                <div class="card-body overflow-auto pb-5">
                    <div class="testMenu d-flex flex-wrap justify-content-center mb-5">
                        <label id="addTestView" class="btn btn-dark my-2">
                            Dodaj test
                            <input type="radio" value="addNew" name="testMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Wszystkie testy
                            <input type="radio" value="allTests" name="testMenu">
                        </label>
                    </div>

                    <div class="choosen addNew">
                        <form id="test_form" class="mt-5 px-2" method="POST" action="{{ route('new_test') }}">
                            @csrf
                            <input type="hidden" id="test_id" name="id" value="0">
                            <div class="d-flex flex-wrap justify-content-around align-items-center">
                                <div class="mt-3">
                                    <span>Link do gry:</span>
                                    <label class="input-group-prepend">
                                        <span class="input-group-text">https://knt.pubgames.pl/#/</span>
                                        <input title="Dozwolone są znaki od A do Z oraz cyfry" pattern="^[A-Za-z0-9]*$" type="text" name="name" placeholder="Nazwa" required class="form-control" aria-label="Tytuł">
                                    </label>
                                    <label class="input-group-prepend">
                                        <span class="input-group-text">https://knt-panel.pubgames.pl/#/</span>
                                    </label>
                                </div>
                                <div style="min-width: 100px;" class="ml-2 mt-3">
                                    <div class="custom-control custom-checkbox">
                                        <input id="ch2" type="checkbox" name="initial_test" class="custom-control-input">
                                        <label for="ch2" class="custom-control-label">
                                            Wstępny test <span class="info" data-toggle="popover" title="Informacja"
                                                               data-content="Przy wstęnym teście nie jest konieczne zakładanie gry przez prowadzącego. Jest on dostęny z poziomu linku, zawsze gdy jest udostępniony do gry.">i</span>
                                        </label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="active" class="custom-control-input" id="ch1">
                                        <label class="custom-control-label mt-2" for="ch1">
                                            Udostępnij do gry
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <hr class="mt-2 mb-5"/>

                            {{-- question block will be pushed here--}}

                            <div class="p-4 pr-5 text-right fixed-bottom">
                                    <span class="error" style="font-size: 1.2em;"></span>
                                    <div id="testSaveLoader" class="float-right lds-ring">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                <button class="addQuestion mx-4 btn btn-primary">Dodaj pytanie</button>
                                <input type="submit" value="Zapisz test" class="mx-4 btn btn-success">
                            </div>
                        </form>
                    </div>

                    <div class="choosen allTests text-center">
                        <table id="tests" class="table text-center table-striped w-100">
                            <thead class="thead-dark">
                            <tr>
                                <th class="w-50">Nazwa</th>
                                <th>Aktywny</th>
                                <th>Wstępny test</th>
                                <th style="width:50px;"></th>
                                <th style="width:100px;"></th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div id="testsLoader" class="mt-5 lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("scripts")

    <script type="text/javascript">
        $(() => {
            $('.choosen').hide();
            $('.addNew').show();
            const token = $('meta[name="csrf-token"]').attr('content');
            const testTable = $("#tests tbody");
            const testLoader = $("#testsLoader");
            const testSaveLoader = $("#testSaveLoader");

            getAllTests()

            $(document).on('change', '.fileinQuestion',imgUpload);
            $(document).on('click', '.dropimgQuestion', function () {
                const clicked = $(this);
                clicked.next(".fileinQuestion").click();
            });

            function imgUpload(event) {
                const imgContainer = $(event.target).parent().siblings('.photoContainer');
                const hiddenInput = imgContainer.prev(".questionPhotoInput")
                const dropContainer = $(event.target).prev('.dropimgQuestion').children(".uploadMessage");
                //let co = event.target.value.split('\\');
                dropContainer.html(" <h3>. . .</h3> ");

                let files = event.target.files;
                let data = new FormData();

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    if (!file.type.match('image.*')) {
                        dropContainer.html("<br>Wybierz zdjęcie o formacie jpg lub png");
                    } else if (file.size > 5300000) {
                        dropContainer.html("<br>Plik jest za duży, maks 5Mb");
                    } else {
                        data.append('file', file, file.name);

                        const xhr = new XMLHttpRequest();

                        xhr.open('POST', '/knt/photo', true);
                        xhr.setRequestHeader('x-csrf-token', token);
                        xhr.send(data);
                        xhr.onload = function () {
                            const response = JSON.parse(xhr.responseText);
                            //const response = xhr.responseText;

                            if (xhr.status === 200 && response.status[0] === 'ok') {
                                dropContainer.html("");

                                const split = response.status[1].split('/');
                                const imgName = split[split.length - 1];
                                imgContainer.html(`<img alt="Błąd dodawania obrazka" src="{{ asset('images/knt/question-photo') }}/${imgName}" class="photo">
                                    <div class='trash-container'><img class='delete' alt='Trash' src="{{ asset('images') }}/trash.png"></div>`);
                                hiddenInput.val(imgName);

                            } else if (response.status === 'type_err') {
                                dropContainer.html("Dozwolone formaty to jpg oraz png, wybierz inny plik");
                            } else {
                                dropContainer.html("Coś poszło nie tak, spróbuj zmniejszyć rozdzielczość lub wybierz inne zdjęcie");
                            }
                        };
                    }
                }
            }

            $(document).on("click", ".delete", function () {
                const parentContainer = $(this).parent().parent();
                const photoInput = parentContainer.prev(".questionPhotoInput");
                if (photoInput.val().length > 2) {
                    const photoName = photoInput.val().split(".")[0];
                    $.ajax({
                        type: "DELETE",
                        url: `/knt/photo/${photoName}`,
                        cache: false,
                        headers: {
                            'X-CSRF-TOKEN': token,
                        },
                        success: function () {
                            parentContainer.html("");
                            photoInput.val("");
                        }
                    });
                } else {
                    parentContainer.html("");
                    photoInput.val("");
                }
            });

            $(document).on("click", ".deleteAnswer", function (e) {
                e.preventDefault();
                const answerContainer = $(this).parent();
                const allAnswer = $(this).parent().parent();
                answerContainer.remove();
                const allChildren = allAnswer.children("label.input-group-prepend");
                const correctSelect = allAnswer.prev(".closeTitle").children("select");
                //recalculate a b c cd and 1 2 3 4
                allChildren.each((index, element) => {
                    let alphabet = String.fromCharCode(96 + (index * 1 + 1)).toUpperCase();
                    $(element).children("span.notmove").html(alphabet + ".");
                    $(element).children("span.move").html(`<img class="move-icon" alt="move" src="{{ asset('images/knt/move_icon.png') }}"> ${index * 1 + 1}.`);

                    $(element).children("input").attr("placeholder", "Odpowiedź " + (index * 1 + 1));
                })
                recalculateCorrect(correctSelect, allChildren.length);
            });

            function recalculateCorrect(select, answersCount){
                select.html("");
                for (let i = 0; i < answersCount; i++){
                    let alphabet = String.fromCharCode(96 + (i + 1)).toUpperCase();
                    select.append(`<option value="${i}">${alphabet}</option>`);
                }

            }

            $(document).on("click", ".addAnswer", function (e) {
                e.preventDefault();
                //get index
                const closeContainer = $(this).parent().parent();
                const questionNumber = closeContainer.parent().parent().parent().parent();
                const allAnswer = closeContainer.children("label.input-group-prepend");
                const index = allAnswer.length;
                const qnumberCont = closeContainer.parent().parent().parent().children("h4").children(".qnumber");
                const number = parseInt(qnumberCont.html())-1;
                const answer = $.parseHTML(closeAnswerTemplate(index, number));
                const correctAns = closeContainer.prev(".closeTitle").children("select");
                //get select value
                const questionType = closeContainer.parent().parent().siblings(".option").children(".selectContainer").children("select").val();
                if (!closeContainer.hasClass('ui-sortable'))
                    runSortable(closeContainer);

                closeContainer.sortable('option', 'disabled', true);

                $(this).parent().before(answer);

                if (questionType === "slide")
                    closeContainer.sortable('option', 'disabled', false);
                else if(questionType === "close")
                    recalculateCorrect(correctAns, index+1);
            });
            let timeout = null;
            $(document).on("click", ".addQuestion", function (e) {
                e.preventDefault();
                //get index
                const allQuestion = $(this).parent().parent().children("div.question");
                const index = allQuestion.length;
                const question = $.parseHTML(questionTemplate(index));
                $(this).parent().before(question);
                $(this).parent().prev().find(".addAnswer").click(); //add one answer


/*              smooth scroll to bottom
                clearTimeout(timeout);
                timeout = setTimeout(function (){
                    $("html, body").animate({
                        scrollTop: $(
                            'html, body').get(0).scrollHeight
                    }, 1000);
                },300);*/
            });

            $('input[name="testMenu"]').on('change', (e) => {
                $('input[name="testMenu"]').parent('label').removeClass('btn-dark').addClass('btn-light');
                $(e.target).parent('label').removeClass('btn-light').addClass('btn-dark');

                $('.choosen').hide();
                $(`.${e.target.value}`).slideDown();
            });

            $(document).on('change', 'select.ansType', (e) => {
                const allAns = $(e.target).parent().parent().parent().children(".questContainer").children(".allAnswers");
                const closeQuest = allAns.children(".close-question");
                const openTitle = allAns.children(".openTitle");
                const closeTitle = allAns.children(".closeTitle");
                closeQuest.removeClass("moveContainer flex-column ").addClass(" notMoveContainer");

                closeQuest.sortable('option', 'disabled', true);

                const val = $(e.target).val();


                if (val === "open") {
                    openTitle.removeClass("d-none").show();
                    closeTitle.hide();
                    //remove answers
                  //  closeQuest.children("label").remove();
                } else {
                    openTitle.hide();
                    if (val === "slide") {
                        closeQuest.sortable('option', 'disabled', false);
                        closeTitle.hide();
                        closeQuest.addClass("moveContainer flex-column").removeClass("notMoveContainer");
                    }else closeTitle.show();

                }
            });
            $(document).on("click", "#tests tbody tr", (e)=>{
                const clicked = $(e.target);
                if(clicked.is("button"))
                    return;

                const row = clicked.is("td") ? clicked.parent() : clicked.parent().parent();
                const testID = row.attr("id").replace("testID", "");
                getTest(testID);
            });

            function getTest(testID){
                $.ajax({
                    method: 'GET',
                    url: '/knt/test/'+testID,
                    headers: {'X-CSRF-TOKEN': token},
                    dataType: 'json',
                    success: function (response) {
                        console.log(response);
                        $("#addTestView").click();
                        setTestView(response);
                    },
                    error: (error) => {
                        console.log(error);
                        alert("Wystąpił błąd, spróuj ponownie");
                    },
                    complete: () => {
                        testLoader.hide();
                    }
                });
            }

            $("#test_form").on("submit", function (e){
                e.preventDefault();
                const endPoint = $(e.target).attr('action');
                const datastring = $(e.target).serialize();
                const err = $(".error");
                const sendBtn = $("input[type=submit]");


                console.log($(e.target).serializeArray());
                //return false;


                $.ajax({
                    method: 'POST',
                    url: endPoint,
                    beforeSend: function (){
                        testSaveLoader.show();
                        sendBtn.hide();
                        err.html("").removeClass("text-danger text-success");
                    },
                    headers: {
                        'X-CSRF-TOKEN': token,
                    },
                    data: datastring,
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if (response.error) {
                            err.html(response.message).addClass("text-danger");
                        }else{
                            getTest(response.test_id);
                            err.html("Test został zapisany").addClass("text-success");
                        }
                    },
                    error: (error) => {
                        console.log(error);
                        err.html("Wystąpił błąd, spróuj ponownie").addClass("text-danger");
                    },
                    complete: () => {
                        sendBtn.show();
                        testSaveLoader.hide();
                    }
                });

            });

            function setTestView(data){
                $("input[name='initial_test']").prop("checked", data.initial_test);
                $("input[name='active']").prop("checked", data.active);
                $("input[name='name']").val(data.name);
                $("input[name='id']").val(data.id);

                $(".question").remove(); //remove all Question
                $.each(data.questions, function (key, question){
                    $(".addQuestion").click();
                    $(`select[name='question[${key}][multiplier]']`).val(question.multiplier);
                    $(`input[name='question[${key}][id]']`).val(question.id);
                    $(`input[name='question[${key}][time]']`).val(question.time);
                    $(`textarea[name='question[${key}][question]']`).val(question.question);
                    if(question.photo) {
                        $(`input[name='question[${key}][photo]']`).val(question.photo);
                        $(`.photoContainer:eq(${key})`).html(`<img alt="Błąd dodawania obrazka" src="{{ asset('images/knt/question-photo') }}/${question.photo}" class="photo">
                                    <div class='trash-container'><img class='delete' alt='Trash' src="{{ asset('images') }}/trash.png"></div>`);
                    }
                    let questionType = "";
                    if(question.open === 1){
                        questionType = "open";
                    }else if(question.arrange){
                        questionType = "slide";
                    }else{
                        questionType = "close";
                    }
                    $(`select[name='question[${key}][type]']`).val(questionType).trigger("change");

                    let correctIndex = 0;
                    let counter = 0;
                    $.each(question.answers, function (ansKey, answer){
                        let ansInput = $(`input[name='question[${key}][answer][${ansKey}][answer]']`);
                        if(ansInput.length === 0) {
                            $(`.allAnswers:eq(${key}) button.addAnswer`).click();
                            ansInput = $(`input[name='question[${key}][answer][${ansKey}][answer]']`);
                        }

                        ansInput.val(answer.answer);
                        $(`input[name='question[${key}][answer][${ansKey}][order_ans]']`).val(answer.order_ans);
                        $(`input[name='question[${key}][answer][${ansKey}][id]']`).val(answer.id);
                        if(answer.correct === 1){
                            correctIndex = counter;
                        }
                        counter++;
                    });
                    $(`select[name='question[${key}][correct]']`).val(correctIndex);

                });
            }

            function getAllTests() {
                $.ajax({
                    method: 'GET',
                    url: '/knt/tests',
                    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();
                    }
                });
            }

            function checkBoolean(val){
                return val ? `<span class='okSign'>&#10004;</span>` : `<span class='notOkSign'>&#10006;</span>`;
            }

            function runSortable(closeContainer) {
                closeContainer.sortable({
                    disable: true,
                    revert: true,
                    update: function (event, ui) {
                        closeContainer.children("label.input-group-prepend").each(function (index) {
                            let alphabet = String.fromCharCode(96 + (index * 1 + 1)).toUpperCase();
                            $(this).children("span.notmove").html(alphabet + ".");
                            $(this).children("span.move").html(`<img class="move-icon" alt="move" src="{{ asset('images/knt/move_icon.png') }}"> ${index * 1 + 1}.`);
                            $(this).children("input.textAns").attr("placeholder", "Odpowiedź " + (index * 1 + 1));
                            $(this).children("input.orderAns").val(index);
                        });
                    },
                });
            }

            const testTemplate = (test) => {
                return `<tr id="testID${test.id}">
                        <td style='vertical-align:middle;'>${test.name}</td>
                        <td>${test.active}</td>
                        <td>${test.initial_test}</td>
                        <td style="padding:0; vertical-align:middle; margin:0;">
                            <a href="/knt/statistic/${test.id}">
                                <img style="width: 30px;" src="{{ asset('images/showquiz.png') }}" alt="Statystyki">
                            </a>
                        </td>
                        <td>
                            <form method="post" action="/knt/test/${test.id}" onsubmit="return confirm('Czy na pewno chcesz usunąć test ${test.name}?');">
                            <input name="_token" value="${token}" type="hidden">
                                <input type="hidden" name="_method" value="DELETE">
                                <button class="btn btn-danger btn-sm">x</button>
                            </form>
                        </td>
                        </tr>`;
            }
            $(".addQuestion").click();
        });
        const closeAnswerTemplate = (index, question) => {
            //index 1 = A, 2= B,...., 26 = Z
            let alphabet = String.fromCharCode(96 + index + 1).toUpperCase();
            return `<label class="input-group-prepend closeAns">
                <input type="hidden" name="question[${question}][answer][${index}][id]" value="0">
                <span class="notmove input-group-text">${alphabet}.</span>
                <span class="move input-group-text"><img class="move-icon" alt="move" src="{{ asset('images/knt/move_icon.png') }}">${index * 1 + 1}.</span>
                <input required="true" placeholder="Odpowiedź ${index * 1 + 1}" type="text" maxlength="200" class="form-control textAns" name="question[${question}][answer][${index}][answer]">
                <input type="hidden" name="question[${question}][answer][${index}][order_ans]" value="" class="orderAns">
                    <button class="deleteAnswer input-group-text btn btn-danger" style="font-size: 1.5em; padding: 0 0.75rem;">x</button>
            </label>`;
        };

        const questionTemplate = (index) => {
            return `<div class="question">
                    <h4>Pytanie <span class="qnumber">${index*1+1}</span></h4>

                    <div class="option mt-4 d-flex justify-content-around flex-wrap">
                        <input type="hidden" name="question[${index}][id]" value="0">
                        <div class="selectContainer">
                            <span class="position-relative d-inline mt-2">Typ odpowiedzi:</span>
                            <select name="question[${index}][type]" class="ansType form-control d-inline">
                                <option value="close">Zamknięte</option>
                                <option value="slide">Ułóż w odpowiedniej kolejności</option>
                                <option value="open">Otwarte</option>
                            </select>
                        </div>
                        <div>
                            Czas na odpowiedź:
                            <label class="input-group-prepend">
                                <input value="60" class="form-control d-inline" name="question[${index}][time]" type="number" min="5" max="255">
                                    <span class="input-group-text">sekund</span>
                            </label>
                        </div>
                        <div>
                            Mnożnik punktów:
                            <select name="question[${index}][multiplier]" class="form-control">
                                @for($i=1; $i<21; $i++)
                                    <option value="{{ $i }}">x{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
    <div class="d-flex justify-content-between align-items-center">
                    <textarea name="question[${index}][question]" placeholder="Podaj treść pytania" maxlength="255"
                                              rows="2" class="d-inline form-control question-txt"></textarea>
                        <div class="dropimgQuestion mt-3">
                            <img alt="send" class="upImg" src="{{ asset("images/knt/picture_icon.png") }}">
                                <p class="uploadMessage"></p>
                        </div>
                        <input class="d-none fileinQuestion" type="file" name="fileinQuestion">
                    </div>
                    <input type="hidden" class="questionPhotoInput" name="question[${index}][photo]">

                        <div class="photoContainer position-relative"></div>
                        <div class="questContainer row mt-3" style="width:87%; margin: auto;">
                            <div class="allAnswers w-100">
                                <div class="openTitle d-none">Prawidłowe odpowiedzi:</div>
                                <div class="closeTitle">
                                <span>Prawidłowa odpowiedź:</span>
                                <select class="d-inline w-25 ml-3 form-control" name="question[${index}][correct]">
                                    <option value="0">A</option>
                                </select>
                                </div>
                                <div class="close-question notMoveContainer flex-wrap justify-content-between align-items-center">
                                    <div class="w-100">
                                        <button class="mt-4 addAnswer btn btn-secondary">Dodaj odpowiedź
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>`;
        }
    </script>
@endsection

@section('style')
    <style>
        /*
            #135589 - granatowy
            #ffe44d - zółty
        */
        @media (max-width: 1000px) {
            .closeAns {
                width: 95% !important;
                max-width: 500px;
            }

            .close-question {
                justify-content: center !important;
            }
        }

        @media (max-width: 400px) {
            .question-txt {
                margin-left: 1em !important;
            }

            .allAnswers {
                flex: none;
            }
        }

        .fixed-bottom{
            background-color: white;
            border-top: 6px solid #1b4b72aa;
        }

        .closeTitle{
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1em;
        }
        .openTitle{
            font-size: 1.15em;
        }
        .notMoveContainer .move {
            display: none;
        }

        .moveContainer .notmove {
            display: none;
        }

        .move-icon {
            width: 22px;
            cursor: pointer;
            margin-right: 4px;
        }

        .open-question {
            max-width: 500px;
            display: none;
        }

        .close-question {
            display: flex;
        }

        .closeAns {
            min-width: 49%;
        }

        .okSign{
            color: #2fa360;
            font-size: 1.5em;
        }
        .notOkSign{
            color: #e42026;
            font-size: 1.5em;
        }

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

        .question-txt {
            width: 70%;
            margin-left: 5em;
            height: 65px !important;
        }

        .info {
            background-color: #999;
            color: white;
            width: 24px;
            font-size: 1.2em;
            font-weight: bold;
            line-height: 0.9em;
            height: 24px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            padding: 4px;
            border-radius: 100%;
            margin-left: 0.8em;
        }

        .photoContainer {
            margin: 0 auto;
            display: table;
        }

        .photo {
            max-height: 210px;
        }

        .trash-container {
            opacity: 0;
            -webkit-transition: opacity 500ms, visibility 500ms;
            transition: opacity 500ms, visibility 500ms;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            z-index: 1;
            max-height: 210px;
            background-color: rgba(255, 255, 255, 0.45);
            transition-duration: 0.33s;
        }

        .trash-container:hover {
            opacity: 1;
        }

        .trash-container img {
            cursor: pointer;
            position: absolute;
            left: 42%;
            top: 39%;
            width: 55px;
            height: 55px;
            opacity: 0.8;
        }

        #tests > tbody > tr:hover td{
            background-color: rgba(255, 228, 77, 0.7);
            cursor: pointer;
        }
        .dropimgQuestion {
            position: relative;
            border-radius: 5px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.85);
            cursor: pointer;
            color: black;
            text-shadow: none;
            display: inline-block;
            box-sizing: border-box;
            font-size: 14px;
            padding: 10px 8px;
            margin: 3% auto;
        }

        .testMenu input, #testSaveLoader {
            display: none;
        }

        .testMenu label {
            margin: 0 2%;
            padding: 0.375rem 1.5rem;
            border: 1px solid #777;
        }

        .upImg {
            margin: 0 auto;
            display: block;
            width: 40px;
        }
    </style>
@endsection