{# templates/commande/recap.html.twig #}
{# Récapitulatif de commande NUM-ECARD #}

{% extends 'base.html.twig' %}

{% block title %}Récapitulatif de votre commande - {{ commande.reference }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.recap-page {
    background: #f5f5f7;
    min-height: 100vh;
    padding: 40px 20px 80px;
}

.recap-container {
    max-width: 900px;
    margin: 0 auto;
}

.recap-header {
    text-align: center;
    margin-bottom: 40px;
}

.recap-header .success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
    color: white;
    box-shadow: 0 8px 30px rgba(52, 199, 89, 0.3);
}

.recap-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px;
}

.recap-header p {
    font-size: 16px;
    color: #86868b;
    margin: 0;
}

.recap-header .reference {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: #e8e8ed;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.recap-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
}

.recap-card-header {
    background: #f5f5f7;
    padding: 20px 28px;
    border-bottom: 1px solid #d2d2d7;
}

.recap-card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.recap-card-body {
    padding: 28px;
}

.recap-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f2;
}

.recap-row:last-child {
    border-bottom: none;
}

.recap-row .label {
    color: #86868b;
    font-size: 14px;
}

.recap-row .value {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 14px;
}

.recap-total {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recap-total .label {
    font-size: 18px;
    font-weight: 500;
}

.recap-total .amount {
    font-size: 32px;
    font-weight: 700;
}

.recap-total .amount small {
    font-size: 14px;
    opacity: 0.8;
}

/* Bénéficiaires */
.benef-recap {
    border: 1px solid #e5e5e7;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.benef-recap-header {
    background: #f5f5f7;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.benef-recap-header:hover {
    background: #e8e8ed;
}

.benef-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.benef-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 2px;
}

.benef-info p {
    font-size: 13px;
    color: #86868b;
    margin: 0;
}

.benef-recap-body {
    padding: 20px;
    display: none;
}

.benef-recap.open .benef-recap-body {
    display: block;
}

