@php
    $pageTitle = $category ? $category->name : 'All Products';

    $activeFilters = collect();
    if ($category) {
        $activeFilters->push(['label' => $category->name, 'remove' => request()->except(['cat', 'sub', 'page'])]);
    }
    if ($subcategory) {
        $activeFilters->push(['label' => $subcategory->name, 'remove' => request()->except(['sub', 'page'])]);
    }
    if (request()->filled('q')) {
        $activeFilters->push(['label' => '"'.request('q').'"', 'remove' => request()->except(['q', 'page'])]);
    }
    if ($minPrice !== null || $maxPrice !== null) {
        $priceLabel = match (true) {
            $minPrice !== null && $maxPrice !== null => '$'.number_format($minPrice, 0).' – $'.number_format($maxPrice, 0),
            $minPrice !== null => 'Over $'.number_format($minPrice, 0),
            default => 'Under $'.number_format($maxPrice, 0),
        };
        $activeFilters->push(['label' => $priceLabel, 'remove' => request()->except(['min_price', 'max_price', 'page'])]);
    }
    if ($inStockOnly) {
        $activeFilters->push(['label' => 'In Stock', 'remove' => request()->except(['in_stock', 'page'])]);
    }
    if ($onSale) {
        $activeFilters->push(['label' => 'On Sale', 'remove' => request()->except(['on_sale', 'page'])]);
    }
@endphp
<x-store-layout :title="$pageTitle">

<main class="container py-4">

  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb small mb-0">
      <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted-slate text-decoration-none">Home</a></li>
      <li class="breadcrumb-item active">{{ $pageTitle }}</li>
    </ol>
  </nav>

  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
      <h1 class="h3 mb-0">{{ $pageTitle }}</h1>
      <div class="small text-muted-slate">Showing {{ $products->firstItem() ?? 0 }}–{{ $products->lastItem() ?? 0 }} of {{ $products->total() }} results</div>
    </div>
    <div class="d-flex align-items-center gap-2">
      <form method="GET" action="{{ route('products.index') }}" class="d-flex align-items-center gap-2">
        @foreach (request()->except(['sort', 'page']) as $key => $value)
          <input type="hidden" name="{{ $key }}" value="{{ $value }}">
        @endforeach
        <label for="sortSelect" class="small text-muted-slate mb-0 d-none d-sm-inline">Sort by</label>
        <select name="sort" id="sortSelect" class="form-select form-select-sm" style="width:auto" onchange="this.form.submit()">
          <option value="newest" @selected($sort === 'newest')>Newest</option>
          <option value="price_asc" @selected($sort === 'price_asc')>Price: Low to High</option>
          <option value="price_desc" @selected($sort === 'price_desc')>Price: High to Low</option>
          <option value="name_asc" @selected($sort === 'name_asc')>Name: A–Z</option>
        </select>
      </form>
      <button class="btn btn-outline-secondary btn-sm d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
        <i class="bi bi-funnel"></i> Filters
      </button>
    </div>
  </div>

  @if ($activeFilters->isNotEmpty())
    <div class="d-flex flex-wrap align-items-center gap-2 mb-4">
      @foreach ($activeFilters as $filter)
        <a href="{{ route('products.index', $filter['remove']) }}" class="filter-chip">
          {{ $filter['label'] }} <i class="bi bi-x-lg"></i>
        </a>
      @endforeach
      <a href="{{ route('products.index') }}" class="small text-accent text-decoration-none">Clear all</a>
    </div>
  @endif

  <div class="row g-4">
    <div class="col-lg-3 d-none d-lg-block">
      <div class="card-surface p-3">
        @include('partials.store-product-filters', ['idPrefix' => 'desktop-'])
      </div>
    </div>

    <div class="col-lg-9">
      @if ($products->isEmpty())
        <div class="card-surface p-5 text-center text-muted-slate">
          <i class="bi bi-search fs-2 mb-2 d-block"></i>
          No products found.
          @if ($activeFilters->isNotEmpty())
            <div class="mt-2"><a href="{{ route('products.index') }}" class="text-accent text-decoration-none">Clear filters and try again</a></div>
          @endif
        </div>
      @else
        <div class="row g-4">
          @foreach ($products as $product)
            <div class="col-6 col-md-4">
              <x-product-card :product="$product" />
            </div>
          @endforeach
        </div>

        <div class="mt-5">{{ $products->links() }}</div>
      @endif
    </div>
  </div>
</main>

<div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas">
  <div class="offcanvas-header">
    <h5 class="mb-0">Filters</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    @include('partials.store-product-filters', ['idPrefix' => 'mobile-'])
  </div>
</div>

</x-store-layout>