@extends('storefront.layout')

@section('title', 'Order received')

@section('content')
<section class="mx-auto max-w-3xl px-6 py-16 lg:px-8">
    <div class="rounded-3xl border border-emerald-200 bg-white p-6 shadow-xl shadow-stone-900/5 sm:p-8">
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg>
        </div>
        <p class="mt-6 text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Order received</p>
        <h1 class="mt-2 text-3xl font-semibold text-stone-950">{{ $order->number }}</h1>
        <p class="mt-3 text-stone-600">
            We sent the order details to <span class="break-all">{{ $order->buyer_email }}</span>. New buyers receive a separate secure link to create a Retail Partner password and open this order. Existing account holders receive a secure order link and keep their current password.
        </p>

        <dl class="mt-8 divide-y divide-stone-100 rounded-2xl border border-stone-200">
            <div class="flex justify-between gap-4 px-5 py-4">
                <dt class="text-sm text-stone-500">Payment method</dt>
                <dd class="text-right text-sm font-semibold text-stone-900">{{ $order->payment_method->getLabel() }}</dd>
            </div>
            <div class="flex justify-between gap-4 px-5 py-4">
                <dt class="text-sm text-stone-500">Status</dt>
                <dd class="text-right text-sm font-semibold text-stone-900">{{ $order->status->getLabel() }}</dd>
            </div>
            <div class="flex justify-between gap-4 px-5 py-4">
                <dt class="text-sm text-stone-500">Total</dt>
                <dd class="text-right text-lg font-semibold text-stone-950">${{ number_format((float) $order->grand_total, 2) }} {{ $order->currency }}</dd>
            </div>
        </dl>

        @if ($order->payment_method === \App\Enums\PaymentMethod::Ach)
            <div class="mt-6 rounded-2xl bg-stone-50 p-5 text-sm leading-6 text-stone-700">
                <p class="font-semibold text-stone-950">ACH transfer instructions</p>
                <p class="mt-2">Use order {{ $order->number }} in the transfer memo. Full bank details were sent by email.</p>
            </div>
        @elseif ($order->payment_method === \App\Enums\PaymentMethod::Wire)
            <div class="mt-6 rounded-2xl bg-stone-50 p-5 text-sm leading-6 text-stone-700">
                <p class="font-semibold text-stone-950">Wire transfer instructions</p>
                <p class="mt-2">Use order {{ $order->number }} in the transfer reference. Full bank details were sent by email.</p>
            </div>
        @endif

        <a href="{{ route('storefront.catalog') }}" class="mt-8 inline-flex rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white hover:bg-emerald-800">Continue shopping</a>
    </div>
</section>
@endsection