@extends('layouts.app')
@section('title', 'Nos Produits')

@section('content')

{{-- ═══ PRODUCTS BANNER ═══ --}}
<div class="relative overflow-hidden min-h-[260px] md:min-h-[300px] flex items-center">
    {{-- Background image --}}
    <div class="absolute inset-0">
        <img src="{{ asset('images/banner-products3.jpg') }}"
             alt="Nos accessoires mobiles"
             class="w-full h-full object-cover object-center"
             onerror="this.style.display='none'">
        <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/50"></div>
    </div>

    {{-- Decorative blobs --}}
    <div class="absolute right-0 top-0 w-72 h-72 bg-amber-400/10 rounded-full translate-x-1/3 -translate-y-1/3 blur-3xl pointer-events-none"></div>
    <div class="absolute left-1/4 bottom-0 w-48 h-48 bg-blue-400/10 rounded-full translate-y-1/2 blur-2xl pointer-events-none"></div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 text-center">
        <nav class="flex items-center justify-center gap-2 text-blue-300 text-xs mb-4">
            <a href="{{ route('home') }}" class="hover:text-amber-400 transition-colors">Accueil</a>
            <i class="fas fa-chevron-right text-[10px]"></i>
            <span class="text-white font-medium">Nos Produits</span>
        </nav>
        <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight drop-shadow-lg">
            Nos <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500">Produits</span>
        </h1>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="flex flex-col lg:flex-row gap-8">

        {{-- Sidebar Filters --}}
        <aside class="lg:w-64 flex-shrink-0">
            <form method="GET" action="{{ route('products') }}" id="filterForm">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sticky top-20">
                    <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-filter text-blue-600"></i> Filtres
                    </h3>

                    {{-- Search --}}
                    <div class="mb-5">
                        <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Rechercher</label>
                        <div class="relative">
                            <input type="text" name="search" value="{{ request('search') }}"
                                   placeholder="Nom, marque…"
                                   class="w-full border border-gray-200 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
                            <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                        </div>
                    </div>

                    {{-- Categories --}}
                    <div class="mb-5">
                        <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Catégorie</label>
                        <div class="space-y-1.5">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="category" value="" {{ !request('category') ? 'checked' : '' }} onchange="document.getElementById('filterForm').submit()" class="accent-blue-600">
                                <span class="text-sm text-gray-700">Toutes</span>
                            </label>
                            @foreach($categories as $cat)
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="category" value="{{ $cat->slug }}" {{ request('category') === $cat->slug ? 'checked' : '' }} onchange="document.getElementById('filterForm').submit()" class="accent-blue-600">
                                <span class="text-sm text-gray-700">{{ $cat->name }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    {{-- Sort --}}
                    <div class="mb-5">
                        <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Trier par</label>
                        <select name="sort" onchange="document.getElementById('filterForm').submit()" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                            <option value="newest" {{ request('sort','newest') === 'newest' ? 'selected' : '' }}>Plus récents</option>
                            <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prix croissant</option>
                            <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prix décroissant</option>
                        </select>
                    </div>

                    @if(request('search') || request('category') || request('sort'))
                        <a href="{{ route('products') }}" class="block text-center text-sm text-red-500 hover:text-red-700 font-medium">
                            <i class="fas fa-times mr-1"></i> Effacer les filtres
                        </a>
                    @endif
                </div>
            </form>
        </aside>

        {{-- Products Grid --}}
        <div class="flex-1">
            @if($products->isEmpty())
                <div class="bg-white rounded-2xl p-16 text-center shadow-sm border border-gray-100">
                    <i class="fas fa-search text-5xl text-gray-300 mb-4"></i>
                    <h3 class="text-lg font-semibold text-gray-600 mb-2">Aucun produit trouvé</h3>
                    <p class="text-gray-400 text-sm mb-4">Essayez de modifier vos filtres de recherche.</p>
                    <a href="{{ route('products') }}" class="btn-primary text-white text-sm font-semibold px-6 py-2 rounded-full inline-block">Voir tous</a>
                </div>
            @else
                <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-4">
                    @foreach($products as $product)
                    <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden group">
                        <a href="{{ route('products.show', $product->slug) }}" class="block relative overflow-hidden">
                            <div class="aspect-square bg-gray-50">
                                @if($product->image_url)
                                    <img src="{{ $product->image_url }}"
                                         alt="{{ $product->name }}"
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                         loading="lazy"
                                         onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100\'><i class=\'fas fa-mobile-alt text-4xl text-blue-200\'></i></div>'">
                                @else
                                    <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
                                        <i class="fas fa-mobile-alt text-4xl text-blue-200"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="absolute top-2.5 left-2.5 flex flex-col gap-1">
                                @if($product->old_price)
                                    <span class="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                                        -{{ $product->discount_percent }}%
                                    </span>
                                @endif
                                @if($product->is_featured)
                                    <span class="bg-amber-400 text-amber-900 text-xs font-bold px-2 py-0.5 rounded-full">⭐</span>
                                @endif
                            </div>
                        </a>
                        <div class="p-4">
                            <p class="text-xs text-blue-600 font-semibold mb-1 uppercase tracking-wide">{{ $product->category->name ?? '' }}</p>
                            <a href="{{ route('products.show', $product->slug) }}">
                                <h3 class="text-sm font-semibold text-gray-800 hover:text-blue-700 line-clamp-2 mb-2 transition-colors min-h-[2.5rem]">{{ $product->name }}</h3>
                            </a>
                            @if($product->brand)
                                <p class="text-xs text-gray-400 mb-2">{{ $product->brand }}</p>
                            @endif
                            <div class="flex items-center gap-2 mb-1">
                                <span class="font-extrabold text-blue-700">{{ number_format($product->price, 0, ',', ' ') }} FCFA</span>
                                @if($product->old_price)
                                    <span class="text-xs text-gray-400 line-through">{{ number_format($product->old_price, 0, ',', ' ') }}</span>
                                @endif
                            </div>
                            <div class="flex items-center gap-1 mb-3">
                                @if($product->stock > 0)
                                    <span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
                                    <span class="text-xs text-green-600">En stock</span>
                                @else
                                    <span class="w-1.5 h-1.5 bg-red-400 rounded-full"></span>
                                    <span class="text-xs text-red-500">Rupture</span>
                                @endif
                            </div>
                            @if($product->stock > 0)
                                <form action="{{ route('cart.add', $product) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white text-xs font-semibold py-2.5 rounded-xl flex items-center justify-center gap-1.5 transition-all shadow-sm">
                                        <i class="fas fa-cart-plus"></i> Ajouter au panier
                                    </button>
                                </form>
                            @else
                                <span class="block text-center bg-gray-100 text-gray-400 text-xs font-semibold py-2.5 rounded-xl">Indisponible</span>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>

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

@endsection