{% extends 'base.html' %}

{% block content %}
    <span id="user-id">
    {% if request.user.is_authenticated %}
        User: {{request.user}}
    {% else %}
        CID: {{cid}}
    {% endif %}
    </span>
    <div id="timeup">
        Allocated time over.
    </div>
    <div id="clockdiv">
        Time remaining:
        {% comment %} <div>
            <span class="days"></span>
            <div class="smalltext">Days</div>
        </div> {% endcomment %}
        <div>
            <span class="hours num"></span>
            <span class="smalltext">Hours</span>
        </div>
        <div>
            <span class="minutes num"></span>
            <span class="smalltext">Minutes</span>
        </div>
        <div>
            <span class="seconds num"></span>
            <span class="smalltext">Seconds</span>
        </div>
    </div>
    <div class="no-select">
        <h2>{{exam.name}}: Question [<span id="question-number">{{pos|add:1}}</span>/<span id="exam-length">{{exam_length}}</span>]</h2>
        {% if exam.publish_results %}
            <div class="alert alert-primary review-mode-alert" role="alert">
                Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='physics' pk=question.pk %}')">here</a>.
            </div>
        {% endif %}

        <div>
            <p><span id="question-stem">{{question.stem|safe}}</span></p>
        </div>


        <div>

            <form method="POST" class="post-form">{% csrf_token %}
                {{ form.non_field_errors }}
                <div class="form-contents">
                    <ol class="physics-answer-list">
                        <li data-ans="a">
                            <div class="fieldWrapper flex-container">
                                {{ form.a.errors }}
                                <label for="{{ form.a.id_for_label }}" class="flex-8 question-text">{{question.a|safe}}</label>
                                <span class="flex-1">{{ form.a }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="b">
                            <div class="fieldWrapper flex-container">
                                {{ form.b.errors }}
                                <label for="{{ form.b.id_for_label }}" class="flex-8 question-text">{{question.b|safe}}</label>
                                <span class="flex-1">{{ form.b }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="c">
                            <div class="fieldWrapper flex-container">
                                {{ form.c.errors }}
                                <label for="{{ form.c.id_for_label }}" class="flex-8 question-text">{{question.c|safe}}</label>
                                <span class="flex-1">{{ form.c }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="d">
                            <div class="fieldWrapper flex-container">
                                {{ form.d.errors }}
                                <label for="{{ form.d.id_for_label }}" class="flex-8 question-text">{{question.d|safe}}</label>
                                <span class="flex-1">{{ form.d }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="e">
                            <div class="fieldWrapper flex-container">
                                {{ form.e.errors }}
                                <label for="{{ form.e.id_for_label }}" class="flex-8 question-text">{{question.e|safe}}</label>
                                <span class="flex-1">{{ form.e }}<span class="postinput"></span></span>
                            </div>
                        </li>
                    </ol>
                </div>

                {% if previous > -1 %}
                    <button type="submit" name="previous" class="save btn btn-default">Previous</button>
                {% endif %}
                {% if next %}
                    <button type="submit" name="next" class="save btn btn-default">Next</button>
                {% else %}
                    {% if not exam.publish_results %}
                        <button type="submit" name="save" class="save btn btn-default">Save</button>
                    {% endif %}
                {% endif %}

                {% comment %} {% if exam.publish_results and question.feedback %}
                    <h3>Feedback</h3>
                    <p>{{question.feedback|safe}}</p>
                {% endif %} {% endcomment %}
                <br />
                <button type="submit" name="finish" class="save btn btn-default">Overview</button>
                <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
            </form>
        </div>
    </div>

    <h4>Questions</h4>
    <div id="menu-list">

    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(() => {
            /* beautify ignore:start */
            {% if not exam.publish_results %}

                let time_limit = '{{exam.time_limit}}'
                if (time_limit != "None") {
                    let end_time = new Date({{cid_user_exam.start_time|date:"U"}}*1000+parseInt('{{exam.time_limit}}')*1000);
                    initializeClock("clockdiv", end_time);
                }

            {% else %}
                $(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
                {{question.get_answers_js}}.forEach((el, n) => {
                    console.log(el)

                    li_el = $(`ol.physics-answer-list li:eq(${n})`)//.addClass(`answer-${el}`)

                    if (el) {
                        li_el.addClass("answer-true");
                    } else {
                        li_el.addClass("answer-false");
                    }
                    if (el == li_el.find("input").get(0).checked) {
                        li_el.addClass("answer-correct");
                    } else {
                        li_el.addClass("answer-incorrect");

                    }

                });
                //$("ul.physics-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
            {% endif %}

            for (let i = 0; i < {{ exam_length }}; i++) {
                $("#menu-list").append($(
                    `<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`));

            }
            $("button.question-menu-item").on("click", (e) => {
                console.log(e.currentTarget.dataset.qn);
                document.getElementById("goto-button").value = e.currentTarget.dataset.qn;
                $("#goto-button").click();
            });
            /* beautify ignore:end */

        })

        function getTimeRemaining(endtime) {
            const total = Date.parse(endtime) - Date.parse(new Date());
            const seconds = Math.floor((total / 1000) % 60);
            const minutes = Math.floor((total / 1000 / 60) % 60);
            const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
            //const days = Math.floor(total / (1000 * 60 * 60 * 24));

            return {
                total,
                //days,
                hours,
                minutes,
                seconds
            };
        }

        function initializeClock(id, endtime) {
            const clock = document.getElementById(id);
            clock.style.display = "block"
            const daysSpan = clock.querySelector('.days');
            const hoursSpan = clock.querySelector('.hours');
            const minutesSpan = clock.querySelector('.minutes');
            const secondsSpan = clock.querySelector('.seconds');

            function updateClock() {
                const t = getTimeRemaining(endtime);

                //daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if (t.total <= 0) {
                    clearInterval(timeinterval);
                    timeup.style.display = "block"
                    clock.style.display = "none"
                }
            }

            const timeinterval = setInterval(updateClock, 1000);
            updateClock();
        }



    </script>
{% endblock %}
{% block css %}
    <style type="text/css">
        /*     .form-contents {
        display: none;
    } */
        .flex-container {
            display: flex;
        }

        .flex-1 {
            flex: 1;
        }

        .flex-8 {
            flex: 8;
        }

        .selected {
            border: 1px solid purple;
        }

        .answer-true::after {
            content: "[Correct answer: True]";
            color: darkgray;

        }
        .answer-false::after {
            content: "[Correct answer: False]";
            color: darkgray;

        }
        .answer-correct {
            border: 1px dotted darkgreen;
        }
        .answer-incorrect {
            border: 1px dashed darkred;
        }

        .physics-answer-list input:checked+.postinput::after {
            margin-left: 20px;
            content: "True"
        }
        .physics-answer-list input:not(:checked)+.postinput::after {
            margin-left: 20px;
            content: "False"
        }

        #clockdiv{
            font-family: sans-serif;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 12px;
            display: none;
            color: darkgray;
        }

        #clockdiv > div{
            padding: 1px;
            border-radius: 3px;
            {% comment %} background: purple; {% endcomment %}
            display: inline-block;
        }
        #clockdiv div > span.num{
            color: white;
            padding: 1px;
            border-radius: 3px;
            display: inline-block;
        }

        #timeup {
            display: none;
            color: red;
            font-weight: 100;
            text-align: center;
            font-size: 12px;
        }
    </style>
{% endblock %}