{% extends 'account/base_account.html.twig' %}

{% block page_title %}Mes commandes{% endblock %}


{% block stylesheets %}
    {{ parent() }}
    <style>
        #qrBtn      { display: none !important; }
        #qrPanel    { display: none !important; }
        #userNavBtn { display: flex !important; }
    </style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">📦 Mes commandes</h1>
    <p class="page-subtitle">Retrouvez l'historique de toutes vos commandes</p>
</div>

<!-- FILTRES -->
<div class="filters">
    <a href="{{ path('app_account_commandes') }}" class="filter-btn {{ currentStatus is not defined or currentStatus == '' ? 'active' : '' }}">
        Toutes
    </a>
    <a href="{{ path('app_account_commandes', {status: 'pending'}) }}" class="filter-btn {{ currentStatus is defined and currentStatus == 'pending' ? 'active' : '' }}">
        En attente
    </a>
    <a href="{{ path('app_account_commandes', {status: 'paid'}) }}" class="filter-btn {{ currentStatus is defined and currentStatus == 'paid' ? 'active' : '' }}">
        Payées
    </a>
    <a href="{{ path('app_account_commandes', {status: 'processing'}) }}" class="filter-btn {{ currentStatus is defined and currentStatus == 'processing' ? 'active' : '' }}">
        En cours
    </a>
    <a href="{{ path('app_account_commandes', {status: 'completed'}) }}" class="filter-btn {{ currentStatus is defined and currentStatus == 'completed' ? 'active' : '' }}">
        Terminées
    </a>
</div>

<!-- TABLEAU DES COMMANDES -->
<div class="card">
    {% if commandes|length > 0 %}
        <div class="table-overflow">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Référence</th>
                        <th>Date</th>
                        <th>Pack</th>
                        <th>Cartes</th>
                        <th>Montant TTC</th>
                        <th>Statut</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for commande in commandes %}
                        <tr>
                            <td>
                                <a href="{{ path('app_account_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 class="text-muted">
                                <span class="local-datetime" data-utc="{{ commande.createdAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">
                                    {{ commande.createdAt|date('d/m/Y') }}<br>
                                    <small>{{ commande.createdAt|date('H:i') }}</small>
                                </span>
                            </td>
                            <td>
                                <span class="badge-pack">
                                    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 }}
                                            </span>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <span style="color: #aeaeb2; font-size: 12px;">—</span>
                                {% endif %}
                            </td>
                            <td>
                                <strong>{{ commande.totalTTC|number_format(2, ',', ' ') }} €</strong>
                            </td>
                            <td>
                                {% set statusClass = {
                                    'draft': 'badge-draft',
                                    'pending': 'badge-pending',
                                    'paid': 'badge-paid',
                                    'processing': 'badge-processing',
                                    'completed': 'badge-completed',
                                    'cancelled': 'badge-cancelled'
                                } %}
                                {% set statusLabel = {
                                    'draft': 'Brouillon',
                                    'pending': 'En attente',
                                    'paid': 'Payée',
                                    'processing': 'En cours',
                                    'completed': 'Terminée',
                                    'cancelled': 'Annulée'
                                } %}
                                <span class="badge {{ statusClass[commande.status] ?? 'badge-draft' }}">
                                    {{ statusLabel[commande.status] ?? commande.status }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ path('app_account_commande_show', {id: commande.id}) }}" class="btn btn-secondary btn-sm">
                                    Détails →
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">📦</div>
            <div class="empty-state-title">Aucune commande</div>
            <p>Vous n'avez pas encore passé de commande.</p>
            <a href="{{ path('app_home') }}#pricing" class="btn btn-primary mt-2">
                Découvrir nos offres
            </a>
        </div>
    {% endif %}
</div>

<!-- INFO BOX -->
{% if commandes|length > 0 %}
<div class="card card-light">
    <div class="info-box">
        <div class="info-box-icon">💡</div>
        <div class="info-box-content">
            <div class="info-box-title">Besoin d'aide ?</div>
            <div class="info-box-text">
                Pour toute question concernant vos commandes, n'hésitez pas à nous contacter.
            </div>
        </div>
        <a href="mailto:contact@num-ecard.com" class="btn btn-primary">
            Nous contacter
        </a>
    </div>
</div>
{% endif %}
{% endblock %}