{% load crispy_forms_tags %}

<div>{{ series.modality}}, {{ series.examination }}, {{ series.plane }}, {{ series.contrast }}</div>
<div>Description: {{series.description}}</div>

Associated case:
{% for case in series.case.all %}
    <span id="case-link-{{ case.pk }}" class="case-item">
        <a href="{% url 'atlas:case_detail' pk=case.pk %}">{{case}}</a>
        {% if can_edit %}
            <button hx-post="{% url 'atlas:remove_series_from_case' series.pk case.pk %}"
                    hx-target="#case-link-{{ case.pk }}"
                    hx-swap="outerHTML"
                    hx-confirm="Are you sure you want to remove this series from the case?"
                    class="btn btn-link btn-sm button-unset remove-button">
                Remove
            </button>
        {% endif %}
    </span>
{% empty %}
    This series is not associated with any cases.
    {% if can_edit %}
        <details>
            <summary>Add Series to Case</summary>
            <form hx-post="{% url 'atlas:add_series_to_case' series.pk %}"
                  hx-target="#add-series-to-case-result"
                  hx-swap="innerHTML">
                {% csrf_token %}
                <label for="case-select">Select Case:</label>
                <select name="case_id" id="case-select" required>
                    {% for case in available_cases %}
                        <option value="{{ case.pk }}">{{ case.title }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-primary">Add to Case</button>
            </form>
            <div id="add-series-to-case-result"></div>
        </details>
    {% endif %}
{% endfor %}
<div>Author: {{ series.get_author_display }}</div>

{% with image_url_array_and_count=series.get_image_url_array_and_count %}
{% comment %}     <div id="single-dicom-viewer" class="dicom-viewer" data-images="{{ image_url_array_and_count.0 }}" data-annotations=''>
    </div> {% endcomment %}

    <div id="root" class="dicom-viewer-root" data-images="{{ image_url_array_and_count.0 }}"
         style="max-width: 1000px; height: 600px; box-sizing: border-box; background: #222;"
         data-auto-cache-stack=false
    ></div>


    {% if can_edit %}
        {% if editing_finding < 1 %}
            <button id="add-finding-button">Add finding</button>
            <button id="clone-finding-button" title="Click to copy the details of a finding that is already associated with the series/case"
                    hx-get="{% url 'atlas:series_finding_related' series.pk %}"
                    hx-target="#clone-findings-modal"
                    hx-trigger="click"
                    data-bs-toggle="modal"
                    data-bs-target="#clone-findings-modal"
            >Clone existing finding</button>
        {% endif %}
        <button id="reset-viewport-button" class="btn btn-secondary">Reset viewport</button>
        <div id="finding-form">
            <div class="hide" id="hidden-form">
                {% if editing_finding > 0 %}
                    <h3>Editing Finding</h3>
                    <p>Editing finding with ID: {{editing_finding}}</p>
                {% else %}
                    <h3>Add Finding</h3>
                    <p>Click the button below to add a new finding.</p>
                {% endif %}
                <form method="post" id="series_finding_form">
                    {% csrf_token %}
                    {{series_finding_form|crispy}}
                    <input type="submit" value="Submit" class="btn btn-lg btn-success fw-bold px-4 py-2" style="font-size: 1.2rem;">
                    <button id="cancel-add-finding-button">Cancel</button>
                </form>
            </div>
        </div>
    {% else %}
        <button id="reset-viewport-button">Reset viewport</button>
    {% endif %}

    <details class="styled-detail open">
        <summary>Findings</summary>

        {% for finding in series.findings.all %}
            <div class="finding-box">
                <button id="finding-{{finding.pk}}-3d" class="view-finding-button-3d" data-annotationjson3d='{{finding.annotation_json_3d}}' data-viewerstatejson='{{finding.viewer_state_3d}}' data-findingid='{{finding.pk}}'>Click to view</button>

                <span class="view-finding-details">
                    Finding(s): {% for f in finding.findings.all %}{{f.get_link}}{% endfor %}<br />
                    Structure(s): {% for s in finding.structures.all %}{{s.get_link}}{% endfor %}<br />
                    Condition(s): {% for s in finding.conditions.all %}{{s.get_link}}{% endfor %}<br />
                    Description: {{finding.description}}<br />

                    {% if request.user.is_superuser %}
                        <span _="on click toggle .hidden on next .extra-details">+</span>
                        <div class="hidden extra-details">
                            <h4>Annotation JSON</h4>
                    <pre>{{finding.annotation_json}}</pre>
                            <h4>Viewport JSON</h4>
                    <pre>{{finding.viewport_json}}</pre>
                            <h4>Image ID</h4>
                    <pre>{{finding.current_image_id_index}}</pre>

                            <h4>3D Annotation JSON</h4>
                    <pre>{{finding.annotation_json_3d}}</pre>
                            <h4>Viewer State</h4>
                    <pre>{{finding.viewer_state_3d}}</pre>
                        </div>
                    {% endif %}
                </span>
                {% if can_edit %}
                    <a href="{% url 'atlas:series_edit_finding' pk=series.pk finding_pk=finding.pk %}" class="edit-finding-link">Edit</a>
                    <a href="{% url 'atlas:delete_finding' pk=finding.pk %}" class="delete-finding-link">Delete</a>
                {% endif %}
            </div>
        {% empty %}
            <p>No findings available.</p>
        {% endfor %}
    </details>

    {% if can_edit %}
        <details class="styled-detail">
            <summary>Truncate series</summary>
            <p>
                This will limit the series to the selected bounds (the rest of the images will be deleted). This is useful when you have a large volume of which only a small area is relevant to the case. NOTE: once deleted the images cannot be recovered on the site (they would have to be reuploaded if required). Make sure your images are shown in the correct order above and use test the test truncate button first.
            </p>
            <div role="alert" class="alert alert-warning">
                <strong>Warning:</strong> Please note: if you have reordered the series this may result in the incorrect images being deleted.
            </div>

            Start <input id="lower-truncation-bound-input" type="number" value="1"> <button id="set-lower-truncation-bound-button">Set</button><br/>
            End <input  id="upper-truncation-bound-input"type="number" value="{{image_url_array_and_count.1}}"> <button id="set-upper-truncation-bound-button">Set</button><br/>
            <button id="truncate-test-button">Test truncate</button>
            <button id="truncate-button">Trucate series</button>
            <div id="truncate-output"></div>

        </details>
    {% endif %}
{% endwith %}



{% if can_edit %}
    <details class="styled-detail">
        <summary>Series info</summary>
        <div class="d-flex flex-wrap gap-2 mb-2">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_anonymise_dicom' pk=series.pk %}'" title="Anonymise dicom images">
                Anonymise dicoms
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom' pk=series.pk %}'" title="orders dicom by slice location">
                Order by slice location
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_instance' pk=series.pk %}'" title="orders dicom by instance number">
                Order by instance number
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_dicom_SeriesInstanceUID' pk=series.pk %}'" title="orders dicom by SeriesInstanceUID">
                Order by SeriesInstanceUID
            </button>
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="window.location.href='{% url 'atlas:series_order_upload_filename' pk=series.pk %}'" title="orders dicom by uploaded filename">
                Order by uploaded filename
            </button>
            <button type="button" class="btn btn-outline-warning btn-sm" onclick="window.location.href='{% url 'api-1:series_split_by_tag' series.pk 'ImageType' %}'" title="split series by dicom tag ImageType">
                Split by ImageType tag
            </button>
        </div>
        <details>
            <summary>
                Image details
            </summary>
            <form  hx-post="{% url 'atlas:image_diff' %}"
                  hx-target="#temp"
            >
                {% for image in series.get_images %}
                    [{{  image.id  }}] <a href='{% url "atlas:series_image_dicom" image.pk %}'>{{image.image.url}}</a>, pos: {{image.position}}, {{image.upload_filename}}
                    {% if image.image %}
                        [{{image.get_file_size|filesizeformat}}]
                    {% endif %}
                    {{image.image_md5_hash}} ({{image.is_dicom}}) {{image.image_blake3_hash}}
                    <input type="checkbox" name="image-id" value="{{image.id}}">
                    <br />
                {% endfor %}
                <button>Diff files</button>
            </form>
            <span id="temp"></span>

            <span id="diff-controls">show <span id="diff-show-all" _="on click
                                                                      log '1'
                                                                      for row in .diff.rows
                                                                      show row
                                                                      end">all</span> <span id="diff-show-diff" _="
                                                             on click
                                                             log 'go'
                                                             for row in <.diff tr/>
                                                             log row.children[0].innerHTML
                                                             if row.children[0].innerHTML is empty
                                                             hide row
                                                             end
                                                             end
                                                            ">diff</span></span>

        </details>

        <p>Total image size: {{series.get_total_image_size|filesizeformat}}</p>
        <p>
            <button type="button" class="btn btn-outline-success btn-sm" onclick="window.location.href='{% url 'atlas:series_download' pk=series.pk %}'">
                Download images
            </button>
        </p>
    </details>
{% endif %}


<div id="clone-findings-modal"
     class="modal modal-blur fade"
     style="display: none"
     aria-hidden="false"
     tabindex="-1">
    <div class="modal-dialog modal-dialog-centered related-finding-modal" style="max-width: 700px;">
        <div class="modal-content"></div>
    </div>
</div>


<script>
    $(document).ready(function () {
        const apiKey = "root"

        $("#set-lower-truncation-bound-button").click(() => {
            $("#lower-truncation-bound-input").val(getCurrentStackPosition_root(0) + 1);
        });
        $("#set-upper-truncation-bound-button").click(() => {
            $("#upper-truncation-bound-input").val(getCurrentStackPosition_root(0) + 1);
        });
        $("#truncate-test-button").click(() => {
            const lower = parseInt($("#lower-truncation-bound-input").val()) - 1;
            const upper = parseInt($("#upper-truncation-bound-input").val()) - 1;
            const ok = window[`truncateStack_${apiKey}`](lower, upper);
            if (ok) {
                $("#truncate-output").text("The truncated images are shown above.");
            }
        });
        $("#truncate-button").click(() => {
            lower_bound = parseInt($("#lower-truncation-bound-input").val()) - 1;
            upper_bound = parseInt($("#upper-truncation-bound-input").val()) - 1;

            if (lower_bound >= upper_bound) {
                alert("The lower bound must be less than the upper bound.");
                return;
            }

            if(confirm(`Trucated series. This will leave ${upper_bound - lower_bound + 1} images.`) == true) {
                htmx.ajax("GET", `{% url 'api-1:series_truncate' series.id '****' '++++' %}`.replace("****", lower_bound).replace("++++", upper_bound), "#truncate-output")

            }


        })

        $("#add-finding-button").click(() => {
            $("#hidden-form").show()
            //dicom_element = $(".cornerstone-element").get(0);
            //cornerstoneTools.globalImageIdSpecificToolStateManager.clear(dicom_element);
            //cornerstone.reset(dicom_element);
            ////cornerstone.resize(dicom_element, true);
            $("#add-finding-button").hide()
            $("#clone-finding-button").hide()
            //$("#finding-form").empty().append(
            //    $("#hidden-form form").clone()
            //);

        });
        $("#cancel-add-finding-button").click((e) => {
            $("#hidden-form").hide()
            $("#add-finding-button").show()
            $("#clone-finding-button").show()
            e.preventDefault();
        });


        $("#reset-viewport-button").click(() => {
            resetViewer_root();

        });
        $(".view-finding-button-3d").each((n, el) => {
            $(el).click((e) => {
                dicom_element = $(".cornerstone-element").get(0);
                annotationjson3d = JSON.parse(e.currentTarget.dataset.annotationjson3d);
                viewer_state_json = JSON.parse(e.currentTarget.dataset.viewerstatejson);
                console.log("Loading 3D annotation and viewer state", annotationjson3d, viewer_state_json);
                importAnnotations_root(annotationjson3d);
                importViewerState_root(viewer_state_json);
                $(el).addClass("active");
            });
        });


        {% if editing_finding > 0 %}
            $("#hidden-form").show()
            setTimeout(function() {
                $(".view-finding-button-3d[data-findingid={{editing_finding}}]").trigger("click");
            }, 1000)

        {% endif %}


        {% if request.GET.show_finding %}
            function show_finding() {
                console.log("show finding")
                $("#finding-{{ request.GET.show_finding }}").trigger("click");
            }
            setTimeout(show_finding, 500);
        {% endif %}
    });

    $(document).on('submit', '#series_finding_form', function (e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: '{% url "atlas:add_finding" %}',
            data: {
                series_finding_id: {{ editing_finding }},
                description: $('#id_description').val(),
                series: {{ series.pk }},
                annotation_json_3d: window.exportAnnotations_root(),
                viewer_state_3d: window.exportViewerState_root(),
                findings: JSON.stringify($('#finding-form select[name="findings"]').find(":selected")
                        .map((i, el) => {
                            return $(el).val()
                        }).toArray()),
                structures: JSON.stringify($('#finding-form select[name="structures"]').find(
                    ":selected")
                        .map((i, el) => {
                            return $(el).val()
                        }).toArray()),
                conditions: JSON.stringify($('#finding-form select[name="conditions"]').find(
                    ":selected")
                        .map((i, el) => {
                            return $(el).val()
                        }).toArray()),
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                action: 'post'
            },
            success: function (json) {
                $("#finding-form").empty();
                toastr.info('Finding added.');
                location.href='{{series.get_absolute_url}}';
            },
            error: function (xhr, errmsg, err) {
                console.log(xhr.status + ": " + xhr
                        .responseText); // provide a bit more info about the error to the console
            }
        });
    });
