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

{% block main %}
    {% set pricing = cart.getPricing %}
    {% set checkout = cart.cartCheckout %}
    {% set payment_method = cart.paymentMethod %}
    {% set payment_configuration = payment_method ? payment_method.configuration : {} %}
    {% set payment_method_label = payment_configuration['name'] ?? payment_page_title_key|trans %}
    {% set payment_text = payment_configuration['text'] ?? null %}
    {% set order_date = checkout and checkout.orderedAt ? checkout.orderedAt : cart.updatedAt %}

    <section class="bg-light py-10 sm:py-14">
        <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-sm border border-gold/20 bg-white shadow-sm">
                <div class="border-b border-gold/10 bg-gold/10 px-6 py-8 sm:px-10">
                    <div class="uppercase tracking-[0.14em] text-gold">{{ 'checkout_design.offline_badge'|trans }}</div>
                    <h1 class="mt-3 font-serif text-3xl uppercase text-dark sm:text-4xl">
                        {{ 'checkout_design.offline_title'|trans }}
                    </h1>
                    <p class="mt-3 max-w-3xl text-sm text-dark/75 sm:text-base">
                        {{ 'checkout_design.offline_notice'|trans({
                            '%reference%': cart.token,
                            '%payment_method%': payment_method_label
                        }) }}
                    </p>
                </div>

                <div class="px-6 py-8 sm:px-10">
                    <div class="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
                        <div class="space-y-6">
                            <div class="rounded-sm border border-gold/15 p-5">
                                <h2 class="font-serif text-xl uppercase text-dark">{{ 'checkout_design.offline_instructions'|trans }}</h2>
                                <div class="mt-4 space-y-3 text-sm leading-6 text-dark/75">
                                    <div>
                                        <span class="font-medium text-dark">{{ 'checkout_design.paid_method'|trans }}:</span>
                                        {{ payment_method_label }}
                                    </div>
                                    <div>
                                        <span class="font-medium text-dark">{{ 'account_page.order.ordered_at'|trans }}:</span>
                                        {{ order_date ? order_date|date('d/m/Y H:i') : '-' }}
                                    </div>
                                    <div>
                                        <span class="font-medium text-dark">{{ 'checkout_design.success_order_number'|trans }}:</span>
                                        {{ cart.token }}
                                    </div>
                                    {% if cart.deliveryMethod %}
                                        <div>
                                            <span class="font-medium text-dark">{{ 'checkout_design.success_delivery_method'|trans }}:</span>
                                            {{ cart.deliveryMethod.name }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="mt-5 rounded-sm border border-gold/15 bg-light px-4 py-4 text-sm leading-6 text-dark/80">
                                    {% if payment_text %}
                                        {{ payment_text|raw }}
                                    {% else %}
                                        <p>{{ 'checkout_design.offline_payment_description_fallback'|trans }}</p>
                                    {% endif %}
                                </div>
                            </div>

                            <div>
                                <h2 class="font-serif text-xl uppercase text-dark">{{ 'checkout_design.success_summary'|trans }}</h2>
                                <div class="mt-4 divide-y divide-gold/10 rounded-sm border border-gold/15">
                                    {% if pricing and pricing.lines is not empty %}
                                        {% for line in pricing.lines %}
                                            <div class="flex items-start justify-between gap-4 px-4 py-4 text-sm">
                                                <div>
                                                    <div class="font-medium text-dark">{{ line.productName }}</div>
                                                    <div class="mt-1 text-dark/60">
                                                        {{ line.quantity }} x {{ line.variantFullName ?: line.typeName ?: line.unitLabel ?: '' }}
                                                    </div>
                                                </div>
                                                <div class="whitespace-nowrap font-medium text-dark">
                                                    {% if line.isPromoGift or line.netTTC <= 0 %}
                                                        {{ 'shop.offered'|trans }}
                                                    {% else %}
                                                        {{ line.netTTC|price_format }} €
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        {% for item in cart.items %}
                                            <div class="flex items-start justify-between gap-4 px-4 py-4 text-sm">
                                                <div>
                                                    <div class="font-medium text-dark">{{ item.variant.product.name }}</div>
                                                    <div class="mt-1 text-dark/60">
                                                        {{ item.quantity }} x {{ item.variant.name ?: item.variant.type.name ?: '' }}
                                                    </div>
                                                </div>
                                                <div class="whitespace-nowrap font-medium text-dark">
                                                    {% if item.totalFinalTTC <= 0 %}
                                                        {{ 'shop.offered'|trans }}
                                                    {% else %}
                                                        {{ item.totalFinalTTC|price_format }} €
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <aside class="rounded-sm border border-gold/15 bg-dark px-5 py-6 text-white">
                            <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>{{ pricing ? pricing.subtotalTTC|price_format : cart.total|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 uppercase">
                                    <span>{{ 'checkout_design.total_ttc'|trans }}</span>
                                    <span>{{ pricing ? pricing.totalTTC|price_format : cart.total|price_format }} €</span>
                                </div>
                            </div>

                            <a href="{{ path('shop') }}" class="mt-8 inline-flex w-full items-center justify-center border border-gold bg-gold px-5 py-3 text-sm font-semibold uppercase text-dark transition hover:bg-[#c0af86]">
                                {{ 'checkout_design.back_shop'|trans }}
                            </a>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
