{% extends 'rapids/exams.html' %}

{% block content %}
    <div class="col-md-6" id="main-col">
        <h2>{% if review %}Reviewing{% else %}Marking{% endif %} question {{question_details.current}} of {{question_details.total}}</h2>
        <a href="{% url 'rapids:question_detail' question.id %}" title="View the Question">View</a> 
        <a href="{% url 'rapids:rapid_update' question.id %}" title="Edit the Question">Edit</a> 
        {% if request.user.is_superuser %}<a href="{% url 'admin:rapids_rapid_change' question.id %}" title="Edit the Question using the admin interface">Admin Edit</a>{% endif %}
        {% if unmarked_answers_bool %}
            <div class="alert alert-warning" role="alert">
                This questions has unmarked answers. Are you sure you want to review?
            </div>
        {% endif %}
        <details>
            <summary><i class="bi bi-info-circle"></i> Help</summary>
            <p>Unmarked questions will be shown below. To mark the question, click on the answer to toggle through the markers.</p>
            <p>The colour of the answer will change to reflect the mark given.</p>
            <p>Answers will be automatically marked.</p>
            <p>By default only answers for the current exam will be shown. Click the link to view all answers.</p>
            <h4>Buttons</h4>
            <ul>
                <li>Previous: Go to the previous question</li>
                <li>Save: Save your changes and stay on the same question</li>
                <li>Next: Save your changes and go to the next question (will warn if not all answers have been marked)</li>
                <li>Skip: Skip the current question allowing you to move on without marking all answers</li>
            </ul>
        </details>


        {% if question.normal %}
            <h3>This question is normal</h3>

            {% if incorrect_answers %}
                <p>The following answers have been submitted for this question</p>
                <div class="marking-list">
                    <ul id="new-answer-list" class="answer-list rapid">
                        {% for answer in incorrect_answers %}
                            <li>
                                <pre><span class="answer incorrect" title="{{answer}}">{{ answer }}</span></pre>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        {% else %}
            <h3>This question is abnormal</h3>
            Region: {{ question.get_regions }}, Abnormalities: {{ question.get_abnormalities }}<br />
            Primary answer: <span id="primary-answer" title="The primary answer of the question">{{question.get_primary_answer}}</span>
        {% endif %}
        <div class="marking">
            <form method="POST" class="post-form">{% csrf_token %}
                {% if not question.normal %}
                    {% if not review %}
                        {% if unmarked_exam_answers_only %}
                            Showing unmarked exam answers only <a href="{% url 'rapids:mark_all' exam.id question_number %}">(view all answers for question)</a>
                        {% else %}
                            Showing all answers <a href="{% url 'rapids:mark' exam.id question_number %}">(view unmarked exam answers only)</a>
                        {% endif %}
                    {% endif %}

                    <div class="marking-list">
                        {% if not review %}
                            Unmarked:
                            <ul id="new-answer-list" class="answer-list rapid">
                                {% for answer in user_answers %}
                                    <li>
                                        <pre><span class="answer not-marked" title="{{answer}}">{{ answer }}</span></pre>
                                    </li>
                                {% endfor %}
                            </ul>

                            {% if not unmarked_exam_answers_only %}
                                Marked:
                                <ul id="marked-answer-list" class="answer-list rapid">
                                    {% for answer in correct_answers %}
                                        <li>
                                            <pre><span class="answer correct" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                    {% for answer in half_mark_answers %}
                                        <li>
                                            <pre><span class="answer half-correct" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                    {% for answer in incorrect_answers %}
                                        <li>
                                            <pre><span class="answer incorrect" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        {% else %}
                            To review:
                            <ul id="new-answer-list" class="answer-list rapid">
                                {% for answer, mark in review_user_answers %}
                                    <li>
                                        <pre><span class="answer not-marked" data-mark="{{mark}}" title="{{answer}}">{{ answer }}</span></pre>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        <div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
                            Mark</span>, <span class="incorrect">0 Marks</span></div>
                    </div>
                {% endif %}
                {% if review and not question.normal %}
                    <button type="button" name="check-review" class="check-review">Check review answers</button><br/>
                    <div id="review-text"></div>
                {% endif %}
                <span class="save-buttons">
                    {% if question_details.current > 1 %}
                        <button type="submit" name="previous" class="save btn btn-default">Previous</button>
                    {% endif %}
                    <button type="submit" name="save" class="save btn btn-default">Save</button>
                    {% if question_details.current >= question_details.total %}
                    {% else %}
                        <button type="submit" name="next" class="save btn btn-default">Next</button>
                        <button type="submit" name="skip" class="save btn btn-default">Skip</button>
                    {% endif %}
                </span>
                <span class=hide>
                    {{ form.as_p }}
                </span>
            </form>
        </div>
        <button class="btn btn-primary" type="button" id="toggle-images">Toggle images</button>
    </div>
    <div class="col-md-6" id="dicom-col">
        <div id="single-dicom-viewer" class="marking-dicom" data-images="{{question.get_image_url_array}}"
            data-annotations='{{question.get_image_annotations}}'>
        </div>
    </div>
        <script>
            $(document).ready(() => {
                {% if review and not question.normal %}
                $("button.check-review").click(() =>{
                    $(".review-details").remove();
                    $(".marking-list .answer").each((n, el) => {
                        console.log(n, el, el.dataset);
                        if (el.dataset.mark != el.dataset.newmark) {
                            $(el).after(`<span class="current-mark review-details"> saved [${el.dataset.mark}]</span>`)
                        }
                    })
                    $("#review-text").html("Discrepant answers are show above. Clicking next / save will overwrite saved scores with your current scoring.")
                    $(".save-buttons").show();
                })

                $(".save-buttons").hide();
                {% endif %}

                $("#toggle-images").click(() => {
                    console.log("111")
                    $("#dicom-col").toggle()
                    $("#main-col").toggleClass("col-md-6")
                    $("#main-col").toggleClass("col-md-12")

                })
            });
        </script>

{% endblock %}

{% block js %}

    <script type="text/javascript">
        $(document).ready(function ()  {
            console.log("loads")
            $(".answer").each(function(n, el) {
                console.log(n)
                console.log(el)
                uri = encodeURI(el.title)
                button = $(`<a tabindex="0" class='popover-button' role="button" data-toggle="popover" data-trigger="focus" title='${el.title}'>+</a>`)
                popover = $(`
    <div id="popover-content-${n}" class="hide popoverdiv">
      <ul class="popovermenu">
        <li><a href="https://www.google.com/search?q=${uri}" target="_blank">Google answer</a></li>
        <span class="copy-to-clipboard" data-text="${el.title}">Copy to clipboard</span>
      </ul>
    </div>`)
                $(el).before(popover)
                $(el).before(button)


                // This is horrible
                $(button).popover({
                    html: true,
                    trigger: "focus",
                    content: function () {
                        return $(`#popover-content-${n}`).html();
                    }
                }).on('shown.bs.popover', function(e, n
                ) {
                    text = el.title
                    $(`.copy-to-clipboard`).on("click", function(e) {
                        navigator.clipboard.writeText(text);
                    });
                });
            })

        }

        )
    </script>

{% endblock %}

{% block css %}
    <style>
        #primary-answer {
            font-weight: strong;
            color: white;
        }
        .popover-button {
            padding-right: 5px;
            cursor: help;
            text-decoration: none;
            color: purple;
        }
        .popover, .popover-header {
        }

        .popovermenu {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .popovermenu li {
        }
        .popovermenu li a {
            color: blue;
        }

        .answer-list{
            list-style: none;
            padding-left: 0px;

        }
    </style>
{% endblock css %}