@extends('layouts.site')

@php
    $currentSlug = request()->query('category') ?: null;
    $categoryNav = [
        ['label' => 'Shop All', 'slug' => null],
        ['label' => 'Best Sellers', 'slug' => 'best-sellers'],
        ['label' => 'Immunity', 'slug' => 'immune-support'],
        ['label' => 'Sinus Support', 'slug' => 'sinus-support'],
        ['label' => 'Gut Health', 'slug' => 'gut-health'],
        ['label' => 'Brain Health', 'slug' => 'brain-health'],
        ['label' => 'Kids', 'slug' => 'kids'],
        ['label' => 'Merch', 'slug' => 'merch'],
        ['label' => 'Bundles', 'slug' => 'bundles'],
    ];
    $pageHeading = __('Shop');
    if ($currentSlug) {
        $match = $categories->firstWhere('slug', $currentSlug);
        $pageHeading = $match ? $match->name : ucfirst(str_replace('-', ' ', $currentSlug));
    } else {
        $pageHeading = __('Shop All');
    }
@endphp

@section('title', $pageHeading.' — '.config('app.name', 'Honey B'))

@push('head')
<style>
    .shop-page { padding: 0 0 3rem; }
    .collection-banner-shop { text-align: center; padding: 2rem 1rem 1rem; }
    .collection-banner-shop h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0; font-weight: 600; }
    .collection-navigation-container { margin: 0 0 1.5rem; padding: 0 0 1rem; border-bottom: 1px solid rgb(var(--border-color, 217, 217, 217)); }
    .collection-navigation-select { display: block; width: 100%; max-width: 100%; margin-bottom: 1rem; padding: 0.65rem 0.75rem; font-size: 0.95rem; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; }
    @media screen and (min-width: 741px) {
        .collection-navigation-select { display: none; }
    }
    .main-collection__navigation-list { display: none; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
    @media screen and (min-width: 741px) {
        .main-collection__navigation-list { display: flex; }
    }
    .main-collection__navigation-list a { color: inherit; text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
    .main-collection__navigation-list a:hover { text-decoration: none; border-bottom-color: #22522f; }
    .main-collection__navigation-list a.active { border-bottom-color: #22522f; }
    .shop-page .lead { color: #555; margin: 0 0 1.25rem; max-width: 52ch; }
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
    .card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #fff; }
    .card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #f5f5f5; }
    .card-body { padding: 0.75rem; }
    .price { font-weight: 600; }
    .compare { text-decoration: line-through; color: #666; font-size: 0.9em; margin-left: 0.35rem; }
    a.product-link { text-decoration: none; color: inherit; }
    .pagination-wrap { margin-top: 2rem; }
    .shop-flash { padding: 0.75rem 1rem; margin: 0 0 1rem; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 8px; color: #1b5e20; font-size: 0.95rem; }
</style>
@endpush

@section('content')
<main id="main" role="main" class="anchor shop-page">
    <div class="collection-banner-shop container">
        <h1>{{ $pageHeading }}</h1>
    </div>
    <div class="collection-navigation-container container">
        <label class="visually-hidden" for="collection-nav-select">{{ __('Jump to collection') }}</label>
        <select id="collection-nav-select" class="collection-navigation-select" onchange="if (this.value) window.location.href=this.value">
            @foreach($categoryNav as $item)
                @php $href = $item['slug'] ? route('shop.index', ['category' => $item['slug']]) : route('shop.index'); @endphp
                <option value="{{ $href }}" @if(($item['slug'] === null && $currentSlug === null) || ($item['slug'] === $currentSlug)) selected @endif>{{ $item['label'] }}</option>
            @endforeach
        </select>
        <nav class="main-collection__navigation-list" aria-label="{{ __('Collection') }}">
            @foreach($categoryNav as $item)
                @php $href = $item['slug'] ? route('shop.index', ['category' => $item['slug']]) : route('shop.index'); @endphp
                <a href="{{ $href }}" @if(($item['slug'] === null && $currentSlug === null) || ($item['slug'] === $currentSlug)) class="active" @endif>{{ $item['label'] }}</a>
            @endforeach
        </nav>
    </div>
    <div class="container">
        @if (session('status'))
            <p class="shop-flash" role="status">{{ session('status') }}</p>
        @endif
        <p class="lead">{{ __('Browse active products from your catalog. Filter by category or open a product for details.') }}</p>
        <div class="grid">
            @foreach($products as $product)
                <a href="{{ route('shop.show', $product) }}" class="product-link">
                    <div class="card">
                        @if($product->image_url)
                            <img src="{{ $product->image_url }}" alt="{{ $product->title }}" loading="lazy">
                        @endif
                        <div class="card-body">
                            <div style="font-size:0.85rem;color:#666;">{{ $product->category->name ?? '' }}</div>
                            <strong>{{ $product->title }}</strong>
                            <div class="price">
                                ${{ number_format($product->price, 2) }}
                                @if($product->compare_at_price)
                                    <span class="compare">${{ number_format($product->compare_at_price, 2) }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
        <div class="pagination-wrap">{{ $products->links() }}</div>
        <p style="margin-top:2rem;"><a href="{{ url('/') }}">← {{ __('Home') }}</a> @auth | <a href="{{ route('admin.dashboard') }}">{{ __('Admin') }}</a> @endauth</p>
    </div>
</main>
@endsection

@push('scripts')
<script>
  (function () {
    var el = document.getElementById('collection-nav-select');
    if (!el) return;
    el.addEventListener('change', function () {
      if (this.value) window.location.href = this.value;
    });
  })();
</script>
@endpush
