{# ========================================
   ADMIN DATATABLE COMPONENT
   Affiche une table paginée avec recherche, filtres et tri
   ======================================== #}

{# Raccourcis locaux #}
{% set resource = datatable.resource|default('') %}
{% set result   = datatable.result %}
{% set filters  = result.filters|default({}) %}

{# Query string de navigation — préserve per_page, tri et filtres actifs dans les liens de page #}
{# Toutes les valeurs de filters sont garanties non-vides (DataTableQuery ne stocke que les non-vides) #}
{% set nav_qs = 'per_page=' ~ result.per_page %}
{% for filter_key, filter_value in filters %}
    {% set nav_qs = nav_qs ~ '&' ~ (filter_key|url_encode) ~ '=' ~ (filter_value|url_encode) %}
{% endfor %}

{# Container principal avec data attributes pour le JS #}
<section class="rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]"
    data-admin-datatable="{{ datatable.id }}"
    data-resource="{{ resource }}"
    data-pk="{{ datatable.pk|default('') }}"
    data-update-url="{{ datatable.update_url|default('') }}"
    data-delete-url="{{ datatable.delete_url|default('') }}">

    {# ======== En-tête et formulaire de recherche/filtres ======== #}
    <div class="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <h2 class="text-lg font-black uppercase">{{ datatable.title }}</h2>

        {# Formulaire de recherche et filtres #}
        <form method="get" action="{{ datatable.base_path }}" class="flex flex-wrap items-center gap-2 text-xs font-semibold">
            {# Champs cachés pour préserver le tri courant #}
            <input type="hidden" name="sort" value="{{ result.sort }}">
            <input type="hidden" name="direction" value="{{ result.direction }}">

            {# Recherche textuelle #}
            <input type="text" name="q" value="{{ filters.q|default('') }}" placeholder="Rechercher…" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2">

            {# Filtres FK actifs — préservés lors d'une nouvelle recherche #}
            {% if filters.id_client is defined %}
                <input type="hidden" name="id_client" value="{{ filters.id_client }}">
            {% endif %}
            {% if filters.id_bateau is defined %}
                <input type="hidden" name="id_bateau" value="{{ filters.id_bateau }}">
            {% endif %}
            {% if filters.id_reservation is defined %}
                <input type="hidden" name="id_reservation" value="{{ filters.id_reservation }}">
            {% endif %}

            {# Filtre par statut (réservations uniquement) #}
            {% if resource == 'reservations' %}
                <select name="statut" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2">
                    <option value="">Tous les statuts</option>
                    {% for status_value in ['en_attente', 'confirmee', 'annulee', 'remboursee'] %}
                        <option value="{{ status_value }}" {% if filters.statut|default('') == status_value %}selected{% endif %}>{{ status_value|replace({'_': ' '})|title }}</option>
                    {% endfor %}
                </select>
            {% endif %}

            {# Sélecteur de résultats par page #}
            <select name="per_page" class="rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2">
                {% for size in [5, 10, 20, 50, 100, 200] %}
                    <option value="{{ size }}" {% if result.per_page == size %}selected{% endif %}>{{ size }}/page</option>
                {% endfor %}
            </select>
            <button class="rounded-lg border-2 border-abyss-900 bg-coral-500 px-3 py-2 font-black uppercase text-white shadow-[2px_2px_0_0_#041824]">Appliquer</button>
            {% set has_active_filter = filters is not empty %}
            {% if has_active_filter %}
                <a href="{{ datatable.base_path }}" class="rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 font-black uppercase shadow-[2px_2px_0_0_#041824] hover:bg-sand-200">✕ Reset</a>
            {% endif %}
        </form>
    </div>

    {# ======== Badges de filtres FK actifs ======== #}
    {% if filters.id_client is defined %}
        <div class="mb-3 flex items-center justify-between rounded-lg border-2 border-amber-400 bg-amber-50 px-4 py-2 text-xs font-semibold">
            <span>🔍 Filtré par client #{{ filters.id_client }}</span>
            <a href="{{ datatable.base_path }}" class="font-black uppercase text-coral-600 hover:underline">✕ Effacer</a>
        </div>
    {% endif %}
    {% if filters.id_bateau is defined %}
        <div class="mb-3 flex items-center justify-between rounded-lg border-2 border-amber-400 bg-amber-50 px-4 py-2 text-xs font-semibold">
            <span>🔍 Filtré par bateau #{{ filters.id_bateau }}</span>
            <a href="{{ datatable.base_path }}" class="font-black uppercase text-coral-600 hover:underline">✕ Effacer</a>
        </div>
    {% endif %}
    {% if filters.id_reservation is defined %}
        <div class="mb-3 flex items-center justify-between rounded-lg border-2 border-amber-400 bg-amber-50 px-4 py-2 text-xs font-semibold">
            <span>🔍 Filtré par réservation #{{ filters.id_reservation }}</span>
            <a href="{{ datatable.base_path }}" class="font-black uppercase text-coral-600 hover:underline">✕ Effacer</a>
        </div>
    {% endif %}
    {% if filters.blackliste is defined %}
        <div class="mb-3 flex items-center justify-between rounded-lg border-2 border-rose-400 bg-rose-50 px-4 py-2 text-xs font-semibold">
            <span>🔍 Filtre : clients {{ filters.blackliste == '1' ? 'blacklistés' : 'non blacklistés' }}</span>
            <a href="{{ datatable.base_path }}" class="font-black uppercase text-coral-600 hover:underline">✕ Effacer</a>
        </div>
    {% endif %}

    {# ======== Table de données ======== #}
    {% if result.rows is empty %}
        <p class="rounded-xl border-2 border-abyss-900 bg-sand-100 p-4 text-sm font-semibold">Aucune donnée pour ces filtres.</p>
    {% else %}
        <div class="overflow-auto rounded-xl border-2 border-abyss-900">
            <table class="min-w-full border-collapse text-sm">
                {# En-têtes de colonnes avec liens de tri #}
                <thead>
                    <tr class="bg-abyss-900 text-white">
                        {% for column in datatable.columns %}
                            {% set next_sort_dir = (result.sort == column.key and result.direction == 'asc') ? 'desc' : 'asc' %}
                            <th class="px-3 py-2.5 text-left text-xs font-black uppercase tracking-wider">
                                {% if column.sortable %}
                                    <a class="inline-flex items-center gap-1 hover:text-coral-300"
                                       href="{{ datatable.base_path }}?page=1&{{ nav_qs }}&sort={{ column.key }}&direction={{ next_sort_dir }}">
                                        {{ column.label }}
                                        {% if result.sort == column.key %}
                                            <span class="opacity-70">{{ result.direction == 'asc' ? '↑' : '↓' }}</span>
                                        {% endif %}
                                    </a>
                                {% else %}
                                    {{ column.label }}
                                {% endif %}
                            </th>
                        {% endfor %}
                        {% if datatable.has_modal %}
                            <th class="px-3 py-2.5 text-left text-xs font-black uppercase tracking-wider">Éditer</th>
                        {% endif %}
                    </tr>
                </thead>

                {# Corps de la table #}
                <tbody class="divide-y-2 divide-abyss-900">
                    {% for row in result.rows %}
                        {# Couleur de fond selon le statut ou blacklist #}
                        {% set row_status = row.statut|default('') %}
                        {% set row_css = '' %}
                        {% if row_status == 'annulee' %}{% set row_css = 'bg-rose-50' %}
                        {% elseif row_status == 'remboursee' %}{% set row_css = 'bg-sky-50' %}
                        {% elseif row_status == 'confirmee' %}{% set row_css = 'bg-emerald-50' %}
                        {% elseif row.blackliste is defined and row.blackliste %}{% set row_css = 'bg-rose-50' %}
                        {% endif %}

                        {# Ligne cliquable si modal activée — data-row injecte les données dans le formulaire JS #}
                        <tr class="{{ row_css }} {{ datatable.has_modal ? 'group cursor-pointer transition-colors hover:bg-sand-100' : '' }}"
                            {% if datatable.has_modal %}
                                data-row='{{ row|json_encode|e('html_attr') }}'
                                tabindex="0"
                            {% endif %}>

                            {# Rendu des cellules selon le type de colonne #}
                            {% for column in datatable.columns %}
                                {% set value = attribute(row, column.key) %}
                                <td class="px-3 py-2.5 align-middle">
                                    {% if column.key == 'statut' %}
                                        {% set badge_color = {
                                            'en_attente': 'bg-amber-100 text-amber-800 border-amber-400',
                                            'confirmee':  'bg-emerald-100 text-emerald-800 border-emerald-400',
                                            'annulee':    'bg-rose-100 text-rose-800 border-rose-400',
                                            'remboursee': 'bg-sky-100 text-sky-800 border-sky-400'
                                        } %}
                                        {% set badge_label = {
                                            'en_attente': 'En attente',
                                            'confirmee':  'Confirmée',
                                            'annulee':    'Annulée',
                                            'remboursee': 'Remboursée'
                                        } %}
                                        <span class="inline-block rounded-full border px-2.5 py-0.5 text-[11px] font-black uppercase {{ badge_color[value]|default('bg-sand-200 text-abyss-800 border-abyss-900/50') }}">
                                            {{ badge_label[value]|default(value) }}
                                        </span>
                                    {% elseif column.type == 'boolean' %}
                                        {% if column.key == 'blackliste' and value %}
                                            <span class="inline-block rounded-full border border-rose-400 bg-rose-100 px-2 py-0.5 text-[11px] font-black uppercase text-rose-800">Blacklisté</span>
                                        {% else %}
                                            <span class="inline-block rounded-full border px-2 py-0.5 text-[11px] font-black uppercase {{ value ? 'border-emerald-400 bg-emerald-100 text-emerald-800' : 'border-abyss-900/40 bg-sand-100 text-abyss-800' }}">{{ value ? 'Oui' : 'Non' }}</span>
                                        {% endif %}
                                    {% elseif column.type == 'money' %}
                                        <span class="font-semibold">{{ value|number_format(2, ',', ' ') }} €</span>
                                    {% elseif column.key == 'client_nom' and row.id_client is defined %}
                                        <div class="font-semibold leading-tight">{{ value }}</div>
                                        <a href="/admin/reservations?id_client={{ row.id_client }}" class="text-[11px] font-black uppercase text-coral-600 hover:underline">Voir réservations →</a>
                                    {% elseif column.key == 'bateau_nom' %}
                                        <div class="font-semibold leading-tight">{{ value }}</div>
                                        {% if row.port_nom is defined %}<div class="text-[11px] uppercase tracking-wide text-abyss-800">{{ row.port_nom }}</div>{% endif %}
                                    {% elseif column.key == 'port_nom' %}
                                        <a href="/admin/bateaux?q={{ value|url_encode }}" class="font-semibold underline decoration-dotted hover:text-coral-600">{{ value }}</a>
                                    {% elseif column.key == 'nom' and resource == 'ports' %}
                                        <a href="/admin/bateaux?q={{ value|url_encode }}" class="font-semibold underline decoration-dotted hover:text-coral-600">{{ value }}</a>
                                    {% elseif column.key == 'nb_reservations' and row.id_client is defined %}
                                        {% if value > 0 %}
                                            <div class="flex items-center gap-2">
                                                <span class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-coral-500 px-2 text-[11px] font-black text-white">{{ value }}</span>
                                                <a href="/admin/reservations?id_client={{ row.id_client }}" class="text-[11px] font-black uppercase text-coral-600 hover:underline">Voir réservations →</a>
                                            </div>
                                        {% else %}
                                            <span class="text-xs text-abyss-700">0</span>
                                        {% endif %}
                                    {% elseif column.key == 'nb_reservations' and row.id_bateau is defined %}
                                        {% if value > 0 %}
                                            <div class="flex items-center gap-2">
                                                <span class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-coral-500 px-2 text-[11px] font-black text-white">{{ value }}</span>
                                                <a href="/admin/reservations?id_bateau={{ row.id_bateau }}" class="text-[11px] font-black uppercase text-coral-600 hover:underline">Voir réservations →</a>
                                            </div>
                                        {% else %}
                                            <span class="text-xs text-abyss-700">0</span>
                                        {% endif %}
                                    {% elseif column.key == 'nb_bateaux' and row.id_port is defined %}
                                        {% if value > 0 %}
                                            <div class="flex items-center gap-2">
                                                <span class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-coral-500 px-2 text-[11px] font-black text-white">{{ value }}</span>
                                                <a href="/admin/bateaux?id_port={{ row.id_port }}" class="text-[11px] font-black uppercase text-coral-600 hover:underline">Voir bateaux →</a>
                                            </div>
                                        {% else %}
                                            <span class="text-xs text-abyss-700">0</span>
                                        {% endif %}
                                    {% elseif column.key == 'nb_bateaux' and row.id_type_bateau is defined %}
                                        {% if value > 0 %}
                                            <div class="flex items-center gap-2">
                                                <span class="inline-flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-coral-500 px-2 text-[11px] font-black text-white">{{ value }}</span>
                                                <a href="/admin/bateaux?id_type_bateau={{ row.id_type_bateau }}" class="text-[11px] font-black uppercase text-coral-600 hover:underline">Voir bateaux →</a>
                                            </div>
                                        {% else %}
                                            <span class="text-xs text-abyss-700">0</span>
                                        {% endif %}
                                    {% elseif column.key == 'reservation_numero' and row.id_reservation is defined %}
                                        <a href="/admin/reservations?id_reservation={{ row.id_reservation }}" class="font-mono font-semibold underline decoration-dotted hover:text-coral-600">{{ value }}</a>
                                    {% elseif column.type == 'date' and value is not empty %}
                                        <span class="text-xs">{{ value|date('d/m/Y') }}</span>
                                    {% else %}
                                        {{ value }}
                                    {% endif %}
                                </td>
                            {% endfor %}
                            {% if datatable.has_modal %}
                                <td class="px-3 py-2.5 align-middle">
                                    <span class="inline-flex items-center gap-1 rounded-lg border-2 border-abyss-900 bg-white px-2.5 py-1 text-[11px] font-black uppercase shadow-[2px_2px_0_0_#041824] transition-colors group-hover:bg-coral-500 group-hover:text-white">✎ Éditer</span>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# ======== Pagination ======== #}
        <div class="mt-4 flex flex-wrap items-center justify-between gap-2 text-xs font-semibold">
            <p class="text-abyss-800">{{ result.total }} résultat(s) · Page {{ result.page }} / {{ result.pages }}</p>
            <div class="flex items-center gap-2">
                {% if result.page > 1 %}
                    <a class="rounded-lg border-2 border-abyss-900 bg-white px-3 py-1.5 font-black uppercase shadow-[2px_2px_0_0_#041824] hover:bg-sand-100"
                       href="{{ datatable.base_path }}?page={{ result.page - 1 }}&{{ nav_qs }}&sort={{ result.sort }}&direction={{ result.direction }}">← Précédent</a>
                {% endif %}
                {% if result.page < result.pages %}
                    <a class="rounded-lg border-2 border-abyss-900 bg-white px-3 py-1.5 font-black uppercase shadow-[2px_2px_0_0_#041824] hover:bg-sand-100"
                       href="{{ datatable.base_path }}?page={{ result.page + 1 }}&{{ nav_qs }}&sort={{ result.sort }}&direction={{ result.direction }}">Suivant →</a>
                {% endif %}
            </div>
        </div>
    {% endif %}
</section>