{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Commande confirmée | {{ order.site.name }}{% endblock %}

{% block body %}
<div class="confirmation-page">
    <div class="container">
        <div class="confirmation-card">
            <div class="confirmation-icon">
                <i class="fas fa-check-circle"></i>
            </div>

            <h1>{{ order.isPaid() ? 'Commande confirmée !' : 'Commande en attente' }}</h1>
            <p class="confirmation-message">
                {% if order.isPaid() %}
                    Merci pour votre commande ! Votre paiement a été accepté. Un email de confirmation a été envoyé à <strong>{{ order.customerEmail }}</strong>.
                {% else %}
                    Votre commande a été créée mais le paiement n'a pas encore été finalisé. Vous recevrez un email de confirmation dès que le paiement sera validé.
                {% endif %}
            </p>

            <div class="order-reference">
                <span class="label">Numéro de commande :</span>
                <span class="value">{{ order.orderNumber }}</span>
            </div>

            {% if order.isPaid() %}
                <div class="payment-status paid">
                    <i class="fas fa-check-circle"></i> Paiement accepté
                </div>
            {% else %}
                <div class="payment-status pending">
                    <i class="fas fa-clock"></i> Paiement en attente
                </div>
            {% endif %}

            <div class="order-details-card">
                <h2><i class="fas fa-box"></i> Détails de la commande</h2>

                <div class="order-info-section">
                    <div class="info-row">
                        <span class="info-label">Client :</span>
                        <span class="info-value">{{ order.customerFirstName }} {{ order.customerLastName }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Email :</span>
                        <span class="info-value">{{ order.customerEmail }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Téléphone :</span>
                        <span class="info-value">{{ order.customerPhone }}</span>
                    </div>
                </div>

                <div class="order-info-section">
                    <h3><i class="fas fa-shipping-fast"></i> Adresse de livraison</h3>
                    <div class="address-block">
                        {{ order.shippingAddress.address }}<br>
                        {{ order.shippingAddress.postal_code }} {{ order.shippingAddress.city }}<br>
                        {{ order.shippingAddress.country }}
                    </div>
                </div>

                <div class="order-items">
                    <h3><i class="fas fa-shopping-bag"></i> Articles commandés</h3>
                    {% for item in order.items %}
                        <div class="order-item">
                            <div class="item-info">
                                <div class="item-name">{{ item.productName }}</div>
                                <div class="item-qty">Quantité : {{ item.quantity }}</div>
                            </div>
                            <div class="item-price">
                                {{ item.totalPrice|number_format(2, ',', ' ') }} €
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <div class="order-total">
                    <div class="total-row">
                        <span>Total</span>
                        <span class="total-amount">{{ order.totalAmount|number_format(2, ',', ' ') }} €</span>
                    </div>
                </div>
            </div>

            <div class="confirmation-actions">
                <a href="/" class="btn-home">
                    <i class="fas fa-home"></i> Retour à l'accueil
                </a>
                <button onclick="window.print()" class="btn-print">
                    <i class="fas fa-print"></i> Imprimer
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.confirmation-page {
    min-height: 80vh;
    padding: 4rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
}

.confirmation-card {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    text-align: center;
}

.confirmation-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn 0.5s ease;
}

.confirmation-icon i {
    font-size: 50px;
    color: white;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.confirmation-card h1 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.confirmation-message {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.order-reference {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #f8f9fa;
    border-radius: 50px;
    margin-bottom: 3rem;
}

.order-reference .label {
    color: #64748b;
    font-weight: 600;
}

.order-reference .value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
}

.order-details-card {
    text-align: left;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.order-details-card h2 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.order-details-card h2 i {
    color: var(--site-primary-color, #10b981);
}

.order-details-card h3 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 1.5rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.order-details-card h3 i {
    color: var(--site-primary-color, #10b981);
    font-size: 1rem;
}

.order-info-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.order-info-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.info-label {
    font-weight: 600;
    color: #64748b;
}

.info-value {
    color: #1e293b;
}

.address-block {
    padding: 1rem;
    background: white;
    border-radius: 8px;
    color: #475569;
    line-height: 1.8;
}

.order-items {
    margin-top: 1.5rem;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.item-info {
    flex: 1;
}

.item-name {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.item-qty {
    font-size: 0.9rem;
    color: #64748b;
}

.item-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--site-primary-color, #10b981);
}

.order-total {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.total-amount {
    color: var(--site-primary-color, #10b981);
}

.payment-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.payment-status.paid {
    background: #d1fae5;
    color: #065f46;
}

.payment-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.confirmation-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-home,
.btn-print {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-home {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.btn-home:hover {
    background: var(--site-primary-color-dark, #059669);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-print {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-print:hover {
    background: #cbd5e1;
}

@media (max-width: 768px) {
    .confirmation-card {
        padding: 2rem 1.5rem;
    }

    .confirmation-card h1 {
        font-size: 2rem;
    }

    .order-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .confirmation-actions {
        flex-direction: column;
    }

    .btn-home,
    .btn-print {
        width: 100%;
        justify-content: center;
    }
}

@media print {
    .confirmation-actions {
        display: none;
    }

    .confirmation-page {
        background: white;
    }

    .confirmation-card {
        box-shadow: none;
    }
}
</style>

<script>
// Vider le panier après confirmation
localStorage.removeItem('izibrick_cart');
</script>
{% endblock %}