{{-- resources/views/mediatheque.blade.php --}}

@extends('layouts.base')

@section('title', 'Médiathèque - Conseil d\'État de Côte d\'Ivoire')

@section('content')

<style>
    /* ════════════════════════════════════════════════════════════════════
       1. VARIABLES & CONFIGURATION GRAPHIQUE (Alignées sur Contact)
       ════════════════════════════════════════════════════════════════════ */
    :root {
        --primary-dark:       #002e33;
        --primary-dark-mid:   #003d44;
        --primary-gold:       #c9a227;   
        --accent-orange:      #c96b1a;   
        --slate-text:         #334155;
        --slate-light:        #64748b;
        --light-bg:           #f8fafc;
        --white:              #ffffff;
        --border-color:       #e2e8f0;

        /* Ombres douces et légères modernes */
        --shadow-sm:  0 4px 20px rgba(0, 46, 51, 0.04);
        --shadow-md:  0 10px 35px rgba(0, 46, 51, 0.07);

        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --trans:    all .3s var(--ease-out);
    }

    body {
        font-family: 'Inter', sans-serif;
        color: var(--slate-text);
        background: #fbfcfd;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

    .serif { font-family: 'Playfair Display', serif; }

    /* ── Header de Page ─────────────────────────────────────────────── */
    .page-header {
        background: var(--light-bg); 
        padding: 45px 0; 
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 50px;
    }

    .page-header h1 {
        color: var(--primary-dark); 
        font-size: 2.4rem; 
        margin-bottom: 10px; 
        font-weight: 700;
    }

    .breadcrumb {
        display: flex; 
        list-style: none; 
        gap: 10px; 
        font-size: 0.85rem; 
        padding: 0; 
        margin: 0; 
        font-family: 'Inter', sans-serif;
    }

    .breadcrumb a { color: var(--slate-light); text-decoration: none; transition: var(--trans); }
    .breadcrumb a:hover { color: var(--primary-dark); }
    .breadcrumb .active { color: var(--accent-orange); font-weight: 600; }

    /* ── Section Principale & Titres ────────────────────────────────── */
    .main-content-section {
        margin-bottom: 80px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 40px;
    }

    .section-title {
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.6rem, 3vw, 1.9rem);
        color: var(--primary-dark);
        font-weight: 700;
        border-left: 5px solid var(--primary-gold);
        padding-left: 16px;
        margin: 0;
    }

    /* ── Statistiques Rapides ───────────────────────────────────────── */
    .quick-stats {
        display: flex;
        gap: 16px;
    }

    .stat-badge {
        background: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: var(--shadow-sm);
    }

    .stat-badge .num {
        font-family: 'Playfair Display', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-dark);
    }

    .stat-badge .lbl {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--slate-light);
        font-weight: 700;
    }

    /* ── Onglets Minimalistes ───────────────────────────────────────── */
    .mdt-tabs {
        display: flex;
        gap: 16px;
        margin-bottom: 40px;
        border-bottom: 2px solid var(--light-bg);
        padding-bottom: 10px;
    }

    .mdt-tab {
        background: transparent;
        border: none;
        padding: 12px 24px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--slate-light);
        cursor: pointer;
        transition: var(--trans);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 10px;
    }

    .mdt-tab:hover {
        background: var(--light-bg);
        color: var(--primary-dark);
    }

    .mdt-tab.active {
        background: var(--primary-dark);
        color: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .mdt-tab .tab-count {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 0.75rem;
    }

    .mdt-tab:not(.active) .tab-count {
        background: var(--border-color);
        color: var(--slate-text);
    }

    /* Panneaux */
    .mdt-panel { display: none; }
    .mdt-panel.active { display: block; animation: fadeIn 0.4s var(--ease-out) forwards; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* ── Grille Carrée (400x400) & Cartes ────────────────────────────── */
    .mdt-square-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 40px;
    }

    .art-card {
        background: var(--white);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
        transition: var(--trans);
        display: flex;
        flex-direction: column;
    }

    .art-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-gold);
    }

    .square-frame {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1; 
        border-radius: 10px;
        overflow: hidden;
        background: var(--light-bg);
    }

    .square-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s var(--ease-out);
    }

    .art-card:hover .square-frame img {
        transform: scale(1.05);
    }

    .frame-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 46, 51, 0.4);
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--trans);
        z-index: 2;
    }

    .art-card:hover .frame-overlay { opacity: 1; }

    .view-icon {
        width: 50px;
        height: 50px;
        background: var(--white);
        color: var(--primary-dark);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transform: translateY(15px);
        transition: var(--trans);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .art-card:hover .view-icon { transform: translateY(0); }

    .photo-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        background: var(--white);
        color: var(--primary-dark);
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 3;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Détails sous la carte */
    .card-details {
        padding-top: 20px;
        padding-bottom: 8px;
    }

    .card-date {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--primary-gold);
        margin-bottom: 8px;
    }

    .card-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-dark);
        line-height: 1.3;
        margin: 0 0 6px 0;
        transition: var(--trans);
    }

    .card-event {
        font-size: 0.9rem;
        color: var(--slate-light);
        font-weight: 500;
    }

    /* ── Vidéos (Ratio préservé dans la même structure de carte) ─────── */
    .video-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        overflow: hidden;
        background: var(--primary-dark);
    }

    .video-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
        transition: var(--trans);
    }

    .art-card:hover .video-frame img {
        opacity: 0.5;
        transform: scale(1.03);
    }

    .play-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        text-decoration: none;
    }

    .play-circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--primary-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        padding-left: 4px;
        transition: var(--trans);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .art-card:hover .play-circle {
        background: var(--primary-gold);
        color: var(--white);
        transform: scale(1.1);
    }

    /* ── État Vide ──────────────────────────────────────────────────── */
    .mdt-empty {
        text-align: center;
        padding: 60px 20px;
        background: var(--white);
        border-radius: 14px;
        border: 1px dashed var(--border-color);
        box-shadow: var(--shadow-sm);
    }

    .empty-icon {
        font-size: 2.5rem;
        color: var(--slate-light);
        margin-bottom: 16px;
        background: var(--light-bg);
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        margin: 0 auto 20px auto;
    }

