{% extends 'longs/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">1</span><br />
        History: <span id="history"></span><br />
        Images: <span id="series"></span>
        <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
        </div>
    </div>
</div>
<div class="longs">
    <h2>Exam: {{ exam.name }}</h2>
    <h3>Candidate: {{ cid }}</h3>
    Scores:
    <ul>{% for score in answers_marks %}
        <li class="user-answer-li">Question {{forloop.counter}}</li>
        <span class="user-answer-score user-answer-score-{{score}}">
            <pre>{{ans}}</pre> ({{score}})
        </span>
        {% endfor %}
    </ul>
    <br /> Total mark: {{ total_score }} / {{max_score}}
    <br /> Normalised score: {{normalised_score}}
    <div>
        <h4>Answers</h4>
        <ul class="long-answer">{% for a,b,c,d,e in answer_text %}
            <li class="user-answer-li"><b>Question {{forloop.counter}}</b> <span class="view-question-link-longs"
                    data-qn={{forloop.counter0}}>View</span></li>

            <ul>
                <li class="user-answer-li">Observation</br>
                    <pre>{{a}}</pre>
                </li>
                <li class="user-answer-li">Interpretation</br>
                    <pre>{{b}}</pre>
                </li>
                <li class="user-answer-li">Principle Diagnosis</br>
                    <pre>{{c}}</pre>
                </li>
                <li class="user-answer-li">Differential Diagnosis</br>
                    <pre>{{d}}</pre>
                </li>
                <li class="user-answer-li">Management</br>
                    <pre>{{e}}</pre>
                </li>
            </ul>
            {% endfor %}
        </ul>

    </div>
    <div>
        <a href="{% url 'cid_scores' cid passcode %}">Other exams</a>
    </div>
</div>
{% endblock %}
{% block js %}
<script>
    $(document).ready(function () {
        $(".hide-show").click((evt, el) => {
            $(".inner-display-block").toggle();
        })

        $(".view-question-link-longs").on("click", function (e) {
            console.log("click", e)
            question_number = e.currentTarget.dataset.qn;
            $("#single-dicom-viewer").empty();
            $.ajax({
                url: `{% url 'longs: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[0],
                            "annotations": data.annotations
                        }
                    });

                    window.dispatchEvent(event);
                    n = parseInt(question_number) + 1
                    $(".question-display-block .question-number").empty().append(n);
                    $("#history").empty().append(data.title);
                    $("#series").empty();
                    data.image_titles.forEach((element, index) => {
                        $("#series").append($(
                            `<span class="image-link" title="click to view">${index + 1}: ${element}</span> `
                        ).click(() => {
                            $("#single-dicom-viewer").empty();
                            let event = new CustomEvent('loadDicomViewerUrls', {
                                "detail": {
                                    "images": data.images[index],
                                    "annotations": data.annotations
                                }
                            });

                            window.dispatchEvent(event);

                        }));

                    })
                    $(".inner-display-block").show();
                })
                .always(function () {
                    console.log('[Done]');
                })
        })

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

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