@extends('layouts.app')

@section('title', 'Catalogue Produits')
@section('meta_description', 'Catalogue complet GAMA SAC : sacs kraft, luxe, alimentaire et personnalisés. Filtrez par catégorie et demandez un devis.')

@section('content')

{{-- Hero --}}
<section class="page-hero page-hero-sm">
    <div class="container">
        <span class="page-hero-tag">NOS PRODUITS</span>
        <h1>CATALOGUE COMPLET</h1>
    </div>
</section>

@php
    // Charger tous les produits avec leurs images, groupés par catégorie
    $tousLesProduits = \App\Models\Product::with('images')->orderBy('category')->orderBy('name')->get();
    $parCategorie    = $tousLesProduits->groupBy('category');

    // Labels lisibles pour chaque catégorie
    $labels = [
        'kraft'        => ['label' => 'Kraft Naturel',     'icon' => '🟤', 'desc' => 'Résistants, recyclés, idéaux pour le commerce de détail'],
        'blanc'        => ['label' => 'Blanc Premium',     'icon' => '⬜', 'desc' => 'Finition soignée, impression 4 couleurs, haut de gamme'],
        'alimentaire'  => ['label' => 'Alimentaire',       'icon' => '🥖', 'desc' => 'Certifiés contact alimentaire, résistants à l\'humidité'],
        'luxe'         => ['label' => 'Luxe',              'icon' => '✨', 'desc' => 'Poignée ruban, pelliculage, pour boutiques premium'],
        'custom'       => ['label' => 'Personnalisé',      'icon' => '✏️', 'desc' => 'Sur mesure, impression jusqu\'à 6 couleurs, logo inclus'],
        'personnalise' => ['label' => 'Personnalisé',      'icon' => '✏️', 'desc' => 'Sur mesure, impression jusqu\'à 6 couleurs, logo inclus'],
    ];
@endphp

