<div>
    {% comment %} <button id="edit-button">Inline Edit</button> {% endcomment %}
    <div class="date">
        {{ question.created_date|date:"d/m/Y" }}
    </div>
    <div class="id">
        ID: {{ question.id }}
    </div>

    <p class="pre-whitespace"><b>History:</b> {{ question.history }}</p>
    <p class="pre-whitespace"><b>Region:</b> {{ question.get_regions }}</p>
    <p class="pre-whitespace"><b>Examination:</b> {{ question.get_examinations }}</p>
    <p class="pre-whitespace"><b>Laterality:</b> {{ question.laterality }}
        <button class="toggle-laterality-button toggle-button" data-lat="LEFT">Left</button>
        <button class="toggle-laterality-button toggle-button" data-lat="RIGHT">Right</button>
        <button class="toggle-laterality-button toggle-button" data-lat="BILAT">Bilateral</button>
        <button class="toggle-laterality-button toggle-button" data-lat="NONE">None</button>
    </p>
    <p class="pre-whitespace"><b>Abnormality:</b> {{ question.get_abnormalities }}</p>
    <div class="pre-whitespace multi-image-block"><b>Images:</b>
        <form>
            {% for image in question.images.all %}
                <span class="image-block" style="display: inline-block; vertical-align: top; margin-right: 10px;">
                    Image {{ forloop.counter }}{% if image.description %} ({{image.description}}){% endif %}{% if image.feedback_image %} [feedback image]{% endif %}:
                    <div class="dicom-image shorts-img {% if image.feedback_image %}feedback-img{% endif %}"
                         data-url="{{ remote_url }}{{ image.image.url}}"></div>
                    <input type="checkbox" class="combine-image-checkbox hide" name="combine-image-checkbox" value="{{ image.pk }}">
                </span>
            {% endfor %}

            <details id="combine-images-details">
                <summary>Combine Images</summary>
                    <button id="combine-images-btn"
                            class="btn btn-sm btn-outline-primary"
                            hx-post="{% url 'shorts:combine_images_side_by_side' question.pk %}"
                            hx-include=".combine-image-checkbox:checked"
                            hx-target="#combine-images-result"
                            hx-swap="innerHTML"
                            hx-indicator="#combine-images-progress">
                        Combine Selected Images Side by Side
                    </button>
                    <div id="combine-images-progress" class="htmx-indicator">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Combining images, please wait...
                    </div>
                    <div id="combine-images-result"></div>
            </details>
            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const checkboxBlocks = document.querySelectorAll(".combine-image-checkbox");
                    const details = document.getElementById("combine-images-details");
                    console.log("checkboxBlocks", checkboxBlocks);
                    function updateVisibility() {
                        if (details.open) {
                            checkboxBlocks.forEach(cb => cb.style.display = "inline-block");
                            // Auto-select if only two checkboxes
                            if (checkboxBlocks.length === 2) {
                                checkboxBlocks.forEach(cb => cb.checked = true);
                            }
                        } else {
                            checkboxBlocks.forEach(cb => cb.style.display = "none");
                        }
                    }
                    if (details) {
                        updateVisibility();
                        details.addEventListener("toggle", updateVisibility);
                    }
                });
            </script>
        </form>
    </div>
    <a href='{% url "shorts:question_findings" question_id=question.pk %}'>Click here to view/add findings</a>
    <div>
        Exam(s): {% for exam in question.exams.all %}
            <a href="{% url 'shorts:exam_overview' pk=exam.pk %}">{{ exam }}</a>,
        {% endfor %}
        <button class="btn btn-sm" hx-get="{% url 'shorts:question_add_exam' question_id=question.pk %}"
                hx-target="#exam-list"
                hx-swap="innerHTML">Edit exam(s)</button>
        <span id="exam-list"></span>

    </div>
    <p class="pre-whitespace"><b>Open Access:</b> {{ question.open_access }}</p>
    <p class="pre-whitespace"><b>Feedback:</b> {{ question.feedback }}</p>
    <p><b>Author(s):</b> {% for author in question.author.all %} <a
        href="{% url 'shorts:author_detail' pk=author.pk %}">{{author}}</a>, {% endfor %}</p>
    <p class="pre-whitespace">
        <details>
            <summary>
                Sample Answers:
            </summary>
            <table>
                <tr><th>Answer</th><th>Score</th></tr>
                {% for answer in question.sample_answers.all|dictsortreversed:"score" %}
                    <tr>
                        <td>
                            <span {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="shorts"
                                  {% endif %}>
                                {{ answer }}
                            </span>
                        </td>
                        <td>{{answer.score}}</td>
                    </tr>
                {% endfor %}
            </table>
        </details>
    </p>
{% comment %}     <p class="pre-whitespace">
        <details>
            <summary>
                Answers:
            </summary>
            <table>
                <tr><th>Answer</th><th>Score</th></tr>
                {% for answer in question.answers.all|dictsortreversed:"status" %}
                    <tr>
                        <td>
                            <span {% if answer.proposed %}class="proposed-answer" data-aid="{{answer.pk}}" data-question-type="shorts"
                                  {% endif %}>
                                {{ answer }}
                            </span>
                            <td>
                                <td>{{answer.status}}</td>
                            </tr>
                {% endfor %}
            </table>
        </details>
    </p> {% endcomment %}
</div>
<div>

    {% if view_feedback %}
        {% include 'question_notes.html' %}
    {% endif %}
</div>

<script>
    $(document).ready(function () {
        $("#edit-button").click(() => {
            $(".toggle-button").toggle();
        });

        $(".toggle-button").hide();

        // send request to change the is_private state on customSwitches toggle
        $("#save-annotations").click(function () {
            let el = $(".cornerstone-element").get(0);

            let c = cornerstone.getEnabledElement(el);

            let toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;

            //let image_id = c.image.imageId;

            let toolstate = toolStateManager.saveToolState();

            let images = JSON.parse(document.getElementById("single-dicom-viewer").dataset.images);

            let json_toolstates = [];
            for (const image of images) {
                if (image in toolstate) {
                    json_toolstates.push(JSON.stringify(toolstate[image]));
                }   else if ("wadouri:" + image in toolstate) {
                    json_toolstates.push(JSON.stringify(toolstate["wadouri:" + image]));
                }
            }
            console.log("json_toolstates", json_toolstates)

            $.ajax({
                url: "{% url 'shorts:question_save_annotation' pk=question.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    // Yes we do double encode the json....
                    annotation: JSON.stringify(json_toolstates),
                },
                type: "POST",
                dataType: "json",
                error: function (e) {
                    toastr.warning(`Error saving annotations`)
                    console.log(e);
                },

            })
            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);
                // show some message according to the response.
                // For eg. A message box showing that the status has been changed
                    if (data.status == "success") {
                        toastr.info('Annotations saved')
                    } else {
                        toastr.warning('Error saving annotations')
                    }
                })
                .always(function () {
                    console.log('[Done]');
                })
        })

