@extends('layouts.app')
@section('title', $product->name)
@section('description', \Illuminate\Support\Str::limit(strip_tags((string) ($product->short_description ?: $product->name)), 155))
@section('og_type', 'product')
@if (!empty($product->images[0]->url))@section('og_image', url($product->images[0]->url))@endif
@section('content')
@php
$m = $shop->money;
$variants = collect($product->variants)->map(fn ($v) => [
    'id' => $v->id, 'color' => $v->color_code, 'size' => $v->size_code, 'stock' => $v->stock,
    'price' => $m->format($v->unit_price), 'compare' => ($v->compare_at && $v->compare_at > $v->unit_price) ? $m->format($v->compare_at) : null,
])->values();
$images = collect($product->images);
$gallery = $images->map(fn ($i) => ['url' => $i->url, 'alt' => $i->alt_text ?: $product->name, 'color' => $i->color_code])->values();
$wished = $shop->wished((int) $product->id);
@endphp

<nav class="mb-6 text-sm text-on-surface-variant" aria-label="{{ __('Breadcrumb') }}">
    <a href="{{ route('shop') }}" class="hover:underline">{{ __('Shop') }}</a>
    @if ($product->categories) / <a href="{{ route('shop', ['category' => $product->categories[0]->slug]) }}" class="hover:underline">{{ $product->categories[0]->name }}</a> @endif
</nav>

