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

{% block title %}Commandes d'affûtage{% endblock %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Affûtage professionnel</span>
            <h1 class="adm-page-title">Commandes d'affûtage</h1>
            <p class="adm-page-sub">{{ total }} demande{{ total > 1 ? 's' }} {{ tab != 'toutes' ? 'dans cet onglet' : 'au total' }}</p>
        </div>
        <div class="adm-page-head-actions">
            <form method="get" action="{{ path('gestion_affutages') }}" 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, établissement, 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': 'Retours expédiés', 'terminees': 'Livrées', 'refusees': 'Refusées', 'toutes': 'Toutes'} %}
            <a class="adm-tab {{ tab == key ? 'is-active' }}" href="{{ path('gestion_affutages', {tab: key, q: q ?: null}) }}">
                {{ label }}
                <span class="adm-tab-count">{{ tabCounts[key] }}</span>
            </a>
        {% endfor %}
    </div>

    {% if demandes 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="M3.4 16.4C9.4 17.4 15.4 14.9 21 5.6c.5-.8-.3-1.6-1.1-1.3C13.6 6.6 7.7 10.4 3.4 16.4Z"/><path d="M3.4 16.4 1.1 18.7"/></svg>
                <p>Aucune demande {{ 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,
           champs en libellé/valeur, « Voir » 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>Établissement</th>
                        <th>Ville</th>
                        <th>Volume</th>
                        <th>Statut</th>
                        <th>Retour</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for demande in demandes %}
                        <tr>
                            <td class="is-num adm-cell-head" data-label="Référence">{{ demande.reference }}</td>
                            <td data-label="Date">{{ demande.createdAt|date('d/m/Y H:i') }}</td>
                            <td data-label="Établissement">
                                <div class="adm-cell-val">
                                    {{ demande.etablissement }}
                                    <div style="font-size:0.76rem;color:var(--v2-ink-soft);">{{ demande.email }}</div>
                                </div>
                            </td>
                            <td data-label="Ville">{{ demande.ville ?: '—' }}</td>
                            <td class="is-num" data-label="Volume">{{ demande.nbCouteaux }}{% if demande.nbAutres > 0 %} +{{ demande.nbAutres }}{% endif %}</td>
                            <td data-label="Statut">{% include 'gestion/affutages/_status_badge.html.twig' with { statut: demande.statut } only %}</td>
                            <td data-label="Retour">
                                <div class="adm-cell-val">
                                {% set colis = [] %}
                                {% if demande.numSuiviAller %}
                                    {% set colis = colis|merge([{ sens: 'Aller', statut: demande.trackingLastStatusAller, transporteur: demande.transporteurAller }]) %}
                                {% endif %}
                                {% if demande.numSuiviRetour %}
                                    {% set colis = colis|merge([{ sens: 'Retour', statut: demande.trackingLastStatusRetour, transporteur: demande.transporteurRetour }]) %}
                                {% endif %}
                                {% for c in colis %}
                                    <span class="adm-badge adm-badge--{{ c.statut and c.statut.value == 'probleme' ? 'red' : (c.statut and c.statut.value == 'livre' ? 'green' : 'neutral') }}" style="margin:0 4px 4px 0;">
                                        {{ c.sens }} · {{ c.statut ? c.statut.label : c.transporteur.label }}
                                    </span>
                                {% else %}
                                    <span style="color:var(--v2-ink-soft);font-size:0.8rem;">—</span>
                                {% endfor %}
                                </div>
                            </td>
                            <td class="adm-cell-actions">
                                <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ path('gestion_affutage_detail', {reference: demande.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_affutages', {tab: tab, q: q ?: null, page: p}) }}">{{ p }}</a>
                    {% endif %}
                {% endfor %}
            </nav>
        {% endif %}
    {% endif %}
{% endblock %}