@php
    use App\Support\Money;
    $settings = app(App\Support\Settings::class);
    $countries = $settings->get('shipping.countries');
    $defaultAddress = $addresses->firstWhere('type.value', 'shipping') ?? $addresses->first();
    $shippingValue = fn (string $key, ?string $fallback = null) => match ($key) {
        'country' => $country,
        'postcode' => $postcode,
        default => old("shipping.{$key}", $defaultAddress?->{$key} ?? $fallback),
    };
    $pickupOnly = $cart->requiresPickup();
    $selectedId = $selected['method']->id ?? 0;
    $selectedCost = $selected && $selected['available'] ? $selected['cost'] : 0;
@endphp

<x-layouts.app :over-light="true" title="Commande">
    <section class="mx-auto max-w-[1440px] px-5 pt-32 pb-24 sm:px-10 lg:px-14 lg:pt-40 xl:pt-48">
        <a href="{{ route('cart.show') }}" class="kicker text-gris hover:text-encre">← Retour au panier</a>
        <h1 class="mt-6 font-serif text-[clamp(2.6rem,5vw,4.6rem)] leading-none">Finaliser la commande</h1>

        @if ($errors->has('cart') || $errors->has('shipping_method_id'))
            <p class="alerte mt-10 border-rouge">{{ $errors->first('cart') ?: $errors->first('shipping_method_id') }}</p>
        @endif

        <form method="POST" action="{{ route('checkout.store') }}" data-checkout class="mt-16 grid gap-16 lg:grid-cols-12">
            @csrf
            <div class="space-y-16 lg:col-span-7">
                {{-- 1. Réception --}}
                <fieldset>
                    <legend class="font-serif text-3xl"><span class="text-laiton italic">I.</span> Réception de la commande</legend>
                    <div class="mt-8 grid gap-4 sm:grid-cols-2" data-quotes-url="{{ route('cart.quotes') }}">
                        @foreach ($quotes as $quote)
                            @php $method = $quote['method']; @endphp
                            <label @class(['radio-carte', 'cursor-not-allowed opacity-50' => ! $quote['available'] && ! $quote['needs_postcode']]) data-method-card="{{ $method->id }}">
                                <input type="radio" name="shipping_method_id" value="{{ $method->id }}" data-pickup="{{ $method->is_pickup ? 1 : 0 }}"
                                    @checked($selectedId === $method->id) @disabled(! $quote['available'] && ! $quote['needs_postcode']) class="case mt-1 rounded-full">
                                <span>
                                    <span class="block font-serif text-xl">{{ $method->name }}</span>
                                    <span class="mt-2 block text-sm text-gris" data-method-cost>
                                        @if ($quote['available'])
                                            {{ $quote['cost'] > 0 ? Money::format($quote['cost']) : 'Offert' }}
                                        @elseif ($quote['needs_postcode'])
                                            Indiquez votre code postal
                                        @else
                                            Non disponible pour cette commande
                                        @endif
                                    </span>
                                    @if ($method->description)
                                        <span class="mt-3 block text-xs leading-relaxed text-gris">{{ Str::limit(trim(html_entity_decode(strip_tags($method->description))), 180) }}</span>
                                    @endif
                                </span>
                            </label>
                        @endforeach
                    </div>
                    @error('shipping_method_id')<p class="champ-erreur">{{ $message }}</p>@enderror
                    <p class="mt-4 text-sm text-gris" data-delivery-only>{{ $settings->get('shipping.departure') }} {{ $settings->get('shipping.order_deadline') }}</p>
                    @if ($pickupOnly)
                        <p class="mt-4 text-sm text-rouge">Un produit de votre panier est vendu uniquement au magasin : seul le retrait est proposé.</p>
                    @endif
                </fieldset>

                {{-- 2. Coordonnées --}}
                <fieldset>
                    <legend class="font-serif text-3xl"><span class="text-laiton italic">II.</span> Vos coordonnées</legend>
                    @if ($addresses->isNotEmpty())
                        <div class="mt-6 flex flex-wrap gap-3">
                            @foreach ($addresses as $address)
                                <button type="button" class="kicker border border-filet px-4 py-2 hover:border-encre" data-fill-address="{{ json_encode($address->toSnapshot()) }}">
                                    {{ $address->line1 }}, {{ $address->city }}
                                </button>
                            @endforeach
                        </div>
                    @endif
                    <div class="mt-8 grid gap-x-8 gap-y-8 sm:grid-cols-2">
                        @foreach ([['first_name', 'Prénom', $user->first_name], ['last_name', 'Nom', $user->last_name], ['company', 'Société (facultatif)', $user->company], ['phone', 'Téléphone', $user->phone]] as [$key, $label, $fallback])
                            <div>
                                <label for="shipping-{{ $key }}" class="champ-label">{{ $label }}</label>
                                <input id="shipping-{{ $key }}" name="shipping[{{ $key }}]" value="{{ $shippingValue($key, $fallback) }}" class="champ" @if ($key !== 'company') required @endif>
                                @error("shipping.{$key}")<p class="champ-erreur">{{ $message }}</p>@enderror
                            </div>
                        @endforeach
                    </div>
                    <div class="mt-8 grid gap-x-8 gap-y-8 sm:grid-cols-2" data-delivery-only>
                        <div class="sm:col-span-2">
                            <label for="shipping-line1" class="champ-label">Adresse de livraison</label>
                            <input id="shipping-line1" name="shipping[line1]" value="{{ $shippingValue('line1') }}" class="champ" autocomplete="address-line1">
                            @error('shipping.line1')<p class="champ-erreur">{{ $message }}</p>@enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label for="shipping-line2" class="champ-label">Complément (facultatif)</label>
                            <input id="shipping-line2" name="shipping[line2]" value="{{ $shippingValue('line2') }}" class="champ" autocomplete="address-line2">
                        </div>
                        <div>
                            <label for="shipping-postcode" class="champ-label">Code postal</label>
                            <input id="shipping-postcode" name="shipping[postcode]" value="{{ $shippingValue('postcode') }}" class="champ" autocomplete="postal-code">
                            @error('shipping.postcode')<p class="champ-erreur">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="shipping-city" class="champ-label">Ville</label>
                            <input id="shipping-city" name="shipping[city]" value="{{ $shippingValue('city') }}" class="champ" autocomplete="address-level2">
                            @error('shipping.city')<p class="champ-erreur">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div class="mt-8 max-w-xs">
                        <label for="shipping-country" class="champ-label">Pays</label>
                        <select id="shipping-country" name="shipping[country]" class="champ">
                            @foreach ($countries as $code => $name)
                                <option value="{{ $code }}" @selected($shippingValue('country', 'FR') === $code)>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <label class="mt-8 flex items-center gap-3 text-sm" data-delivery-only>
                        <input type="checkbox" name="save_address" value="1" class="case" @checked(old('save_address', $addresses->isEmpty()))>
                        Enregistrer cette adresse dans mon compte
                    </label>
                </fieldset>

                {{-- 3. Facturation --}}
                <fieldset>
                    <legend class="font-serif text-3xl"><span class="text-laiton italic">III.</span> Facturation</legend>
                    <label class="mt-6 flex items-center gap-3 text-sm">
                        <input type="checkbox" name="billing_same" value="1" class="case" @checked(old('billing_same', true))>
                        Adresse de facturation identique à mes coordonnées
                    </label>
                    <div class="mt-8 grid gap-x-8 gap-y-8 sm:grid-cols-2" data-billing>
                        @foreach ([['first_name', 'Prénom'], ['last_name', 'Nom'], ['company', 'Société (facultatif)'], ['line1', 'Adresse'], ['line2', 'Complément'], ['postcode', 'Code postal'], ['city', 'Ville']] as [$key, $label])
                            <div @class(['sm:col-span-2' => in_array($key, ['line1', 'line2'])])>
                                <label for="billing-{{ $key }}" class="champ-label">{{ $label }}</label>
                                <input id="billing-{{ $key }}" name="billing[{{ $key }}]" value="{{ old("billing.{$key}") }}" class="champ">
                                @error("billing.{$key}")<p class="champ-erreur">{{ $message }}</p>@enderror
                            </div>
                        @endforeach
                        <div>
                            <label for="billing-country" class="champ-label">Pays</label>
                            <select id="billing-country" name="billing[country]" class="champ">
                                @foreach ($countries as $code => $name)
                                    <option value="{{ $code }}" @selected(old('billing.country', 'FR') === $code)>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </fieldset>

                <div>
                    <label for="customer_note" class="champ-label">Un message pour la préparation ? (facultatif)</label>
                    <textarea id="customer_note" name="customer_note" rows="3" class="champ" placeholder="Date de retrait souhaitée, découpe particulière…">{{ old('customer_note') }}</textarea>
                </div>
            </div>

            <aside class="lg:col-span-5">
                <div class="bg-ivoire-2 p-8 lg:sticky lg:top-28 lg:p-10">
                    <p class="font-serif text-3xl italic">Votre commande</p>
                    <ul class="mt-8 space-y-4 text-sm">
                        @foreach ($cart->items() as $item)
                            <li class="ligne-carte">
                                <span>{{ $item->quantity }} × {{ $item->variant->label() }}</span>
                                <span class="tabular-nums">{{ Money::format($item->lineTotal()) }}</span>
                            </li>
                        @endforeach
                    </ul>
                    <dl class="mt-8 space-y-3 border-t border-encre/20 pt-6">
                        <div class="ligne-carte"><dt>Produits</dt><dd class="tabular-nums">{{ Money::format($cart->subtotal()) }}</dd></div>
                        <div class="ligne-carte"><dt>Frais de port</dt><dd class="tabular-nums" data-summary-shipping>{{ $selectedCost > 0 ? Money::format($selectedCost) : 'Offert' }}</dd></div>
                        <div class="ligne-carte pt-3 font-serif text-2xl"><dt>Total TTC</dt><dd class="tabular-nums" data-summary-total>{{ Money::format($cart->subtotal() + $selectedCost) }}</dd></div>
                    </dl>

                    <fieldset class="mt-8" data-payment>
                        <legend class="champ-label">Mode de règlement</legend>
                        <div class="mt-3 flex flex-col gap-2">
                            @foreach (App\Enums\PaymentMethod::cases() as $method)
                                <label class="radio-carte items-center gap-3 p-4" @if ($method === App\Enums\PaymentMethod::Card) style="padding-top: 0.5rem; padding-bottom: 0.5rem;" @endif>
                                    <input type="radio" name="payment_method" value="{{ $method->value }}" class="case rounded-full" data-payment-radio
                                        @checked(old('payment_method', 'card') === $method->value)>
                                    <span>{{ $method->getLabel() }}</span>
                                    @if ($method === App\Enums\PaymentMethod::Card)
                                        <img src="{{ asset('images/monetico-paiement.png') }}" alt="Monetico Paiement — Crédit Mutuel" width="200" height="106" loading="lazy" class="ml-auto h-10 w-auto" style="height: 40px;">
                                    @endif
                                </label>
                            @endforeach
                        </div>
                        @error('payment_method')<p class="champ-erreur">{{ $message }}</p>@enderror

                        @foreach (App\Enums\PaymentMethod::cases() as $method)
                            @if ($settings->get($method->instructionsKey()))
                                <p class="mt-4 text-sm leading-relaxed whitespace-pre-line text-gris" data-payment-note="{{ $method->value }}"
                                    @unless (old('payment_method', 'card') === $method->value) hidden @endunless>{{ $settings->get($method->instructionsKey()) }}</p>
                            @endif
                        @endforeach
                    </fieldset>

                    <label class="mt-8 flex items-start gap-3 text-sm">
                        <input type="checkbox" name="cgv" value="1" class="case mt-0.5" required @checked(old('cgv'))>
                        <span>J'ai lu et j'accepte les <a href="{{ url('conditions-generales-de-vente') }}" target="_blank" class="underline underline-offset-4">conditions générales de vente</a>.</span>
                    </label>
                    @error('cgv')<p class="champ-erreur">{{ $message }}</p>@enderror

                    <button type="submit" class="bouton bouton-plein mt-8 w-full">Valider ma commande</button>
                </div>
            </aside>
        </form>
    </section>
</x-layouts.app>