@extends('layouts.app')

@section('title', 'Nos Créations | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/30 to-white min-h-screen">
        <div class="max-w-7xl mx-auto px-6 py-12 pt-4">
            <div class="text-center mb-16">
                <span class="text-rose-600 uppercase tracking-[0.4em] text-[10px] mb-3 block">Collection</span>
                <h1 class="font-serif text-4xl md:text-5xl italic text-gray-900 mb-4">Toutes nos créations</h1>
                <p class="text-gray-600 text-sm">Explorez notre gamme complète de produits de beauté</p>
            </div>

            <!-- Bouton Filtres mobile -->
            <div class="flex items-center gap-3 mb-6 md:hidden">
                <button onclick="openFiltersModal()"
                    class="flex-1 bg-white border-2 border-rose-200 text-rose-600 px-4 py-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 hover:bg-rose-50 transition">
                    <i data-lucide="filter" class="w-4 h-4"></i>
                    Filtres
                </button>
            </div>

            <!-- Modale Filtres Mobile -->
            <div id="filters-modal" class="hidden fixed inset-0 bg-black/50 z-50 md:hidden">
                <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl max-h-[80vh] overflow-y-auto">
                    <div class="sticky top-0 bg-white border-b border-rose-100 px-6 py-4 flex items-center justify-between">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                            <i data-lucide="filter" class="w-5 h-5 text-rose-500"></i>
                            Filtres
                        </h3>
                        <button onclick="closeFiltersModal()" class="p-2 hover:bg-gray-100 rounded-full transition">
                            <i data-lucide="x" class="w-5 h-5 text-gray-500"></i>
                        </button>
                    </div>

                    <div class="p-6 space-y-6">
                        <!-- Catégories dans la modale -->
                        <div>
                            <h4 class="uppercase text-[11px] tracking-widest font-bold mb-4 text-gray-900">Catégories</h4>
                            <div class="space-y-3">
                                <a href="{{ route('shop') }}" onclick="closeFiltersModal()"
                                    class="{{ !request('category') ? 'bg-rose-50 text-rose-600 font-semibold' : 'hover:bg-gray-50' }} block px-4 py-3 rounded-xl transition">
                                    Tout voir
                                </a>
                                @foreach($categories as $cat)
                                    <a href="{{ route('shop', ['category' => $cat->slug]) }}" onclick="closeFiltersModal()"
                                        class="{{ request('category') == $cat->slug ? 'bg-rose-50 text-rose-600 font-semibold' : 'hover:bg-gray-50' }} block px-4 py-3 rounded-xl transition">
                                        {{ $cat->name }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row gap-12">
                <!-- Sidebar Filtres -->
                <aside id="filters-sidebar" class="hidden md:block w-full md:w-64 space-y-8">
                    <!-- Catégories -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm border border-rose-100">
                        <h3
                            class="uppercase text-[10px] tracking-widest font-bold mb-6 text-gray-900 flex items-center gap-2">
                            <i data-lucide="filter" class="w-4 h-4 text-rose-500"></i>
                            Catégories
                        </h3>
                        <ul class="text-sm space-y-3 text-gray-600">
                            <li>
                                <a href="{{ route('shop') }}"
                                    class="{{ !request('category') ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(!request('category'))<i data-lucide="chevron-right" class="w-3 h-3"></i>@endif
                                    Tout voir
                                </a>
                            </li>
                            @foreach($categories as $cat)
                                <li>
                                    <a href="{{ route('shop', ['category' => $cat->slug]) }}"
                                        class="{{ request('category') == $cat->slug ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                        @if(request('category') == $cat->slug)<i data-lucide="chevron-right"
                                        class="w-3 h-3"></i>@endif
                                        {{ $cat->name }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- Tri par prix (Desktop) -->
                    <div class="bg-white rounded-2xl p-6 shadow-sm border border-rose-100">
                        <h3
                            class="uppercase text-[10px] tracking-widest font-bold mb-6 text-gray-900 flex items-center gap-2">
                            <i data-lucide="arrow-up-down" class="w-4 h-4 text-rose-500"></i>
                            Trier par
                        </h3>
                        <ul class="text-sm space-y-3 text-gray-600">
                            <li>
                                <a href="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'latest'])) }}"
                                    class="{{ request('sort') == 'latest' || !request('sort') ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(request('sort') == 'latest' || !request('sort'))<i data-lucide="chevron-right"
                                    class="w-3 h-3"></i>@endif
                                    Plus récents
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'price_asc'])) }}"
                                    class="{{ request('sort') == 'price_asc' ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(request('sort') == 'price_asc')<i data-lucide="chevron-right"
                                    class="w-3 h-3"></i>@endif
                                    Prix croissant
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'price_desc'])) }}"
                                    class="{{ request('sort') == 'price_desc' ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(request('sort') == 'price_desc')<i data-lucide="chevron-right"
                                    class="w-3 h-3"></i>@endif
                                    Prix décroissant
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'popular'])) }}"
                                    class="{{ request('sort') == 'popular' ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(request('sort') == 'popular')<i data-lucide="chevron-right"
                                    class="w-3 h-3"></i>@endif
                                    Populaires
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'promo'])) }}"
                                    class="{{ request('sort') == 'promo' ? 'text-rose-600 font-semibold' : 'hover:text-rose-500' }} cursor-pointer flex items-center gap-2 transition">
                                    @if(request('sort') == 'promo')<i data-lucide="chevron-right" class="w-3 h-3"></i>@endif
                                    Promotions
                                </a>
                            </li>
                        </ul>
                    </div>
                </aside>

                <!-- Grille Produits -->
                <div class="flex-1">
                    <!-- Select Tri pour Mobile et Desktop -->
                    <div class="mb-6 flex items-center justify-between">
                        <p class="text-sm text-gray-600">
                            <span class="font-semibold text-gray-900">{{ $products->total() }}</span> produits
                        </p>
                        <div class="flex items-center gap-2">
                            <label for="sort-select" class="text-sm text-gray-600 hidden sm:block">Trier par:</label>
                            <select id="sort-select" onchange="window.location.href=this.value"
                                class="bg-white border-2 border-rose-200 text-gray-900 px-4 py-2 rounded-lg text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition cursor-pointer">
                                <option
                                    value="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'latest'])) }}"
                                    {{ request('sort') == 'latest' || !request('sort') ? 'selected' : '' }}>
                                    Plus récents
                                </option>
                                <option
                                    value="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'price_asc'])) }}"
                                    {{ request('sort') == 'price_asc' ? 'selected' : '' }}>
                                    Prix croissant
                                </option>
                                <option
                                    value="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'price_desc'])) }}"
                                    {{ request('sort') == 'price_desc' ? 'selected' : '' }}>
                                    Prix décroissant
                                </option>
                                <option
                                    value="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'popular'])) }}"
                                    {{ request('sort') == 'popular' ? 'selected' : '' }}>
                                    Populaires
                                </option>
                                <option
                                    value="{{ route('shop', array_merge(request()->except('sort'), ['sort' => 'promo'])) }}"
                                    {{ request('sort') == 'promo' ? 'selected' : '' }}>
                                    Promotions
                                </option>
                            </select>
                        </div>
                    </div>

                    <main
                        class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-x-3 sm:gap-x-6 gap-y-8 sm:gap-y-10 mb-12">
                        @forelse($products as $prod)
                            <x-product-card :product="$prod" />
                        @empty
                            <div class="col-span-full py-12 text-center">
                                <i data-lucide="package-x" class="w-16 h-16 text-rose-200 mx-auto mb-4"></i>
                                <p class="text-gray-400 italic">Aucun produit trouvé dans cette catégorie.</p>
                            </div>
                        @endforelse
                    </main>

                    <!-- Pagination -->
                    <div class="mt-12">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function openFiltersModal() {
            const modal = document.getElementById('filters-modal');
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';

            // Animation d'entrée
            setTimeout(() => {
                modal.querySelector('.absolute').classList.add('animate-slide-up');
            }, 10);
        }

        function closeFiltersModal() {
            const modal = document.getElementById('filters-modal');
            const panel = modal.querySelector('.absolute');

            panel.classList.remove('animate-slide-up');

            setTimeout(() => {
                modal.classList.add('hidden');
                document.body.style.overflow = '';
            }, 200);
        }

        // Fermer la modale en cliquant sur le fond
        document.addEventListener('DOMContentLoaded', function () {
            const modal = document.getElementById('filters-modal');
            if (modal) {
                modal.addEventListener('click', function (e) {
                    if (e.target === modal) {
                        closeFiltersModal();
                    }
                });
            }
        });
    </script>

    <style>
        @keyframes slideUp {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0);
            }
        }

        .animate-slide-up {
            animation: slideUp 0.3s ease-out;
        }
    </style>
@endpush