{% extends '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">
        {% include 'user_score_header.html' %}
        <div>
            {% comment %} <h4>Answers</h4> {% endcomment %}
            <ul class="score-answer-list">
                {% for ans, score, correct_answer, feedback in answers_and_marks %}
                    <li class="user-answer-li
                        {% if ans.0 == 'Not answered' %}
                           not-answered 
                        {% endif %}
                    " data-question-number="{{forloop.counter}}"><b>Question {{forloop.counter}}</b> <span class="view-question-link-longs"
                                                                                                                                    data-qn={{forloop.counter0}}>View</span>
                        <ul class="">
                            <li class="Observations" data-qidn="1">Observations</br>
                            <pre>{{ans.0}}</pre>
                            </li>
                            <li class="Interpretation" data-qidn="2">Interpretation</br>
                            <pre>{{ans.1}}</pre>
                            </li>
                            <li class="Principle Diagnosis" data-qidn="3">Principle Diagnosis</br>
                            <pre>{{ans.2}}</pre>
                            </li>
                            <li class="Differential Diagnosis" data-qidn="4">Differential Diagnosis</br>
                            <pre>{{ans.3}}</pre>
                            </li>
                            <li class="Management" data-qidn="5">Management</br>
                            <pre>{{ans.4}}</pre>
                            </li>
                            {% if view_all_results or exam.publish_results %}
                                Question score: <span class="answer-score">{{score}}</span>

                                
                                {% if feedback %}
                                    <p>Question feedback: {{feedback}}</p>
                                {% endif %}
                                    
                            {% endif %}
                        </ul>
                    </li>
                {% endfor %}
            </ul>

        </div>
        {% include 'user_scores_footer.html' %}
    </div>
{% endblock %}
{% block css %}
<style>
.not-answered {
    opacity: 0.5;
}
.image-link {
    cursor: pointer;
    border: 1px solid purple;
    padding-left: 4px;
    padding-right: 4px;
}
</style>
{% endblock css %}
{% 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 %}