@extends('layouts.app')

@php
    $storeName = $shopSettings['shop_name'] ?? 'Orange Groceries';
    $currentCategory = request('category') ? $categories->where('slug', request('category'))->first() : null;
    $currentSubcategory = (request('subcategory') && $currentCategory) ? $currentCategory->subcategories->where('slug', request('subcategory'))->first() : null;

    if (request('q')) {
        $seoTitle = 'Search: "' . request('q') . '" - ' . $storeName;
        $seoDesc = 'Explore search results for "' . request('q') . '" on ' . $storeName . '. Fast 30-min delivery, best deals & fresh groceries.';
        $seoKeywords = request('q') . ', search groceries, buy online, ' . $storeName;
        $seoRobots = 'noindex, follow';
        $canonicalUrl = route('products.index');
    } elseif ($currentSubcategory) {
        $seoTitle = $currentSubcategory->name . ' (' . $currentCategory->name . ') - Buy Online | ' . $storeName;
        $seoDesc = 'Shop ' . $currentSubcategory->name . ' online at lowest prices from ' . $storeName . '. Express 30-minute delivery to your doorstep.';
        $seoKeywords = $currentSubcategory->name . ', ' . $currentCategory->name . ', buy ' . $currentSubcategory->name . ' online, ' . $storeName;
        $seoRobots = 'index, follow';
        $canonicalUrl = route('products.index', ['category' => $currentCategory->slug, 'subcategory' => $currentSubcategory->slug]);
    } elseif ($currentCategory) {
        $seoTitle = !empty($currentCategory->meta_title) ? $currentCategory->meta_title : ($currentCategory->name . ' - Buy Online at Best Prices | ' . $storeName);
        $seoDesc = !empty($currentCategory->meta_description) ? $currentCategory->meta_description : ('Order top quality ' . $currentCategory->name . ' online from ' . $storeName . '. Wide selection of daily essentials with superfast 30-min delivery.');
        $seoKeywords = !empty($currentCategory->meta_keywords) ? $currentCategory->meta_keywords : ($currentCategory->name . ', buy ' . $currentCategory->name . ' online, ' . $currentCategory->name . ' prices, ' . $storeName);
        $seoRobots = 'index, follow';
        $canonicalUrl = !empty($currentCategory->canonical_url) ? $currentCategory->canonical_url : route('products.index', ['category' => $currentCategory->slug]);
    } else {
        $seoTitle = 'All Groceries & Daily Essentials - ' . $storeName;
        $seoDesc = 'Explore our complete catalog of groceries, staples, snacks, beverages and daily essentials on ' . $storeName . '. 30-minute express delivery.';
        $seoKeywords = 'all groceries, buy groceries online, daily essentials, staples, snacks, ' . $storeName;
        $seoRobots = 'index, follow';
        $canonicalUrl = route('products.index');
    }
@endphp

