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



{% block content %}
<h2>Setup default display for case</h2>

    <div id="root" class="dicom-viewer-root" data-images="{{case_detail.case.get_series_images_nested}}"
        style="box-sizing: border-box; background: #222; width: 100vw; height: 800px; max-width: 1600px;"
        data-auto-cache-stack="true" 
        {% if case_detail.default_viewerstate %}
           data-viewerstate={{ case_detail.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("{% url 'atlas:collection_case_displaysetup' case_detail.collection.pk case_detail.case.pk %}", {
        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("{% url 'atlas:collection_case_displaysetup' case_detail.collection.pk case_detail.case.pk %}", {
        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 %}