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

{% block body %}
<section class="confirmation-page py-5">
    <div class="container">
        <div class="confirmation-card text-center mx-auto" style="max-width: 640px;">
            <div class="confirmation-icon mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary);">
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                    <polyline points="22 4 12 14.01 9 11.01"/>
                </svg>
            </div>

            <h1 class="confirmation-title mb-3">Commande confirmee !</h1>

            <p class="confirmation-reference mb-2">
                Reference : <strong>{{ order.reference }}</strong>
            </p>

            <p class="confirmation-text text-muted mb-4">
                {% if order.paymentMethod.value == 'stripe' %}
                    Votre paiement a ete enregistre. Vous recevrez un email de confirmation a
                    <strong>{{ order.customerEmail }}</strong>.
                {% else %}
                    Votre commande a ete enregistree. Un email de confirmation a ete envoye a
                    <strong>{{ order.customerEmail }}</strong>.
                    <br>Nous vous contacterons pour finaliser le paiement.
                {% endif %}
            </p>

            <div class="confirmation-summary mb-4">
                <h2 class="h5 mb-3">Recapitulatif</h2>

                {% for item in order.items %}
                <div class="d-flex justify-content-between mb-2">
                    <span>
                        {{ item.title }}
                        {% if item.variant %}<small class="text-muted">({{ item.variant }})</small>{% endif %}
                        <small class="text-muted">x{{ item.qty }}</small>
                    </span>
                    <span class="fw-semibold">{{ item.lineTotalTTC|number_format(2, ',', ' ') }} &euro;</span>
                </div>
                {% endfor %}

                <hr>
                <div class="d-flex justify-content-between">
                    <span class="fw-bold">Total TTC</span>
                    <span class="fw-bold" style="color: var(--primary); font-size: 1.2rem;">
                        {{ order.totalTTC|number_format(2, ',', ' ') }} &euro;
                    </span>
                </div>
            </div>

            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <a href="{{ path('app_product_index') }}" class="btn btn-primary">
                    Retour au catalogue
                </a>
                <a href="{{ path('app_home') }}" class="btn btn-outline-secondary">
                    Accueil
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}