@section('title', $seoTitle)
@section('meta_description', $seoDesc)
@section('meta_keywords', $seoKeywords)
@section('meta_robots', $seoRobots)
@section('canonical', $canonicalUrl)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    
    <!-- Breadcrumb -->
    <nav class="flex text-xs font-semibold text-slate-400 mb-6 gap-2">
        <a href="{{ route('home') }}" class="hover:text-brand-600">Home</a>
        <span>/</span>
        <span class="text-slate-800">All Groceries</span>
    </nav>

    <div class="flex flex-col lg:flex-row gap-8">
        
        <!-- Filter Sidebar -->
        <aside class="w-full lg:w-64 shrink-0 bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm h-fit">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4 mb-6">
                <h3 class="font-extrabold text-slate-900 text-base flex items-center gap-2">
                    <i class="fa-solid fa-sliders text-brand-600"></i> Filters
                </h3>
                <a href="{{ route('products.index') }}" class="text-xs font-bold text-rose-600 hover:underline">Reset All</a>
            </div>

            <form action="{{ route('products.index') }}" method="GET" class="space-y-6">
                @if(request('q'))
                    <input type="hidden" name="q" value="{{ request('q') }}">
                @endif

                <!-- Search Keyword badge -->
                @if(request('q'))
                    <div class="bg-brand-50 border border-brand-200 text-brand-800 p-3 rounded-2xl text-xs font-bold flex items-center justify-between">
                        <span>Search: "{{ request('q') }}"</span>
                        <a href="{{ route('products.index') }}" class="text-brand-600 hover:text-brand-800"><i class="fa-solid fa-xmark"></i></a>
                    </div>
                @endif

                <!-- Category Filter -->
                <div>
                    <h4 class="text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-3">Categories</h4>
                    <div class="space-y-2 max-h-48 overflow-y-auto no-scrollbar text-xs">
                        @foreach($categories as $cat)
                            <label class="flex items-center justify-between cursor-pointer group">
                                <div class="flex items-center gap-2">
                                    <input type="radio" name="category" value="{{ $cat->slug }}" {{ request('category') == $cat->slug ? 'checked' : '' }} onchange="this.form.submit()" class="text-brand-600 focus:ring-brand-500">
                                    <span class="font-medium text-slate-700 group-hover:text-brand-600">{{ $cat->name }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <!-- Subcategory Filter -->
                @if(request('category'))
                    @php $activeCat = $categories->where('slug', request('category'))->first(); @endphp
                    @if($activeCat && $activeCat->subcategories->count() > 0)
                    <div class="border-t border-slate-100 pt-4">
                        <h4 class="text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-3">Sub Categories</h4>
                        <div class="space-y-2 text-xs">
                            @foreach($activeCat->subcategories as $sub)
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="subcategory" value="{{ $sub->slug }}" {{ request('subcategory') == $sub->slug ? 'checked' : '' }} onchange="this.form.submit()" class="text-brand-600 focus:ring-brand-500">
                                    <span class="font-medium text-slate-700">{{ $sub->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    @endif
                @endif

                <!-- Brand Filter -->
                @if(count($brands) > 0)
                <div class="border-t border-slate-100 pt-4">
                    <h4 class="text-xs font-extrabold text-slate-900 uppercase tracking-wider mb-3">Brands</h4>
                    <div class="space-y-2 max-h-40 overflow-y-auto no-scrollbar text-xs">
                        @foreach($brands as $brand)
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="brand" value="{{ $brand }}" {{ request('brand') == $brand ? 'checked' : '' }} onchange="this.form.submit()" class="text-brand-600 focus:ring-brand-500">
                                <span class="font-medium text-slate-700">{{ $brand }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Toggles -->
                <div class="border-t border-slate-100 pt-4 space-y-3 text-xs font-bold text-slate-700">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="in_stock" value="1" {{ request('in_stock') ? 'checked' : '' }} onchange="this.form.submit()" class="rounded text-brand-600 focus:ring-brand-500">
                        <span>In Stock Only</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="discount" value="1" {{ request('discount') ? 'checked' : '' }} onchange="this.form.submit()" class="rounded text-brand-600 focus:ring-brand-500">
                        <span>On Discount Offer</span>
                    </label>
                </div>
            </form>
        </aside>

        <!-- Product Grid Body -->
        <main class="flex-1">
            
            <!-- Sorting Header -->
            <div class="bg-white p-4 rounded-3xl border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4 mb-6">
                <div class="text-xs text-slate-500 font-bold">
                    Showing <span class="text-slate-900">{{ $products->firstItem() ?? 0 }} - {{ $products->lastItem() ?? 0 }}</span> of <span class="text-slate-900">{{ $products->total() }}</span> Products
                </div>

                <form action="{{ route('products.index') }}" method="GET" class="flex items-center gap-3 text-xs font-bold text-slate-700">
                    @foreach(request()->except(['sort', 'page']) as $k => $v)
                        <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                    @endforeach

                    <span>Sort By:</span>
                    <select name="sort" onchange="this.form.submit()" class="bg-slate-100 border border-slate-200 rounded-xl px-3 py-2 font-bold text-slate-800 focus:outline-none focus:ring-2 focus:ring-brand-500">
                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest Arrivals</option>
                        <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                        <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                        <option value="bestselling" {{ request('sort') == 'bestselling' ? 'selected' : '' }}>Best Selling</option>
                        <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Popularity</option>
                    </select>
                </form>
            </div>

            <!-- Grid -->
            @if($products->count() > 0)
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6">
                    @foreach($products as $product)
                        @include('customer.components.product_card', ['product' => $product])
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $products->links() }}
                </div>
            @else
                <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 shadow-sm">
                    <div class="w-16 h-16 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa-solid fa-magnifying-glass text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-extrabold text-slate-900">No Products Found</h3>
                    <p class="text-xs text-slate-500 mt-1 mb-4">We couldn't find any products matching your current filters.</p>
                    <a href="{{ route('products.index') }}" class="px-6 py-2.5 bg-brand-600 text-white font-bold text-xs rounded-xl shadow">Clear Filters</a>
                </div>
            @endif
        </main>
    </div>
</div>
@endsection