<section style="padding:60px 0 80px; background:#f9f9f9;">
    <div class="container">

        {{-- ===== FILTRES CATÉGORIES ===== --}}
        <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:50px; justify-content:center;">
            <a href="#tous"
               style="padding:10px 22px; border-radius:60px; font-size:0.78rem; font-weight:700;
                      text-transform:uppercase; letter-spacing:1px; text-decoration:none;
                      background:var(--blue-night); color:#fff; border:2px solid var(--blue-night);">
                Tous les produits
            </a>
            @foreach($parCategorie->keys() as $cat)
                @php $info = $labels[$cat] ?? ['label' => ucfirst($cat), 'icon' => '📦']; @endphp
                <a href="#cat-{{ $cat }}"
                   style="padding:10px 22px; border-radius:60px; font-size:0.78rem; font-weight:700;
                          text-transform:uppercase; letter-spacing:1px; text-decoration:none;
                          background:#fff; color:var(--gray-700); border:2px solid var(--gray-200);
                          transition:0.2s;"
                   onmouseover="this.style.borderColor='var(--cyan)';this.style.color='var(--cyan)'"
                   onmouseout="this.style.borderColor='var(--gray-200)';this.style.color='var(--gray-700)'">
                    {{ $info['icon'] }} {{ $info['label'] }}
                </a>
            @endforeach
        </div>

        @if($tousLesProduits->isEmpty())
            {{-- Aucun produit --}}
            <div style="text-align:center; padding:80px 0; color:var(--gray-400);">
                <div style="font-size:3rem; margin-bottom:16px;">📦</div>
                <h2 style="font-size:1.2rem; font-weight:700; color:var(--gray-500); margin-bottom:8px;">
                    Catalogue en cours de construction
                </h2>
                <p style="font-size:0.9rem; color:var(--gray-400); margin-bottom:24px;">
                    Nos produits seront disponibles très prochainement.
                </p>
                <a href="{{ route('quote') }}" class="btn btn-cyan">
                    <i class="fas fa-paper-plane"></i> Demander un devis
                </a>
            </div>
        @else
            {{-- ===== BOUCLE PAR CATÉGORIE ===== --}}
            <div id="tous">
            @foreach($parCategorie as $cat => $produits)
                @php $info = $labels[$cat] ?? ['label' => ucfirst($cat), 'icon' => '📦', 'desc' => '']; @endphp

                {{-- En-tête de catégorie --}}
                <div id="cat-{{ $cat }}"
                     style="display:flex; align-items:center; gap:16px; margin-bottom:28px; padding-top:20px;">
                    <div style="width:50px; height:50px; background:#fff; border:2px solid var(--gray-200);
                                border-radius:12px; display:flex; align-items:center; justify-content:center;
                                font-size:1.5rem; flex-shrink:0;">
                        {{ $info['icon'] }}
                    </div>
                    <div style="flex:1;">
                        <h2 style="font-size:1.1rem; font-weight:800; text-transform:uppercase;
                                   letter-spacing:2px; color:var(--blue-night); margin:0 0 4px;">
                            {{ $info['label'] }}
                            <span style="font-size:0.72rem; font-weight:600; color:var(--gray-400);
                                         background:var(--gray-100); padding:2px 10px; border-radius:20px;
                                         margin-left:8px; letter-spacing:0; text-transform:none;">
                                {{ $produits->count() }} produit{{ $produits->count() > 1 ? 's' : '' }}
                            </span>
                        </h2>
                        @if(!empty($info['desc']))
                            <p style="font-size:0.82rem; color:var(--gray-500); margin:0;">{{ $info['desc'] }}</p>
                        @endif
                    </div>
                    <a href="{{ route('quote') }}?type={{ $cat }}"
                       style="font-size:0.75rem; font-weight:700; color:var(--cyan); text-decoration:none;
                              white-space:nowrap; flex-shrink:0;">
                        Devis {{ $info['label'] }} →
                    </a>
                </div>

                {{-- Grille produits de cette catégorie --}}
                <div class="products-grid" style="margin-bottom:60px;">
                    @foreach($produits as $produit)
                        @php
                            $mainImg = $produit->images->where('is_main', true)->first()
                                    ?? $produit->images->first();
                            $imgSrc  = $mainImg
                                        ? asset('storage/' . $mainImg->path)
                                        : ($produit->image ? asset('storage/' . $produit->image) : null);
                        @endphp

                        <div class="product-card reveal visible"
                             style="cursor:pointer;"
                             onclick="window.location='{{ route('products.show', $produit->slug) }}'">

                            <div class="product-img">
                                @if($imgSrc)
                                    <img src="{{ $imgSrc }}"
                                         alt="{{ $produit->name }}"
                                         loading="lazy"
                                         style="width:100%; height:240px; object-fit:cover;">
                                @else
                                    <div style="width:100%; height:240px; background:var(--gray-100);
                                                display:flex; align-items:center; justify-content:center;
                                                color:var(--gray-300); font-size:3rem;">
                                        📦
                                    </div>
                                @endif

                                @if($produit->badge)
                                    <span class="product-badge badge-{{ $produit->badge }}">
                                        {{ strtoupper($produit->badge) }}
                                    </span>
                                @endif

                                {{-- Overlay au hover --}}
                                <div class="product-overlay"
                                     style="position:absolute; inset:0; background:rgba(0,0,0,0.45);
                                            display:flex; align-items:center; justify-content:center;
                                            opacity:0; transition:0.3s; gap:10px;"
                                     onmouseover="this.style.opacity=1"
                                     onmouseout="this.style.opacity=0">
                                    <a href="{{ route('products.show', $produit->slug) }}"
                                       onclick="event.stopPropagation()"
                                       style="background:#fff; color:var(--blue-night); font-size:0.75rem;
                                              font-weight:700; padding:8px 16px; border-radius:30px;
                                              text-decoration:none; text-transform:uppercase;">
                                        <i class="fas fa-eye"></i> Voir
                                    </a>
                                    <a href="{{ route('quote') }}?product={{ urlencode($produit->name) }}&type={{ $produit->category }}"
                                       onclick="event.stopPropagation()"
                                       style="background:var(--cyan); color:#fff; font-size:0.75rem;
                                              font-weight:700; padding:8px 16px; border-radius:30px;
                                              text-decoration:none; text-transform:uppercase;">
                                        <i class="fas fa-paper-plane"></i> Devis
                                    </a>
                                </div>
                            </div>

                            <div class="product-body">
                                <div class="product-cat">{{ strtoupper($info['label']) }}</div>
                                <h3 class="product-name">{{ $produit->name }}</h3>
                                <p class="product-desc">
                                    {{ Str::limit($produit->description, 75) }}
                                </p>
                                @if($produit->size)
                                    <p style="font-size:0.72rem; color:var(--gray-400); margin:0 0 8px;">
                                        <i class="fas fa-ruler" style="color:var(--cyan); margin-right:4px;"></i>
                                        {{ $produit->size }}
                                    </p>
                                @endif
                                <div class="product-footer">
                                    <div class="product-price">
                                        @if($produit->price)
                                            {{ $produit->price }} <small>MAD</small>
                                        @else
                                            <span style="font-size:0.78rem;">Sur devis</span>
                                        @endif
                                    </div>
                                    <a href="{{ route('products.show', $produit->slug) }}"
                                       onclick="event.stopPropagation()"
                                       class="product-action">
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                    @endforeach
                </div>

                {{-- Séparateur entre catégories --}}
                @if(!$loop->last)
                    <hr style="border:none; border-top:2px solid var(--gray-100); margin-bottom:40px;">
                @endif

            @endforeach
            </div>
        @endif

        {{-- ===== CTA DEVIS ===== --}}
        <div style="background:linear-gradient(135deg, #1a237e, #1a7a4a); border-radius:20px;
                    padding:48px 40px; text-align:center; margin-top:40px; color:#fff;">
            <h2 style="font-size:1.8rem; font-weight:800; text-transform:uppercase;
                       letter-spacing:1px; margin-bottom:12px;">
                Vous ne trouvez pas ce qu'il vous faut ?
            </h2>
            <p style="font-size:1rem; color:rgba(255,255,255,0.8); margin-bottom:28px; max-width:500px; margin-left:auto; margin-right:auto;">
                Nous fabriquons sur mesure selon vos dimensions, votre grammage et votre design.
                Réponse sous 24h garantie.
            </p>
            <div style="display:flex; gap:14px; justify-content:center; flex-wrap:wrap;">
                <a href="{{ route('quote') }}"
                   style="background:#d4a843; color:#fff; font-weight:800; padding:14px 32px;
                          border-radius:12px; text-decoration:none; font-size:0.9rem; text-transform:uppercase;">
                    <i class="fas fa-paper-plane"></i> Demander un devis gratuit
                </a>
                <a href="https://wa.me/+VOTRE_NUMERO"
                   target="_blank"
                   style="background:#25D366; color:#fff; font-weight:700; padding:14px 24px;
                          border-radius:12px; text-decoration:none; font-size:0.9rem;">
                    <i class="fab fa-whatsapp"></i> WhatsApp direct
                </a>
            </div>
        </div>

    </div>
</section>

@push('scripts')
<script>
// Scroll doux vers la catégorie + highlight du filtre actif
document.querySelectorAll('a[href^="#cat-"]').forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        var target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});

// Hover overlay sur les cartes produits
document.querySelectorAll('.product-card').forEach(function(card) {
    var overlay = card.querySelector('.product-overlay');
    if (!overlay) return;
    card.addEventListener('mouseenter', function() { overlay.style.opacity = 1; });
    card.addEventListener('mouseleave', function() { overlay.style.opacity = 0; });
});
</script>
@endpush

@endsection