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

{% block title %}{{ 'account_page.order.page_title'|trans }}{% endblock %}

{% block main %}
    {% set billing_address = cart.invoiceAddress ?: cart.deliveryAddress %}
    {% set delivery_address = cart.deliveryAddress %}
    {% set payment_method = cart.paymentMethod ?: (cart.cartCheckout ? cart.cartCheckout.paymentMethod : null) %}
    {% set payment_configuration = payment_method ? payment_method.configuration : {} %}
    {% set payment_text = payment_configuration['text'] ?? null %}
    {% set is_offline_payment = payment_method and payment_method.checkoutOfflineMethod %}
    {% set is_paid = payment_state.code == 'paid' %}
    {% set order_date = is_paid
        ? cart.cartCheckout.payedAt
        : (cart.cartCheckout and cart.cartCheckout.orderedAt
            ? cart.cartCheckout.orderedAt
            : cart.updatedAt) %}

    <section class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[30rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_64%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <div class="mx-auto max-w-4xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'account_page.eyebrow'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[28px] leading-[1.04] font-semibold [font-optical-sizing:auto] text-primary md:text-[38px]">
                    {{ 'account_page.order.heading'|trans({ '%reference%': cart.token }) }}
                </h1>
                <p class="mx-auto mt-4 max-w-3xl text-[15px] leading-7 text-primary/72">
                    {{ 'account_page.order.description'|trans({ '%document%': document_label|trans|lower }) }}
                </p>
            </div>

            <div class="mx-auto mt-10 max-w-[1280px] p-0 md:border md:border-primary/10 md:bg-surface-container-low md:p-7 md:shadow-[0_20px_60px_rgba(51,38,28,0.06)]">
                <div class="bg-white/70 md:border md:border-primary/8">
                    <div class="flex flex-col gap-5 border-b border-primary/8 px-5 py-6 md:px-8 md:py-8 lg:flex-row lg:items-start lg:justify-between">
                        <div class="max-w-3xl">
                            <p class="text-[15px] leading-7 text-primary/72">
                                {{ 'account_page.order.description'|trans({ '%document%': document_label|trans|lower }) }}
                            </p>
                        </div>

                        <span class="inline-flex items-center self-start border px-2.5 py-1 font-label text-[10px] font-semibold uppercase tracking-[0.16em]
                            {% if payment_state.code == 'paid' %}
                                border-emerald-200 bg-emerald-50 text-emerald-700
                            {% elseif payment_state.code in ['failed', 'canceled'] %}
                                border-red-200 bg-red-50 text-red-700
                            {% else %}
                                border-amber-200 bg-amber-50 text-amber-700
                            {% endif %}
                        ">
                            {{ payment_state.label_key|trans }}
                        </span>
                    </div>

                    <div class="grid gap-8 px-5 py-6 md:px-8 md:py-8 lg:grid-cols-[minmax(0,1fr)_360px]">
                        <div class="min-w-0 space-y-6">
                            <a
                                href="{{ path('shop') }}"
                                class="inline-flex items-center gap-2 border border-primary/15 bg-white px-4 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-primary hover:bg-primary hover:text-white"
                            >
                                <span aria-hidden="true">&larr;</span>
                                {{ 'shop.product.back_to_shop'|trans }}
                            </a>

                            <section class="border border-primary/10 bg-white/70 p-5">
                                <h2 class="font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                    {{ 'checkout_design.success_summary'|trans }}
                                </h2>

                                <div class="mt-5 divide-y divide-primary/8 border border-primary/8 bg-white/70">
                                    {% 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/72">
                                                    {{ line.quantity }} x {{ line.variantFullName ?: line.typeName ?: line.unitLabel ?: '' }}
                                                </div>
                                                {% if line.optionName %}
                                                    <div class="mt-1 text-[12px] text-primary/55">
                                                        {{ '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/70 p-5">
                                <div class="grid gap-6 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>{{ billing_address.email }}</div>
                                                <div>{{ billing_address.phone }}</div>
                                            </div>
                                        {% else %}
                                            <div class="mt-4 text-[14px] text-primary/55">-</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>{{ delivery_address.email }}</div>
                                                <div>{{ delivery_address.phone }}</div>
                                            </div>
                                        {% else %}
                                            <div class="mt-4 text-[14px] text-primary/55">-</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </section>

                            <section class="border border-primary/10 bg-white/70 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 grid gap-4 text-[14px] leading-6 text-primary/72 sm:grid-cols-2">
                                    <div>
                                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                            {{ 'checkout_design.paid_method'|trans }}
                                        </div>
                                        <div class="mt-1 text-primary">{{ payment_method_label ? payment_method_label|trans : '-' }}</div>
                                    </div>
                                    <div>
                                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                            {{ (is_paid ? 'checkout_design.paid_at' : 'account_page.order.ordered_at')|trans }}
                                        </div>
                                        <div class="mt-1 text-primary">{{ order_date ? order_date|date('d/m/Y H:i') : '-' }}</div>
                                    </div>
                                    {% if cart.deliveryMethod %}
                                        <div>
                                            <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                {{ 'checkout_design.success_delivery_method'|trans }}
                                            </div>
                                            <div class="mt-1 text-primary">{{ cart.deliveryMethod.name }}</div>
                                        </div>
                                    {% endif %}
                                    <div>
                                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                            {{ 'checkout_design.success_order_number'|trans }}
                                        </div>
                                        <div class="mt-1 text-primary">{{ cart.token }}</div>
                                    </div>
                                </div>

                                {% if is_offline_payment %}
                                    <div class="mt-5 border border-primary/8 bg-background/50 px-4 py-4 text-[14px] leading-6 text-primary/72">
                                        <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                            {{ 'checkout_design.offline_instructions'|trans }}
                                        </div>
                                        <div class="mt-3">
                                            {% if payment_text %}
                                                {{ payment_text|raw }}
                                            {% else %}
                                                <p>{{ 'checkout_design.offline_payment_description_fallback'|trans }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            </section>
                        </div>

                        <aside class="space-y-5">
                            <section class="border border-primary/10 bg-[#f7efe8] px-5 py-6 text-primary">
                                <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] leading-6">
                                    <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-primary/10 pt-4 font-display text-[22px] font-semibold [font-optical-sizing:auto]">
                                        <span>{{ 'shop.total_ttc'|trans }}</span>
                                        <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                    </div>
                                </div>
                            </section>

                            <div class="flex flex-col gap-3">
                                <a
                                    href="{{ path('app_account_order_download', { cartId: cart.id }) }}"
                                    class="inline-flex min-h-[46px] items-center justify-center bg-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary"
                                >
                                    {{ download_document_label|trans }}
                                </a>
                                <a
                                    href="{{ path('shop') }}"
                                    class="inline-flex min-h-[46px] items-center justify-center border border-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-secondary hover:text-secondary"
                                >
                                    {{ 'shop.product.back_to_shop'|trans }}
                                </a>
                                {% if cart.withdrawalRequest %}
                                    <span class="inline-flex min-h-[46px] items-center justify-center border border-emerald-700/30 bg-emerald-50 px-5 py-3 text-center font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-emerald-800">
                                        {{ 'withdrawal.account.already_submitted'|trans({ '%date%': cart.withdrawalRequest.submittedAt|date('d/m/Y H:i') }) }}
                                    </span>
                                {% else %}
                                    <a
                                        href="{{ path('shop_withdrawal', { reference: cart.token }) }}"
                                        class="inline-flex min-h-[46px] items-center justify-center border border-primary px-5 py-3 text-center font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-secondary hover:text-secondary"
                                    >
                                        {{ 'withdrawal.access_link'|trans }}
                                    </a>
                                {% endif %}
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