</style>

{{-- Header de la Page --}}
<div class="page-header">
    <div class="container">
        <h1 class="serif">Médiathèque Officielle</h1>
        <ul class="breadcrumb">
            <li><a href="{{ url('/') }}">Accueil</a></li>
            <li>/</li>
            <li class="active">Médiathèque</li>
        </ul>
    </div>
</div>

<div class="container main-content-section">
    

    {{-- Onglets --}}
    <div class="mdt-tabs" role="tablist">
        <button class="mdt-tab active" data-tab="photos" role="tab" aria-selected="true">
            <i class="fa-regular fa-images"></i> Photos
            <span class="tab-count">{{ isset($photos) ? $photos->count() : 0 }}</span>
        </button>
        <button class="mdt-tab" data-tab="videos" role="tab" aria-selected="false">
            <i class="fa-solid fa-circle-play"></i> Vidéos
            <span class="tab-count">{{ isset($videos) ? $videos->count() : 0 }}</span>
        </button>
    </div>

    {{-- PANNEAU PHOTOS --}}
    <div class="mdt-panel active" id="panel-photos" role="tabpanel">
        @if(isset($photos) && $photos->count() > 0)
            <div class="mdt-square-grid">
                @foreach($photos as $album)
                    @php
                        $galleryId   = 'album-' . $album->id;
                        $coverRaw    = $album->image_path ?? '';
                        $coverUrl    = str_starts_with($coverRaw, 'http')
                                        ? $coverRaw
                                        : asset('storage/' . ltrim(str_replace('storage/', '', $coverRaw), '/'));
                        
                        $imagesEnfants = $album->fichiers 
                            ? $album->fichiers->where('chemin', '!=', '#')->where('chemin', '!=', $coverUrl)
                            : collect();
                        
                        $totalPhotos = $imagesEnfants->count() + 1;
                    @endphp

                    <div class="art-card">
                        <a href="{{ $coverUrl }}" 
                           class="square-frame glightbox"
                           data-gallery="{{ $galleryId }}"
                           data-title="{{ $album->titre }}"
                           data-description="{{ $album->evenement ?? '' }}">
                            
                            <img src="{{ $coverUrl }}" alt="{{ $album->titre }}" loading="lazy">
                            
                            <div class="frame-overlay">
                                <div class="view-icon"><i class="fa-solid fa-expand"></i></div>
                            </div>
                            
                            <div class="photo-badge">
                                <i class="fa-solid fa-camera"></i> {{ $totalPhotos }}
                            </div>
                        </a>

                        @if($imagesEnfants->count() > 0)
                            @foreach($imagesEnfants as $fichierRestant)
                                <a href="{{ $fichierRestant->chemin }}" 
                                   class="glightbox d-none" 
                                   data-gallery="{{ $galleryId }}" 
                                   data-title="{{ $album->titre }}"
                                   data-description="{{ $fichierRestant->legende ?? '' }}"></a>
                            @endforeach
                        @endif

                        <div class="card-details">
                            <span class="card-date">
                                {{ $album->created_at ? $album->created_at->translatedFormat('d M Y') : 'Date non définie' }}
                            </span>
                            <h3 class="card-title">{{ Str::limit($album->titre, 40) }}</h3>
                            @if(!empty($album->evenement))
                                <div class="card-event">{{ Str::limit($album->evenement, 50) }}</div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="mdt-empty">
                <div class="empty-icon"><i class="fa-regular fa-images"></i></div>
                <h3 style="font-family: 'Playfair Display', serif; color: var(--primary-dark); margin-bottom: 10px;">Aucun album disponible</h3>
                <p style="color: var(--slate-light); font-size: 0.95rem;">Les collections photographiques apparaîtront ici prochainement.</p>
            </div>
        @endif
    </div>

    {{-- PANNEAU VIDÉOS --}}
    <div class="mdt-panel" id="panel-videos" role="tabpanel">
        @if(isset($videos) && $videos->count() > 0)
            <div class="mdt-square-grid">
                @foreach($videos as $video)
                    @php
                        $coverRaw      = $video->image_url ?? '';
                        $coverVideoUrl = str_starts_with($coverRaw, 'http')
                                          ? $coverRaw
                                          : asset('storage/' . ltrim(str_replace('storage/', '', $coverRaw), '/'));
                        $firstFile     = $video->fichiers?->first();
                        $videoSrc      = $firstFile ? $firstFile->chemin : '#';
                    @endphp

                    <div class="art-card">
                        <div class="video-frame">
                            <img src="{{ $coverVideoUrl }}" alt="{{ $video->titre }}" loading="lazy">
                            
                            @if($videoSrc !== '#')
                                <a href="{{ $videoSrc }}" 
                                   class="glightbox play-overlay"
                                   data-gallery="gallery-videos"
                                   data-title="{{ $video->titre }}"
                                   data-description="{{ $video->evenement ?? '' }}">
                                    <div class="play-circle">
                                        <i class="fa-solid fa-play"></i>
                                    </div>
                                </a>
                            @endif
                        </div>

                        <div class="card-details">
                            <span class="card-date">
                                {{ $video->created_at ? $video->created_at->translatedFormat('d M Y') : 'Date non définie' }}
                            </span>
                            <h3 class="card-title">{{ Str::limit($video->titre, 40) }}</h3>
                            @if(!empty($video->evenement))
                                <div class="card-event">{{ Str::limit($video->evenement, 50) }}</div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="mdt-empty">
                <div class="empty-icon"><i class="fa-solid fa-video"></i></div>
                <h3 style="font-family: 'Playfair Display', serif; color: var(--primary-dark); margin-bottom: 10px;">Aucune vidéo disponible</h3>
                <p style="color: var(--slate-light); font-size: 0.95rem;">Les productions vidéos apparaîtront ici prochainement.</p>
            </div>
        @endif
    </div>