{% comment %}         $("#cancel-add-to-exam").click(function (evt) {
            $("#add-to-exam").toggle();
            $("#cancel-add-to-exam").toggle();
            $("#exam-options").empty();
        })

        $("#add-to-exam").click(function (evt) {
            $("#add-to-exam").toggle();
            $("#cancel-add-to-exam").toggle();

            var jqxhr = $.get(evt.target.dataset.exam_list_url, function (data) {
                console.log(data);
                $("#exam-options").empty();
                data.forEach((obj, n) => {
                    $("#exam-options").append($(document.createElement('button')).prop({
                        type: 'button',
                        innerHTML: obj.name,
                        class: '',

                    }).data("exam-id", obj.id).click((evt) => {
                        addToExam(evt)
                    }))
                })
            })
                .done(function () {
                //alert( "second success" );
            })
                .fail(function () {
                //alert( "error" );
            })
                .always(function () {
                //alert( "finished" );
            });

            return;


            function addToExam(evt) {

                let exam_button = document.getElementById("add-to-exam");
                let ids = [];
                ids.push(exam_button.dataset.qid);

                // if no question selected
                if (ids.length < 1) {
                    toastr.info('No question selected.');
                    return
                }
                let post_url = exam_button.dataset.exam_json_edit_url;
                let type = exam_button.dataset.type;
                let csrf = exam_button.dataset.csrf;
                $.ajax({
                    url: post_url,
                    data: {
                        csrfmiddlewaretoken: csrf,
                        add_exam_questions: JSON.stringify(ids),
                        type: type,
                        exam_id: $(evt.target).data("exam-id"),
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Questions added to exams.')
                    }
                })
                    .always(function () {
                    console.log('[Done]');
                    $("#exam-options").empty();
                })
            }
        });

        //var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
        /* beautify ignore:start */
        n = !{{ question.normal | lower }}
        /* beautify ignore:end */

        $("#toggle-normal-button").click(function () {
            $.ajax({
                url: "{% url 'shorts-detail' question.id %}",
                type: 'PATCH',
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                timeout: 3000,
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    normal: n,
                }
            })
                .done(function (data) {
                console.log(data);
                toastr.info('Answer updated')
            })
                .fail(function () {
                alert('Error updating this model instance.');
            });
        });

        $(".toggle-laterality-button").each((n, el) => {
            $(el).click(function () {
                $.ajax({
                    url: "{% url 'shorts-detail' question.id %}",
                    type: 'PATCH',
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}"
                    },
                    timeout: 3000,
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        laterality: el.dataset.lat,
                    }
                })
                    .done(function (data) {
                    console.log(data);
                    toastr.info('Answer updated')
                })
                    .fail(function () {
                    alert('Error updating this model instance.');
                });
            });
        }); 
        {% endcomment %}

        $(".suggested_answers li").each((n, el) => {
            $(el).append($("<span class='correct'>[Add Correct]</span>").on("click", function () {
                $.ajax({
                    url: "{% url 'answer_submit' %}",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        //active: this.checked // true if checked else false
                        question_type: "shorts",
                        qid: "{{question.pk}}",
                        status: 2,
                        answer: el.dataset.string,
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                        console.log(data);

                        if (data.success) {
                            toastr.info('Answer saved')
                            $(el).find(".correct").remove()
                        }
                    // show some message according to the response.
                    // For eg. A message box showing that the status has been changed
                    })
                    .always(function () {
                        console.log('[Done]');
                    })
            }))

        });

        // send request to change the is_private state on customSwitches toggle
        $(".proposed-answer").each((n, el) => {

            // Add button to confirm answer is correct
            $(el).append($("<span class='confirm'>[Add Correct]</span>").on("click", function () {
                $.ajax({
                    url: "{% url 'answer_suggestion_confirm' %}",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        //active: this.checked // true if checked else false
                        question_type: "shorts",
                        aid: el.dataset.aid,
                        status: 2,
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                        console.log(data);

                        if (data.success) {
                            toastr.info('Answer saved')
                            $(el).find(".confirm").remove()
                            $(el).removeClass("proposed-answer")
                        }
                    // show some message according to the response.
                    // For eg. A message box showing that the status has been changed
                    })
                    .always(function () {
                        console.log('[Done]');
                    })
            }))

            // Add button to confirm answer is incorrect
            $(el).append($("<span class='confirm'>[Incorrect]</span>").on("click", function () {
                $.ajax({
                    url: "{% url 'answer_suggestion_confirm' %}",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        //active: this.checked // true if checked else false
                        question_type: "shorts",
                        aid: el.dataset.aid,
                        status: 0,
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                        console.log(data);

                        if (data.success) {
                            toastr.info('Answer saved')
                            $(el).find(".confirm").remove()
                            $(el).removeClass("proposed-answer")
                        }
                    // show some message according to the response.
                    // For eg. A message box showing that the status has been changed
                    })
                    .always(function () {
                        console.log('[Done]');
                    })
            }))
        });
    });
</script>
<style>
    .toggle-button {
        font-size: x-small;
        opacity: 30%;
    }

    .toggle-button:hover {
        font-size: x-small;
        opacity: 100%;
    }

    #cancel-add-to-exam {
        border-style: dashed;
    }
    #cancel-add-to-exam:hover {
        background-color: purple;
    }
</style>