{% 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 not payment_method.paymentOnline %}
    {% set is_paid = cart.cartCheckout and cart.cartCheckout.payedAt %}
    {% set order_date = is_paid
        ? cart.cartCheckout.payedAt
        : (cart.cartCheckout and cart.cartCheckout.orderedAt
        ? cart.cartCheckout.orderedAt
        : cart.updatedAt) %}

    <section class="min-h-[calc(100vh-13rem)] bg-[#f7f2ea] py-10 sm:py-14">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-sm border border-[#e5d8c7] bg-white shadow-[0_18px_45px_rgba(61,43,23,0.08)]">
                <div class="border-b border-[#efe3d4] bg-[#fcfaf7] px-6 py-8 sm:px-8">
                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <p class="text-xs tracking-[0.4em] text-[#9d7c47] uppercase">{{ 'account_page.eyebrow'|trans }}</p>
                            <h1 class="mt-3 font-serif text-3xl text-[#201917] md:text-4xl">
                                {{ 'account_page.order.heading'|trans({ '%reference%': cart.token }) }}
                            </h1>
                            <p class="mt-3 max-w-2xl text-sm leading-6 text-[#5d4b41]">
                                {{ 'account_page.order.description'|trans({
                                    '%document%': document_label|trans|lower
                                }) }}
                            </p>
                        </div>

                        <span class="inline-flex items-center self-start border px-3 py-1.5 text-xs font-medium uppercase tracking-[0.16em] {{ is_paid ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-amber-200 bg-amber-50 text-amber-700' }}">
                            {{ (is_paid ? 'account_page.orders.paid' : 'account_page.orders.unpaid')|trans }}
                        </span>
                    </div>
                </div>

                <div class="px-6 py-8 sm:px-8">
                    <div class="grid gap-8 lg:grid-cols-[1.3fr_0.7fr]">
                        <div class="space-y-6">
                            <div>
                                <h2 class="font-serif text-xl text-[#201917]">{{ 'checkout_design.success_summary'|trans }}</h2>
                                <div class="mt-4 divide-y divide-[#efe3d4] rounded-sm border border-[#eadfcf] bg-white">
                                    {% for line in cart.getPricing.lines %}
                                        <div class="flex items-start justify-between gap-4 px-4 py-4 text-sm">
                                            <div>
                                                <div class="font-medium text-[#201917]">{{ line.productName }}</div>
                                                <div class="mt-1 text-[#5d4b41]">
                                                    {{ line.quantity }} x {{ line.variantFullName ?: line.typeName ?: line.unitLabel ?: '' }}
                                                </div>
                                            </div>
                                            <div class="font-medium whitespace-nowrap text-[#201917]">
                                                {{ line.netTTC|price_format }} €
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="rounded-sm border border-[#eadfcf] bg-white p-5">
                                <div class="grid gap-6 md:grid-cols-2">
                                    <div>
                                        <h3 class="font-serif text-lg text-[#201917]">{{ 'checkout_design.success_billing'|trans }}</h3>
                                        {% if billing_address %}
                                            <div class="mt-3 space-y-1 text-sm text-[#5d4b41]">
                                                <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-3 text-sm text-[#5d4b41]">-</div>
                                        {% endif %}
                                    </div>

                                    <div>
                                        <h3 class="font-serif text-lg text-[#201917]">{{ 'checkout_design.success_delivery'|trans }}</h3>
                                        {% if delivery_address %}
                                            <div class="mt-3 space-y-1 text-sm text-[#5d4b41]">
                                                <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-3 text-sm text-[#5d4b41]">-</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-sm border border-[#eadfcf] bg-white p-5">
                                <h3 class="font-serif text-lg text-[#201917]">{{ 'checkout_design.success_payment'|trans }}</h3>
                                <div class="mt-3 grid gap-3 text-sm text-[#5d4b41] sm:grid-cols-2">
                                    <div>
                                        <span class="font-medium text-[#201917]">{{ 'checkout_design.paid_method'|trans }}:</span>
                                        {{ payment_method_label ? payment_method_label|trans : '-' }}
                                    </div>
                                    <div>
                                        <span class="font-medium text-[#201917]">
                                            {{ (is_paid ? 'checkout_design.paid_at' : 'account_page.order.ordered_at')|trans }}:
                                        </span>
                                        {{ order_date ? order_date|date('d/m/Y H:i') : '-' }}
                                    </div>
                                    {% if cart.deliveryMethod %}
                                        <div>
                                            <span class="font-medium text-[#201917]">{{ 'checkout_design.success_delivery_method'|trans }}:</span>
                                            {{ cart.deliveryMethod.name }}
                                        </div>
                                    {% endif %}
                                    <div>
                                        <span class="font-medium text-[#201917]">{{ 'checkout_design.success_order_number'|trans }}:</span>
                                        {{ cart.token }}
                                    </div>
                                </div>

                                {% if is_offline_payment %}
                                    <div class="mt-5 rounded-sm border border-[#eadfcf] bg-[#fcfaf7] px-4 py-4 text-sm leading-6 text-[#5d4b41]">
                                        <div class="text-xs tracking-[0.18em] text-[#9d7c47] uppercase">{{ '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 %}
                            </div>
                        </div>

                        <aside class="rounded-sm border border-[#201917] bg-[#201917] px-5 py-6 text-white">
                            <h2 class="font-serif text-xl">{{ '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-white/10 pt-4 font-serif text-lg">
                                    <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('app_account_order_download', { cartId: cart.id }) }}" class="inline-flex items-center justify-center border border-[#201917] bg-[#201917] px-5 py-3 text-sm font-semibold tracking-[0.16em] text-white uppercase transition hover:border-[#9d7c47] hover:bg-[#9d7c47]">
                            {{ 'checkout_design.download_order_pdf'|trans }}
                        </a>
                        <a href="{{ path('app_account') }}" class="inline-flex items-center justify-center border border-[#9d7c47] bg-[#9d7c47] px-5 py-3 text-sm font-semibold tracking-[0.16em] text-[#201917] uppercase transition hover:border-[#b89657] hover:bg-[#b89657]">
                            {{ 'account_page.order.back_account'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
