@php
    use App\Support\Money;
    $variants = $product->variants;
    $default = $variants->first();
    $images = collect([$product->image, ...($product->gallery ?? [])])->filter()->unique();
    $settings = app(App\Support\Settings::class);
@endphp

<x-layouts.app :over-light="true" :title="$product->name" :description="$product->meta_description ?: $product->short_description">
    <section class="mx-auto max-w-[1440px] px-5 pt-32 pb-20 sm:px-10 lg:px-14 lg:pt-40 lg:pb-28 xl:pt-48">
        <nav aria-label="Fil d'Ariane" class="kicker mb-10 flex flex-wrap items-center gap-x-3 gap-y-2 text-[0.6rem] text-gris">
            <a href="{{ route('home') }}" class="hover:text-encre">Accueil</a>
            <span aria-hidden="true" class="text-laiton">/</span>
            <a href="{{ route('shop.index') }}" class="hover:text-encre">Boutique</a>
            <span aria-hidden="true" class="text-laiton">/</span>
            <a href="{{ route('shop.category', $category) }}" class="hover:text-encre">{{ $category->name }}</a>
            <span aria-hidden="true" class="text-laiton">/</span>
            <span aria-current="page" class="text-encre">{{ $product->name }}</span>
        </nav>

        <div class="grid gap-14 lg:grid-cols-12 lg:gap-16">
            <div class="lg:col-span-7" data-product-gallery>
                <x-photo :src="$images->first() ? Storage::disk('public')->url($images->first()) : null" :alt="$product->name" class="aspect-[4/3]" data-gallery-main />
                @if ($images->count() > 1)
                    <div class="mt-4 grid grid-cols-4 gap-4">
                        @foreach ($images as $image)
                            <button type="button" data-gallery-thumb="{{ Storage::disk('public')->url($image) }}" aria-label="Afficher la photo {{ $loop->iteration }}" aria-pressed="{{ $loop->first ? 'true' : 'false' }}"
                                class="cursor-pointer opacity-60 outline-offset-4 transition-opacity hover:opacity-100 aria-pressed:opacity-100 aria-pressed:outline aria-pressed:outline-1 aria-pressed:outline-laiton">
                                <img src="{{ Storage::disk('public')->url($image) }}" alt="" loading="lazy" class="aspect-square w-full object-cover">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="lg:col-span-5">
                <p class="kicker mb-5 text-rouge">{{ $category->name }}</p>
                <h1 class="font-serif text-[clamp(2.4rem,4.4vw,4rem)] leading-[1.02]">{{ $product->name }}</h1>
                @if ($product->reference)
                    <p class="kicker mt-4 text-[0.6rem] text-gris">Réf. {{ $product->reference }}</p>
                @endif

                @if ($variants->isEmpty())
                    <p class="alerte mt-10">Ce produit n'est pas disponible à la vente en ce moment. <a href="{{ route('contact.show') }}" class="underline">Contactez-nous</a> pour le réserver.</p>
                @else
                    <form method="POST" action="{{ route('cart.store') }}" data-variant-picker class="mt-10">
                        @csrf
                        <div class="flex items-baseline gap-4">
                            <p class="font-serif text-4xl tabular-nums" data-variant-price>{{ Money::format($default->price) }}</p>
                            <p class="text-lg text-gris line-through tabular-nums" data-variant-compare @if (! $default->isOnSale()) hidden @endif>{{ $default->isOnSale() ? Money::format($default->compare_at_price) : '' }}</p>
                        </div>
                        <p class="kicker mt-3 text-[0.6rem] text-gris">Prix TTC</p>

                        <fieldset class="mt-10">
                            @if ($variants->count() > 1 || $variants->first()->name)
                                <legend class="kicker mb-4 text-gris">{{ $product->variant_label ?: 'Choisissez' }}</legend>
                            @endif
                            <div class="flex flex-col gap-2">
                                @foreach ($variants as $variant)
                                    <label class="radio-carte items-center justify-between p-4">
                                        <span class="flex items-center gap-4">
                                            <input type="radio" name="variant_id" value="{{ $variant->id }}" @checked($variant->is($default)) class="case rounded-full"
                                                data-price="{{ Money::format($variant->price) }}"
                                                data-compare="{{ $variant->isOnSale() ? Money::format($variant->compare_at_price) : '' }}"
                                                data-image="{{ $variant->image ? Storage::disk('public')->url($variant->image) : '' }}">
                                            <span>
                                                <span class="block">{{ $variant->name ?: $product->name }}</span>
                                                @if ($variant->note)
                                                    <span class="block text-xs text-gris">{{ $variant->note }}</span>
                                                @endif
                                            </span>
                                        </span>
                                        <span class="shrink-0 text-right tabular-nums">
                                            @if ($variant->isOnSale())
                                                <span class="mr-2 text-sm text-gris line-through">{{ Money::format($variant->compare_at_price) }}</span>
                                            @endif
                                            {{ Money::format($variant->price) }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                            @error('variant_id')<p class="champ-erreur">{{ $message }}</p>@enderror
                        </fieldset>

                        <div class="mt-8 flex flex-wrap items-end gap-5">
                            <div>
                                <label for="quantity" class="champ-label">Quantité</label>
                                <input id="quantity" name="quantity" type="number" min="1" max="999" value="{{ old('quantity', 1) }}" class="champ w-24 text-center tabular-nums">
                            </div>
                            <button type="submit" class="bouton bouton-plein grow disabled:cursor-not-allowed disabled:opacity-40">Ajouter au panier</button>
                        </div>
                        @error('quantity')<p class="champ-erreur">{{ $message }}</p>@enderror
                    </form>
                @endif

                @if ($product->notice)
                    <p class="alerte mt-8">{{ $product->notice }}</p>
                @endif

                <ul class="mt-10 space-y-3 border-t border-filet pt-8 text-sm text-gris">
                    <li><span class="kicker mr-3 text-[0.6rem] text-encre">Retrait</span> Au magasin du domaine, {{ $settings->get('address.city') }}</li>
                    @unless ($product->pickup_only)
                        <li><span class="kicker mr-3 text-[0.6rem] text-encre">Livraison</span> Au froid avec Chronofresh · {{ $settings->get('shipping.departure') }}</li>
                    @endunless
                </ul>
            </div>
        </div>

        @if ($product->description)
            <div class="mt-24 grid gap-12 border-t border-filet pt-16 lg:grid-cols-12">
                <h2 class="font-serif text-3xl lg:col-span-4">Description</h2>
                <div class="prose-maison lg:col-span-7 lg:col-start-6">{!! $product->description !!}</div>
            </div>
        @endif
    </section>

    @if ($related->isNotEmpty())
        <section class="border-t border-filet bg-ivoire-2 py-20 lg:py-28">
            <div class="mx-auto max-w-[1440px] px-5 sm:px-10 lg:px-14">
                <h2 class="mb-12 font-serif text-[clamp(2rem,3.6vw,3rem)]">Dans le même rayon</h2>
                <div class="grid gap-x-5 gap-y-14 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($related->each->setRelation('category', $category) as $item)
                        <x-product-card :product="$item" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif
</x-layouts.app>