.benef-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.benef-detail {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.benef-detail .label {
    font-size: 11px;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.benef-detail .value {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 500;
}

/* Actions */
.recap-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.btn-recap {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-recap-primary {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.3);
}

.btn-recap-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(52, 199, 89, 0.4);
}

.btn-recap-secondary {
    background: white;
    color: #1d1d1f;
    border: 2px solid #d2d2d7;
}

.btn-recap-secondary:hover {
    background: #f5f5f7;
    border-color: #86868b;
}

@media (max-width: 600px) {
    .recap-actions {
        flex-direction: column;
    }
    
    .btn-recap {
        width: 100%;
        justify-content: center;
    }
    
    .benef-detail-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block body %}
<div class="recap-page">
    <div class="recap-container">

        {# Header #}
        <div class="recap-header">
            <div class="success-icon">✓</div>
            <h1>Commande enregistrée !</h1>
            <p>Voici le récapitulatif de votre commande</p>
            <div class="reference">Référence : {{ commande.reference }}</div>
        </div>

        {# Informations de la commande #}
        <div class="recap-card">
            <div class="recap-card-header">
                <h2>📦 Détails de la commande</h2>
            </div>
            <div class="recap-card-body">
                <div class="recap-row">
                    <span class="label">Pack choisi</span>
                    <span class="value">{{ commande.packLabel }}</span>
                </div>
                <div class="recap-row">
                    <span class="label">Quantité</span>
                    <span class="value">{{ commande.quantity }}</span>
                </div>
                <div class="recap-row">
                    <span class="label">Nombre de cartes</span>
                    <span class="value">{{ commande.totalCardsExpected }} carte{{ commande.totalCardsExpected > 1 ? 's' : '' }}</span>
                </div>
                <div class="recap-row">
                    <span class="label">Mode de paiement</span>
                    <span class="value">
                        {% if commande.paiementMode == 'comptant' %}
                            💳 Paiement comptant
                        {% elseif commande.paiementMode == '3x' %}
                            📅 Paiement en 3x sans frais
                        {% else %}
                            📅 Paiement en 4x sans frais
                        {% endif %}
                    </span>
                </div>
                <div class="recap-row">
                    <span class="label">Date de création</span>
                    <span class="value">{{ commande.createdAt|date('d/m/Y à H:i') }}</span>
                </div>
            </div>
            <div class="recap-total">
                <span class="label">Total à payer</span>
                <span class="amount">{{ commande.totalTTC|number_format(2, ',', ' ') }} € <small>TTC</small></span>
            </div>
        </div>

        {# Informations client #}
        <div class="recap-card">
            <div class="recap-card-header">
                <h2>👤 Vos informations</h2>
            </div>
            <div class="recap-card-body">
                <div class="recap-row">
                    <span class="label">Nom</span>
                    <span class="value">{{ commande.clientNom }}</span>
                </div>
                {% if commande.clientEntreprise %}
                <div class="recap-row">
                    <span class="label">Entreprise</span>
                    <span class="value">{{ commande.clientEntreprise }}</span>
                </div>
                {% endif %}
                <div class="recap-row">
                    <span class="label">Email</span>
                    <span class="value">{{ commande.clientEmail }}</span>
                </div>
                <div class="recap-row">
                    <span class="label">Téléphone</span>
                    <span class="value">{{ commande.clientTelephone }}</span>
                </div>
                {% if commande.clientAdresse %}
                <div class="recap-row">
                    <span class="label">Adresse</span>
                    <span class="value">{{ commande.clientAdresse }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        {# Liste des bénéficiaires #}
        <div class="recap-card">
            <div class="recap-card-header">
                <h2>🎴 Cartes de visite ({{ commande.beneficiaires|length }})</h2>
            </div>
            <div class="recap-card-body">
                {% for beneficiaire in commande.beneficiaires %}
                <div class="benef-recap" onclick="this.classList.toggle('open')">
                    <div class="benef-recap-header">
                        <div class="benef-number">{{ loop.index }}</div>
                        <div class="benef-info">
                            <h4>{{ beneficiaire.fullName }}</h4>
                            <p>{{ beneficiaire.fonction }} - {{ beneficiaire.entreprise }}</p>
                        </div>
                    </div>
                    <div class="benef-recap-body">
                        <div class="benef-detail-grid">
                            <div class="benef-detail">
                                <div class="label">Email</div>
                                <div class="value">{{ beneficiaire.email }}</div>
                            </div>
                            <div class="benef-detail">
                                <div class="label">Téléphone</div>
                                <div class="value">{{ beneficiaire.mobile }}</div>
                            </div>
                            <div class="benef-detail">
                                <div class="label">Adresse</div>
                                <div class="value">{{ beneficiaire.adresse|nl2br }}</div>
                            </div>
                            <div class="benef-detail">
                                <div class="label">Charte graphique</div>
                                <div class="value">
                                    {% if beneficiaire.charteType == 'template' %}
                                        Template n°{{ beneficiaire.charteTemplate }}
                                    {% else %}
                                        Personnalisée
                                    {% endif %}
                                </div>
                            </div>
                            {% if beneficiaire.services|length > 0 %}
                            <div class="benef-detail" style="grid-column: 1 / -1;">
                                <div class="label">Services</div>
                                <div class="value">{{ beneficiaire.services|join(', ') }}</div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        {# Notes #}
        {% if commande.notes %}
        <div class="recap-card">
            <div class="recap-card-header">
                <h2>📝 Notes</h2>
            </div>
            <div class="recap-card-body">
                <p style="color: #1d1d1f;">{{ commande.notes|nl2br }}</p>
            </div>
        </div>
        {% endif %}

        {# Actions #}
        <div class="recap-actions">
            <a href="{{ path('commande_edit', {id: commande.id}) }}" class="btn-recap btn-recap-secondary">
                ✏️ Modifier ma commande
            </a>
            <a href="#" class="btn-recap btn-recap-primary">
                💳 Procéder au paiement
            </a>
        </div>

    </div>
</div>
{% endblock %}