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

{% block content %}
    <div class="question-display-block">
        <div class="hide-show">HIDE/SHOW</div>
        <div class="inner-display-block">
            Question <span class="question-number">No question loaded</span><br />
            <span id="question-title"></span><br />
            <span id="question-question"></span>
            <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
            </div>
            <div class="answers">Answers: </div>
        </div>
    </div>
    <div class="anatomy">
        {% include 'user_score_header.html' %}
        <ul class="score-answer-list">
            {% for ans, score, correct_answer in answers_and_marks %}
                <li class="user-answer-li" data-question-number="{{forloop.counter}}">Question {{forloop.counter}} - Correct answer: {% if exam.publish_results %}<span class="correct-answer">{{correct_answer}}</span>{% endif %}
                    <br/>
                    <span class="user-answer-score user-answer-score-{{score}}">
                        <span class="submitted-user-answer">
                            <pre>{{ans}}</pre>
                        </span>
                        {% if exam.publish_results %}
                            <span class="answer-score">{{score}}</span>
                        {% endif %}
                    </span>
                    <span class="view-question-link" data-qn={{forloop.counter0}}>View</span>
                </li>
            {% endfor %}
        </ul>
        {% include 'user_scores_footer.html' %}
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $(".hide-show").click((evt, el) => {
                $(".inner-display-block").toggle();
            })

            $(".view-question-link").on("click", function (e) {
                console.log("click", e)
                question_number = e.currentTarget.dataset.qn;
                $("#single-dicom-viewer").empty();
                $.ajax({
                    url: `{% url 'anatomy:question_review' pk=exam.pk %}`,
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        question_number: question_number
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                    console.log(data);

                    let event = new CustomEvent('loadDicomViewerUrls', {
                        "detail": { "images": data.images, "annotations": data.annotations }
                    });

                    window.dispatchEvent(event);
                    $(".question-display-block .answers").empty().append(data.answers.toString());
                    $("#question-title").empty().append(data.title);
                    $("#question-question").empty().append(data.question);
                    n = parseInt(question_number) + 1
                    $(".question-display-block .question-number").empty().append(n);
                    $(".inner-display-block").show();
                })
                    .always(function () {
                    console.log('[Done]');
                })
            })

            $(".view-question-link").first().click();

        });
    </script>
{% endblock %}