@extends('storefront.layout')

@section('title', 'Checkout')

@section('content')
<style>[x-cloak]{display:none!important}</style>
<section class="max-w-5xl mx-auto px-6 lg:px-8 py-12">
    <h1 class="text-3xl font-semibold tracking-tight">Checkout</h1>
    <p class="mt-2 text-stone-600">Review your order, choose how you'll pay, and we'll send payment instructions by email.</p>

    @foreach ($notices as $n)
        <div class="mt-4 rounded-md bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-800">{{ $n }}</div>
    @endforeach

    @if ($errors->any())
        <div class="mt-4 rounded-md bg-rose-50 border border-rose-200 px-4 py-3 text-sm text-rose-800">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @php
        $defaultShippingAddress = $shippingAddresses->firstWhere('is_default', true) ?? $shippingAddresses->first();
        $selectedShippingAddressId = (string) old('shipping_address_id', $defaultShippingAddress?->id ?? '');
        $shippingAddressOptions = $shippingAddresses->map(fn ($addr) => [
            'id' => $addr->id,
            'contact_name' => $addr->contact_name ?? $customer->company_name,
            'phone' => $addr->phone,
            'line1' => $addr->line1,
            'line2' => $addr->line2,
            'city' => $addr->city,
            'state' => $addr->state,
            'postal_code' => $addr->postal_code,
            'country_code' => $addr->country_code,
            'is_default' => (bool) $addr->is_default,
        ])->values();
    @endphp

    <form method="POST"
          action="{{ route('storefront.checkout.place') }}"
          class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(390px,420px)]"
          x-data="checkoutShipping({
              selectedShippingAddressId: {{ \Illuminate\Support\Js::from($selectedShippingAddressId) }},
              quoteEndpoint: {{ \Illuminate\Support\Js::from(route('storefront.checkout.shipping-rate')) }},
              ordersUrl: {{ \Illuminate\Support\Js::from(route('storefront.orders')) }},
              csrf: {{ \Illuminate\Support\Js::from(csrf_token()) }},
              subtotal: {{ \Illuminate\Support\Js::from((float) $cart->subtotal()) }},
              promoCode: {{ \Illuminate\Support\Js::from((string) old('promo_code', '')) }}
          })"
          x-init="init()"
          @shipping-address-selected="selectAddress($event.detail.id)"
          @submit.prevent="handleSubmit($event)">
        @csrf
        <input type="hidden" name="idempotency_key" value="{{ old('idempotency_key', $idempotencyKey) }}">
        <input type="hidden" name="shipping_rate_key" :value="selectedRateKey">

        <div class="space-y-8">

            {{-- Shipping --}}
            <div class="rounded-xl border border-stone-200 bg-white p-6"
                 x-data="checkoutAddressBook({
                    addresses: {{ \Illuminate\Support\Js::from($shippingAddressOptions) }},
                    selected: {{ \Illuminate\Support\Js::from($selectedShippingAddressId) }},
                    endpoint: {{ \Illuminate\Support\Js::from(route('storefront.checkout.address.store')) }},
                    destroyBase: {{ \Illuminate\Support\Js::from($canManageAddresses ? url('/account/addresses') : null) }},
                    canDelete: {{ \Illuminate\Support\Js::from($canManageAddresses) }},
                    csrf: {{ \Illuminate\Support\Js::from(csrf_token()) }}
                 })">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold text-stone-900">Shipping address</h2>
                        <p class="mt-1 text-sm text-stone-500">Choose an address or add a new one.</p>
                    </div>
                    <button type="button"
                            @click="open = !open"
                            class="inline-flex items-center gap-2 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-800 transition hover:bg-emerald-100">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                        </svg>
                        Add address
                    </button>
                </div>

                <template x-if="success">
                    <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800" x-text="success"></div>
                </template>

                <template x-if="addresses.length === 0">
                    <div class="mt-4 rounded-xl border border-dashed border-emerald-300 bg-emerald-50/50 px-4 py-5 text-sm text-stone-700">
                        No shipping address on file. Add one here to continue checkout.
                    </div>
                </template>

                <div class="mt-4 space-y-2" x-show="addresses.length > 0">
                    <template x-for="address in addresses" :key="address.id">
                        <div class="flex cursor-pointer items-start gap-3 rounded-xl border border-stone-200 p-3 transition hover:bg-stone-50"
                             :class="String(selected) === String(address.id) ? 'border-emerald-400 bg-emerald-50/60 ring-1 ring-emerald-200' : ''"
                             @click="selected = String(address.id); $dispatch('shipping-address-selected', { id: selected })">
                            <input type="radio"
                                   name="shipping_address_id"
                                   :value="address.id"
                                   x-model="selected"
                                   @change="$dispatch('shipping-address-selected', { id: selected })"
                                   required
                                   class="mt-1">
                            <div class="min-w-0 flex-1 text-sm">
                                <div class="font-medium text-stone-900" x-text="address.contact_name"></div>
                                <div class="text-stone-600">
                                    <span x-text="address.line1"></span><template x-if="address.line2"><span>, <span x-text="address.line2"></span></span></template>
                                </div>
                                <div class="text-stone-600">
                                    <span x-text="address.city"></span>, <span x-text="address.state"></span> <span x-text="address.postal_code"></span> - <span x-text="address.country_code"></span>
                                </div>
                            </div>
                            @if ($canManageAddresses)
                                <button type="button"
                                        @click.stop="confirmDelete(address)"
                                        class="rounded-full p-2 text-stone-300 transition hover:bg-rose-50 hover:text-rose-600"
                                        aria-label="Delete address">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166M19.228 5.79 18.16 19.673A2.25 2.25 0 0 1 15.916 21H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .563c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                                    </svg>
                                </button>
                            @endif
                        </div>
                    </template>
                </div>

                <div x-show="open"
                     x-transition
                     @keydown.enter.prevent
                     class="mt-5 rounded-2xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-5"
                     style="display:none">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h3 class="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-800">New shipping address</h3>
                            <p class="mt-1 text-sm text-stone-600">Save it here and it will be selected for this order.</p>
                        </div>
                        <button type="button" @click="open = false" class="text-sm font-semibold text-stone-400 hover:text-stone-700">Close</button>
                    </div>

                    <template x-if="errorList.length > 0">
                        <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                            <ul class="list-disc space-y-1 pl-4">
                                <template x-for="error in errorList" :key="error">
                                    <li x-text="error"></li>
                                </template>
                            </ul>
                        </div>
                    </template>

                    <div class="mt-5 grid gap-4 sm:grid-cols-2">
                        <label class="block sm:col-span-2">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">Contact name</span>
                            <input type="text" x-model="form.contact_name" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">Phone</span>
                            <input type="text" x-model="form.phone" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">Country</span>
                            <select x-model="form.country_code" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                                <option value="US">United States</option>
                            </select>
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">Address line 1 <span class="text-rose-500">*</span></span>
                            <input type="text" x-model="form.line1" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">Address line 2</span>
                            <input type="text" x-model="form.line2" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">City <span class="text-rose-500">*</span></span>
                            <input type="text" x-model="form.city" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">State / Province</span>
                            <input type="text" x-model="form.state" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="block">
                            <span class="mb-1.5 block text-sm font-medium text-stone-700">ZIP / Postal code</span>
                            <input type="text" x-model="form.postal_code" class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2 text-sm focus:border-emerald-600 focus:ring-emerald-600">
                        </label>
                        <label class="mt-7 flex items-center gap-2 text-sm text-stone-700">
                            <input type="checkbox" x-model="form.is_default" class="rounded border-stone-300 text-emerald-700 focus:ring-emerald-600">
                            Make default shipping address
                        </label>
                    </div>

                    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                        <button type="button" @click="open = false" class="inline-flex items-center justify-center rounded-xl border border-stone-300 bg-white px-4 py-2.5 text-sm font-semibold text-stone-700 hover:bg-stone-50">Cancel</button>
                        <button type="button"
                                @click="save()"
                                :disabled="saving"
                                class="inline-flex items-center justify-center rounded-xl bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-900/20 transition hover:-translate-y-0.5 hover:bg-emerald-800 disabled:cursor-wait disabled:opacity-70">
                            <span x-show="!saving">Save and use this address</span>
                            <span x-show="saving">Saving...</span>
                        </button>
                    </div>
                </div>

                <div x-show="deleteTarget"
                     x-transition.opacity
                     class="fixed inset-0 z-50 flex items-center justify-center bg-stone-950/45 px-4 py-6"
                     style="display:none"
                     @keydown.escape.window="cancelDelete()">
                    <div class="max-h-[calc(100dvh-3rem)] w-full max-w-md overflow-y-auto rounded-2xl bg-white p-6 shadow-2xl shadow-stone-950/20"
                         @click.stop>
                        <div class="flex items-start gap-4">
                            <div class="rounded-full bg-rose-50 p-3 text-rose-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166M19.228 5.79 18.16 19.673A2.25 2.25 0 0 1 15.916 21H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .563c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-stone-950">Delete this address?</h3>
                                <p class="mt-1 text-sm text-stone-600">This removes the saved shipping address from your account. You can add it again later if needed.</p>
                                <p class="mt-3 rounded-xl bg-stone-50 px-3 py-2 text-sm text-stone-700" x-show="deleteTarget">
                                    <span x-text="deleteTarget?.line1"></span><span x-show="deleteTarget?.city">, </span><span x-text="deleteTarget?.city"></span>
                                </p>
                            </div>
                        </div>
                        <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                            <button type="button" @click="cancelDelete()" class="inline-flex items-center justify-center rounded-xl border border-stone-300 bg-white px-4 py-2.5 text-sm font-semibold text-stone-700 hover:bg-stone-50">Keep address</button>
                            <button type="button"
                                    @click="deleteAddress()"
                                    :disabled="deleting"
                                    class="inline-flex items-center justify-center rounded-xl bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-900/15 transition hover:bg-rose-700 disabled:cursor-wait disabled:opacity-70">
                                <span x-show="!deleting">Delete address</span>
                                <span x-show="deleting">Deleting...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Payment --}}
            <div class="rounded-xl border border-stone-200 bg-white p-6">
                <h2 class="text-lg font-semibold text-stone-900">Payment method</h2>
                <p class="mt-1 text-xs text-stone-500">Choose ACH, wire, card, or approved payment terms.</p>
                <div class="mt-4 space-y-2">
                    @foreach ($paymentMethods as $pm)
                        @php
                            $paymentTermsUnavailable = $pm === \App\Enums\PaymentMethod::Invoice && $approvedCreditApplication === null;
                        @endphp
                        @if ($paymentTermsUnavailable)
                            <div class="rounded-xl border border-dashed border-stone-300 bg-stone-50 p-4">
                                <p class="text-sm font-semibold text-stone-900">Pay on Terms</p>
                                <p class="mt-2 text-xs leading-5 text-stone-600">
                                    Apply for business credit to request payment terms. Approval and credit limits are not guaranteed.
                                </p>
                                <a href="{{ route('storefront.credit-application') }}" class="mt-2 inline-flex text-xs font-semibold text-emerald-700 hover:text-emerald-900">Apply for payment terms</a>
                            </div>
                            @continue
                        @endif
                        <label @class([
                            'flex items-start gap-3 rounded-xl border p-3.5 transition',
                            'cursor-pointer border-stone-200 bg-white hover:border-emerald-200 hover:bg-emerald-50/40',
                        ])>
                            <input
                                type="radio"
                                name="payment_method"
                                value="{{ $pm->value }}"
                                @checked($loop->first)
                                required
                                class="mt-1">
                            <div class="text-sm">
                                <div @class([
                                    'font-medium',
                                    'text-stone-900',
                                ])>{{ $pm === \App\Enums\PaymentMethod::Invoice ? 'NET '.(int) $approvedCreditApplication->approved_terms_days : $pm->getLabel() }}</div>
                                <div @class([
                                    'mt-0.5 text-xs leading-5',
                                    'text-stone-500',
                                ])>
                                    @switch($pm->value)
                                        @case('ach') Transfer from a U.S. bank account using the instructions provided. @break
                                        @case('wire') Send a bank wire using the instructions provided. @break
                                        @case('invoice')
                                            Approved for this account, subject to the available credit limit.
                                            @break
                                        @case('card') Pay now on the secure hosted card payment page. @break
                                    @endswitch
                                </div>
                            </div>
                        </label>
                    @endforeach
                </div>
                @error('payment_method')
                    <p class="mt-3 text-xs font-medium text-rose-700">{{ $message }}</p>
                @enderror
            </div>

            {{-- Extra fields --}}
            <div class="rounded-xl border border-stone-200 bg-white p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700">Promo code <span class="text-stone-400">(optional)</span></label>
                    <div class="mt-1 flex gap-2">
                        <input type="text"
                               name="promo_code"
                               x-model="promoCode"
                               @change="refreshShipping()"
                               maxlength="64"
                               class="min-w-0 flex-1 rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm uppercase text-stone-900 shadow-sm transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 focus:outline-none">
                        <button type="button"
                                @click="refreshShipping()"
                                class="inline-flex items-center justify-center rounded-lg border border-stone-300 bg-white px-4 py-2.5 text-sm font-semibold text-stone-700 transition hover:bg-stone-50">
                            Apply
                        </button>
                    </div>
                    <p x-cloak x-show="promoMessage" x-text="promoMessage" class="mt-2 text-xs font-medium text-emerald-700"></p>
                    <p x-cloak x-show="promoError" x-text="promoError" class="mt-2 text-xs font-medium text-rose-700"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700">PO number <span class="text-stone-400">(optional)</span></label>
                    <input type="text" name="po_number" maxlength="64" class="mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 focus:outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-stone-700">Notes for our team <span class="text-stone-400">(optional)</span></label>
                    <textarea name="customer_notes" rows="3" maxlength="2000" class="mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 focus:outline-none"></textarea>
                </div>
            </div>
        </div>

        {{-- Summary --}}
        <aside>
            <div class="sticky top-24 overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm shadow-stone-950/5">
                <div class="flex items-end justify-between gap-4 px-6 pb-4 pt-6">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700">Your order</p>
                        <h2 class="mt-1 text-xl font-semibold tracking-tight text-stone-950">Order summary</h2>
                    </div>
                    <span class="rounded-full bg-stone-100 px-2.5 py-1 text-xs font-semibold text-stone-600">
                        {{ $cart->totalQuantity() }} {{ $cart->totalQuantity() === 1 ? 'unit' : 'units' }}
                    </span>
                </div>

                <ul class="divide-y divide-stone-100 px-6 text-sm">
                    @foreach ($cart->items as $item)
                        <li class="flex justify-between gap-4 py-3.5">
                            <div class="min-w-0">
                                <div class="truncate font-medium text-stone-900">{{ $item->product?->title }}</div>
                                <div class="mt-0.5 text-xs text-stone-500">{{ $item->variant?->sku }} · Qty {{ $item->quantity }}</div>
                            </div>
                            <div class="shrink-0 font-semibold tabular-nums text-stone-900">${{ number_format($item->lineTotal(), 2) }}</div>
                        </li>
                    @endforeach
                </ul>

                <div class="border-t border-stone-200 bg-stone-50/70 px-6 py-5">
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center justify-between gap-4">
                            <span class="text-stone-600">Subtotal</span>
                            <span class="font-semibold tabular-nums text-stone-900" x-text="formatMoney(subtotal)">${{ number_format($cart->subtotal(), 2) }}</span>
                        </div>

                        <div x-cloak x-show="discount > 0" class="flex items-center justify-between gap-4 text-emerald-700">
                            <span>Discount</span>
                            <span class="font-semibold tabular-nums" x-text="`-${formatMoney(discount)}`"></span>
                        </div>

                        <div class="flex items-center justify-between gap-4">
                            <span class="flex min-w-0 items-center gap-2.5">
                                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-800" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m5.5 12.5 4 4 9-9" />
                                    </svg>
                                </span>
                                <span class="min-w-0">
                                    <span class="block font-medium text-stone-800">Shipping</span>
                                    <span class="block text-xs leading-5 text-stone-500">Calculated for your delivery address</span>
                                </span>
                            </span>

                            <span x-cloak x-show="status === 'loading'" class="inline-flex shrink-0 items-center gap-2 text-xs font-semibold text-stone-500">
                                <svg class="h-4 w-4 animate-spin text-emerald-700" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
                                </svg>
                                Confirming
                            </span>

                            <span x-cloak x-show="status === 'ready' && shipping === 0" class="shrink-0 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-emerald-800">Free shipping</span>
                            <span x-cloak x-show="status === 'ready' && shipping > 0" class="shrink-0 font-semibold tabular-nums text-stone-900" x-text="formatMoney(shipping)"></span>
                            <span x-cloak x-show="status === 'missing_address'" class="shrink-0 text-xs font-semibold text-stone-500">Select address</span>
                            <span x-cloak x-show="status === 'error'" class="shrink-0 text-xs font-semibold text-rose-600">Check needed</span>
                        </div>
                    </div>

                    <div x-cloak x-show="status === 'error'" class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-3.5 py-3 text-xs leading-5 text-rose-700">
                        <span x-text="error || 'Could not calculate shipping.'"></span>
                        <button type="button" @click="refreshShipping()" class="ml-1 font-semibold underline underline-offset-2">Try again</button>
                    </div>

                    <div class="mt-5 flex items-end justify-between gap-4 border-t border-stone-200 pt-5">
                        <span>
                            <span class="block text-base font-semibold text-stone-950">Total</span>
                            <span class="mt-0.5 block text-xs font-medium uppercase tracking-wide text-stone-400">USD</span>
                        </span>
                        <span class="text-2xl font-semibold tracking-tight tabular-nums text-stone-950" x-text="formatMoney(total)">${{ number_format($cart->subtotal(), 2) }}</span>
                    </div>
                </div>

                <div class="px-6 pb-6 pt-5">
                    <button type="submit"
                            :disabled="submitting || ! canSubmit"
                            :aria-busy="submitting.toString()"
                            class="inline-flex w-full items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 disabled:cursor-wait"
                            :class="submitting || canSubmit ? 'bg-emerald-700 disabled:bg-emerald-700 disabled:text-white' : 'bg-stone-300 text-stone-600 disabled:bg-stone-300 disabled:text-stone-600'">
                        <svg x-cloak x-show="status === 'loading' || submitting" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"></path>
                        </svg>
                        <svg x-show="status !== 'loading' && ! submitting" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L6 12Zm0 0h7.5"/>
                        </svg>
                        <span x-text="buttonLabel">Place order</span>
                    </button>
                    <div x-cloak x-show="submitting || submitNotice || submitError" class="mt-3 rounded-lg border px-3 py-2 text-xs"
                         :class="submitError ? 'border-rose-200 bg-rose-50 text-rose-700' : 'border-emerald-100 bg-emerald-50 text-emerald-800'">
                        <p class="font-medium" x-text="submitError || submitNotice"></p>
                        <template x-if="submitRecoveryUrl">
                            <a :href="submitRecoveryUrl" class="mt-1 inline-flex font-semibold underline underline-offset-2">
                                Open your order page
                            </a>
                        </template>
                    </div>
                    <a href="{{ route('storefront.cart') }}" class="block mt-3 text-center text-xs text-stone-500 hover:text-stone-800">Back to cart</a>
                </div>
            </div>
        </aside>
    </form>
