{% extends 'base.html' %}
{% load help_tags %}

{% block content %}
    <div class="question-display-block card mb-4" style="background-color: #111; color: #fff;">
        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #222; color: #fff;">
            <span>Question <span class="question-number">1</span></span>
            <button type="button" class="btn btn-sm btn-outline-light hide-show">Hide/Show</button>
        </div>
        <div class="inner-display-block card-body" style="background-color: #111; color: #fff;">
            <div id="single-dicom-viewer" class="dicom-viewer mb-3" data-images="" data-annotations=''></div>
            <div class="history mb-3"></div>
            <div class="answers-section mb-3">
                <details>
                    <summary class="font-weight-bold" style="color: #fff;">Sample Answers:</summary>
                    <span class="answers"></span>
                </details>
            </div>
            <div class="question-feedback alert alert-info p-2 mb-0" style="background-color: #222; color: #fff; border-color: #444;"></div>
        </div>
    </div>
    <div class="shorts">
        {% include 'user_score_header.html' %}
        <ul class="score-answer-list">
            {% for ans, score, correct_answer, feedback 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 %}
                    <span class="view-question-link" data-qn={{forloop.counter0}}>View</span>
                    {% if request.user.is_staff or view_all_results or request.user in exam.author.all %}
                        {% with q=questions|get_item:forloop.counter0 %}
                            {% with ua=user_answers_map|get_item:q.pk %}
                                {% if ua %}
                                    <a href="{% url 'generic:view_answer_history' app_name='shorts' model_name='UserAnswer' pk=ua.pk %}" class="btn btn-sm btn-outline-info ms-2" style="font-size: 11px; padding: 2px 6px; vertical-align: middle;">History</a>
                                {% endif %}
                            {% endwith %}
                        {% endwith %}
                    {% endif %}
                    <br/>
                    <span class="user-answer-score user-answer-score-{{score}}">
                        <span class="submitted-user-answer">
                            <pre>{{ans}}</pre>
                        </span>
                        {% if exam.publish_results or view_all_results %}
                            <span class="answer-score">Score: {{score}}</span>
                            {% if feedback %}
                                <span class="answer-feedback badge badge-secondary" style="margin-left:10px;">Feedback: {{ feedback }}</span>
                            {% endif %}
                        {% endif %}
                    </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 'shorts: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 images = data.images

                        if ("feedback_images" in data) {
                            images.push(...data.feedback_images)
                        }

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

                        if (!images || images.length === 0) {
                            $("#single-dicom-viewer").html("<p>No images for this question</p>");
                        } else{
                            window.dispatchEvent(event);
                        }

                        if (data.history) {
                            $(".question-display-block .history").empty().append(`History:<pre>${data.history}</pre>`);
                        }
                        if (data.feedback) {
                            console.log("Feedback", data.feedback)
                            $(".question-feedback").empty().append(`Feedback:<pre>${data.feedback}</pre>`);
                        } else {
                            $(".question-feedback").empty();
                        }
                        console.log(data)
                        if (data.answers && data.answers.length > 0) {
                            // Format: [[answer, score], ...]
                            let formattedAnswers = data.answers.map(
                                ans => `<div class="sample-answer-block"><span class="sample-answer-text">${ans[0]}</span> <span class="sample-answer-score badge badge-info">Score: ${ans[1]}</span></div>`
                            ).join('');
                            $(".question-display-block .answers").empty().append(`${formattedAnswers}`);
                        } else {
                            $(".question-display-block .answers").empty().append("No sample answers available");
                        }
                        n = parseInt(question_number) + 1
                        $(".question-display-block .question-number").empty().append(n);
                    // show some message according to the response.
                    // For eg. A message box showing that the status has been changed
                        $(".inner-display-block").show();
                    })
                    .always(function () {
                        console.log('[Done]');
                    })
            })

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

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


{% block css %}
    <style>
        .answer-score {
            float: right;
        }

    </style>
{% endblock css %}