@extends('layouts.public-layout')

@section("title", "Boutique - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@section('content')
    <!-- Page Header -->
    <section class="relative bg-gradient-to-br from-primary-navy via-blue-900 to-purple-900 text-white py-20 overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 right-10 w-64 h-64 bg-primary-gold rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-10 w-72 h-72 bg-blue-500 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <div class="inline-block mb-4 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                    <span class="text-primary-gold font-semibold">Ressources spirituelles</span>
                </div>
                <h1 class="text-5xl md:text-6xl font-bold mb-6 font-serif">
                    Boutique
                </h1>
                <p class="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
                    Découvrez notre collection de livres, enseignements et ressources pour nourrir votre foi
                </p>
            </div>
        </div>
    </section>

    <!-- Filter Section -->
    <section class="py-8 bg-neutral-cream border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <button class="filter-btn active bg-primary-gold text-white px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all shadow-sm" data-category="all">
                    Tous les produits
                </button>
                <button class="filter-btn bg-white text-text-dark px-6 py-3 rounded-full font-semibold hover:bg-neutral-soft-gray transition-all border border-gray-200" data-category="Livre">
                    Livres
                </button>
                <button class="filter-btn bg-white text-text-dark px-6 py-3 rounded-full font-semibold hover:bg-neutral-soft-gray transition-all border border-gray-200" data-category="Autre">
                    Autres
                </button>
            </div>
        </div>
    </section>

    <!-- Products Grid -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if($products->count() > 0)
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($products as $product)
                        <div class="product-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1"
                             data-category="{{ $product->category }}">
                            <!-- Product Image -->
                            <div class="relative h-64 bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center overflow-hidden">
                                @if($product->image)
                                    <img src="{{ $product->image }}"
                                         alt="{{ $product->title }}"
                                         class="w-full h-full object-cover">
                                @else
                                    @php
                                        $icon = $product->category === 'Livre' ? 'book' : 'box';
                                        $color = $product->category === 'Livre' ? 'blue' : 'green';
                                    @endphp
                                    <i class="fas fa-{{ $icon }} text-{{ $color }}-400 text-6xl"></i>
                                @endif

                                <!-- Category Badge -->
                                <div class="absolute top-3 right-3">
                                    <span class="bg-white bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-gray-700">
                                        {{ $product->category }}
                                    </span>
                                </div>

                                <!-- Stock Badge -->
                                @if($product->stock > 0)
                                    <div class="absolute top-3 left-3">
                                        <span class="bg-green-500 bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-white">
                                            <i class="fas fa-check-circle mr-1"></i>En stock
                                        </span>
                                    </div>
                                @else
                                    <div class="absolute top-3 left-3">
                                        <span class="bg-red-500 bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-white">
                                            <i class="fas fa-times-circle mr-1"></i>Épuisé
                                        </span>
                                    </div>
                                @endif
                            </div>

                            <!-- Product Details -->
                            <div class="p-5">
                                <h3 class="font-bold text-lg text-gray-900 mb-2 line-clamp-2 min-h-[3.5rem]">
                                    {{ $product->title }}
                                </h3>

                                @if($product->author)
                                    <p class="text-gray-600 text-sm mb-3">
                                        <i class="fas fa-user-pen mr-1"></i>{{ $product->author }}
                                    </p>
                                @endif

                                @if($product->description)
                                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">
                                        {{ $product->description }}
                                    </p>
                                @endif

                                <!-- Price and Action -->
                                <div class="flex items-center justify-between pt-4 border-t">
                                    <div>
                                        <p class="text-2xl font-bold text-blue-600">{{ number_format($product->price, 2) }} €</p>
                                        @if($product->stock > 0 && $product->stock <= 5)
                                            <p class="text-xs text-orange-600">
                                                <i class="fas fa-exclamation-triangle mr-1"></i>Plus que {{ $product->stock }} en stock
                                            </p>
                                        @endif
                                    </div>

                                    <a href="{{ route('public.product.show', $product->slug) }}"
                                       class="bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700 transition flex items-center">
                                        <i class="fas fa-eye mr-2"></i>Voir
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Statistics -->
                <div class="mt-12 bg-white rounded-lg shadow-md p-8">
                    <div class="grid md:grid-cols-4 gap-6 text-center">
                        <div>
                            <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fas fa-box-open text-blue-600 text-2xl"></i>
                            </div>
                            <p class="text-3xl font-bold text-gray-900">{{ $products->count() }}</p>
                            <p class="text-gray-600">Produits</p>
                        </div>

                        <div>
                            <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                            </div>
                            <p class="text-3xl font-bold text-gray-900">{{ $products->where('stock', '>', 0)->count() }}</p>
                            <p class="text-gray-600">En stock</p>
                        </div>

                        <div>
                            <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fas fa-tags text-purple-600 text-2xl"></i>
                            </div>
                            <p class="text-3xl font-bold text-gray-900">{{ $products->pluck('category')->unique()->count() }}</p>
                            <p class="text-gray-600">Catégories</p>
                        </div>

                        <div>
                            <div class="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fas fa-user-pen text-orange-600 text-2xl"></i>
                            </div>
                            <p class="text-3xl font-bold text-gray-900">{{ $products->whereNotNull('author')->pluck('author')->unique()->count() }}</p>
                            <p class="text-gray-600">Auteurs</p>
                        </div>
                    </div>
                </div>
            @else
                <!-- Empty State -->
                <div class="bg-white rounded-lg shadow-md p-16 text-center">
                    <div class="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-shopping-bag text-gray-400 text-5xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucun produit disponible</h3>
                    <p class="text-gray-600 mb-6">
                        Notre boutique est en cours de préparation. Revenez bientôt pour découvrir nos produits.
                    </p>
                    <a href="{{ route('public.home') }}" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition">
                        <i class="fas fa-home mr-2"></i>Retour à l'accueil
                    </a>
                </div>
            @endif
        </div>
    </section>
@endsection

@push('scripts')
<script>
    // Product filter functionality
    document.addEventListener('DOMContentLoaded', function() {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const productCards = document.querySelectorAll('.product-card');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const category = this.dataset.category;

                // Update active button
                filterBtns.forEach(b => {
                    b.classList.remove('active', 'bg-primary-gold', 'text-white', 'shadow-sm');
                    b.classList.add('bg-white', 'text-text-dark', 'border', 'border-gray-200');
                });
                this.classList.add('active', 'bg-primary-gold', 'text-white', 'shadow-sm');
                this.classList.remove('bg-white', 'text-text-dark', 'border', 'border-gray-200');

                // Filter products
                productCards.forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
@endpush