</section>

<script>
    function checkoutShipping(config) {
        return {
            selectedShippingAddressId: config.selectedShippingAddressId || '',
            quoteEndpoint: config.quoteEndpoint,
            ordersUrl: config.ordersUrl,
            csrf: config.csrf,
            subtotal: Number(config.subtotal || 0),
            total: Number(config.subtotal || 0),
            shipping: null,
            discount: 0,
            selectedRateKey: '',
            promoCode: config.promoCode || '',
            promoMessage: '',
            promoError: '',
            status: config.selectedShippingAddressId ? 'idle' : 'missing_address',
            submitting: false,
            submitNotice: '',
            submitError: '',
            submitRecoveryUrl: '',
            submitNoticeTimer: null,
            redirectFallbackTimer: null,
            submitAbortTimer: null,
            hardFallbackTimer: null,
            recoveryRedirectTimer: null,
            error: '',
            requestId: 0,
            get canSubmit() {
                return this.status === 'ready' && Boolean(this.selectedRateKey) && ! this.promoError;
            },
            get buttonLabel() {
                if (this.submitting) {
                    if (this.submitNotice === 'Still working. Please keep this page open while we prepare checkout.') {
                        return 'Still working...';
                    }

                    if (this.submitNotice === 'Opening checkout...') {
                        return 'Opening checkout...';
                    }

                    return 'Processing order...';
                }

                if (this.status === 'loading') {
                    return 'Calculating shipping...';
                }

                if (this.status === 'missing_address') {
                    return 'Select shipping address';
                }

                if (this.status === 'error') {
                    return 'Shipping unavailable';
                }

                return 'Place order';
            },
            init() {
                if (this.selectedShippingAddressId) {
                    this.refreshShipping();
                }
            },
            selectAddress(id) {
                const next = String(id || '');
                if (next === this.selectedShippingAddressId && this.status === 'ready') {
                    return;
                }

                this.selectedShippingAddressId = next;
                this.refreshShipping();
            },
            async refreshShipping() {
                if (! this.selectedShippingAddressId) {
                    this.status = 'missing_address';
                    this.shipping = null;
                    this.selectedRateKey = '';
                    this.total = this.subtotal;
                    this.discount = 0;
                    this.promoMessage = '';
                    this.promoError = '';
                    this.error = '';
                    return;
                }

                const currentRequest = ++this.requestId;
                this.status = 'loading';
                this.shipping = null;
                this.selectedRateKey = '';
                this.total = this.subtotal;
                this.discount = 0;
                this.promoMessage = '';
                this.promoError = '';
                this.error = '';

                try {
                    const response = await fetch(this.quoteEndpoint, {
                        method: 'POST',
                        headers: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                        body: JSON.stringify({
                            shipping_address_id: this.selectedShippingAddressId,
                            promo_code: this.promoCode,
                        }),
                    });
                    const data = await response.json().catch(() => ({}));

                    if (currentRequest !== this.requestId) {
                        return;
                    }

                    if (! response.ok) {
                        this.status = 'error';
                        this.error = data.message || 'Could not calculate shipping.';
                        return;
                    }

                    const options = Array.isArray(data.options) ? data.options : [];
                    this.selectedRateKey = data.selected_rate_key || options[0]?.key || '';
                    this.discount = Number(data.discount || 0);
                    this.promoMessage = data.promo_code_message || '';
                    this.promoError = data.promo_code_error || '';
                    this.shipping = Number(data.shipping ?? options[0]?.amount ?? 0);
                    this.total = Number(data.total ?? (this.subtotal + this.shipping));
                    this.status = 'ready';
                } catch (error) {
                    if (currentRequest !== this.requestId) {
                        return;
                    }

                    this.status = 'error';
                    this.error = 'Could not calculate shipping. Check your connection and try again.';
                }
            },
            async handleSubmit(event) {
                if (this.submitting) {
                    return;
                }

                const form = event.target;
                if (! form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                if (! this.canSubmit) {
                    if (this.selectedShippingAddressId && this.status !== 'loading') {
                        this.refreshShipping();
                    }

                    return;
                }

                this.submitting = true;
                this.submitError = '';
                this.submitRecoveryUrl = '';
                this.submitNotice = 'Creating your order...';

                clearTimeout(this.submitNoticeTimer);
                clearTimeout(this.redirectFallbackTimer);
                clearTimeout(this.hardFallbackTimer);
                clearTimeout(this.recoveryRedirectTimer);
                this.submitNoticeTimer = setTimeout(() => {
                    if (this.submitting) {
                        this.submitNotice = 'Still working. Please keep this page open while we prepare checkout.';
                        this.submitRecoveryUrl = this.ordersUrl;
                    }
                }, 8000);
                this.hardFallbackTimer = setTimeout(() => {
                    if (this.submitting) {
                        this.submitError = 'Checkout is taking too long. Opening your orders page so you can continue payment.';
                        this.submitNotice = '';
                        this.submitRecoveryUrl = this.ordersUrl;
                        window.location.assign(this.submitRecoveryUrl);
                    }
                }, 45000);

                try {
                    const controller = new AbortController();
                    this.submitAbortTimer = setTimeout(() => controller.abort(), 30000);
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            Accept: 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                        body: new FormData(form),
                        credentials: 'same-origin',
                        signal: controller.signal,
                    });

                    if (response.redirected && response.url) {
                        window.location.assign(response.url);

                        return;
                    }

                    const data = await response.json().catch(() => ({}));

                    if (! response.ok) {
                        this.submitting = false;
                        const submissionError = this.errorFromResponse(data, response);
                        this.submitError = submissionError;
                        this.submitNotice = '';
                        this.submitRecoveryUrl = data.redirect_url || '';
                        if (data.refresh_shipping) {
                            this.submitRecoveryUrl = '';
                            await this.refreshShipping();
                            if (this.status === 'ready') {
                                this.submitError = `${submissionError} Delivery details were refreshed; please submit again.`;
                            }
                        }

                        return;
                    }

                    if (! data.redirect_url) {
                        this.submitting = false;
                        this.submitError = 'Your order may have been created, but checkout did not return a redirect. Open your orders page to continue.';
                        this.submitNotice = '';
                        this.submitRecoveryUrl = data.order_url || this.ordersUrl;
                        this.scheduleRecoveryRedirect(4000);

                        return;
                    }

                    this.submitNotice = data.message || 'Opening checkout...';
                    this.submitRecoveryUrl = data.fallback_url || data.order_url || '';
                    window.location.assign(data.redirect_url);

                    this.redirectFallbackTimer = setTimeout(() => {
                        this.submitting = false;
                        this.submitError = 'The redirect did not open automatically. Use the link below to continue.';
                        this.submitNotice = '';
                        this.scheduleRecoveryRedirect(4000);
                    }, 5000);
                } catch (error) {
                    this.submitting = false;
                    this.submitNotice = '';
                    this.submitError = error?.name === 'AbortError'
                        ? 'Checkout is taking longer than expected. Your order may have been created; open your orders page to continue.'
                        : 'Your order may have been created, but the browser lost the checkout response. Open your orders page to continue.';
                    this.submitRecoveryUrl = this.ordersUrl;
                    this.scheduleRecoveryRedirect(4000);
                } finally {
                    clearTimeout(this.submitNoticeTimer);
                    clearTimeout(this.submitAbortTimer);
                    clearTimeout(this.hardFallbackTimer);
                }
            },
            scheduleRecoveryRedirect(delay = 4000) {
                clearTimeout(this.recoveryRedirectTimer);
                const target = this.submitRecoveryUrl || this.ordersUrl;
                this.recoveryRedirectTimer = setTimeout(() => {
                    window.location.assign(target);
                }, delay);
            },
            errorFromResponse(data, response) {
                if (data?.errors) {
                    const first = Object.values(data.errors).flat().find(Boolean);
                    if (first) {
                        return String(first);
                    }
                }

                return data?.message || `Checkout could not be completed. HTTP ${response.status}.`;
            },
            formatMoney(value) {
                return new Intl.NumberFormat('en-US', {
                    style: 'currency',
                    currency: 'USD',
                }).format(Number(value || 0));
            },
        };
    }

    function checkoutAddressBook(config) {
        return {
            addresses: config.addresses || [],
            selected: config.selected || '',
            endpoint: config.endpoint,
            destroyBase: config.destroyBase,
            canDelete: Boolean(config.canDelete),
            csrf: config.csrf,
            open: (config.addresses || []).length === 0,
            saving: false,
            deleting: false,
            deleteTarget: null,
            success: '',
            errors: {},
            form: {
                type: 'shipping',
                contact_name: '',
                phone: '',
                line1: '',
                line2: '',
                city: '',
                state: '',
                postal_code: '',
                country_code: 'US',
                is_default: (config.addresses || []).length === 0,
            },
            get errorList() {
                return Object.values(this.errors).flat();
            },
            resetForm() {
                this.form = {
                    type: 'shipping',
                    contact_name: '',
                    phone: '',
                    line1: '',
                    line2: '',
                    city: '',
                    state: '',
                    postal_code: '',
                    country_code: 'US',
                    is_default: false,
                };
            },
            confirmDelete(address) {
                if (! this.canDelete) {
                    return;
                }

                this.success = '';
                this.errors = {};
                this.deleteTarget = address;
            },
            cancelDelete() {
                if (! this.deleting) {
                    this.deleteTarget = null;
                }
            },
            async save() {
                this.saving = true;
                this.success = '';
                this.errors = {};

                try {
                    const response = await fetch(this.endpoint, {
                        method: 'POST',
                        headers: {
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                        body: JSON.stringify(this.form),
                    });
                    const data = await response.json().catch(() => ({}));

                    if (! response.ok) {
                        this.errors = data.errors || { address: [data.message || 'Could not save this address.'] };
                        return;
                    }

                    const address = data.address;
                    this.addresses = this.addresses.filter((item) => String(item.id) !== String(address.id));

                    if (address.is_default) {
                        this.addresses = this.addresses.map((item) => ({ ...item, is_default: false }));
                    }

                    this.addresses.unshift(address);
                    this.selected = String(address.id);
                    this.$dispatch('shipping-address-selected', { id: this.selected });
                    this.open = false;
                    this.success = 'Address added and selected for this order.';
                    this.resetForm();
                } catch (error) {
                    this.errors = { address: ['Could not save this address. Check your connection and try again.'] };
                } finally {
                    this.saving = false;
                }
            },
            async deleteAddress() {
                if (! this.canDelete || ! this.destroyBase || ! this.deleteTarget) {
                    return;
                }

                this.deleting = true;
                this.success = '';
                this.errors = {};

                try {
                    const targetId = String(this.deleteTarget.id);
                    const response = await fetch(`${this.destroyBase}/${this.deleteTarget.id}`, {
                        method: 'DELETE',
                        headers: {
                            Accept: 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                    });
                    const data = await response.json().catch(() => ({}));

                    if (! response.ok) {
                        this.errors = { address: [data.message || 'Could not delete this address.'] };
                        return;
                    }

                    this.addresses = this.addresses.filter((item) => String(item.id) !== targetId);

                    if (String(this.selected) === targetId) {
                        this.selected = this.addresses.length ? String(this.addresses[0].id) : '';
                        this.$dispatch('shipping-address-selected', { id: this.selected });
                    }

                    if (this.addresses.length === 0) {
                        this.open = true;
                        this.$dispatch('shipping-address-selected', { id: '' });
                    }

                    this.deleteTarget = null;
                    this.success = 'Address removed.';
                } catch (error) {
                    this.errors = { address: ['Could not delete this address. Check your connection and try again.'] };
                } finally {
                    this.deleting = false;
                }
            },
        };
    }
</script>
@endsection