{% extends 'layout/checkout.html.twig' %}
{% block title %}{% trans from 'meta' %}checkout.title{% endtrans %}{% endblock %}

{% block main %}
    {% set billing_address = cart.invoiceAddress ?: cart.deliveryAddress %}
    {% set delivery_address = cart.deliveryAddress %}
    <section class="bg-page py-10 sm:py-14">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div class="border-accent/20 rounded-sm border bg-surface shadow-sm">
                <div class="border-accent/10 bg-accent/10 border-b px-6 py-8 sm:px-10">
                    <div class="text-accent tracking-label uppercase">{{ 'checkout_design.success_badge'|trans }}</div>
                    <h1 class="text-foreground mt-3 font-serif text-3xl uppercase md:text-4xl">
                        {{ 'checkout_design.success_title'|trans }}
                    </h1>
                    <p class="text-foreground/75 mt-3 max-w-2xl text-sm sm:text-base">
                        {{ 'checkout_design.success_email_notice'|trans({
                            '%document%': document_label|trans|lower,
                            '%email%': cart.getEmail() ?? '-'
                        }) }}
                    </p>
                </div>

                <div class="px-6 py-8 sm:px-10">
                    <div class="grid gap-8 lg:grid-cols-order-summary">
                        <div class="space-y-6">
                            <div>
                                <h2 class="text-foreground font-serif text-xl uppercase">{{ 'checkout_design.success_summary'|trans }}</h2>
                                <div class="divide-accent/10 border-accent/15 mt-4 divide-y rounded-sm border">
                                    {% for line in cart.getPricing.lines %}
                                        <div class="flex items-start justify-between gap-4 px-4 py-4 text-sm">
                                            <div>
                                                <div class="text-foreground font-medium">{{ line.productName }}</div>
                                                <div class="text-foreground/60 mt-1">
                                                    {{ line.quantity }} x {{ line.variantFullName ?: line.typeName ?: line.unitLabel ?: '' }}
                                                </div>
                                                {% if line.optionName %}
                                                    <div class="text-foreground/60 mt-1 text-xs">
                                                        {{ 'shop.option_label'|trans }} : {{ line.optionName }}
                                                        {% if line.optionTotalTTC > 0 %}
                                                            · +{{ line.optionTotalTTC|price_format }} €
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="text-foreground font-medium whitespace-nowrap">
                                                {{ line.netTTC|price_format }} €
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="border-accent/15 rounded-sm border p-4">
                                <div class="grid gap-6 md:grid-cols-2">
                                    <div>
                                        <h3 class="text-foreground font-serif text-lg uppercase">{{ 'checkout_design.success_billing'|trans }}</h3>
                                        {% if billing_address %}
                                            <div class="text-foreground/75 mt-3 space-y-1 text-sm">
                                                <div>{{ billing_address.getName() }}</div>
                                                {% if billing_address.company %}<div>{{ billing_address.company }}</div>{% endif %}
                                                <div>{{ billing_address.street }}</div>
                                                <div>{{ billing_address.postal }} {{ billing_address.city }}</div>
                                                <div>{{ billing_address.country|country_name }}</div>
                                                <div>{{ billing_address.email }}</div>
                                                <div>{{ billing_address.phone }}</div>
                                            </div>
                                        {% else %}
                                            <div class="text-foreground/60 mt-3 text-sm">-</div>
                                        {% endif %}
                                    </div>

                                    <div>
                                        <h3 class="text-foreground font-serif text-lg uppercase">{{ 'checkout_design.success_delivery'|trans }}</h3>
                                        {% if delivery_address %}
                                            <div class="text-foreground/75 mt-3 space-y-1 text-sm">
                                                <div>{{ delivery_address.getName() }}</div>
                                                {% if delivery_address.company %}<div>{{ delivery_address.company }}</div>{% endif %}
                                                <div>{{ delivery_address.street }}</div>
                                                <div>{{ delivery_address.postal }} {{ delivery_address.city }}</div>
                                                <div>{{ delivery_address.country|country_name }}</div>
                                                <div>{{ delivery_address.email }}</div>
                                                <div>{{ delivery_address.phone }}</div>
                                            </div>
                                        {% else %}
                                            <div class="text-foreground/60 mt-3 text-sm">-</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="grid gap-6">
                                <div class="border-accent/15 rounded-sm border p-4">
                                    <h3 class="text-foreground font-serif text-lg uppercase">{{ 'checkout_design.success_payment'|trans }}</h3>
                                    <div class="text-foreground/75 mt-3 space-y-2 text-sm">
                                        <div>
                                            <span class="text-foreground font-medium">{{ 'checkout_design.paid_method'|trans }}:</span>
                                            {{ payment_method_label ? payment_method_label|trans : '-' }}
                                        </div>
                                        <div>
                                            <span class="text-foreground font-medium">{{ 'checkout_design.paid_at'|trans }}:</span>
                                            {{ cart.cartCheckout and cart.cartCheckout.payedAt ? cart.cartCheckout.payedAt|date('d/m/Y H:i') : '-' }}
                                        </div>
                                        {% if cart.deliveryMethod %}
                                            <div>
                                                <span class="text-foreground font-medium">{{ 'checkout_design.success_delivery_method'|trans }}:</span>
                                                {{ cart.deliveryMethod.name }}
                                            </div>
                                        {% endif %}
                                        <div>
                                            <span class="text-foreground font-medium">{{ 'checkout_design.success_order_number'|trans }}:</span>
                                            {{ cart.token }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <aside class="border-accent/15 bg-foreground rounded-sm border px-5 py-6 text-on-foreground">
                            <h2 class="font-serif text-xl uppercase">{{ 'checkout_design.payment_resume'|trans }}</h2>
                            <div class="mt-6 space-y-3 text-sm">
                                <div class="flex items-center justify-between">
                                    <span>{{ 'checkout_design.subtotal'|trans }}</span>
                                    <span>{{ cart.getPricing.subtotalTTC|price_format }} €</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span>{{ 'shop.total_shipping'|trans }}</span>
                                    <span>
                                        {% if cart.cartShipping %}
                                            {{ cart.cartShipping.amountTTC|price_format }} €
                                        {% else %}
                                            {{ 'checkout_design.free'|trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                <div class="flex items-center justify-between border-t border-on-foreground/10 pt-4 font-serif text-lg uppercase">
                                    <span>{{ 'shop.total_ttc'|trans }}</span>
                                    <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                </div>
                            </div>
                        </aside>
                    </div>

                    <div class="mt-8 flex flex-col gap-3 sm:flex-row">
                        <a href="{{ path('shop_purchase_order_download', { cartId: cart.id }) }}" class="border-foreground bg-foreground hover:bg-foreground/90 inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold text-on-foreground uppercase transition">
                            {{ download_document_label|trans }}
                        </a>
                        <a href="{{ path('shop') }}" class="border-accent bg-accent text-foreground inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold uppercase transition hover:bg-accent-soft">
                            {{ 'checkout_design.back_shop'|trans }}
                        </a>
                    </div>

                    {% if can_prompt_guest_account_creation %}
                        <div class="border-accent/20 mt-8 rounded-sm border bg-surface-muted p-6">
                            <div class="grid gap-5 lg:grid-cols-inline-action lg:items-center">
                                <div>
                                    <div class="text-accent tracking-label uppercase">{{ 'checkout_design.guest_account_badge'|trans }}</div>
                                    <h2 class="text-foreground mt-3 font-serif text-2xl uppercase">
                                        {{ 'checkout_design.guest_account_title'|trans }}
                                    </h2>
                                    <p class="text-foreground/75 mt-3 max-w-2xl text-sm sm:text-base">
                                        {{ 'checkout_design.guest_account_notice'|trans }}
                                    </p>
                                </div>
                                <div>
                                    <a href="{{ path('shop_checkout_success_register', { cartId: cart.id }) }}" class="border-foreground bg-foreground hover:bg-foreground/90 inline-flex items-center justify-center border px-5 py-3 text-sm font-semibold text-on-foreground uppercase transition">
                                        {{ 'checkout_design.guest_account_cta'|trans }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
