@extends('layouts.app')

@section('title', 'Products')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Category Banner --}}
    @if(request('category'))
        @php($activeCategory = $categories->firstWhere('id', request('category')))
        @if($activeCategory)
            <div class="mb-8 rounded-2xl overflow-hidden border border-gray-100 bg-white shadow-sm">
                @if($activeCategory->banner)
                    <div class="relative h-48 sm:h-64 lg:h-80 overflow-hidden">
                        <img src="{{ asset('storage/' . $activeCategory->banner) }}" alt="{{ $activeCategory->name }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
                            <div class="flex items-end gap-5">
                                @if($activeCategory->image)
                                    <img src="{{ asset('storage/' . $activeCategory->image) }}" alt="{{ $activeCategory->name }}" class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border-2 border-white/30 object-cover shadow-lg">
                                @endif
                                <div>
                                    <h1 class="text-2xl sm:text-3xl font-bold text-white">{{ $activeCategory->name }}</h1>
                                    @if($activeCategory->meta_description)
                                        <p class="text-sm sm:text-base text-white/80 mt-1 max-w-2xl">{{ Str::limit($activeCategory->meta_description, 120) }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="p-6 sm:p-8">
                        <div class="flex items-center gap-5">
                            @if($activeCategory->image)
                                <img src="{{ asset('storage/' . $activeCategory->image) }}" alt="{{ $activeCategory->name }}" class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl border border-gray-200 object-cover">
                            @else
                                <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl bg-indigo-50 flex items-center justify-center text-3xl sm:text-4xl flex-shrink-0">
                                    {{ $activeCategory->icon ?? '📦' }}
                                </div>
                            @endif
                            <div>
                                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">{{ $activeCategory->name }}</h1>
                                @if($activeCategory->meta_description)
                                    <p class="text-sm sm:text-base text-gray-500 mt-1 max-w-2xl">{{ Str::limit($activeCategory->meta_description, 120) }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @endif
    @endif

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-sm text-gray-500 mb-8">
        <a href="{{ route('home') }}" class="hover:text-indigo-600 transition">Home</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        @if(request('category'))
            @php($cat = $categories->firstWhere('id', request('category')))
            <a href="{{ route('products.index') }}" class="hover:text-indigo-600 transition">Products</a>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <span class="text-gray-900 font-medium">{{ $cat?->name ?? 'Category' }}</span>
        @else
            <span class="text-gray-900 font-medium">All Products</span>
        @endif
    </nav>

    <div class="flex flex-col lg:flex-row gap-8">
        {{-- Sidebar Filters --}}
        <aside class="w-full lg:w-72 flex-shrink-0">
            <div class="card p-6 sticky top-24">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">Filters</h3>
                    <button onclick="this.closest('aside').querySelector('form').reset()" class="text-xs text-indigo-600 hover:text-indigo-700 font-medium">Reset</button>
                </div>

                <form action="{{ route('products.index') }}" method="GET" class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..." class="input-field">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                        <select name="category" class="input-field">
                            <option value="">All Categories</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Quick Categories</label>
                        <div class="space-y-1 max-h-48 overflow-y-auto">
                            @foreach($categories as $cat)
                                <a href="{{ route('products.index', ['category' => $cat->id]) }}" class="flex items-center justify-between px-3 py-2 text-sm rounded-lg transition {{ request('category') == $cat->id ? 'bg-indigo-50 text-indigo-600 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                                    <span class="truncate">{{ $cat->name }}</span>
                                    @if($cat->products_count ?? 0 > 0)
                                        <span class="text-xs text-gray-400 ml-2">{{ $cat->products_count }}</span>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Vendor</label>
                        <select name="vendor" class="input-field">
                            <option value="">All Vendors</option>
                            @foreach($vendors as $v)
                                <option value="{{ $v->id }}" {{ request('vendor') == $v->id ? 'selected' : '' }}>{{ $v->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Price Range</label>
                        <div class="flex gap-3">
                            <input type="number" name="min_price" value="{{ request('min_price') }}" placeholder="Min" class="input-field">
                            <input type="number" name="max_price" value="{{ request('max_price') }}" placeholder="Max" class="input-field">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                        <select name="sort" class="input-field">
                            <option value="">Default</option>
                            <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest</option>
                            <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Price: Low to High</option>
                            <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Price: High to Low</option>
                            <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Most Popular</option>
                            <option value="rating" {{ request('sort') == 'rating' ? 'selected' : '' }}>Highest Rated</option>
                        </select>
                    </div>

                    <button type="submit" class="w-full btn-primary">Apply Filters</button>
                </form>
            </div>
        </aside>

        {{-- Products Grid --}}
        <div class="flex-1">
            <div class="flex justify-between items-center mb-6">
                <div class="flex items-center gap-3">
                    <p class="text-sm text-gray-500">Showing <span class="font-medium text-gray-900">{{ $products->firstItem() }}-{{ $products->lastItem() }}</span> of <span class="font-medium text-gray-900">{{ $products->total() }}</span> products</p>
                    @if(request('category'))
                        @php($cat = $categories->firstWhere('id', request('category')))
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-indigo-50 text-indigo-600 text-xs font-medium rounded-full">
                            {{ $cat?->name ?? '' }}
                            <a href="{{ route('products.index') }}" class="ml-1 hover:text-indigo-800">&times;</a>
                        </span>
                    @endif
                </div>
                {{-- Mobile filter toggle --}}
                <button onclick="document.querySelector('aside').classList.toggle('hidden')" class="lg:hidden btn-secondary text-sm py-2 px-4 flex items-center gap-2">
                    <svg class="w-4 h-4" 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"/></svg>
                    Filters
                </button>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-4">
                @foreach($products as $product)
                    <div class="product-card group">
                        <a href="{{ route('products.show', $product->slug) }}" class="block relative">
                            <div class="product-image-wrapper">
                                @if($product->primaryImage)
                                    <img src="{{ asset('storage/' . $product->primaryImage->path) }}" alt="{{ $product->name }}">
                                @else
                                    <div class="w-full h-full flex items-center justify-center bg-gray-100">
                                        <span class="text-5xl font-bold text-gray-300">{{ substr($product->name, 0, 1) }}</span>
                                    </div>
                                @endif
                                @if($product->getDiscountPercentage() > 0)
                                    <span class="absolute top-3 left-3 bg-rose-500 text-white px-2.5 py-1 rounded-lg text-xs font-bold shadow-lg">
                                        -{{ $product->getDiscountPercentage() }}%
                                    </span>
                                @endif
                                @if($product->vendor)
                                    <span class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm text-gray-700 px-2.5 py-1 rounded-lg text-[10px] font-medium shadow-sm border border-gray-100">
                                        {{ $product->vendor->name }}
                                    </span>
                                @endif
                                <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-12">
                                    <h3 class="font-medium text-white mb-1 line-clamp-2">{{ $product->name }}</h3>
                                    <div class="flex items-center gap-1 mb-2">
                                        <div class="flex text-amber-400">
                                            @for($i = 1; $i <= 5; $i++)
                                                <svg class="w-3 h-3 {{ $i <= round($product->rating) ? 'fill-current' : 'text-white/30' }}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                            @endfor
                                        </div>
                                        <span class="text-xs text-white/60">({{ $product->reviews_count }})</span>
                                    </div>
                                    <div class="flex items-baseline gap-2 mb-3">
                                        <span class="text-lg font-bold text-white">{{ price($product->price) }}</span>
                                        @if($product->compare_price)
                                            <span class="text-sm text-white/50 line-through">{{ price($product->compare_price) }}</span>
                                        @endif
                                    </div>
                                    <div class="flex gap-2">
                                        <a href="{{ route('products.show', $product->slug) }}" class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white text-xs font-medium rounded-lg transition-colors">View</a>
                                        <form action="{{ route('cart.add') }}" method="POST" class="flex-1">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                                            <input type="hidden" name="quantity" value="1">
                                            <button type="submit" class="w-full inline-flex items-center justify-center px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-colors">Add to Cart</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            {{-- Pagination --}}
            <div class="mt-10 flex justify-center">
                {{ $products->links() }}
            </div>
        </div>
    </div>
</div>
@endsection