{% extends 'microsys/form_base.html' %}
{% load crispy_forms_tags %}
{% load django_tables2 %}
{% load static %}

{% block extra_head %}
    {% include "microsys/forms/filter_assets_head.html" %}
    {{ block.super }}
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-12">
            <h2 class="page-title"><i class="bi bi-diagram-3 me-2"></i> {{ MS_TRANS.manage_label }} {% if active_model %} {{ ar_names }} {% endif %}</h2>
        </div>
    </div>

    {# Tab Navigation for Section Models #}
    {% if models %}
    <ul class="nav nav-tabs border-0" id="sectionTabs" role="tablist">
        {% for model in models %}
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if model.name == active_model %}active{% endif %}" 
               href="?model={{ model.name }}"
               role="tab">
                {{ model.ar_names }} {% if model.name == active_model %}{{ model.count }}{% endif %}
            </a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}

    {# Error Display #}
    {% if error %}
    <div class="alert alert-danger" role="alert">
        {{ error }}
    </div>
    {% endif %}

    {# Form Card #}
    {% if form %}
    <div class="card border-0 shadow-sm mb-5 no-print">
        <!-- <div class="card-header text-center">
            <h4 class="me-5">
                {% if form.instance.id %}
                    {{ MS_TRANS.edit_label }} {{ form.instance.name }}
                {% else %}
                    {{ MS_TRANS.add_label }} {{ ar_name }}
                {% endif %}
            </h4>
        </div> -->
        <div class="card-body mt-2">
            <form method="post" novalidate class="microsys-form">
                {% csrf_token %}
                {% crispy form %}
                {% if subsection_selects %}
                    {% for sub in subsection_selects %}
                        {% include 'microsys/sections/subsection_select.html' with field=sub.field locked_ids=sub.locked_ids parent_model=sub.parent_model parent_id=sub.parent_id parent_field=sub.parent_field child_model=sub.child_model add_url=sub.add_url edit_url_template=sub.edit_url_template delete_url_template=sub.delete_url_template %}
                    {% endfor %}
                {% endif %}
                {% if not hide_form_buttons %}
                    {% if show_cancel and cancel_url %}
                    <div class="microsys-form-actions mt-3">
                        <button type="submit" class="microsys-form-action microsys-form-action-primary" aria-label="{{ MS_TRANS.save }}" title="{{ MS_TRANS.save }}">
                            <span class="microsys-form-action-icon"><i class="bi bi-check-lg" aria-hidden="true"></i></span>
                            <span class="visually-hidden">{{ MS_TRANS.save }}</span>
                        </button>
                        <a href="{{ cancel_url }}" class="microsys-form-action microsys-form-action-neutral" aria-label="{{ MS_TRANS.cancel }}" title="{{ MS_TRANS.cancel }}">
                            <span class="microsys-form-action-icon"><i class="bi bi-x-lg" aria-hidden="true"></i></span>
                            <span class="visually-hidden">{{ MS_TRANS.cancel }}</span>
                        </a>
                    </div>
                    {% else %}
                    <div class="microsys-form-actions mt-3">
                        <button type="submit" class="microsys-form-action microsys-form-action-primary" aria-label="{{ MS_TRANS.save }}" title="{{ MS_TRANS.save }}">
                            <span class="microsys-form-action-icon"><i class="bi bi-check-lg" aria-hidden="true"></i></span>
                            <span class="visually-hidden">{{ MS_TRANS.save }}</span>
                        </button>
                    </div>
                    {% endif %}
                {% endif %}
            </form>
        </div>
    </div>
    {% endif %}

    <div class="row">
        <div class="col-12">
            <h2 class="page-title"><i class="bi bi-text-paragraph me-2"></i> {{ MS_TRANS.list_label }} {% if active_model %} {{ ar_names }} {% endif %}</h2>
        </div>
    </div>

    {# Table Card #}
    {% if table %}
    <div class="card border-0 shadow-sm pt-2">
        <!-- <div class="card-header text-center">
            <h4 class="me-5">{{ MS_TRANS.list_label }} {{ ar_names }}</h4>
        </div> -->
        <div class="card-body mt-2">
            {% if filter %}
            <div class="py-2 no-print">
                {% crispy filter.form %}
            </div>
            {% endif %}
            <div class="table-responsive">
                {% render_table table %}
            </div>
        </div>
    </div>
    {% elif not error %}
        <h3 class="mt-4">{{ MS_TRANS.error_generic }}</h3>
    {% endif %}

    {# Dynamic Subsection Modals #}
    {% for subsection in subsection_forms %}
    <div class="modal fade" id="addSubsectionModal_{{ subsection.name }}" tabindex="-1" aria-labelledby="addSubsectionModalLabel_{{ subsection.name }}" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content glass-card border-0">
          <div class="modal-header border-0">
            <h5 class="modal-title" id="addSubsectionModalLabel_{{ subsection.name }}"><i class="bi bi-plus-circle me-2"></i>{{ MS_TRANS.add_label }} {{ subsection.verbose_name }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body microsys-form">
            {% crispy subsection.form %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}

    {# Hidden form for deleting subsections #}
    <form id="deleteSubsectionForm" method="post" action="" style="display: none;">
        {% csrf_token %}
    </form>

    {# View Subsections Modal #}
    {% if has_subsections %}
    <div class="modal fade" id="viewSubsectionsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content glass-card border-0">
                <div class="modal-header border-0">
                    <h5 class="modal-title"><i class="bi bi-list-task me-2"></i>{{ MS_TRANS.subsections }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="viewSubsectionsModalBody">
                    <div class="text-center py-3">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{{ MS_TRANS.loading }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Hidden delete form for sections #}
    <form id="deleteSectionForm" method="post" action="" style="display: none;">
        {% csrf_token %}
    </form>

    {# Section data for JS #}
    <script type="application/json" id="sectionData">
    {
        "model": "{{ active_model }}",
        "editUrlTemplate": "{% url 'manage_sections' %}?model={{ active_model }}&id={id}",
        "deleteUrl": "{% url 'delete_section' %}",
        "detailsUrl": "{% url 'get_section_details' %}",
        "hasSubsections": {% if has_subsections %}true{% else %}false{% endif %},
        "csrf": "{{ csrf_token }}"
    }
    </script>

{% endblock %}

{% block scripts %}
    {% if id_type %}
    <script nonce="{{ request.csp_nonce }}">
        document.getElementById('id_type').addEventListener('change', function() {
            var type = this.options[this.selectedIndex].text;  // Get the selected Arabic text
            var nameField = document.getElementById('id_name');
            nameField.value = type + ' ';  // Set the name field to the title followed by a space
            nameField.focus();  // Move the focus to the name field
            nameField.setSelectionRange(nameField.value.length, nameField.value.length);  // Place cursor at the end
        });
    </script>
    {% endif %}

    {% if id_subtype %}
    <script nonce="{{ request.csp_nonce }}">
        document.getElementById('id_subtype').addEventListener('change', function() {
            var type = this.options[this.selectedIndex].text;  // Get the selected Arabic text
            var nameField = document.getElementById('id_subname');
            nameField.value = type + ' ';  // Set the name field to the title followed by a space
            nameField.focus();  // Move the focus to the name field
            nameField.setSelectionRange(nameField.value.length, nameField.value.length);  // Place cursor at the end
        });
    </script>
    {% endif %}

    <script nonce="{{ request.csp_nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof window.initMicrosysDatepickers === 'function') {
                window.initMicrosysDatepickers(document);
            }
        });
    </script>

    {# Section Manager (Smart Delete / View) #}
    <script src="{% static 'microsys/helpers/context_menu/js/section_manager.js' %}"></script>

{% endblock %}