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

{% 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" 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-light 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>
                {% 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 form_has_submit %}
                    {% if show_cancel and cancel_url %}
                    <div class="d-flex mt-3">
                        <button type="submit" class="btn btn-primary rounded-start-pill rounded-end-0">{{ MS_TRANS.save }}</button>
                        <a href="{{ cancel_url }}" class="btn btn-outline-warning rounded-end-pill rounded-start-0">{{ MS_TRANS.cancel }}</a>
                    </div>
                    {% else %}
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary rounded-pill">{{ MS_TRANS.save }}</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-light 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="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">
          <div class="modal-header">
            <h5 class="modal-title" id="addSubsectionModalLabel_{{ subsection.name }}">{{ 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">
            {% 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">
                <div class="modal-header">
                    <h5 class="modal-title">{{ 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 %}
    <link rel="stylesheet" href="{% static 'flatpickr/flatpickr.min.css' %}">

    <script src="{% static 'flatpickr/flatpickr.min.js' %}"></script>
    <script src="{% static 'flatpickr/locale/ar.js' %}"></script>

    {% 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() {
            // Initialize flatpickr date pickers for filter inputs
            flatpickr('.flatpickr', {
                locale: 'ar',
                dateFormat: 'Y-m-d',
                allowInput: true,
            });
        });
    </script>

    {# Context Menu #}
    {% include 'microsys/includes/micro_context_menu.html' %}
    
    {# Section Manager (Smart Delete / View) #}
    <script src="{% static 'microsys/context_menu/js/section_manager.js' %}"></script>

{% endblock %}