@php use App\Support\Money; @endphp

<x-layouts.app :over-light="true" title="Commande enregistrée">
    <section class="mx-auto max-w-4xl px-5 pt-36 pb-24 text-center sm:px-10 lg:pt-44 xl:pt-52">
        <p class="kicker text-laiton">Commande {{ $order->number }}</p>
        <h1 class="mt-6 font-serif text-[clamp(2.6rem,5vw,4.6rem)] leading-none">Merci, c'est noté.</h1>

        @if ($order->payment_status === App\Enums\PaymentStatus::Paid)
            <p class="mx-auto mt-8 max-w-xl font-serif text-2xl text-laiton">Paiement reçu — merci !</p>
        @endif
        @if ($instructions)
            <p class="mx-auto mt-8 max-w-xl text-lg leading-relaxed text-gris">{{ $instructions }}</p>
        @endif
        @if ($order->shippingMethod?->description)
            <div class="prose-maison mx-auto mt-6 max-w-xl text-left">{!! $order->shippingMethod->description !!}</div>
        @endif
        <p class="mt-4 text-gris">Un récapitulatif vient de vous être envoyé à <strong class="font-medium text-encre">{{ $order->email }}</strong>.</p>

        <div class="mx-auto mt-16 max-w-xl bg-ivoire-2 p-8 text-left lg:p-10">
            <ul class="space-y-3 text-sm">
                @foreach ($order->items as $item)
                    <li class="ligne-carte"><span>{{ $item->quantity }} × {{ $item->product_name }}{{ $item->variant_name ? ' — '.$item->variant_name : '' }}</span><span class="tabular-nums">{{ Money::format($item->total) }}</span></li>
                @endforeach
                <li class="ligne-carte"><span>{{ $order->shipping_method }}</span><span class="tabular-nums">{{ (float) $order->shipping_total > 0 ? Money::format($order->shipping_total) : 'Offert' }}</span></li>
            </ul>
            <p class="ligne-carte mt-6 border-t border-encre/20 pt-6 font-serif text-2xl"><span>Total TTC</span><span class="tabular-nums">{{ Money::format($order->total) }}</span></p>
        </div>

        <div class="mt-12 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
            <a href="{{ route('account.order', $order) }}" class="bouton bouton-plein">Suivre ma commande</a>
            <a href="{{ route('shop.index') }}" class="lien-filet">Retour à la boutique</a>
        </div>
    </section>
</x-layouts.app>