{% extends 'gestion/_base.html.twig' %}
{% set active = 'commandes' %}

{% block title %}Commandes{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Commandes</span>
            <h1 class="adm-page-title">Gestion des commandes</h1>
            <p class="adm-page-sub">{{ total }} commande{{ total > 1 ? 's' }} {{ tab != 'toutes' ? 'dans cet onglet' : 'au total' }}</p>
        </div>
        <div class="adm-page-head-actions">
            <form method="get" action="{{ path('gestion_commandes') }}" class="adm-search-form">
                <input type="hidden" name="tab" value="{{ tab }}">
                <div class="adm-field">
                    <input type="search" name="q" value="{{ q }}" placeholder=" " id="search-q">
                    <label for="search-q">Référence, client, email…</label>
                </div>
                <button type="submit" class="adm-btn adm-btn--ghost">Rechercher</button>
            </form>
        </div>
    </div>

    <div class="adm-tabs" style="margin-bottom:18px;">
        {% for key, label in {'a-traiter': 'À traiter', 'en-cours': 'En cours', 'expediees': 'Expédiées', 'terminees': 'Terminées', 'toutes': 'Toutes'} %}
            <a class="adm-tab {{ tab == key ? 'is-active' }}" href="{{ path('gestion_commandes', {tab: key, q: q ?: null}) }}">
                {{ label }}
                <span class="adm-tab-count">{{ tabCounts[key] }}</span>
            </a>
        {% endfor %}
    </div>

    {% if commandes is empty %}
        <div class="adm-card">
            <div class="adm-empty">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 9.4 7.55 4.24"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96 12 12.01l8.73-5.05"/><path d="M12 22.08V12"/></svg>
                <p>Aucune commande {{ q ? 'pour cette recherche' : 'dans cet onglet' }}.</p>
            </div>
        </div>
    {% else %}
        {# Sous 768 px, chaque ligne devient une carte : référence en tête, puis
           les champs en libellé/valeur et le bouton en pied (cf. §18 du DS). #}
        <div class="adm-table-wrap adm-table-wrap--cards">
            <table class="adm-table adm-table--cards">
                <thead>
                    <tr>
                        <th>Référence</th>
                        <th>Date</th>
                        <th>Client</th>
                        <th>Total</th>
                        <th>Livraison</th>
                        <th>Statut</th>
                        <th>Suivi</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for commande in commandes %}
                        <tr>
                            <td class="is-num adm-cell-head" data-label="Référence" title="{{ commande.reference }}">{{ commande.reference|slice(0, 12) }}{{ commande.reference|length > 12 ? '…' }}</td>
                            <td data-label="Date">{{ commande.createdAt|date('d/m/Y H:i') }}</td>
                            <td data-label="Client">
                                <div class="adm-cell-val">
                                    {{ commande.client.prenom }} {{ commande.client.nom }}
                                    <div style="font-size:0.76rem;color:var(--v2-ink-soft);">{{ commande.client.email }}</div>
                                </div>
                            </td>
                            <td class="is-num" data-label="Total">{{ commande.total|number_format(2, ',', ' ') }} €</td>
                            <td data-label="Livraison">{{ commande.livraison.libelle }}</td>
                            <td data-label="Statut">{% include 'gestion/commandes/_status_badge.html.twig' with { status: commande.status } only %}</td>
                            <td data-label="Suivi">
                                {% if commande.numSuiviColis %}
                                    <span class="adm-badge adm-badge--{{ commande.trackingLastStatus and commande.trackingLastStatus.value == 'probleme' ? 'red' : 'green' }}">
                                        {{ commande.trackingLastStatus ? commande.trackingLastStatus.label : 'Suivi posé' }}
                                    </span>
                                {% else %}
                                    <span style="color:var(--v2-ink-soft);font-size:0.8rem;">—</span>
                                {% endif %}
                            </td>
                            <td class="adm-cell-actions">
                                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_commande_detail', {reference: commande.reference}) }}">Voir</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if pages > 1 %}
            <nav class="adm-pagination" aria-label="Pagination">
                {% for p in 1..pages %}
                    {% if p == page %}
                        <span class="current">{{ p }}</span>
                    {% else %}
                        <a href="{{ path('gestion_commandes', {tab: tab, q: q ?: null, page: p}) }}">{{ p }}</a>
                    {% endif %}
                {% endfor %}
            </nav>
        {% endif %}
    {% endif %}
{% endblock %}