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

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

@section('content')
<div class="max-w-6xl mx-auto px-6 py-16">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6 mb-8">
        <h1 class="text-3xl font-bold text-slate-900">Boutique</h1>
        <div class="flex flex-wrap items-center gap-3">
            <form action="{{ route('ecommerce.index') }}" method="GET" class="flex gap-2">
                @if(request('sort'))
                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                @endif
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Rechercher un produit..." class="px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 w-64">
                <button type="submit" class="px-6 py-2.5 bg-slate-800 text-white rounded-xl font-medium hover:bg-slate-700 transition">Rechercher</button>
            </form>
            <form action="{{ route('ecommerce.index') }}" 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>

    @if($categories->isNotEmpty())
    <div class="flex flex-wrap gap-2 mb-8">
        <a href="{{ route('ecommerce.index', request()->only(['q', 'sort'])) }}" class="px-4 py-2 rounded-xl {{ !request()->routeIs('ecommerce.category') ? 'bg-primary-500 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }} transition">
            Tous
        </a>
        @foreach($categories as $cat)
        <a href="{{ route('ecommerce.category', ['slug' => $cat->slug] + request()->only(['q', 'sort'])) }}" class="px-4 py-2 rounded-xl {{ request()->routeIs('ecommerce.category') && request()->route('slug') === $cat->slug ? 'bg-primary-500 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }} transition">
            {{ $cat->name }}
        </a>
        @if($cat->children->isNotEmpty())
            @foreach($cat->children as $sub)
            <a href="{{ route('ecommerce.category', ['slug' => $sub->slug] + request()->only(['q', 'sort'])) }}" class="px-4 py-2 rounded-xl text-sm {{ request()->routeIs('ecommerce.category') && request()->route('slug') === $sub->slug ? 'bg-primary-500 text-white' : 'bg-slate-50 text-slate-600 hover:bg-slate-200' }} transition">
                {{ $sub->name }}
            </a>
            @endforeach
        @endif
        @endforeach
    </div>
    @endif

    @if(session('success'))
    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl">{{ session('success') }}</div>
    @endif

    <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">
            <p class="text-xl">Aucun produit pour le moment.</p>
        </div>
        @endforelse
    </div>

    <div class="mt-8 flex justify-center">
        {{ $products->links() ?? '' }}
    </div>

    <div class="mt-12 flex justify-center">
        <a href="{{ route('ecommerce.cart') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 text-white rounded-xl font-medium hover:bg-slate-800 transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            Voir le panier
        </a>
    </div>
</div>
@endsection
