@extends('layouts.app')
@section('title', $title)
@section('content')
@if ($tops = $shop->banners('category_top'))
<div class="mb-8 space-y-4">@foreach ($tops as $tb)<x-banner :banner="$tb" class="aspect-[16/6] sm:aspect-[16/5]"/>@endforeach</div>
@endif
@php
$sortLabels = ['popular' => __('Popular'), 'newest' => __('Newest'), 'price_asc' => __('Price: low to high'), 'price_desc' => __('Price: high to low')];
$m = $shop->money;
@endphp
<div class="mb-8 flex flex-wrap items-end justify-between gap-x-6 gap-y-4" id="shop-head">
    <div class="min-w-0">
        <h1 class="text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">{{ $filters->q !== '' ? __('Results for “:q”', ['q' => $filters->q]) : $title }}</h1>
        <p class="mt-1 text-on-surface-variant">{{ trans_choice(':count product|:count products', $result['total'], ['count' => $result['total']]) }}</p>
    </div>
    {{-- Sort lives in the heading row. It still belongs to the filter form (form="filters"), so changing it updates the list. --}}
    <label class="flex flex-none items-center gap-2 text-sm font-semibold text-on-surface-variant">{{ __('Sort') }}
        <select name="sort" form="filters" class="min-h-[44px] rounded-full border border-outline-variant bg-white px-4 text-sm font-bold text-primary">
            @foreach ($sortLabels as $k => $label) <option value="{{ $k }}" @selected($filters->sort === $k)>{{ $label }}</option> @endforeach
        </select>
    </label>
</div>

{{-- The filter form wraps ONLY the left panel. The product cards (each with its own wishlist form) sit outside it, because forms cannot be nested. --}}
<div class="grid gap-8 pb-10 lg:grid-cols-[280px_1fr]">
<form method="GET" action="{{ route('shop') }}" id="filters" class="self-start">
    @if ($filters->q !== '') <input type="hidden" name="q" value="{{ $filters->q }}"> @endif
        @if ($filters->onSale) <input type="hidden" name="sale" value="1"> @endif

    <aside class="space-y-6 rounded-[32px] border border-surface-variant bg-white p-6 shadow-soft">
        <details class="group" open>
            <summary class="cursor-pointer list-none text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Category') }}</summary>
            <ul class="mt-3 space-y-1">
                <li><label class="flex min-h-[40px] cursor-pointer items-center gap-3"><input type="radio" name="category" value="" @checked($filters->category === null) class="h-4 w-4 accent-[#1a3627]"> {{ __('All') }}</label></li>
                @foreach ($options['categories'] as $c)
                    <li><label class="flex min-h-[40px] cursor-pointer items-center gap-3 {{ $c->parent_id ? 'pl-5' : '' }}"><input type="radio" name="category" value="{{ $c->slug }}" @checked($filters->category === $c->slug) class="h-4 w-4 accent-[#1a3627]"> {{ $c->name }} <span class="text-xs text-outline">{{ $c->product_count }}</span></label></li>
                @endforeach
            </ul>
        </details>

        @if ($options['colors'])
        <fieldset>
            <legend class="text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Colour') }}</legend>
            <div class="mt-3 flex flex-wrap gap-2">
                @foreach ($options['colors'] as $c)
                    <label class="cursor-pointer" title="{{ $c->label }}">
                        <input type="checkbox" name="color[]" value="{{ $c->code }}" @checked(in_array($c->code, $filters->colors, true)) class="peer sr-only">
                        <span class="block h-9 w-9 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-primary" style="background: {{ $c->hex ?: '#ccc' }}"></span>
                        <span class="sr-only">{{ $c->label }}</span>
                    </label>
                @endforeach
            </div>
        </fieldset>
        @endif

        @if ($options['sizes'])
        <fieldset>
            <legend class="text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Size') }}</legend>
            <div class="mt-3 flex flex-wrap gap-2">
                @foreach ($options['sizes'] as $s)
                    <label class="cursor-pointer"><input type="checkbox" name="size[]" value="{{ $s->code }}" @checked(in_array($s->code, $filters->sizes, true)) class="peer sr-only">
                        <span class="flex min-h-[40px] items-center rounded-full border border-outline-variant px-4 text-sm font-bold peer-checked:border-primary peer-checked:bg-primary peer-checked:text-on-primary">{{ $s->label }}</span></label>
                @endforeach
            </div>
        </fieldset>
        @endif

        <!--<fieldset>-->
        <!--    <legend class="text-sm font-extrabold uppercase tracking-wider text-primary">{{ __('Price') }} ({{ $m->code }})</legend>-->
        <!--    <div class="mt-3 flex items-center gap-2">-->
        <!--        <input type="number" name="min" min="0" step="any" value="{{ request('min') }}" placeholder="{{ __('Min') }}" aria-label="{{ __('Minimum price') }}" class="min-h-[44px] w-full rounded-2xl border border-outline-variant px-3 text-sm">-->
        <!--        <span>–</span>-->
        <!--        <input type="number" name="max" min="0" step="any" value="{{ request('max') }}" placeholder="{{ __('Max') }}" aria-label="{{ __('Maximum price') }}" class="min-h-[44px] w-full rounded-2xl border border-outline-variant px-3 text-sm">-->
        <!--    </div>-->
        <!--</fieldset>-->

        <!--<div class="space-y-1">-->
        <!--    <label class="flex min-h-[40px] cursor-pointer items-center gap-3"><input type="checkbox" name="sale" value="1" @checked($filters->onSale) class="h-4 w-4 accent-[#1a3627]"> {{ __('Discount') }}</label>-->
        <!--    <label class="flex min-h-[40px] cursor-pointer items-center gap-3"><input type="checkbox" name="new" value="1" @checked($filters->newOnly) class="h-4 w-4 accent-[#1a3627]"> {{ __('New arrivals') }}</label>-->
        <!--</div>-->

        <div class="flex flex-col gap-2" id="shop-clear">
            <noscript><x-btn type="submit" block>{{ __('Apply filters') }}</x-btn></noscript>
            @if ($filters->isFiltered()) <x-btn :href="route('shop')" variant="ghost" block>{{ __('Clear all') }}</x-btn> @endif
        </div>
    </aside>