</script>

<style>
    .case-item {
        transition: background-color 0.3s ease;
    }

    .case-item:hover {
        background-color: darkgray;
    }



    .remove-button:hover {
        color: #dc3545; /* Optional: Make the remove button text red on hover */
    }

    .active {
        font-weight: bold; /* Optional: Make the active button text bold */
        border-style: dashed;
    }
    #finding-form #hidden-form {
        background: #23272b;
        border: 2px solid #198754;
        border-radius: 1rem;
        box-shadow: 0 0 16px #19875455;
        padding: 2rem;
        margin: 2rem 0;
        transition: box-shadow 0.3s;
    }
    #finding-form #hidden-form:focus-within {
        box-shadow: 0 0 24px #198754aa;
    }

    #diff-show-all {
        color: red;
        cursor: pointer;
    }
    #diff-show-diff {
        color: #0d6efd;
        cursor: pointer;
    }

    details.styled-detail {
        background: #23272b;
        border-radius: 0.7em;
        margin: 1.2em 0;
        padding: 1.2em 1.5em 1em 1.5em;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        border: 1px solid #343a40;
        transition: box-shadow 0.2s;
    }
    details.styled-detail[open] {
        box-shadow: 0 4px 24px rgba(13,110,253,0.10);
        border-color: #0d6efd;
    }
    details.styled-detail > summary {
        font-size: 1.15em;
        font-weight: 600;
        color: #0d6efd;
        cursor: pointer;
        margin: -1.2em -1.5em 1em -1.5em;
        padding: 1.2em 1.5em 0.5em 1.5em;
        border-bottom: 1px solid #343a40;
        background: linear-gradient(90deg, #23272b 80%, #0d6efd22 100%);
        border-radius: 0.7em 0.7em 0 0;
        transition: background 0.2s, font-size 0.2s;
    }

details.styled-detail:not([open]) {
    padding-bottom: 0;
    min-height: 0;
}

details.styled-detail:not([open]) > *:not(summary) {
    display: none;
}

    details.styled-detail:not([open]) > summary {
        padding: 0.7em 1.2em 0.3em 1.2em;
    }
    details.styled-detail > summary:hover {
        background: linear-gradient(90deg, #23272b 60%, #0d6efd44 100%);
        color: #198754;
    }
    details.styled-detail > div, details.styled-detail > p, details.styled-detail > form, details.styled-detail > ul {
        margin-top: 0.7em;
    }
    .alert {
        margin-top: 1em;
    }
    /* Nested details */
    details.styled-detail details {
        background: #181a1b;
        border: 1px solid #444;
        margin: 0.7em 0;
        box-shadow: none;
    }
    details.styled-detail details > summary {
        color: #ffc107;
        background: linear-gradient(90deg, #181a1b 80%, #ffc10722 100%);
        border-bottom: 1px solid #444;
    }
    details.styled-detail details > summary:hover {
        color: #0d6efd;
        background: linear-gradient(90deg, #181a1b 60%, #0d6efd22 100%);
    }
</style>