</div>

@endsection

@push('scripts')
{{-- ══════════════════════════════════════════════════════════════════
     SCRIPTS
     ══════════════════════════════════════════════════════════════════ --}}
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ── 1. HERO CAROUSEL ─────────────────────────────────────────── */
    const slides    = document.querySelectorAll('.slide');
    const pagDots   = document.querySelectorAll('.pag-dot');
    let current     = 0;
    let timer;

    function showSlide(idx) {
        slides.forEach((s, i) => {
            s.classList.toggle('active', i === idx);
            s.setAttribute('aria-hidden', i !== idx ? 'true' : 'false');
        });
        pagDots.forEach((d, i) => d.classList.toggle('active', i === idx));
        current = idx;
    }
    function next() { showSlide((current + 1) % slides.length); }

    if (slides.length > 1) {
        timer = setInterval(next, 6500);
        pagDots.forEach(dot => {
            dot.addEventListener('click', function () {
                clearInterval(timer);
                showSlide(parseInt(this.dataset.index));
                timer = setInterval(next, 6500);
            });
        });
        /* Pause au survol */
        document.querySelector('.hero')?.addEventListener('mouseenter', () => clearInterval(timer));
        document.querySelector('.hero')?.addEventListener('mouseleave', () => { timer = setInterval(next, 6500); });
    }

    /* ── 2. ONGLETS MÉDIATHÈQUE ───────────────────────────────────── */
    document.querySelectorAll('.mdt-tab').forEach(tab => {
        tab.addEventListener('click', function () {
            document.querySelectorAll('.mdt-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.mdt-panel').forEach(p => p.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('panel-' + this.dataset.tab)?.classList.add('active');
        });
    });

    /* ── 3. GLIGHTBOX ─────────────────────────────────────────────── */
    GLightbox({
        selector:           '.glightbox',
        touchNavigation:    true,
        loop:               true,
        autoplayVideos:     true,
        openEffect:         'zoom',
        closeEffect:        'zoom',
        slideEffect:        'slide',
        keyboardNavigation: true,
    });

    /* ── 4. RÉVÉLATION AU SCROLL (IntersectionObserver) ──────────── */
    const revealEls = document.querySelectorAll('.reveal');
    if ('IntersectionObserver' in window) {
        const obs = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    obs.unobserve(entry.target);
                }
            });
        }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
        revealEls.forEach(el => obs.observe(el));
    } else {
        revealEls.forEach(el => el.classList.add('visible'));
    }

    /* ── 5. COMPTEURS ANIMÉS (section stats) ─────────────────────── */
    function animateCounter(el, target, duration) {
        const isYear = target >= 2000;
        const start  = isYear ? target : 0;
        const step   = (target - start) / (duration / 16);
        let current  = start;
        const tick = () => {
            current = Math.min(current + step, target);
            el.textContent = Math.round(current).toLocaleString('fr-CI');
            if (current < target) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
    }

    const statEls = document.querySelectorAll('.stat-number[data-target]');
    if ('IntersectionObserver' in window) {
        const statObs = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const el     = entry.target;
                    const target = parseInt(el.dataset.target, 10);
                    if (!isNaN(target)) animateCounter(el, target, 1400);
                    statObs.unobserve(el);
                }
            });
        }, { threshold: 0.5 });
        statEls.forEach(el => statObs.observe(el));
    } else {
        statEls.forEach(el => { el.textContent = el.dataset.target; });
    }

});
</script>
@endpush