<div class="grid gap-10 lg:grid-cols-2">
    {{-- Gallery: the photos switch to the chosen colour's photos (see the script below) --}}
    <div>
                <div class="relative aspect-square overflow-hidden rounded-[40px] bg-surface-mid">
            @if ($images->isNotEmpty()) <img id="main-img" src="{{ $images[0]->url }}" alt="{{ $images[0]->alt_text ?: $product->name }}" class="h-full w-full object-cover"> @endif
            <button type="button" id="prev-img" hidden class="absolute left-3 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-xl font-bold text-primary shadow-soft hover:bg-white" aria-label="{{ __('Previous photo') }}">‹</button>
            <button type="button" id="next-img" hidden class="absolute right-3 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-xl font-bold text-primary shadow-soft hover:bg-white" aria-label="{{ __('Next photo') }}">›</button>
        </div>
        <div id="thumbs" class="mt-3 grid grid-cols-5 gap-3">
            @if ($images->count() > 1)
                @foreach ($images as $i => $img)
                    <button type="button" data-thumb="{{ $img->url }}" class="aspect-square overflow-hidden rounded-2xl bg-surface-mid ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary" aria-label="{{ __('Photo :n', ['n' => $i + 1]) }}"><img src="{{ $img->url }}" alt="" loading="lazy" class="h-full w-full object-cover"></button>
                @endforeach
            @endif
        </div>
    </div>

    {{-- Buy box --}}
    <div class="lg:pt-4">
        @if ($product->is_new_arrival)<span class="mb-3 inline-block rounded-full bg-tertiary-container px-3 py-1 text-xs font-extrabold uppercase tracking-wider text-on-tertiary">{{ __('New') }}</span>@endif
        <h1 class="text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">{{ $product->name }}</h1>
        @if ($product->review_count > 0)<div class="mt-2"><x-stars :rating="$product->avg_rating" :count="$product->review_count"/></div>@endif

        <p class="mt-4 flex items-baseline gap-3">
            <span id="price" class="text-3xl font-extrabold text-primary">{{ $m->format($product->price) }}</span>
            <span id="compare" class="text-lg text-on-surface-variant line-through {{ $product->on_sale ? '' : 'hidden' }}">{{ $product->compare_at ? $m->format($product->compare_at) : '' }}</span>
        </p>

        @if ($product->short_description)<p class="mt-4 text-on-surface-variant">{{ $product->short_description }}</p>@endif

        <form method="POST" action="{{ route('cart.add') }}" id="buy" class="mt-8 space-y-6" data-cart>
            @csrf
            <input type="hidden" name="variant_id" id="variant_id" value="">

            @if (count($product->colors) > 0)
            <fieldset>
                <legend class="mb-3 text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Color') }}: <span id="color-label" class="font-bold normal-case tracking-normal text-on-surface-variant"></span></legend>
                <div class="flex flex-wrap gap-3">
                    @foreach ($product->colors as $c)
                        <label class="cursor-pointer" title="{{ $c->label }}">
                            <input type="radio" name="color" value="{{ $c->code }}" data-label="{{ $c->label }}" class="peer sr-only">
                            <span class="block h-11 w-11 rounded-full border-2 border-white ring-1 ring-outline peer-checked:ring-2 peer-checked:ring-primary peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary" style="background: {{ $c->hex ?: '#ccc' }}"></span>
                            <span class="sr-only">{{ $c->label }}</span>
                        </label>
                    @endforeach
                </div>
            </fieldset>
            @endif

            @if (count($product->sizes) > 0)
            <fieldset>
                <legend class="mb-3 text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Size') }}</legend>
                <div class="flex flex-wrap gap-2">
                    @foreach ($product->sizes as $s)
                        <label class="cursor-pointer"><input type="radio" name="size" value="{{ $s->code }}" class="peer sr-only">
                            <span data-size="{{ $s->code }}" class="flex min-h-[44px] items-center rounded-full border border-outline-variant px-5 text-sm font-bold peer-checked:border-primary peer-checked:bg-primary peer-checked:text-on-primary peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-primary">{{ $s->label }}</span></label>
                    @endforeach
                </div>
            </fieldset>
            @endif

            <div class="flex flex-wrap items-center gap-3">
                <div class="inline-flex items-center rounded-full border border-outline-variant">
                    <button type="button" id="qty-minus" class="flex h-12 w-12 items-center justify-center rounded-full hover:bg-surface-mid" aria-label="{{ __('Fewer') }}"><x-icon name="minus"/></button>
                    <input id="qty" name="qty" value="1" inputmode="numeric" readonly aria-label="{{ __('Quantity') }}" class="w-10 bg-transparent text-center font-bold">
                    <button type="button" id="qty-plus" class="flex h-12 w-12 items-center justify-center rounded-full hover:bg-surface-mid" aria-label="{{ __('More') }}"><x-icon name="plus"/></button>
                </div>
                <x-btn type="submit" id="add-btn" class="flex-1 sm:flex-none sm:min-w-[220px]" disabled><x-icon name="bag"/> <span id="add-label">{{ __('Add to bag') }}</span></x-btn>
            </div>
            <p id="stock-note" class="min-h-[1.25rem] text-sm font-semibold text-on-surface-variant" role="status"></p>
        </form>

        @auth
            <form method="POST" action="{{ route('account.wishlist.toggle') }}" class="mt-2" data-wishlist data-style="text">@csrf<input type="hidden" name="product_id" value="{{ $product->id }}">
                <button class="inline-flex min-h-[44px] items-center gap-2 text-sm font-bold text-primary hover:underline" aria-pressed="{{ $wished ? 'true' : 'false' }}"><x-icon name="heart"/> <span data-wl-label>{{ $wished ? __('Remove from wishlist') : __('Save to wishlist') }}</span></button></form>
        @endauth

        <dl class="mt-8 divide-y divide-surface-variant rounded-[28px] bg-surface-mid px-6 text-sm">
            @if ($product->material)<div class="flex justify-between gap-4 py-4"><dt class="font-bold text-primary">{{ __('Material') }}</dt><dd class="text-right text-on-surface-variant">{{ $product->material }}</dd></div>@endif
            @if ($product->care_instructions)<div class="flex justify-between gap-4 py-4"><dt class="font-bold text-primary">{{ __('Care') }}</dt><dd class="text-right text-on-surface-variant">{{ $product->care_instructions }}</dd></div>@endif
        </dl>

        @if ($product->description)<div class="prose mt-8 max-w-none text-on-surface-variant">{!! nl2br(e($product->description)) !!}</div>@endif
    </div>
</div>

@if ($reviews)
<section class="mt-20" id="reviews">
    <x-section-heading :title="__('Reviews')"/>
    <div class="grid gap-4 md:grid-cols-2">
        @foreach ($reviews as $r)
            <article class="rounded-[28px] border border-surface-variant bg-white p-6">
                <x-stars :rating="$r->rating"/>
                @if ($r->title)<p class="mt-2 font-extrabold text-primary">{{ $r->title }}</p>@endif
                @if ($r->body)<p class="mt-1 text-on-surface-variant">{{ $r->body }}</p>@endif
                <p class="mt-3 text-sm font-bold text-primary">{{ $r->first_name }} @if ($r->verified)<span class="ml-1 rounded-full bg-secondary-container px-2 py-0.5 text-xs text-on-secondary-container">{{ __('Verified purchase') }}</span>@endif</p>
            </article>
        @endforeach
    </div>
    @include('partials.pagination', ['result' => $reviewPage, 'param' => 'reviews', 'anchor' => '#reviews'])
</section>
@endif

@if ($related)
<section class="mt-20">
    <x-section-heading :title="__('You may also like')"/>
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">@foreach ($related as $p)<x-product-card :item="$p"/>@endforeach</div>
</section>
@endif

@push('scripts')
<script>
(() => {
  const variants = @json($variants);
  const images = @json($gallery);
  const form = document.getElementById('buy');
  const hasColor = !!form.querySelector('input[name=color]');
  const hasSize = !!form.querySelector('input[name=size]');
  const $ = (id) => document.getElementById(id);
  const t = { add: @json(__('Add to bag')), pick: @json(__('Choose options')), sold: @json(__('Sold out')),
              left: @json(__('Only :n left')), inStock: @json(__('In stock')), photo: @json(__('Photo :n')) };
  let color = form.querySelector('input[name=color]:checked')?.value ?? null;
  let size = form.querySelector('input[name=size]:checked')?.value ?? null;
  const match = () => variants.find(v => (!hasColor || v.color === color) && (!hasSize || v.size === size));

  // Pre-select the first colour that has stock so the page never loads in an unbuyable state.
  if (hasColor) { const first = variants.find(v => v.stock > 0) ?? variants[0]; const r = form.querySelector(`input[name=color][value="${first.color}"]`); if (r) { r.checked = true; color = r.value; } }
  if (!hasColor && !hasSize && variants.length === 1) { /* single variant: nothing to choose */ }

  // Photos: the chosen colour's own photos first, then the photos shared by every colour.
  // A colour with no photos of its own shows everything, so the gallery is never empty.
    // Photos: every photo of the product stays available. The chosen colour's own photos come first and
  // the big picture jumps to the first of them; the arrows and the small pictures switch the view.
  let shown = '', list = [], cur = 0;
  function setMain(n) {
    const main = $('main-img'); if (!main || !list.length) return;
    cur = (n + list.length) % list.length;
    main.src = list[cur].url; main.alt = list[cur].alt;
    document.querySelectorAll('#thumbs [data-thumb]').forEach((b, i) => {
      b.classList.toggle('ring-2', i === cur); b.classList.toggle('ring-primary', i === cur);
    });
  }
  function showPhotos() {
    const box = $('thumbs'); if (!$('main-img') || !box || !images.length) return;
    const own = color ? images.filter(i => i.color === color) : [];
    list = own.length ? own.concat(images.filter(i => i.color !== color)) : images.slice();
    const key = list.map(i => i.url).join('|'); if (key === shown) return; shown = key;
    box.innerHTML = '';
    $('prev-img').hidden = $('next-img').hidden = list.length < 2;
    if (list.length > 1) list.forEach((img, n) => {
      const b = document.createElement('button'); b.type = 'button'; b.dataset.thumb = String(n);
      b.className = 'aspect-square overflow-hidden rounded-2xl bg-surface-mid ring-offset-2 focus-visible:ring-2 focus-visible:ring-primary';
      b.setAttribute('aria-label', t.photo.replace(':n', n + 1));
      const im = document.createElement('img'); im.src = img.url; im.alt = ''; im.className = 'h-full w-full object-cover'; b.appendChild(im);
      box.appendChild(b);
    });
    setMain(0);
  }

  function render() {
    showPhotos();
    const v = match();
    $('color-label') && ($('color-label').textContent = form.querySelector('input[name=color]:checked')?.dataset.label ?? '');
    // Dim sizes that are sold out in the chosen colour.
    form.querySelectorAll('[data-size]').forEach(el => {
      const vv = variants.find(x => (!hasColor || x.color === color) && x.size === el.dataset.size);
      el.classList.toggle('opacity-40', !vv || vv.stock <= 0);
      el.classList.toggle('line-through', !vv || vv.stock <= 0);
    });
    const btn = $('add-btn'), note = $('stock-note');
    if (!v && (hasColor || hasSize)) { btn.disabled = true; $('add-label').textContent = t.pick; note.textContent = ''; $('variant_id').value = ''; return; }
    const one = v ?? variants[0];
    $('variant_id').value = one.id;
    $('price').textContent = one.price;
    $('compare').textContent = one.compare ?? ''; $('compare').classList.toggle('hidden', !one.compare);
    if (one.stock <= 0) { btn.disabled = true; $('add-label').textContent = t.sold; note.textContent = ''; }
    else { btn.disabled = false; $('add-label').textContent = t.add; note.textContent = one.stock <= 5 ? t.left.replace(':n', one.stock) : t.inStock; }
    const q = $('qty'); if (+q.value > Math.min(one.stock, 10)) q.value = Math.max(1, Math.min(one.stock, 10));
  }

  form.addEventListener('change', e => { if (e.target.name === 'color') color = e.target.value; if (e.target.name === 'size') size = e.target.value; render(); });
  $('qty-minus').onclick = () => { const q = $('qty'); q.value = Math.max(1, +q.value - 1); };
  $('qty-plus').onclick = () => { const q = $('qty'); const v = match() ?? variants[0]; q.value = Math.min(+q.value + 1, 10, Math.max(1, v.stock)); };
    $('thumbs')?.addEventListener('click', e => { const b = e.target.closest('[data-thumb]'); if (b) setMain(+b.dataset.thumb); });
  $('prev-img')?.addEventListener('click', () => setMain(cur - 1));
  $('next-img')?.addEventListener('click', () => setMain(cur + 1));
  render();
})();
</script>
@endpush
@endsection