@extends('layouts.app')

@section('title', 'Footwear Shop & Collections')

@section('content')

<!-- Header Breadcrumb & Title -->
<div class="mb-8">
    <div class="flex items-center gap-2 text-xs text-slate-400 mb-2">
        <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
        <span>/</span>
        <span class="text-slate-200 font-semibold">Shop Footwear</span>
        @if(!empty($filters['category']))
            <span>/</span>
            <span class="text-brand-light font-bold capitalize">{{ str_replace('-', ' ', $filters['category']) }}</span>
        @endif
    </div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="font-display font-black text-2xl sm:text-3xl text-white">All Footwear Collections</h1>
            <p class="text-xs text-slate-400 mt-1">Showing {{ $products->total() }} premium footwear styles</p>
        </div>

        <!-- Quick Sort selector -->
        <div class="flex items-center gap-2">
            <span class="text-xs text-slate-400 font-semibold hidden sm:inline">Sort:</span>
            <select onchange="window.location.href = this.value" class="bg-ink-card border border-white/10 text-slate-200 text-xs rounded-xl px-3.5 py-2 focus:ring-2 focus:ring-brand-light focus:outline-none">
                <option value="{{ request()->fullUrlWithQuery(['sort' => 'newest']) }}" {{ ($filters['sort'] ?? '') === 'newest' ? 'selected' : '' }}>Newest Drops</option>
                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}" {{ ($filters['sort'] ?? '') === 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}" {{ ($filters['sort'] ?? '') === 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                <option value="{{ request()->fullUrlWithQuery(['sort' => 'discount']) }}" {{ ($filters['sort'] ?? '') === 'discount' ? 'selected' : '' }}>Biggest Discounts</option>
            </select>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    {{-- ===== FILTERS SIDEBAR ===== --}}
    <aside class="lg:col-span-1">
        <form method="GET" action="{{ route('products.index') }}" class="bg-ink-card rounded-3xl border border-white/10 p-6 space-y-6 sticky top-24 shadow-xl">
            
            <!-- Header -->
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <div class="flex items-center gap-2">
                    <svg class="w-4 h-4 text-brand-light" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
                    <h3 class="font-heading font-bold text-white text-sm">Filters</h3>
                </div>
                @if(array_filter($filters))
                    <a href="{{ route('products.index') }}" class="text-[11px] text-brand-light hover:underline font-bold">Reset All</a>
                @endif
            </div>

            <!-- Search Filter -->
            <div>
                <label class="font-heading font-semibold text-xs text-slate-300 block mb-2">Search Keyword</label>
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="e.g. runner, oxford, flex..."
                       class="w-full bg-ink border border-white/10 rounded-xl px-3.5 py-2 text-xs text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
            </div>

            <!-- Category Radio Filter -->
            <div>
                <label class="font-heading font-semibold text-xs text-slate-300 block mb-2">Category</label>
                <div class="space-y-1.5 text-xs">
                    <label class="flex items-center justify-between p-2 rounded-xl hover:bg-white/5 cursor-pointer {{ empty($filters['category']) ? 'bg-brand/20 text-brand-light font-bold' : 'text-slate-300' }}">
                        <div class="flex items-center gap-2">
                            <input type="radio" name="category" value="" {{ empty($filters['category']) ? 'checked' : '' }} class="sr-only">
                            <span>All Footwear</span>
                        </div>
                    </label>
                    @foreach($categories as $cat)
                        <label class="flex items-center justify-between p-2 rounded-xl hover:bg-white/5 cursor-pointer {{ ($filters['category'] ?? '') === $cat->slug ? 'bg-brand/20 text-brand-light font-bold' : 'text-slate-300' }}">
                            <div class="flex items-center gap-2">
                                <input type="radio" name="category" value="{{ $cat->slug }}" {{ ($filters['category'] ?? '') === $cat->slug ? 'checked' : '' }} class="sr-only">
                                <span>{{ $cat->name }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Price Range Filter -->
            <div>
                <label class="font-heading font-semibold text-xs text-slate-300 block mb-2">Price Range (₹)</label>
                <div class="flex items-center gap-2 mb-3">
                    <input type="number" name="min_price" value="{{ $filters['min_price'] ?? '' }}" placeholder="Min ₹" 
                           class="w-full bg-ink border border-white/10 rounded-xl px-3 py-1.5 text-xs text-slate-100 placeholder-slate-500">
                    <span class="text-slate-500">–</span>
                    <input type="number" name="max_price" value="{{ $filters['max_price'] ?? '' }}" placeholder="Max ₹" 
                           class="w-full bg-ink border border-white/10 rounded-xl px-3 py-1.5 text-xs text-slate-100 placeholder-slate-500">
                </div>
            </div>

            <!-- Gender Filter -->
            <div>
                <label class="font-heading font-semibold text-xs text-slate-300 block mb-2">Gender</label>
                <select name="gender" class="w-full bg-ink border border-white/10 rounded-xl px-3 py-2 text-xs text-slate-200 focus:ring-2 focus:ring-brand-light focus:outline-none">
                    <option value="">All Genders</option>
                    @foreach(['Men', 'Women', 'Unisex', 'Kids'] as $g)
                        <option value="{{ $g }}" {{ ($filters['gender'] ?? '') === $g ? 'selected' : '' }}>{{ $g }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Brand Filter -->
            @if($brands->isNotEmpty())
                <div>
                    <label class="font-heading font-semibold text-xs text-slate-300 block mb-2">Brand</label>
                    <select name="brand" class="w-full bg-ink border border-white/10 rounded-xl px-3 py-2 text-xs text-slate-200 focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <option value="">All Brands</option>
                        @foreach($brands as $b)
                            <option value="{{ $b }}" {{ ($filters['brand'] ?? '') === $b ? 'selected' : '' }}>{{ $b }}</option>
                        @endforeach
                    </select>
                </div>
            @endif

            <!-- Submit buttons -->
            <div class="flex flex-col gap-2 pt-2">
                <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white text-xs font-bold py-2.5 rounded-full shadow-glow transition">
                    Apply Filters
                </button>
                <a href="{{ route('products.index') }}" class="w-full text-center border border-white/10 text-xs font-semibold py-2 rounded-full text-slate-400 hover:text-white hover:bg-white/5 transition">
                    Reset
                </a>
            </div>
        </form>
    </aside>

    {{-- ===== RESULTS GRID ===== --}}
    <div class="lg:col-span-3">
        
        <!-- Active Filter Badges -->
        @if(array_filter($filters))
            <div class="flex flex-wrap items-center gap-2 mb-6 p-3 rounded-2xl bg-ink-card border border-white/10 text-xs">
                <span class="text-slate-400 font-medium text-[11px]">Active Filters:</span>
                @foreach(array_filter($filters) as $k => $v)
                    @if($v && $k !== 'sort')
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand/20 text-brand-light border border-brand/30 text-[11px] font-bold">
                            <span class="capitalize">{{ $k }}: {{ $v }}</span>
                        </span>
                    @endif
                @endforeach
                <a href="{{ route('products.index') }}" class="text-[11px] text-rose-400 hover:underline font-bold ml-auto">Clear all</a>
            </div>
        @endif

        <!-- Product Cards Grid -->
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-5">
            @forelse($products as $product)
                <x-product-card :product="$product" />
            @empty
                <div class="col-span-full bg-ink-card border border-white/10 rounded-3xl p-12 text-center">
                    <span class="text-4xl mb-3 block">🔍</span>
                    <h3 class="font-heading font-bold text-lg text-white mb-2">No footwear matched your search</h3>
                    <p class="text-xs text-slate-400 mb-6 max-w-sm mx-auto">Try clearing some filter criteria or searching for different keywords.</p>
                    <a href="{{ route('products.index') }}" class="inline-block bg-brand hover:bg-brand-hover text-white text-xs font-bold px-6 py-2.5 rounded-full shadow-glow transition">
                        View All Footwear
                    </a>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        <div class="mt-10">
            {{ $products->links() }}
        </div>
    </div>
</div>

@endsection