@extends('layouts.app')

@section('title', 'Nos Produits — Artisanal')
@section('description', 'Découvrez toute notre gamme de produits artisanaux faits à la main.')

@section('content')

{{-- ── Hero ── --}}
<section class="relative text-white overflow-hidden" style="min-height: 380px;">
    {{-- Image de fond --}}
    <div class="absolute inset-0">
        <img src="{{ asset('images/apropos2.jpeg')}}"
             alt="Marché artisanal marocain"
             class="w-full h-full object-cover object-center">
        <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(107,66,38,0.85) 0%, rgba(139,94,60,0.70) 50%, rgba(0,0,0,0.45) 100%);"></div>
    </div>
    {{-- Contenu --}}
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
        <!--<span class="inline-block bg-white/15 border border-white/30 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm">-->
        <!--    <i class="fas fa-shopping-bag mr-1 text-yellow-300"></i> Notre catalogue-->
        <!--</span>-->
        <h1 class="font-serif text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Nos Produits</h1>
        <p class="text-white/90 text-lg max-w-xl mx-auto drop-shadow">
            Chaque pièce est unique, façonnée à la main avec des matériaux nobles.
        </p>
    </div>
    {{-- Wave divider --}}
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 50" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 50L1440 50L1440 15C1200 50 960 0 720 15C480 30 240 0 0 15L0 50Z" fill="#ffffff"/>
        </svg>
    </div>
</section>

{{-- ── Filtres par catégorie ── --}}
<section class="bg-white shadow-sm sticky top-16 z-30 border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 overflow-x-auto">
        <div class="flex items-center gap-2 min-w-max">
            <a href="{{ route('products') }}"
               class="px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ !$categoryFilter ? 'bg-primary text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-cream hover:text-primary' }}">
                <i class="fas fa-th-large mr-1"></i> Tous
            </a>
            @foreach($categories as $cat)
            <a href="{{ route('products', ['category' => $cat->slug]) }}"
               class="px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ $categoryFilter === $cat->slug ? 'bg-primary text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-cream hover:text-primary' }}">
                <i class="{{ $cat->icon ?? 'fas fa-tag' }} mr-1"></i> {{ $cat->name }}
            </a>
            @endforeach
        </div>
    </div>
</section>

{{-- ── Grille produits ── --}}
<section class="py-12 bg-cream min-h-96">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        @if($products->count())

        {{-- Barre d'info : total & pagination courante --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-8">
            <p class="text-gray-600 text-sm">
                Affichage de
                <span class="font-semibold text-gray-800">{{ $products->firstItem() }}–{{ $products->lastItem() }}</span>
                sur
                <span class="font-semibold text-gray-800">{{ $products->total() }}</span>
                produit(s)
                @if($categoryFilter)
                dans <span class="text-primary font-semibold">{{ $categories->firstWhere('slug', $categoryFilter)?->name ?? '' }}</span>
                @endif
            </p>
            <p class="text-gray-400 text-xs">
                Page {{ $products->currentPage() }} / {{ $products->lastPage() }}
            </p>
        </div>

        {{-- Grille --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($products as $product)
            @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>

        {{-- Pagination --}}
        @if($products->hasPages())
        <div class="mt-12 flex justify-center">
            <nav class="flex items-center gap-1" aria-label="Pagination">

                {{-- Précédent --}}
                @if($products->onFirstPage())
                <span class="px-4 py-2 rounded-xl text-sm text-gray-300 bg-white border border-gray-100 cursor-not-allowed">
                    <i class="fas fa-chevron-left mr-1"></i> Précédent
                </span>
                @else
                <a href="{{ $products->previousPageUrl() }}"
                   class="px-4 py-2 rounded-xl text-sm text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                    <i class="fas fa-chevron-left mr-1"></i> Précédent
                </a>
                @endif

                {{-- Numéros de pages --}}
                @foreach($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                    @if($page == $products->currentPage())
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-bold bg-primary text-white shadow-md">
                        {{ $page }}
                    </span>
                    @elseif(abs($page - $products->currentPage()) <= 2)
                    <a href="{{ $url }}"
                       class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                        {{ $page }}
                    </a>
                    @elseif($page == 1 || $page == $products->lastPage())
                    <a href="{{ $url }}"
                       class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                        {{ $page }}
                    </a>
                    @elseif(abs($page - $products->currentPage()) == 3)
                    <span class="w-10 h-10 flex items-center justify-center text-gray-400 text-sm">…</span>
                    @endif
                @endforeach

                {{-- Suivant --}}
                @if($products->hasMorePages())
                <a href="{{ $products->nextPageUrl() }}"
                   class="px-4 py-2 rounded-xl text-sm text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                    Suivant <i class="fas fa-chevron-right ml-1"></i>
                </a>
                @else
                <span class="px-4 py-2 rounded-xl text-sm text-gray-300 bg-white border border-gray-100 cursor-not-allowed">
                    Suivant <i class="fas fa-chevron-right ml-1"></i>
                </span>
                @endif

            </nav>
        </div>
        @endif

        @else
        {{-- Aucun produit --}}
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                <i class="fas fa-box-open text-gray-300 text-3xl"></i>
            </div>
            <h3 class="font-serif text-xl font-bold text-gray-700 mb-2">Aucun produit disponible</h3>
            <p class="text-gray-400 mb-6">Revenez bientôt, de nouvelles créations arrivent !</p>
            @if($categoryFilter)
            <a href="{{ route('products') }}"
               class="inline-flex items-center gap-2 bg-primary text-white px-6 py-2.5 rounded-full hover:bg-primary-dark transition-colors">
                <i class="fas fa-arrow-left"></i> Voir tous les produits
            </a>
            @endif
        </div>
        @endif

    </div>
</section>

@endsection