@php use App\Support\Money; @endphp

<x-layouts.app :over-light="true" title="Panier">
    <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">
        <p class="kicker mb-5 text-rouge">Votre sélection</p>
        <h1 class="font-serif text-[clamp(2.6rem,5vw,4.6rem)] leading-none">Panier</h1>

        @if (session('status'))
            <p class="alerte mt-10">{{ session('status') }}</p>
        @endif
        @error('quantity')<p class="alerte mt-10 border-rouge">{{ $message }}</p>@enderror

        @if ($items->isEmpty())
            <div class="mt-16 border-t border-filet pt-16">
                <p class="font-serif text-2xl">Votre panier est vide.</p>
                <a href="{{ route('shop.index') }}" class="bouton bouton-plein mt-10">Découvrir la boutique</a>
            </div>
        @else
            <div class="mt-16 grid gap-16 lg:grid-cols-12">
                <div class="lg:col-span-8">
                    <ul class="divide-y divide-filet border-y border-filet">
                        @foreach ($items as $item)
                            @php $product = $item->variant->product; @endphp
                            <li class="grid grid-cols-[88px_1fr] gap-6 py-8 sm:grid-cols-[120px_1fr_auto]">
                                <a href="{{ route('shop.product', [$product->category, $product]) }}">
                                    <x-photo :src="($item->variant->image ?: $product->image) ? Storage::disk('public')->url($item->variant->image ?: $product->image) : null" :alt="$product->name" class="aspect-square" />
                                </a>
                                <div>
                                    <a href="{{ route('shop.product', [$product->category, $product]) }}" class="font-serif text-2xl leading-tight hover:text-rouge">{{ $product->name }}</a>
                                    @if ($item->variant->name)
                                        <p class="mt-1 text-gris">{{ $item->variant->name }}</p>
                                    @endif
                                    <p class="mt-2 text-sm text-gris tabular-nums">{{ Money::format($item->variant->price) }} l'unité</p>
                                    @if ($product->pickup_only)
                                        <p class="kicker mt-3 text-[0.6rem] text-rouge">Retrait au magasin uniquement</p>
                                    @endif
                                    <div class="mt-5 flex flex-wrap items-center gap-6">
                                        <form method="POST" action="{{ route('cart.update', $item) }}" class="flex items-center gap-3">
                                            @csrf @method('PATCH')
                                            <label for="qty-{{ $item->id }}" class="sr-only">Quantité</label>
                                            <input id="qty-{{ $item->id }}" type="number" name="quantity" min="0" max="999" value="{{ $item->quantity }}" class="champ w-20 py-2 text-center tabular-nums">
                                            <button type="submit" class="kicker text-gris hover:text-encre">Mettre à jour</button>
                                        </form>
                                        <form method="POST" action="{{ route('cart.destroy', $item) }}">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="kicker text-gris hover:text-rouge">Retirer</button>
                                        </form>
                                    </div>
                                </div>
                                <p class="col-start-2 font-serif text-2xl tabular-nums sm:col-start-3 sm:text-right">{{ Money::format($item->lineTotal()) }}</p>
                            </li>
                        @endforeach
                    </ul>
                    <a href="{{ route('shop.index') }}" class="lien-filet mt-10">Continuer mes achats</a>
                </div>

                <aside class="lg:col-span-4">
                    <div class="bg-ivoire-2 p-8 lg:sticky lg:top-28 lg:p-10">
                        <p class="font-serif text-3xl italic">Récapitulatif</p>

                        {{-- Livraison : destination et mode choisis ici, repris à la commande. --}}
                        <form method="POST" action="{{ route('cart.shipping') }}" data-cart-shipping data-save-url="{{ route('cart.shipping') }}" class="mt-8 border-t border-encre/15 pt-8">
                            @csrf @method('PUT')
                            <fieldset>
                                <legend class="kicker text-rouge">Livraison</legend>
                                <div class="mt-5 grid grid-cols-[1fr_7rem] gap-4">
                                    <div>
                                        <label for="cart-country" class="champ-label">Pays</label>
                                        <select id="cart-country" name="country" class="champ py-2">
                                            @foreach ($countries as $code => $name)
                                                <option value="{{ $code }}" @selected($choice['country'] === $code)>{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <label for="cart-postcode" class="champ-label">Code postal</label>
                                        <input id="cart-postcode" name="postcode" value="{{ $choice['postcode'] }}" inputmode="numeric" autocomplete="postal-code" placeholder="79200" class="champ py-2 tabular-nums">
                                    </div>
                                </div>

                                <div class="mt-6 flex flex-col gap-2">
                                    @foreach ($quotes as $quote)
                                        @php
                                            $method = $quote['method'];
                                            $selectable = $quote['available'] || $quote['needs_postcode'];
                                        @endphp
                                        <label data-method-card="{{ $method->id }}" @class(['radio-carte items-start gap-3 bg-ivoire p-4', 'cursor-not-allowed opacity-50' => ! $selectable])>
                                            <input type="radio" name="shipping_method_id" value="{{ $method->id }}" class="case mt-1 rounded-full"
                                                @checked(($selected['method']->id ?? null) === $method->id) @disabled(! $selectable)>
                                            <span class="flex grow items-baseline justify-between gap-3">
                                                <span class="text-sm leading-snug">{{ $method->name }}</span>
                                                <span class="shrink-0 text-sm tabular-nums" data-method-cost>
                                                    @if ($quote['available'])
                                                        {{ $quote['cost'] > 0 ? Money::format($quote['cost']) : 'Offert' }}
                                                    @elseif ($quote['needs_postcode'])
                                                        Code postal requis
                                                    @else
                                                        Indisponible
                                                    @endif
                                                </span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                                <noscript><button type="submit" class="bouton bouton-contour mt-4 w-full">Calculer les frais de port</button></noscript>
                            </fieldset>
                        </form>

                        @php $shippingCost = $selected && $selected['available'] ? $selected['cost'] : null; @endphp
                        <dl class="mt-8 space-y-4 border-t border-encre/15 pt-8">
                            <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>{{ $shippingCost === null ? '—' : ($shippingCost > 0 ? Money::format($shippingCost) : 'Offert') }}</dd></div>
                            <div class="ligne-carte pt-2 font-serif text-2xl"><dt>Total TTC</dt><dd class="tabular-nums" data-summary-total>{{ Money::format($cart->subtotal() + ($shippingCost ?? 0)) }}</dd></div>
                        </dl>
                        @if ($nextTier && ! $cart->requiresPickup())
                            <p class="mt-6 text-sm text-gris">Encore <strong class="font-medium text-encre">{{ Money::format($nextTier['missing']) }}</strong> d'achats pour une livraison {{ $nextTier['method'] }} à {{ $nextTier['fee'] > 0 ? Money::format($nextTier['fee']) : 'prix offert' }}.</p>
                        @endif
                        @if ($cart->requiresPickup())
                            <p class="mt-6 text-sm text-gris">Votre panier contient un produit disponible uniquement au magasin : la commande sera à retirer au domaine.</p>
                        @endif
                        <a href="{{ route('checkout.show') }}" class="bouton bouton-plein mt-10 w-full">Passer commande</a>
                        @guest
                            <p class="mt-4 text-center text-xs text-gris">Vous pourrez vous connecter ou créer votre compte à l'étape suivante.</p>
                        @endguest
                    </div>
                </aside>
            </div>
        @endif
    </section>
</x-layouts.app>