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

{% block title %}Commande confirmée - {{ order.orderNumber }}{% endblock %}
{% block meta_description %}Votre commande {{ order.orderNumber }} a été confirmée avec succès.{% endblock %}

{% block body %}
<div class="checkout-container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
            <li class="breadcrumb-item"><a href="{{ path('cart_index') }}">Panier</a></li>
            <li class="breadcrumb-item active" aria-current="page">Confirmation</li>
        </ol>
    </nav>
    
    <!-- Progress -->
    <div class="checkout-progress">
        <div class="step completed">
            <i class="fas fa-check me-2"></i>
            1. Livraison
        </div>
        <div class="step completed">
            <i class="fas fa-check me-2"></i>
            2. Paiement
        </div>
        <div class="step completed active">
            <i class="fas fa-check me-2"></i>
            3. Confirmation
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-8">
            <!-- Header de confirmation -->
            <div class="confirmation-header text-center mb-5">
                <div class="success-icon mb-3">
                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                </div>
                
                {% if order.status.value == 'PENDING_QUOTE' %}
                    <h1 class="text-primary mb-3">Demande de devis envoyée !</h1>
                    <p class="lead text-muted">
                        Votre demande de devis a bien été transmise au vendeur. 
                        Vous recevrez une réponse sous 24-48h.
                    </p>
                {% elseif order.status.value == 'PAID' %}
                    <h1 class="text-success mb-3">Commande confirmée !</h1>
                    <p class="lead text-muted">
                        Merci pour votre achat ! Votre paiement a été traité avec succès.
                    </p>
                {% else %}
                    <h1 class="text-primary mb-3">Commande enregistrée !</h1>
                    <p class="lead text-muted">
                        Votre commande a été enregistrée et est en cours de traitement.
                    </p>
                {% endif %}
                
                <div class="order-number-badge">
                    <span class="badge bg-primary p-3 fs-6">
                        <i class="fas fa-receipt me-2"></i>
                        Commande n° {{ order.orderNumber }}
                    </span>
                </div>
            </div>
            
            <!-- Informations importantes -->
            <div class="alert alert-info mb-4">
                <h5 class="alert-heading">
                    <i class="fas fa-info-circle me-2"></i>
                    Prochaines étapes
                </h5>
                {% if order.status.value == 'PENDING_QUOTE' %}
                    <ul class="mb-0">
                        <li>Le vendeur va préparer un devis de livraison personnalisé</li>
                        <li>Vous recevrez un email avec le devis sous 24-48h</li>
                        <li>Vous pourrez alors valider et payer la commande</li>
                    </ul>
                {% else %}
                    <ul class="mb-0">
                        <li>Un email de confirmation vous a été envoyé</li>
                        <li>Le vendeur va préparer votre commande</li>
                        <li>Vous recevrez un email avec les informations de suivi</li>
                    </ul>
                {% endif %}
            </div>
            
            <!-- Détails de la commande -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-shopping-cart me-2"></i>
                        Détails de la commande
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Informations générales -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Informations de commande</h6>
                            <p class="mb-1"><strong>Date :</strong> {{ order.createdAt|date('d/m/Y à H:i') }}</p>
                            <p class="mb-1"><strong>Statut :</strong> 
                                {% if order.status.value == 'PENDING_QUOTE' %}
                                    <span class="badge bg-warning">En attente de devis</span>
                                {% elseif order.status.value == 'PAID' %}
                                    <span class="badge bg-success">Payée</span>
                                {% elseif order.status.value == 'PENDING_PAYMENT' %}
                                    <span class="badge bg-info">En attente de paiement</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ order.status.value }}</span>
                                {% endif %}
                            </p>
                            {% if order.buyerEmail %}
                                <p class="mb-0"><strong>Email :</strong> {{ order.buyerEmail }}</p>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Vendeur</h6>
                            <p class="mb-1"><strong>{{ order.seller.companyName|default(order.seller.firstName ~ ' ' ~ order.seller.lastName) }}</strong></p>
                            {% if order.seller.city %}
                                <p class="mb-1 text-muted">{{ order.seller.city }}</p>
                            {% endif %}
                            {% if order.seller.email %}
                                <p class="mb-0 small">
                                    <a href="mailto:{{ order.seller.email }}" class="text-decoration-none">
                                        <i class="fas fa-envelope me-1"></i>
                                        Contacter le vendeur
                                    </a>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Articles commandés -->
                    <h6 class="text-muted mb-3">Articles commandés</h6>
                    {% for orderItem in order.orderItems %}
                        <div class="row align-items-center mb-3 pb-3 {% if not loop.last %}border-bottom{% endif %}">
                            <div class="col-md-2">
                                {% if orderItem.itemImage %}
                                    <img src="{{ orderItem.itemImage }}" 
                                         alt="{{ orderItem.itemTitle }}" 
                                         class="img-fluid rounded"
                                         style="max-height: 80px; object-fit: cover;">
                                {% else %}
                                    <div class="placeholder-image bg-light rounded d-flex align-items-center justify-content-center" 
                                         style="width: 80px; height: 80px;">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="col-md-7">
                                <h6 class="mb-1">{{ orderItem.itemTitle }}</h6>
                                {% if orderItem.itemDescription %}
                                    <p class="text-muted small mb-1">{{ orderItem.itemDescription|slice(0, 100) }}{% if orderItem.itemDescription|length > 100 %}...{% endif %}</p>
                                {% endif %}
                                <p class="mb-0 small text-muted">Quantité : {{ orderItem.quantity }}</p>
                            </div>
                            <div class="col-md-3 text-end">
                                <div class="fw-bold text-primary">{{ orderItem.unitPrice|number_format(2, ',', ' ') }} €</div>
                                {% if orderItem.quantity > 1 %}
                                    <div class="small text-muted">
                                        {{ orderItem.quantity }} × {{ (orderItem.unitPrice)|number_format(2, ',', ' ') }} €
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Adresses -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        Adresses
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Adresse de livraison</h6>
                            <address class="mb-0">
                                <strong>{{ order.shippingFirstName }} {{ order.shippingLastName }}</strong><br>
                                {{ order.shippingAddress }}<br>
                                {{ order.shippingZipCode }} {{ order.shippingCity }}<br>
                                {{ order.shippingCountry }}
                            </address>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted mb-2">Adresse de facturation</h6>
                            <address class="mb-0">
                                <strong>{{ order.buyerFirstName|default(order.shippingFirstName) }} {{ order.buyerLastName|default(order.shippingLastName) }}</strong><br>
                                {% if order.buyerEmail %}
                                    {{ order.buyerEmail }}<br>
                                {% endif %}
                                {% if order.buyerPhone %}
                                    Tel: {{ order.buyerPhone }}
                                {% endif %}
                            </address>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Notes -->
            {% if order.notes %}
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-sticky-note me-2"></i>
                            Notes de commande
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-0">{{ order.notes }}</p>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <div class="col-lg-4">
            <!-- Récapitulatif financier -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-calculator me-2"></i>
                        Récapitulatif financier
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Sous-total articles</span>
                        <span>{{ order.subtotalAmount|number_format(2, ',', ' ') }} €</span>
                    </div>
                    
                    {% if order.shippingAmount %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>Frais de livraison</span>
                            <span>{{ order.shippingAmount|number_format(2, ',', ' ') }} €</span>
                        </div>
                    {% else %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>Frais de livraison</span>
                            <span class="text-warning">
                                <i class="fas fa-clock me-1"></i>
                                Devis en cours
                            </span>
                        </div>
                    {% endif %}
                    
                    {% if order.discountAmount and order.discountAmount > 0 %}
                        <div class="d-flex justify-content-between mb-2 text-success">
                            <span>Remise</span>
                            <span>-{{ order.discountAmount|number_format(2, ',', ' ') }} €</span>
                        </div>
                    {% endif %}
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-3">
                        <strong class="fs-5">Total</strong>
                        <strong class="fs-5 text-primary">
                            {% if order.shippingAmount %}
                                {{ order.totalAmount|number_format(2, ',', ' ') }} €
                            {% else %}
                                À définir
                            {% endif %}
                        </strong>
                    </div>
                    
                    {% if order.status.value == 'PAID' and order.paymentMethod %}
                        <div class="alert alert-success small">
                            <i class="fas fa-check me-2"></i>
                            Paiement effectué par {{ order.paymentMethod }}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Actions -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tools me-2"></i>
                        Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if app.user %}
                            <a href="{{ path('dashboard_orders') }}" class="btn btn-primary">
                                <i class="fas fa-list me-2"></i>
                                Mes commandes
                            </a>
                        {% endif %}
                        
                        <a href="{{ path('app_home') }}" class="btn btn-outline-primary">
                            <i class="fas fa-home me-2"></i>
                            Retour à l'accueil
                        </a>
                        
                        <a href="{{ path('catalog') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-search me-2"></i>
                            Continuer mes achats
                        </a>
                        
                        {% if order.seller.email %}
                            <a href="mailto:{{ order.seller.email }}?subject=Commande {{ order.orderNumber }}" 
                               class="btn btn-outline-info">
                                <i class="fas fa-envelope me-2"></i>
                                Contacter le vendeur
                            </a>
                        {% endif %}
                        
                        <button type="button" class="btn btn-outline-secondary btn-sm" 
                                onclick="window.print()">
                            <i class="fas fa-print me-2"></i>
                            Imprimer
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Informations utiles -->
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Informations utiles
                    </h5>
                </div>
                <div class="card-body">
                    <div class="small text-muted">
                        <div class="mb-2">
                            <i class="fas fa-shield-alt text-success me-2"></i>
                            <strong>Paiement sécurisé</strong><br>
                            Vos données sont protégées par cryptage SSL
                        </div>
                        <div class="mb-2">
                            <i class="fas fa-undo text-info me-2"></i>
                            <strong>Retour possible</strong><br>
                            Sous conditions, dans les 14 jours
                        </div>
                        <div class="mb-2">
                            <i class="fas fa-headset text-primary me-2"></i>
                            <strong>Support client</strong><br>
                            <a href="{{ path('contact') }}" class="text-decoration-none">Nous contacter</a>
                        </div>
                        <div>
                            <i class="fas fa-envelope text-warning me-2"></i>
                            <strong>Email de confirmation</strong><br>
                            Vérifiez votre boîte mail et vos spams
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Styles pour l'impression */
@media print {
    .checkout-progress,
    .breadcrumb,
    .btn,
    .card-header,
    .alert {
        display: none !important;
    }
    
    .confirmation-header {
        page-break-after: avoid;
    }
    
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 20px !important;
    }
    
    body {
        font-size: 12px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* Styles pour la confirmation */
.checkout-container {
    padding: 20px 0;
}

.checkout-progress {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.checkout-progress .step {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border-radius: 25px;
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 500;
    position: relative;
}

.checkout-progress .step.completed {
    background-color: #d4edda;
    color: #155724;
}

.checkout-progress .step.active {
    background-color: #0d6efd;
    color: white;
}

.success-icon {
    animation: successBounce 0.6s ease-out;
}

@keyframes successBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.order-number-badge {
    margin-top: 1rem;
}

.placeholder-image {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
}

/* Responsive */
@media (max-width: 768px) {
    .checkout-progress {
        flex-direction: column;
        align-items: center;
    }
    
    .checkout-progress .step {
        margin: 0.25rem 0;
        width: 200px;
        justify-content: center;
    }
    
    .confirmation-header h1 {
        font-size: 1.75rem;
    }
    
    .card-body .row .col-md-2,
    .card-body .row .col-md-7,
    .card-body .row .col-md-3 {
        margin-bottom: 1rem;
    }
}
</style>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animation de succès au chargement
    const successIcon = document.querySelector('.success-icon i');
    if (successIcon) {
        setTimeout(() => {
            successIcon.style.transform = 'scale(1.1)';
            setTimeout(() => {
                successIcon.style.transform = 'scale(1)';
            }, 200);
        }, 500);
    }
    
    // Fonction d'impression améliorée
    window.printOrder = function() {
        const originalTitle = document.title;
        document.title = 'Commande {{ order.orderNumber }} - AEF';
        
        setTimeout(() => {
            window.print();
            document.title = originalTitle;
        }, 250);
    };
    
    // Analytics de confirmation (si disponible)
    if (typeof gtag !== 'undefined') {
        gtag('event', 'purchase', {
            'transaction_id': '{{ order.orderNumber }}',
            'value': {{ order.totalAmount|default(0) }},
            'currency': 'EUR',
            'items': [
                {% for orderItem in order.orderItems %}
                {
                    'item_id': '{{ orderItem.id }}',
                    'item_name': '{{ orderItem.itemTitle|e('js') }}',
                    'price': {{ orderItem.unitPrice }},
                    'quantity': {{ orderItem.quantity }}
                }{% if not loop.last %},{% endif %}
                {% endfor %}
            ]
        });
    }
    
    // Notification de confirmation
    {% if order.status.value == 'PAID' %}
        setTimeout(() => {
            if ('Notification' in window && Notification.permission === 'granted') {
                new Notification('Commande confirmée !', {
                    body: 'Votre commande {{ order.orderNumber }} a été confirmée avec succès.',
                    icon: '/favicon.ico'
                });
            }
        }, 1000);
    {% endif %}
});
</script>
{% endblock %}