{% extends 'base.html' %}

{% block content %}
    {% if request.user.is_authenticated %}
        User: {{request.user}}
    {% else %}
        CID: {{cid}}
    {% endif %}
    <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 [{{pos|add:1}}/{{exam_length}}]</h2>
        {% if exam.publish_results %}
            <div class="alert alert-primary" role="alert">
                Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
            </div>
        {% endif %}

        <div>
            <p>{{question.stem|safe}}</p>
        </div>
        <ul class="sba-answer-list">
            <li data-ans="a">{{question.a_answer|safe}}</li>
            <li data-ans="b">{{question.b_answer|safe}}</li>
            <li data-ans="c">{{question.c_answer|safe}}</li>
            <li data-ans="d">{{question.d_answer|safe}}</li>
            <li data-ans="e">{{question.e_answer|safe}}</li>
        </ul>


        <div>

            <form method="POST" class="post-form">{% csrf_token %}
                <div class="form-contents">
                    {{form}}
                </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 %}

                {% if exam.publish_results and question.feedback %}
                    <h3>Feedback</h3>
                    <p>{{question.feedback|safe}}</p>
                {% endif %}
                <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);
                }

                $("ul.sba-answer-list li").each((n, el) => {
                    $(el).click((e) => {
                        $("#id_answer").val(el.dataset.ans);
                        $("ul.sba-answer-list li").removeClass("selected");
                        $(el).addClass("selected")
                    })
                })
            {% else %}
                $("ul.sba-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
            {% endif %}

            {% if saved_answer %}
                $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% 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();
            });


            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) {
                console.log("Start clock", 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();
            }
            /* beautify ignore:end */
        })
    </script>
{% endblock %}
{% block css %}
    <style type="text/css">
        .form-contents {
            display: none;
        }

        .selected {
            border: 1px solid purple;
        }

        #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 %}