{% extends 'physics/base.html' %}

{% block content %}

    <div class="physics">
        <h1>Exam: {{ exam }}</h1>

        <div class="alert alert-info" role="alert">
            <details>
                <summary title="click to open"><h3>Instructions</h3></summary>
                <p>
                    Please make sure you submit answers before closing or navigating from this page (as otherwise they will not
                    be saved). The submit button is at the bottom of the page.
                </p>
                <p>
                    Click on a question to toggle between true / false.
                </p>
                <p>
                    Ensure your candidate number is entered in the below box.
                </p>
            </details>
        </div>

        <div>
            Candidate number: <input type="number" id="cid" name="cid" title="please enter your candidate number">
        </div>

        <h2>Questions</h2>

        {% autoescape off %}
            <ol id="full-question-list-physics">
                {% for question in questions.all %}

                    <li>
                        {{ question.stem }}
                        <ol type="a" class="abcde">
                            <li>
                                <span class="question-text">{{ question.a }}:</span> <label class="truefalse-switch"> <input
                                    type="checkbox" class="question a" id="{{question.pk}}-a-checkbox" data-q="{{question.pk}}"
                                    data-a="a">
                                    <div class="slider round a"></div>
                                </label>
                            </li>
                            <li>
                                <span class="question-text">{{ question.b }}:</span> <label class="truefalse-switch"> <input
                                    type="checkbox" class="question b" id="{{question.pk}}-b-checkbox" data-q="{{question.pk}}"
                                    data-a="b">
                                    <div class="slider round b"></div>
                                </label>
                            </li>
                            <li>
                                <span class="question-text">{{ question.c }}:</span> <label class="truefalse-switch"> <input
                                    type="checkbox" class="question c" id="{{question.pk}}-c-checkbox" data-q="{{question.pk}}"
                                    data-a="c">
                                    <div class="slider round c"></div>
                                </label>
                            </li>
                            <li>
                                <span class="question-text">{{ question.d }}:</span> <label class="truefalse-switch"> <input
                                    type="checkbox" class="question d" id="{{question.pk}}-d-checkbox" data-q="{{question.pk}}"
                                    data-a="d">
                                    <div class="slider round d"></div>
                                </label>
                            </li>
                            <li>
                                <span class="question-text">{{ question.e }}:</span> <label class="truefalse-switch"> <input
                                    type="checkbox" class="question e" id="{{question.pk}}-e-checkbox" data-q="{{question.pk}}"
                                    data-a="e">
                                    <div class="slider round e"></div>
                                </label>
                            </li>
                        </ol>
                    </li>
                {% endfor %}
            </ol>
        {% endautoescape %}


        <button id="submit">Submit answers</button>

    </div>


    <script type="text/javascript">

        window.answers_submitted = false;
        $(document).ready(function () {
            console.log($(".question-text"));
            $(".question-text").click(function (evt) {
                $(evt.target).parent().find("input").click();
            });

            $("#submit").click(() => {
                let cid = $("#cid").val()
                if (cid == "") {
                    alert("You need to enter a valid candidate number.");
                    $("#cid").focus();
                    return
                }

                answers = [];


                $("input.question").each((n, el) => {
                    answers.push([el.dataset.q, el.dataset.a, el.checked]);

                })

                ans = {
                    cid: parseInt(cid),
                    eid: {{exam.pk}},
                    ans: answers
                }

                let json = {
                    eid: {{exam.pk}},
                    answers: JSON.stringify([ans]),
                };

                postAnswers(json);

            })
        });


        window.onbeforeunload = confirmExit;
        function confirmExit() {
            if (!window.answers_submitted) {
                return "You have attempted to leave this page. Are you sure?";
            }
        }

        function postAnswers(ans) {
            console.log(ans);
            $.post("{% url 'physics:exam_answers_submit' %}", ans, null, "json").done((data) => {
                console.log(data);
                if (data.success) {
                    let ret = confirm(
                        `Answers sucessfully submitted. Click OK to finish the exam.`
                    );

                    if (ret) {
                        //window.saveSession();
                        $("#exams-button-link").remove();
                        $("#submit").after('<button id="exams-button-link">Return to exam list</button>');
                        $("#exams-button-link").click(() => {
                            window.location.href = "{% url 'physics:active_exams' %}";
                        })
                        window.answers_submitted = true;
                    } else {
                    }
                } else {
                    alert(`Error submitting answers: ${data.error}`);
                }
            });
            // $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
        }


    </script>

    <style>
        .truefalse-switch {
            position: relative;
            display: inline-block;
            width: 100px;
            height: 20px;
            margin: 0px;
            margin-bottom: -5px;
            float: right;
        }

        .truefalse-switch input {
            display: none;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 4, 255, 0.5);
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 20px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: rgba(162, 0, 255, 0.5);
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(68px);
        }

        /*------ ADDED CSS ---------*/
        .slider:after {
            color: white;
            display: block;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            font-size: 10px;
            font-family: Verdana, sans-serif;
        }

        .a.slider:after {
            content: 'a) FALSE';
        }

        .b.slider:after {
            content: 'b) FALSE';
        }

        .c.slider:after {
            content: 'c) FALSE';
        }

        .d.slider:after {
            content: 'd) FALSE';
        }

        .e.slider:after {
            content: 'e) FALSE';
        }

        input:checked+.slider.a:after {
            content: 'a )TRUE';
        }

        input:checked+.slider.b:after {
            content: 'b )TRUE';
        }

        input:checked+.slider.c:after {
            content: 'c )TRUE';
        }

        input:checked+.slider.d:after {
            content: 'd )TRUE';
        }

        input:checked+.slider.e:after {
            content: 'e )TRUE';
        }

        .question-text {
            display: inline-block;
            vertical-align: text-top;
            clear: both;
            width: 600px;
        }

        .abcde {
            clear: both;
        }
    </style>
{% endblock %}