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



{% block content %}
    {% include 'atlas/partials/_viewing_case_as_part_of_collection.html' with nav_link_view="atlas:collection_case_displaysetup" %}
    <h2>Setup default display for case</h2>

    <div id="root" class="dicom-viewer-root viewer-frame-setup" data-images="{{casedetail.case.get_series_images_nested}}"
         data-auto-cache-stack="true"
         {% if casedetail.default_viewerstate %}
             data-viewerstate={{ casedetail.default_viewerstate }}
         {% endif %}

    ></div>

    <button id="save-viewerstate" type="button" class="btn btn-primary mt-3">
        Save Viewer State
    </button>
    <button id="reset-viewerstate" type="button" class="btn btn-secondary mt-3 ms-2">
        Reset to Default
    </button>
    <div id="viewerstate-save-response" class="mt-2"></div>

    <script>
        document.getElementById('save-viewerstate').addEventListener('click', function() {
            let viewerState = window.exportViewerState_root();
            if (!viewerState) {
                document.getElementById('viewerstate-save-response').innerHTML = "<span class='text-danger'>Viewer state could not be retrieved.</span>";
                return;
            }
            fetch({% if case_number %}"{% url 'atlas:collection_case_displaysetup' casedetail.collection.pk case_number %}"{% else %}"{% url 'atlas:collection_case_displaysetup_legacy' casedetail.collection.pk casedetail.case.pk %}"{% endif %}, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                body: JSON.stringify({viewerstate: viewerState})
            })
                .then(response => response.text())
                .then(html => {
                    document.getElementById('viewerstate-save-response').innerHTML = html;
                })
                .catch(error => {
                    document.getElementById('viewerstate-save-response').innerHTML = "<span class='text-danger'>Error saving viewer state.</span>";
                });
        });
        document.getElementById('reset-viewerstate').addEventListener('click', function() {
            fetch({% if case_number %}"{% url 'atlas:collection_case_displaysetup' casedetail.collection.pk case_number %}"{% else %}"{% url 'atlas:collection_case_displaysetup_legacy' casedetail.collection.pk casedetail.case.pk %}"{% endif %}, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRFToken": "{{ csrf_token }}"
                },
                body: JSON.stringify({reset_viewerstate: true})
            })
                .then(response => response.text())
                .then(html => {
                    document.getElementById('viewerstate-save-response').innerHTML = html;
        // Optionally reload the page or viewer here if needed
                })
                .catch(error => {
                    document.getElementById('viewerstate-save-response').innerHTML = "<span class='text-danger'>Error resetting viewer state.</span>";
                });
        });
    </script>

{% endblock %}