</form>

        <section id="shop-results">
        @if ($result['items'])
            <div class="grid grid-cols-2 gap-4 xl:grid-cols-3">@foreach ($result['items'] as $p)<x-product-card :item="$p"/>@endforeach</div>
            @include('partials.pagination')
        @else
            <x-empty :title="__('Nothing matches those filters')" :text="__('Try removing a filter or two.')"><x-btn :href="route('shop')">{{ __('Clear all') }}</x-btn></x-empty>
        @endif
    </section>
</div>

@push('head')
<style>
/* On desktop the filter panel follows you down the page and stops where the product list ends, so it never sits
   on the footer. When the window is shorter than the panel (for example with the inspector open) the panel
   scrolls inside itself, so every filter can still be reached. */
@media (min-width: 1024px) {
  #filters { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; scrollbar-width: none; scrollbar-color: #c0c9c1 transparent; border-radius: 32px;}
}
</style>
@endpush
@push('scripts')
<script>
// Filters apply at once without reloading the page: only the product list is swapped.
(() => {
  const form = document.getElementById('filters'); if (!form) return;

  const parts = ['shop-head', 'shop-results', 'shop-clear'];
  const cache = new Map(); // address -> page text: a filter you already opened shows again instantly
  let timer, ctrl;
  const url = () => {
    const p = new URLSearchParams(new FormData(form));
    [...p.keys()].forEach(k => { if (p.get(k) === '') p.delete(k); }); // keep the address tidy
    const q = p.toString();
    return form.getAttribute('action') + (q ? '?' + q : '');
  };
  const load = async (target, scrollTop) => {
    if (ctrl) ctrl.abort(); ctrl = new AbortController();
    const box = document.getElementById('shop-results'); box.style.opacity = '.5';
    try {
      let html = cache.get(target);
      if (html === undefined) {
        const r = await fetch(target, { signal: ctrl.signal, headers: { 'X-Requested-With': 'XMLHttpRequest' } });
        if (!r.ok) throw new Error('bad');
        html = await r.text();
        if (cache.size > 30) cache.delete(cache.keys().next().value);
        cache.set(target, html);
      }
      const doc = new DOMParser().parseFromString(html, 'text/html');
      for (const id of parts) { const n = doc.getElementById(id), o = document.getElementById(id); if (!n || !o) throw new Error('shape'); o.replaceWith(n); }
      document.title = doc.title;
      history.pushState({ shop: 1 }, '', target);
      if (scrollTop) document.getElementById('shop-head').scrollIntoView({ behavior: 'smooth', block: 'start' });
    } catch (e) {
      if (e.name === 'AbortError') return;
      location.href = target; // anything unexpected: fall back to a normal page load
    }
  };
  const go = () => load(url(), false);
  // a changed heart must not come back stale from the memory
  document.addEventListener('submit', (e) => { if (e.target.closest('form[data-wishlist]')) cache.clear(); });

  // "Clear all": reset every filter on the left and reload only the product list.
  const clearAll = (path) => {
    clearTimeout(timer);
    form.querySelectorAll('input[type=checkbox]').forEach(i => { i.checked = false; });
    form.querySelectorAll('input[type=number]').forEach(i => { i.value = ''; });
    const all = form.querySelector('input[name=category][value=""]'); if (all) all.checked = true;
    form.querySelector('input[name=q]')?.remove();            // the search word is cleared too
        form.querySelector('input[name=sale]')?.remove();         // the discount filter is cleared too
    const hdr = document.getElementById('hdr-q'); if (hdr) hdr.value = '';
    load(path, false);
  };

  const mine = (e) => e.target.form === form; // also true for the sort dropdown, which sits outside the form
  document.addEventListener('change', (e) => {
    if (!mine(e) || !e.target.name) return;
    clearTimeout(timer); timer = setTimeout(go, e.target.type === 'number' ? 600 : 0);
  });
  document.addEventListener('input', (e) => { if (mine(e) && e.target.type === 'number') { clearTimeout(timer); timer = setTimeout(go, 800); } });
  form.addEventListener('submit', (e) => { e.preventDefault(); clearTimeout(timer); go(); });

  // Links inside the filter panel and the product list: page numbers and "Clear all" load without a refresh.
  document.addEventListener('click', (e) => {
    const a = e.target.closest('#shop-clear a[href], #shop-results a[href]'); if (!a || e.metaKey || e.ctrlKey || e.shiftKey) return;
    const u = new URL(a.href, location.href);
    if (u.pathname !== location.pathname) return;
    if (u.searchParams.has('page')) { e.preventDefault(); load(u.pathname + u.search, true); }
    else if (u.search === '') { e.preventDefault(); clearAll(u.pathname); }   // the plain /shop link = Clear all
  });
  window.addEventListener('popstate', () => location.reload()); // Back button: show that earlier filter
})();
</script>
@endpush
@endsection