{# ========================================
   MODAL D'ÉDITION GÉNÉRIQUE
   Modal pour éditer/supprimer une ligne de datatable
   ======================================== #}

<div id="datatable-modal-{{ datatable.id }}" class="fixed inset-0 z-50 hidden items-end justify-center bg-abyss-900/70 p-4 md:items-center">
    <div class="max-h-[94vh] w-full max-w-4xl overflow-auto rounded-2xl border-4 border-abyss-900 bg-white shadow-[10px_10px_0_0_#041824]">
        {# En-tête de la modal #}
        <div class="sticky top-0 z-10 flex items-center justify-between border-b-2 border-abyss-900 bg-abyss-900 px-5 py-3">
            <h3 class="text-base font-black uppercase text-white">Édition · {{ datatable.title|default('élément') }}</h3>
            <button type="button" data-modal-close class="rounded border-2 border-white/30 px-2 py-1 text-xs font-black uppercase text-white hover:border-white">✕ Fermer</button>
        </div>

        {# Aperçu image (bateaux uniquement) #}
        {% if datatable.resource|default('') == 'bateaux' %}
            <div class="border-b-2 border-abyss-900 bg-sand-100">
                <img alt="Aperçu du bateau" data-field-image="photo_url"
                     data-fallback-src="https://images.unsplash.com/photo-1473445361085-b9a07f55608b?q=80&w=1200&auto=format&fit=crop"
                     class="h-40 w-full object-cover"
                >
            </div>
        {% endif %}

        {# Formulaire d'édition #}
        <form method="post" id="datatable-modal-form-{{ datatable.id }}" action="{{ datatable.update_url|default(datatable.base_path) }}" class="space-y-4 p-5">
            {# Définition des sections de formulaire #}
            {% set sections = {'prioritaire': 'Prioritaire', 'principales': 'Informations principales', 'identite': 'Identité', 'contact': 'Contact', 'details': 'Détails'} %}

            {# Rendu des sections avec leurs champs #}
            {% for key, title in sections %}
                {% set section_fields = datatable.modal_fields|filter(field => field.section|default('details') == key and field.type|default('text') != 'hidden') %}
                {% if section_fields is not empty %}
                    <section class="rounded-xl border-2 border-abyss-900 bg-sand-100 p-4">
                        <h4 class="mb-3 border-b-2 border-abyss-900/10 pb-2 text-xs font-black uppercase tracking-widest text-abyss-700">{{ title }}</h4>
                        <div class="grid gap-3 md:grid-cols-2">
                            {% for field in section_fields %}
                                {% set field_type = field.type|default('text') %}
                                {% set field_name = field.name %}
                                {% set required = field.required|default(false) %}
                                <div class="{{ field_type in ['textarea', 'url'] ? 'md:col-span-2' : '' }}">
                                    {# Label du champ #}
                                    <label class="mb-1 block text-xs font-black uppercase text-abyss-800">
                                        {{ field.label|default(field_name|replace({'_':' '})|title) }}{% if required %}<span class="ml-0.5 text-coral-600">*</span>{% endif %}
                                    </label>

                                    {# Rendu selon le type de champ #}
                                    {% if field_type == 'textarea' %}
                                        <textarea name="{{ field_name }}" data-field="{{ field_name }}" rows="3" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral-400"></textarea>
                                    {% elseif field_type == 'checkbox' %}
                                        <input type="hidden" name="{{ field_name }}" value="0">
                                        <label class="flex cursor-pointer items-center justify-between rounded-lg border-2 border-abyss-900 bg-white px-3 py-2.5 text-sm font-semibold hover:bg-sand-100">
                                            <span>{{ field.label|default(field_name|replace({'_':' '})|title) }}</span>
                                            <input type="checkbox" name="{{ field_name }}" value="1" data-field-checkbox="{{ field_name }}" class="h-5 w-5 accent-coral-500">
                                        </label>
                                    {% elseif field_type == 'select' %}
                                        <select name="{{ field_name }}" data-field="{{ field_name }}" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral-400" {% if required %}required{% endif %}>
                                            <option value="">Sélectionner…</option>
                                            {% for option in form_data[field_name]|default([]) %}
                                                <option value="{{ option.value }}">{{ option.label }}</option>
                                            {% endfor %}
                                        </select>
                                    {% elseif field_type == 'select_status' %}
                                        <select name="{{ field_name }}" data-field="{{ field_name }}" class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral-400" {% if required %}required{% endif %}>
                                            {% for option in datatable.status_values|default([]) %}
                                                <option value="{{ option }}">{{ {'en_attente':'En attente','confirmee':'Confirmée','annulee':'Annulée','remboursee':'Remboursée'}[option]|default(option) }}</option>
                                            {% endfor %}
                                        </select>
                                    {% else %}
                                        <input
                                            type="{{ field_type }}"
                                            name="{{ field_name }}"
                                            data-field="{{ field_name }}"
                                            {% if field.step is defined %}step="{{ field.step }}"{% endif %}
                                            {% if field.readonly|default(false) %}readonly{% endif %}
                                            class="w-full rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral-400"
                                            {% if required %}required{% endif %}
                                        >
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </section>
                {% endif %}
            {% endfor %}

            {# Champs cachés (clés primaires, etc.) #}
            {% for field in datatable.modal_fields|default([]) %}
                {% if field.type|default('text') == 'hidden' %}
                    <input type="hidden" name="{{ field.name }}" data-field="{{ field.name }}">
                {% endif %}
            {% endfor %}

            {# Boutons d'action #}
            <div class="flex flex-wrap items-center justify-between gap-3 border-t-2 border-abyss-900/10 pt-4">
                <button class="rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-2 text-xs font-black uppercase text-white shadow-[3px_3px_0_0_#041824] hover:bg-coral-600">✓ Enregistrer</button>
                {% if datatable.resource not in ['tarifs', 'formules', 'reservations'] %}
                <button type="button" data-modal-delete class="rounded-lg border-2 border-rose-600 bg-rose-50 px-4 py-2 text-xs font-black uppercase text-rose-700 hover:bg-rose-100">✕ Supprimer</button>
                {% endif %}
            </div>
        </form>
    </div>
</div>