{% extends "atlas/exams.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
    <h2>Update Cases for Case: {{ object.title }}</h2>
    This form allows you to update the cases associated with this collection. You can add, remove, or reorder cases as needed. This functionality is also available on the collection overview page (which is likely easier to use).
    <form method="post" enctype="multipart/form-data"  data-bs-theme="dark">
        {% csrf_token %}
        {% crispy form form.helper %}
        {{ case_formset.management_form }}
        <div id="case_formset">
            {% for form in case_formset %}
                <div class="card mb-3 case-form">
                    <div class="card-body">
                        {{ form.non_field_errors }}
                        {{ form.errors }}
                        {{ form|crispy }}
                        {% if form.can_delete %}
                            <div class="form-check mt-2">
                                {{ form.DELETE }} <label for="{{ form.DELETE.id_for_label }}">Delete</label>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        <!-- Empty form template for JS -->
        <div id="empty-form" style="display:none;">
            <div class="card mb-3 case-form">
                <div class="card-body">
                    {{ case_formset.empty_form|crispy }}
                    {% if case_formset.empty_form.can_delete %}
                        <div class="form-check mt-2">
                            {{ case_formset.empty_form.DELETE }} <label for="{{ case_formset.empty_form.DELETE.id_for_label }}">Delete</label>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <button type="button" id="add-case" class="btn btn-secondary mt-2">Add Case</button>
        <button type="submit" class="btn btn-primary">Save</button>
        {% comment %} <input type=button id="case-order-button" title="click and drag to update case order" value="Update case order" /> {% endcomment %}
    </form>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const addBtn = document.getElementById("add-case");
            const formsetDiv = document.getElementById("case_formset");
            const emptyFormDiv = document.getElementById("empty-form");
            let totalForms = document.getElementById("id_casedetail_set-TOTAL_FORMS");

            addBtn.addEventListener("click", function() {
                let formIdx = parseInt(totalForms.value);
                let newFormHtml = emptyFormDiv.innerHTML.replace(/__prefix__/g, formIdx);
                let tempDiv = document.createElement('div');
                tempDiv.innerHTML = newFormHtml;
    // Clear the id field value for the new form
                let idInput = tempDiv.querySelector('input[name$="-id"]');
                if (idInput) {
                    idInput.value = "";
                }
                formsetDiv.appendChild(tempDiv.firstElementChild);
                totalForms.value = formIdx + 1;
            });

    document.getElementById("case-order-button").addEventListener("click", function(e) {
        const cases = document.querySelectorAll("#case_formset ul");
        cases.forEach((el, n) => {
            const inputEl = el.querySelector("input[name$='sort_order']");
            if (inputEl) {
                inputEl.value = n + 1;
            }
        });
        e.preventDefault();
    });

        });
    </script>
{% endblock %}