@extends('themes.classic.layouts.app')

@section('title', $category->name.' - Boutique - '.($site_name ?? 'Mon Site'))

@section('content')
<div class="max-w-6xl mx-auto px-6 py-16">
    <nav class="mb-8">
        <a href="{{ route('ecommerce.index') }}" class="text-slate-500 hover:text-slate-900">← Boutique</a>
        <span class="text-slate-400 mx-2">/</span>
        <span class="text-slate-900 font-medium">{{ $category->name }}</span>
    </nav>

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <h1 class="text-3xl font-bold text-slate-900">{{ $category->name }}</h1>
        <form action="{{ route('ecommerce.category', $category->slug) }}" method="GET" class="flex items-center gap-2">
            @if(request('q'))
                <input type="hidden" name="q" value="{{ request('q') }}">
            @endif
            <label for="sort" class="text-sm text-slate-600 whitespace-nowrap">Trier par :</label>
            <select name="sort" id="sort" onchange="this.form.submit()" class="px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 bg-white text-slate-700">
                <option value="" {{ request('sort') === '' ? 'selected' : '' }}>Par défaut</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>
                <option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>Nom A → Z</option>
                <option value="name_desc" {{ request('sort') === 'name_desc' ? 'selected' : '' }}>Nom Z → A</option>
                <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Plus récents</option>
            </select>
        </form>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse($products ?? [] as $product)
        <div class="group block bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-slate-300 transition">
            <a href="{{ route('ecommerce.product', $product->slug) }}" class="block">
                @if($product->primaryImagePath())
                    <img src="{{ asset('storage/'.$product->primaryImagePath()) }}" alt="{{ $product->name }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
                @else
                    <div class="w-full h-48 bg-slate-100 flex items-center justify-center text-slate-400 text-4xl">📦</div>
                @endif
                <div class="p-6">
                    <h2 class="text-lg font-semibold text-slate-900 group-hover:text-primary-500 transition">{{ $product->name }}</h2>
                    <p class="text-xl font-bold text-primary-500 mt-2">{{ number_format($product->price, 2, ',', ' ') }} €</p>
                </div>
            </a>
            @if($product->inStock())
            <div class="px-6 pb-6">
                <form method="POST" action="{{ route('ecommerce.add-to-cart') }}" class="flex gap-2">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="qty" value="1">
                    <button type="submit" class="w-full py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition text-sm">Ajouter au panier</button>
                </form>
            </div>
            @endif
        </div>
        @empty
        <div class="col-span-full text-center py-16 text-slate-500">Aucun produit dans cette catégorie.</div>
        @endforelse
    </div>

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