{% extends "atlas/base.html" %}
<!-- {% load static from static %} -->

{% load crispy_forms_tags %}
{% block css %}
{% endblock %}
{% block js %}
    <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
    {{form.media}}

    <script type="text/javascript">
        function showEditPopup(url) {
            var win = window.open(url, "Edit",
                'height=500,width=800,resizable=yes,scrollbars=yes');
            return false;
        }
        function showAddPopup(triggeringLink) {
            var name = triggeringLink.id.replace(/^add_/, '');
            href = triggeringLink.href;
            var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
            win.focus();
            return false;
        }
        function closePopup(win, newID, newRepr, id) {
            console.log(id)
            $(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
            win.close();
        }


        function add_series_input_form() {
            var form_idx = $('#id_Case_series-TOTAL_FORMS').val();
            $('#series_formset ol').append($('#empty_series_form').html().replace(/__prefix__/g, form_idx));
            $('#id_Case_series-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        }

        function add_differential_input_form() {
            var form_idx = $('#id_differentialcase-TOTAL_FORMS').val();
            $('#casedifferential_formset ol').append($('#empty_casedifferential_form').html().replace(/__prefix__/g, form_idx));
            $('#id_differentialcase-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        }
        function add_resource_input_form() {
            var form_idx = $('#id_resourcecase-TOTAL_FORMS').val();
            $('#caseresource_formset ol').append($('#empty_caseresource_form').html().replace(/__prefix__/g, form_idx));
            $('#id_resourcecase-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        }

        $(document).ready(function () {
            $('#add_more_series').click(() => { add_series_input_form() });
            $('#add_more_differential').click(() => { add_differential_input_form() });
            $('#add_more_resource').click(() => { add_resource_input_form() });
        })

{% comment %} document.addEventListener("DOMContentLoaded", function () {
    // Select all text input fields and textareas
    const textFields = document.querySelectorAll("input[type='text'], textarea");

    textFields.forEach((field) => {
        // Create a clear button for each text field or textarea
        const clearButton = document.createElement("button");
        clearButton.type = "button";
        clearButton.className = "btn btn-danger btn-sm clear-input-button";
        clearButton.textContent = "×";

        // Wrap the input field or textarea in a container with position-relative
        const wrapper = document.createElement("div");
        wrapper.className = "position-relative";
        field.parentNode.insertBefore(wrapper, field);
        wrapper.appendChild(field);
        wrapper.appendChild(clearButton);

        // Function to toggle the visibility of the clear button
        const toggleClearButton = () => {
            if (field.value.trim() !== "") {
                clearButton.classList.add("show"); // Add the "show" class
            } else {
                clearButton.classList.remove("show"); // Remove the "show" class
            }
        };

        // Initial check
        toggleClearButton();

        // Add event listeners to monitor changes in the input field or textarea
        field.addEventListener("input", toggleClearButton);

        // Add click event to clear the field or textarea
        clearButton.addEventListener("click", function () {
            field.value = ""; // Clear the field
            toggleClearButton(); // Update the button visibility
        });
    });
});
 {% endcomment %}
    </script>
{% comment %} <style>
/* Ensure the parent container is positioned relatively */
.position-relative {
    position: relative;
}

/* Style the clear button */
.clear-input-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hidden by default */
    z-index: 1;
}

/* Show the clear button only when the input field or textarea is hovered and contains text */
.position-relative:hover .clear-input-button.show {
    display: inline-block;
}

</style> {% endcomment %}
    <!-- {{ form.media }} -->
{% endblock %}
{% block content %}
    {% if object %}
        {% include "atlas/question_link_header.html" %}
    {% endif %}



    <h2>Submit Case</h2>
    <details>
        <summary>Instructions</summary>
        <p>Use this form to create a atlas case</p>
        <p>Existing associated image sets can be added using this form.</p>
        <p>The more information you provide, the more useful the case will be to others.</p>
    </details>

    {% if form.collection %}
        <div class="alert alert-info" role="alert">Creating a case in the collection: <a href="{% url 'atlas:collection_detail' pk=form.collection.pk %}">{{form.collection.name}}</a></div>
    {% endif %}

    <form class="highlight" action="" method="post" enctype="multipart/form-data" id="atlas-form">
        {% crispy form form.helper %}

        {% comment %} {% crispy series_formset %} {% endcomment %}

        {% comment %} {{ form }} {% endcomment %}



<!-- Differential Collapsible Panel -->
        <div class="card my-3 bg-dark text-white">
            <div class="card-header">
                <a class="collapsed text-white" data-bs-toggle="collapse" href="#differentialPanel" role="button" aria-expanded="false" aria-controls="differentialPanel">
                    <h3 class="d-inline">Differential</h3>
                    <span class="ms-2">(click to expand/collapse)</span>
                </a>
            </div>
            <div class="collapse" id="differentialPanel">
                <input type="button" value="Add Another Differential" id="add_more_differential" class="btn btn-sm btn-primary float-end">
                <div class="card-body">
                    <div id="casedifferential_formset" class="list_formset">
                        <ol>
                            {% for form in casedifferential_formset %}
                                <li class="no-error casedifferential_formset">
                                    {{form.non_field_errors}}
                                    {{form.errors}}
                                    {{ form  | crispy}}
                                </li>
                            {% endfor %}
                        </ol>
                    </div>
                    {{ casedifferential_formset.management_form | crispy }}
                </div>
            </div>
        </div>

<!-- Resource Collapsible Panel -->
        <div class="card my-3 bg-dark text-white">
            <div class="card-header">
                <a class="collapsed text-white" data-bs-toggle="collapse" href="#resourcePanel" role="button" aria-expanded="false" aria-controls="resourcePanel">
                    <h3 class="d-inline">Resource</h3>
                    <span class="ms-2">(click to expand/collapse)</span>
                </a>
            </div>
            <div class="collapse" id="resourcePanel">
                <input type="button" value="Add Another Resource" id="add_more_resource" class="btn btn-sm btn-primary float-end">
                <div class="card-body">
                    <div id="caseresource_formset" class="list_formset">
                        <ol>
                            {% for form in caseresource_formset %}
                                <li class="no-error caseresource_formset">
                                    {{form.non_field_errors}}
                                    {{form.errors}}
                                    {{ form  | crispy}}
                                </li>
                            {% endfor %}
                        </ol>
                    </div>
                    {{ caseresource_formset.management_form  | crispy}}
                </div>
            </div>
        </div>
        <br/>
        <input type="submit" class="submit-button" value="Submit" name="submit">
    </form>
    <div id="empty_series_form" style="display:none">
        <li class='no_error series-formset'>
            {{ series_formset.empty_form  | crispy}}
        </li>
    </div>
    <div id="empty_casedifferential_form" style="display:none">
        <li class='no_error casedifferential_formset'>
            {{ casedifferential_formset.empty_form  | crispy}}
        </li>
    </div>
    <div id="empty_caseresource_form" style="display:none">
        <li class='no_error caseresource_formset'>
            {{ caseresource_formset.empty_form  | crispy}}
        </li>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            if(window.markupInserter && typeof markupInserter.initForNames === 'function'){
                markupInserter.initForNames(['description','history','discussion','report','notes']);
            }
        });
    </script>
{% endblock %}