{% extends 'admin/base_admin.html.twig' %}

{% block title %}Gestion des Commandes - Administration{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">📦 Gestion des Commandes</h1>
    <p class="page-subtitle">Gérez toutes les commandes NUM-ECARD</p>
</div>



{# SECTION FILTRES #}
<div class="card mb-3">
    <div class="card-title">🔍 Filtres</div>
    
    <form method="get" action="{{ path('app_admin_commandes') }}">
        {# Filtres par statut #}
        <div class="filters mb-3">
            <button type="submit" name="status" value="" 
                    class="filter-btn {% if not currentStatus %}active{% endif %}">
                Tous
            </button>
            <button type="submit" name="status" value="draft" 
                    class="filter-btn {% if currentStatus == 'draft' %}active{% endif %}">
                Brouillon
            </button>
            <button type="submit" name="status" value="pending" 
                    class="filter-btn {% if currentStatus == 'pending' %}active{% endif %}">
                En attente
            </button>
            <button type="submit" name="status" value="paid" 
                    class="filter-btn {% if currentStatus == 'paid' %}active{% endif %}">
                Payée
            </button>
            <button type="submit" name="status" value="processing" 
                    class="filter-btn {% if currentStatus == 'processing' %}active{% endif %}">
                En traitement
            </button>
            <button type="submit" name="status" value="completed" 
                    class="filter-btn {% if currentStatus == 'completed' %}active{% endif %}">
                Complétée
            </button>
            <button type="submit" name="status" value="cancelled" 
                    class="filter-btn {% if currentStatus == 'cancelled' %}active{% endif %}">
                Annulée
            </button>
        </div>

        {# Barre de recherche #}
        <div class="search-box">
            <input type="text" 
                   class="search-input" 
                   name="search" 
                   value="{{ search }}"
                   placeholder="Référence, email client, nom..."
                   style="width: 300px;">
            <button type="submit" class="btn btn-primary btn-sm">🔍 Rechercher</button>
            {% if search or currentStatus %}
                <a href="{{ path('app_admin_commandes') }}" class="btn btn-secondary btn-sm">
                    ✕ Réinitialiser
                </a>
            {% endif %}
        </div>
    </form>
</div>

{# TABLEAU DES COMMANDES #}
<div class="card">
    {% if commandes|length > 0 %}
        <div class="table-container">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Référence</th>
                        <th>Client</th>
                        <th>Date</th>
                        <th>Pack</th>
                        <th>Bénéficiaires</th>
                        <th class="text-right">Montant TTC</th>
                        <th class="text-center">Statut</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for commande in commandes %}
                        <tr>
                            <td>
                                <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="action-link">
                                    <strong class="text-primary">{{ commande.reference }}</strong>
                                </a>
                                {% if commande.isPaid %}
                                    <span class="text-success" title="Payée">✓</span>
                                {% endif %}
                            </td>
                            <td>
                                <div>
                                    <strong>{{ commande.clientNom }}</strong>
                                </div>
                                <small class="text-muted">{{ commande.clientEmail }}</small>
                            </td>
                            <td>
                                <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s') }}Z">
                                    <div>{{ commande.createdAt|date('d/m/Y') }}</div>
                                    <small class="text-muted">{{ commande.createdAt|date('H:i') }}</small>
                                </span>
                            </td>
                            <td>
                                <span style="display:inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #f0f0f0; color: #333;">
                                    Pack {{ commande.packType|capitalize }}
                                </span>
                            </td>
                            <td>
                                {% if commande.beneficiaires|length > 0 %}
                                    {% for b in commande.beneficiaires %}
                                        <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
                                            <div style="width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: 700; flex-shrink: 0;">
                                                {{ b.prenom|slice(0,1)|upper }}{{ b.nom|slice(0,1)|upper }}
                                            </div>
                                            <span style="font-size: 12px; color: #1d1d1f; font-weight: 500;">
                                                {{ b.prenom }} {{ b.nom }}
                                                {% if not b.isActive %}
                                                    <span style="color: #dc2626; font-size: 10px;" title="Carte désactivée">⛔</span>
                                                {% endif %}
                                            </span>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <span style="color: #aeaeb2; font-size: 12px;">—</span>
                                {% endif %}
                            </td>
                            <td class="text-right">
                                <strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong>
                            </td>
                            <td class="text-center">
                                <span class="status-badge status-{{ commande.status }}">
                                    {{ commande.statusLabel }}
                                </span>
                            </td>
                            <td class="text-center">
                                <a href="{{ path('app_admin_commande_show', {id: commande.id}) }}" class="action-link">
                                    Détail →
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="flex justify-between items-center mt-3 text-muted">
            <span>
                <strong>{{ commandes|length }}</strong> commande{% if commandes|length > 1 %}s{% endif %} trouvée{% if commandes|length > 1 %}s{% endif %}
            </span>
            <button onclick="window.print()" class="btn btn-secondary btn-sm">
                🖨️ Imprimer
            </button>
        </div>
    {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">📦</div>
            <div class="empty-state-title">Aucune commande trouvée</div>
            <p>
                {% if search or currentStatus %}
                    Aucune commande ne correspond à vos critères de recherche.
                {% else %}
                    Il n'y a pas encore de commandes dans le système.
                {% endif %}
            </p>
            {% if search or currentStatus %}
                <a href="{{ path('app_admin_commandes') }}" class="btn btn-primary mt-2">
                    Réinitialiser les filtres
                </a>
            {% endif %}
        </div>
    {% endif %}
</div>

{# LÉGENDE DES STATUTS #}
<div class="card card-light mt-3">
    <div class="card-title">ℹ️ Légende des statuts</div>
    <div class="flex flex-wrap gap-3">
        <div>
            <span class="status-badge status-draft">Brouillon</span>
            <small class="text-muted ml-1">Non finalisée</small>
        </div>
        <div>
            <span class="status-badge status-pending">En attente</span>
            <small class="text-muted ml-1">Attente paiement</small>
        </div>
        <div>
            <span class="status-badge status-paid">Payée</span>
            <small class="text-muted ml-1">Paiement reçu</small>
        </div>
        <div>
            <span class="status-badge status-processing">En traitement</span>
            <small class="text-muted ml-1">En préparation</small>
        </div>
        <div>
            <span class="status-badge status-completed">Complétée</span>
            <small class="text-muted ml-1">Terminée</small>
        </div>
        <div>
            <span class="status-badge status-cancelled">Annulée</span>
            <small class="text-muted ml-1">Annulée</small>
        </div>
    </div>
</div>
{% endblock %}