{% 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="relative min-h-screen overflow-hidden bg-background py-12 md:py-16">
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[32rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.14),transparent_64%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1280px] px-4 md:px-8">
            <header class="mx-auto max-w-3xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'checkout_design.success_badge'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'checkout_design.success_title'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-primary/72">
                    {{ 'checkout_design.success_email_notice'|trans({
                        '%document%': document_label|trans|lower,
                        '%email%': cart.getEmail() ?? '-'
                    }) }}
                </p>
            </header>

            <div class="mt-10 border border-primary/10 bg-surface-container-low p-4 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="grid gap-8 border border-primary/8 bg-white/70 p-5 md:p-8 lg:grid-cols-[minmax(0,1fr)_20rem]">
                    <div class="min-w-0 space-y-7">
                        <section>
                            <h2 class="font-display text-[26px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                {{ 'checkout_design.success_summary'|trans }}
                            </h2>

                            <div class="mt-4 divide-y divide-primary/8 border border-primary/10 bg-white">
                                {% for line in cart.getPricing.lines %}
                                    <div class="flex items-start justify-between gap-4 px-4 py-4 text-[14px] leading-6">
                                        <div class="min-w-0">
                                            <div class="font-medium text-primary">{{ line.productName }}</div>
                                            <div class="mt-1 text-primary/60">
                                                {{ line.quantity }} x {{ line.variantFullName ?: line.typeName ?: line.unitLabel ?: '' }}
                                            </div>
                                            {% if line.optionName %}
                                                <div class="mt-1 text-[12px] text-primary/60">
                                                    {{ 'shop.option_label'|trans }} : {{ line.optionName }}
                                                    {% if line.optionTotalTTC > 0 %}
                                                        · +{{ line.optionTotalTTC|price_format }} €
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="shrink-0 font-medium text-primary">
                                            {{ line.netTTC|price_format }} €
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </section>

                        <section class="border border-primary/10 bg-white p-5">
                            <div class="grid gap-7 md:grid-cols-2">
                                <div>
                                    <h3 class="font-display text-[22px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                        {{ 'checkout_design.success_billing'|trans }}
                                    </h3>
                                    {% if billing_address %}
                                        <div class="mt-4 space-y-1 text-[14px] leading-6 text-primary/72">
                                            <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 class="break-all">{{ billing_address.email }}</div>
                                            <div>{{ billing_address.phone }}</div>
                                        </div>
                                    {% else %}
                                        <div class="mt-4 text-[14px] text-primary/60">-</div>
                                    {% endif %}
                                </div>

                                <div>
                                    <h3 class="font-display text-[22px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                        {{ 'checkout_design.success_delivery'|trans }}
                                    </h3>
                                    {% if delivery_address %}
                                        <div class="mt-4 space-y-1 text-[14px] leading-6 text-primary/72">
                                            <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 class="break-all">{{ delivery_address.email }}</div>
                                            <div>{{ delivery_address.phone }}</div>
                                        </div>
                                    {% else %}
                                        <div class="mt-4 text-[14px] text-primary/60">-</div>
                                    {% endif %}
                                </div>
                            </div>
                        </section>

                        <section class="border border-primary/10 bg-white p-5">
                            <h3 class="font-display text-[22px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                {{ 'checkout_design.success_payment'|trans }}
                            </h3>
                            <div class="mt-4 space-y-2 text-[14px] leading-6 text-primary/72">
                                <div>
                                    <span class="font-medium text-primary">{{ 'checkout_design.paid_method'|trans }}:</span>
                                    {{ payment_method_label ? payment_method_label|trans : '-' }}
                                </div>
                                <div>
                                    <span class="font-medium text-primary">{{ '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="font-medium text-primary">{{ 'checkout_design.success_delivery_method'|trans }}:</span>
                                        {{ cart.deliveryMethod.name }}
                                    </div>
                                {% endif %}
                                <div>
                                    <span class="font-medium text-primary">{{ 'checkout_design.success_order_number'|trans }}:</span>
                                    {{ cart.token }}
                                </div>
                            </div>
                        </section>
                    </div>

                    <aside class="h-fit border border-primary-container bg-primary-container px-5 py-6 text-white lg:sticky lg:top-6">
                        <h2 class="font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto]">
                            {{ 'checkout_design.payment_resume'|trans }}
                        </h2>
                        <div class="mt-6 space-y-3 text-[14px]">
                            <div class="flex items-center justify-between gap-4">
                                <span>{{ 'checkout_design.subtotal'|trans }}</span>
                                <span>{{ cart.getPricing.subtotalTTC|price_format }} €</span>
                            </div>
                            <div class="flex items-center justify-between gap-4">
                                <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 gap-4 border-t border-white/15 pt-4 font-display text-[20px] font-semibold [font-optical-sizing:auto]">
                                <span>{{ 'shop.total_ttc'|trans }}</span>
                                <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                            </div>
                        </div>
                    </aside>
                </div>

                <div class="mt-5 flex flex-col gap-3 border border-primary/8 bg-white/70 p-5 sm:flex-row md:p-7">
                    <a href="{{ path('shop_purchase_order_download', { cartId: cart.id }) }}" class="inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary bg-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:border-secondary hover:bg-secondary">
                        {{ download_document_label|trans }}
                    </a>
                    <a href="{{ path('shop') }}" class="inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-secondary hover:text-secondary">
                        {{ 'checkout_design.back_shop'|trans }}
                    </a>
                </div>

                {% if can_prompt_guest_account_creation %}
                    <div class="mt-5 border border-primary/10 bg-white/70 p-5 md:p-7">
                        <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
                            <div>
                                <div class="font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-secondary">
                                    {{ 'checkout_design.guest_account_badge'|trans }}
                                </div>
                                <h2 class="mt-3 font-display text-[26px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                    {{ 'checkout_design.guest_account_title'|trans }}
                                </h2>
                                <p class="mt-3 max-w-2xl text-[15px] leading-7 text-primary/72">
                                    {{ 'checkout_design.guest_account_notice'|trans }}
                                </p>
                            </div>
                            <div>
                                <a href="{{ path('shop_checkout_success_register', { cartId: cart.id }) }}" class="inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary bg-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:border-secondary hover:bg-secondary">
                                    {{ 'checkout_design.guest_account_cta'|trans }}
                                </a>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock %}
