@extends('layouts.public-layout')

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

@section('content')
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">
                    <i class="fas fa-photo-video mr-3 text-amber-400"></i>Médiathèque
                </h1>
                <p class="text-xl text-slate-200 max-w-2xl mx-auto">
                    Accédez à notre collection de vidéos, audios et images pour nourrir votre foi
                </p>
            </div>
        </div>
    </section>

    <!-- Media Tabs -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Category Filter -->
            @if($categories->count() > 0)
                <div class="mb-8">
                    <div class="bg-white rounded-lg shadow-md p-6 border border-slate-200">
                        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                            <div class="flex items-center">
                                <i class="fas fa-filter text-indigo-600 text-xl mr-3"></i>
                                <h3 class="font-bold text-lg text-gray-900">Filtrer par catégorie</h3>
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <a href="{{ route('public.media') }}"
                                   class="px-4 py-2 rounded-lg font-medium transition {{ !$selectedCategory ? 'bg-indigo-600 text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    <i class="fas fa-th mr-1"></i>Tous
                                </a>
                                @foreach($categories as $category)
                                    <a href="{{ route('public.media', ['category' => $category->id]) }}"
                                       class="px-4 py-2 rounded-lg font-medium transition {{ $selectedCategory && $selectedCategory->id == $category->id ? 'text-white shadow-md' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}"
                                       style="{{ $selectedCategory && $selectedCategory->id == $category->id ? 'background-color: ' . $category->color : '' }}">
                                        @if($category->icon)
                                            <i class="{{ $category->icon }} mr-1"></i>
                                        @endif
                                        {{ $category->name }}
                                        <span class="ml-1 {{ $selectedCategory && $selectedCategory->id == $category->id ? 'bg-white bg-opacity-30' : 'bg-gray-200' }} px-2 py-0.5 rounded-full text-xs">{{ $category->media_count }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        @if($selectedCategory)
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <div class="flex items-start gap-3">
                                    <div class="w-1 h-12 rounded" style="background-color: {{ $selectedCategory->color }}"></div>
                                    <div class="flex-1">
                                        <h4 class="font-bold text-gray-900">{{ $selectedCategory->name }}</h4>
                                        @if($selectedCategory->description)
                                            <p class="text-sm text-gray-600 mt-1">{{ $selectedCategory->description }}</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Tab Navigation -->
            <div class="flex justify-center mb-8">
                <div class="bg-white rounded-lg shadow-md p-1 inline-flex border border-slate-200">
                    <button class="tab-btn active px-6 py-3 rounded-lg font-semibold transition" data-tab="images">
                        <i class="fas fa-image mr-2"></i>Images
                        <span class="ml-2 bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full text-sm">{{ $images->count() }}</span>
                    </button>
                    <button class="tab-btn px-6 py-3 rounded-lg font-semibold transition" data-tab="videos">
                        <i class="fas fa-video mr-2"></i>Vidéos
                        <span class="ml-2 bg-slate-200 text-slate-700 px-2 py-1 rounded-full text-sm">{{ $videos->count() }}</span>
                    </button>
                    <button class="tab-btn px-6 py-3 rounded-lg font-semibold transition" data-tab="audios">
                        <i class="fas fa-music mr-2"></i>Audios
                        <span class="ml-2 bg-slate-200 text-slate-700 px-2 py-1 rounded-full text-sm">{{ $audios->count() }}</span>
                    </button>
                </div>
            </div>

            <!-- Images Section -->
            <div id="images-section" class="tab-content">
                @if($images->count() > 0)
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($images as $image)
                            @php
                                $imageGallery = $image->images ?? [];
                                $mainImage = !empty($imageGallery) ? $imageGallery[0] : ($image->file_path ?: $image->thumbnail);
                                $hasGallery = !empty($imageGallery) && count($imageGallery) > 1;
                            @endphp
                            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition border border-slate-200">
                                <!-- Image Display -->
                                <div class="relative pb-56 bg-slate-100">
                                    @if($mainImage)
                                        <img src="{{ $mainImage }}"
                                             alt="{{ $image->title }}"
                                             class="absolute inset-0 w-full h-full object-cover cursor-pointer hover:opacity-95 transition"
                                             onclick="openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)">
                                    @else
                                        <!-- Placeholder if no image URL -->
                                        <div class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-emerald-100 to-slate-100">
                                            <i class="fas fa-image text-slate-400 text-5xl"></i>
                                        </div>
                                    @endif

                                    <!-- Gallery Badge -->
                                    @if($hasGallery)
                                        <div class="absolute top-3 left-3 bg-emerald-600 bg-opacity-90 px-3 py-1 rounded text-white text-sm">
                                            <i class="fas fa-images mr-1"></i>{{ count($imageGallery) }} photos
                                        </div>
                                    @else
                                        <div class="absolute top-3 right-3 bg-emerald-600 bg-opacity-90 px-3 py-1 rounded text-white text-sm">
                                            <i class="fas fa-image mr-1"></i>Image
                                        </div>
                                    @endif

                                    <!-- Thumbnails Preview (if gallery) -->
                                    @if($hasGallery)
                                        <div class="absolute bottom-3 left-3 right-3 flex gap-1">
                                            @foreach(array_slice($imageGallery, 0, 4) as $index => $thumbUrl)
                                                <div class="flex-1 h-12 rounded overflow-hidden {{ $index > 2 ? 'hidden sm:block' : '' }}">
                                                    <img src="{{ $thumbUrl }}" alt="" class="w-full h-full object-cover opacity-80 hover:opacity-100 transition cursor-pointer"
                                                         onclick="event.stopPropagation(); openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', {{ $index }})">
                                                </div>
                                            @endforeach
                                            @if(count($imageGallery) > 4)
                                                <div class="flex-1 h-12 rounded overflow-hidden bg-black bg-opacity-70 flex items-center justify-center text-white text-xs font-bold cursor-pointer"
                                                     onclick="event.stopPropagation(); openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)">
                                                    +{{ count($imageGallery) - 4 }}
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                </div>

                                <!-- Image Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-lg text-gray-900 mb-2 line-clamp-2">{{ $image->title }}</h3>

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

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t">
                                        <span>
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            {{ \Carbon\Carbon::parse($image->created_at)->format('d M Y') }}
                                        </span>
                                        @if($mainImage)
                                            <button onclick="openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($image->title) }}', '{{ addslashes($image->description ?? '') }}', 0)"
                                                    class="text-emerald-600 hover:text-emerald-700 font-semibold">
                                                Voir @if($hasGallery) la galerie @endif <i class="fas fa-eye ml-1"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </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-image text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucune image disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore d'images dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>

            <!-- Videos Section -->
            <div id="videos-section" class="tab-content hidden">
                @if($videos->count() > 0)
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($videos as $video)
                            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
                                <!-- Video Thumbnail -->
                                <div class="relative pb-56 bg-gray-900">
                                    @if($video->youtube_id)
                                        <!-- YouTube Thumbnail -->
                                        <img src="https://img.youtube.com/vi/{{ $video->youtube_id }}/hqdefault.jpg"
                                             alt="{{ $video->title }}"
                                             class="absolute inset-0 w-full h-full object-cover"
                                             onerror="this.src='https://img.youtube.com/vi/{{ $video->youtube_id }}/mqdefault.jpg'">

                                        <!-- Play Button Overlay -->
                                        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 hover:bg-opacity-40 transition cursor-pointer"
                                             onclick="openVideoModal('{{ $video->youtube_id }}', '{{ addslashes($video->title) }}')">
                                            <div class="bg-red-600 bg-opacity-90 w-20 h-20 rounded-full flex items-center justify-center transform hover:scale-110 transition">
                                                <i class="fas fa-play text-white text-2xl ml-1"></i>
                                            </div>
                                        </div>

                                        <!-- Duration Badge -->
                                        <div class="absolute bottom-3 right-3 bg-black bg-opacity-80 px-2 py-1 rounded text-white text-sm">
                                            <i class="fas fa-play-circle mr-1"></i>Vidéo
                                        </div>
                                    @else
                                        <!-- Placeholder if no YouTube ID -->
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <i class="fas fa-video text-gray-600 text-5xl"></i>
                                        </div>
                                    @endif
                                </div>

                                <!-- Video Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-lg text-gray-900 mb-2 line-clamp-2">{{ $video->title }}</h3>

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

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t">
                                        <span>
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            {{ \Carbon\Carbon::parse($video->created_at)->format('d M Y') }}
                                        </span>
                                        @if($video->youtube_id)
                                            <button onclick="openVideoModal('{{ $video->youtube_id }}', '{{ addslashes($video->title) }}')"
                                                    class="text-amber-600 hover:text-amber-700 font-semibold">
                                                Regarder <i class="fas fa-play-circle ml-1"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </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-video text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucune vidéo disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore de vidéos dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>

            <!-- Audios Section -->
            <div id="audios-section" class="tab-content hidden">
                @if($audios->count() > 0)
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach($audios as $audio)
                            <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-slate-100">
                                <!-- Podcast Cover with Play Button Overlay -->
                                <div class="relative h-64 bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 group cursor-pointer"
                                     onclick="playPodcast('podcast-{{ $audio->id }}')">
                                    @if($audio->podcast_image)
                                        <img src="{{ asset($audio->podcast_image) }}"
                                             alt="{{ $audio->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @else
                                        <img src="{{ asset('images/defaults/podcast-default.svg') }}"
                                             alt="{{ $audio->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @endif

                                    <!-- Play Button Overlay -->
                                    <div id="play-overlay-{{ $audio->id }}" class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-50 transition-all duration-300 flex items-center justify-center">
                                        <div class="w-20 h-20 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center shadow-2xl transform group-hover:scale-110 transition-transform duration-300">
                                            <i class="fas fa-play text-white text-3xl ml-1"></i>
                                        </div>
                                    </div>

                                    <!-- Duration Badge (Optional) -->
                                    <div class="absolute top-3 right-3 bg-black bg-opacity-70 text-white text-xs px-3 py-1 rounded-full flex items-center gap-1">
                                        <i class="fas fa-headphones"></i>
                                        <span>Podcast</span>
                                    </div>
                                </div>

                                <!-- Audio Info -->
                                <div class="p-5">
                                    <h3 class="font-bold text-xl text-gray-900 mb-2 line-clamp-2">{{ $audio->title }}</h3>

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

                                    <!-- Hidden SoundCloud Player (invisible) -->
                                    @if($audio->soundcloud_url)
                                        <div style="position: absolute; left: -9999px; opacity: 0; pointer-events: none;">
                                            @if(str_contains($audio->soundcloud_url, '<iframe'))
                                                {!! str_replace('<iframe', '<iframe id="sc-widget-' . $audio->id . '"', $audio->soundcloud_url) !!}
                                            @else
                                                <iframe id="sc-widget-{{ $audio->id }}" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
                                                    src="https://w.soundcloud.com/player/?url={{ urlencode($audio->soundcloud_url) }}&color=%23f97316&auto_play=false&hide_related=false&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=false">
                                                </iframe>
                                            @endif
                                        </div>

                                        <!-- Custom Audio Player UI -->
                                        <div id="podcast-{{ $audio->id }}" class="hidden mb-4">
                                            <div class="bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 rounded-xl p-5 shadow-inner border border-amber-100">
                                                <!-- Player Controls -->
                                                <div class="flex items-center gap-4">
                                                    <!-- Play/Pause Button -->
                                                    <button onclick="togglePlayPause('{{ $audio->id }}')"
                                                            id="play-btn-{{ $audio->id }}"
                                                            class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transform hover:scale-105 transition-all">
                                                        <i id="play-icon-{{ $audio->id }}" class="fas fa-pause text-white text-xl"></i>
                                                    </button>

                                                    <!-- Progress Bar and Time -->
                                                    <div class="flex-grow">
                                                        <div class="flex justify-between text-xs text-gray-600 mb-2">
                                                            <span id="current-time-{{ $audio->id }}">0:00</span>
                                                            <span id="duration-{{ $audio->id }}">--:--</span>
                                                        </div>
                                                        <div class="relative h-2 bg-amber-200 rounded-full overflow-hidden cursor-pointer"
                                                             onclick="seekAudio(event, '{{ $audio->id }}')">
                                                            <div id="progress-{{ $audio->id }}"
                                                                 class="absolute top-0 left-0 h-full bg-gradient-to-r from-amber-500 to-orange-500 rounded-full transition-all"
                                                                 style="width: 0%"></div>
                                                        </div>
                                                    </div>

                                                    <!-- Volume Control -->
                                                    <div class="flex items-center gap-2">
                                                        <i class="fas fa-volume-up text-amber-600"></i>
                                                        <input type="range" min="0" max="100" value="80"
                                                               id="volume-{{ $audio->id }}"
                                                               onchange="changeVolume('{{ $audio->id }}', this.value)"
                                                               class="w-20 h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer">
                                                    </div>
                                                </div>

                                                <!-- Track Info -->
                                                <div class="mt-4 pt-4 border-t border-amber-200">
                                                    <p class="text-sm text-gray-700 flex items-center gap-2">
                                                        <i class="fas fa-podcast text-amber-600"></i>
                                                        <span class="font-medium">En lecture...</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @elseif($audio->file_path)
                                        <!-- HTML5 Audio for local files -->
                                        <div id="podcast-{{ $audio->id }}" class="hidden mb-4">
                                            <div class="bg-gradient-to-r from-orange-500 to-amber-500 p-4 rounded-lg">
                                                <audio id="audio-player-{{ $audio->id }}" controls class="w-full" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));">
                                                    <source src="{{ asset('storage/' . $audio->file_path) }}" type="audio/mpeg">
                                                    Votre navigateur ne supporte pas l'élément audio.
                                                </audio>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="flex items-center justify-between text-sm text-slate-500 pt-3 border-t border-slate-100">
                                        <span class="flex items-center gap-1">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ \Carbon\Carbon::parse($audio->created_at)->translatedFormat('d M Y') }}
                                        </span>
                                        <span class="text-amber-600 font-semibold flex items-center gap-1">
                                            <i class="fas fa-podcast"></i>
                                            <span>Écouter</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </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-music text-gray-400 text-5xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucun audio disponible</h3>
                        <p class="text-gray-600">
                            Nous n'avons pas encore d'audios dans notre collection. Revenez bientôt !
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center p-4">
        <div class="relative w-full max-w-5xl">
            <button onclick="closeVideoModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 text-4xl">
                <i class="fas fa-times"></i>
            </button>
            <div class="bg-black rounded-lg overflow-hidden">
                <div class="relative pb-[56.25%]">
                    <iframe id="videoFrame"
                            class="absolute inset-0 w-full h-full"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                    </iframe>
                </div>
                <div id="videoTitle" class="p-4 text-white font-semibold"></div>
            </div>
        </div>
    </div>

    <!-- Gallery Modal -->
    <div id="galleryModal" class="fixed inset-0 bg-black bg-opacity-95 z-50 hidden items-center justify-center p-4">
        <div class="relative w-full max-w-6xl">
            <!-- Close Button -->
            <button onclick="closeGalleryModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 text-4xl z-10">
                <i class="fas fa-times"></i>
            </button>

            <!-- Image Counter -->
            <div class="absolute -top-12 left-0 text-white text-lg">
                <span id="currentImageIndex">1</span> / <span id="totalImages">1</span>
            </div>

            <div class="bg-black rounded-lg overflow-hidden">
                <!-- Main Image -->
                <div class="relative">
                    <img id="galleryMainImage" src="" alt="" class="w-full h-auto max-h-[70vh] object-contain">

                    <!-- Navigation Arrows -->
                    <button id="prevImageBtn" onclick="navigateGallery(-1)"
                            class="absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white p-4 rounded-full transition hidden">
                        <i class="fas fa-chevron-left text-2xl"></i>
                    </button>
                    <button id="nextImageBtn" onclick="navigateGallery(1)"
                            class="absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white p-4 rounded-full transition hidden">
                        <i class="fas fa-chevron-right text-2xl"></i>
                    </button>
                </div>

                <!-- Image Info -->
                <div class="p-6 bg-white">
                    <h3 id="galleryTitle" class="text-2xl font-bold text-gray-900 mb-2"></h3>
                    <p id="galleryDescription" class="text-gray-600 mb-4"></p>

                    <!-- Thumbnails -->
                    <div id="galleryThumbnails" class="flex gap-2 overflow-x-auto pb-2">
                        <!-- Thumbnails will be inserted here by JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    // Tab switching
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabName = this.dataset.tab;

                // Update active button
                tabBtns.forEach(b => {
                    b.classList.remove('active', 'bg-slate-800', 'text-white');
                    b.classList.add('text-slate-700');
                });
                this.classList.add('active', 'bg-slate-800', 'text-white');
                this.classList.remove('text-slate-700');

                // Show/hide content
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(tabName + '-section').classList.remove('hidden');
            });
        });

        // Set initial active state based on URL hash
        const hash = window.location.hash;
        let initialTab = 'videos'; // default

        if (hash === '#audios-section') {
            initialTab = 'audios';
        } else if (hash === '#images-section') {
            initialTab = 'images';
        }

        // Activate the correct tab
        const initialBtn = document.querySelector(`.tab-btn[data-tab="${initialTab}"]`);
        if (initialBtn) {
            tabBtns.forEach(b => {
                b.classList.remove('active', 'bg-slate-800', 'text-white');
                b.classList.add('text-slate-700');
            });
            initialBtn.classList.add('active', 'bg-slate-800', 'text-white');
            initialBtn.classList.remove('text-slate-700');

            // Show correct content
            tabContents.forEach(content => content.classList.add('hidden'));
            document.getElementById(initialTab + '-section').classList.remove('hidden');
        }
    });

    // Video modal functions
    function openVideoModal(youtubeId, title) {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');
        const titleEl = document.getElementById('videoTitle');

        frame.src = `https://www.youtube.com/embed/${youtubeId}?autoplay=1`;
        titleEl.textContent = title;
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    function closeVideoModal() {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');

        frame.src = '';
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // Restore body scroll
        document.body.style.overflow = 'auto';
    }

    // Gallery modal state
    let currentGalleryImages = [];
    let currentGalleryIndex = 0;
    let currentGalleryTitle = '';
    let currentGalleryDescription = '';

    // Gallery modal functions
    function openGalleryModal(images, title, description, startIndex = 0) {
        // Si images est vide ou null, utiliser un tableau vide
        currentGalleryImages = Array.isArray(images) && images.length > 0 ? images : [];
        currentGalleryIndex = startIndex;
        currentGalleryTitle = title;
        currentGalleryDescription = description;

        // Si pas d'images, ne pas ouvrir la modal
        if (currentGalleryImages.length === 0) {
            return;
        }

        updateGalleryDisplay();

        const modal = document.getElementById('galleryModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    function closeGalleryModal() {
        const modal = document.getElementById('galleryModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // Restore body scroll
        document.body.style.overflow = 'auto';

        // Reset state
        currentGalleryImages = [];
        currentGalleryIndex = 0;
    }

    function navigateGallery(direction) {
        currentGalleryIndex += direction;

        // Loop around
        if (currentGalleryIndex < 0) {
            currentGalleryIndex = currentGalleryImages.length - 1;
        } else if (currentGalleryIndex >= currentGalleryImages.length) {
            currentGalleryIndex = 0;
        }

        updateGalleryDisplay();
    }

    function updateGalleryDisplay() {
        const mainImage = document.getElementById('galleryMainImage');
        const titleEl = document.getElementById('galleryTitle');
        const descEl = document.getElementById('galleryDescription');
        const currentIndexEl = document.getElementById('currentImageIndex');
        const totalImagesEl = document.getElementById('totalImages');
        const thumbnailsContainer = document.getElementById('galleryThumbnails');
        const prevBtn = document.getElementById('prevImageBtn');
        const nextBtn = document.getElementById('nextImageBtn');

        // Update main image
        mainImage.src = currentGalleryImages[currentGalleryIndex];
        mainImage.alt = currentGalleryTitle;

        // Update text
        titleEl.textContent = currentGalleryTitle;
        descEl.textContent = currentGalleryDescription || '';
        descEl.style.display = currentGalleryDescription ? 'block' : 'none';

        // Update counter
        currentIndexEl.textContent = currentGalleryIndex + 1;
        totalImagesEl.textContent = currentGalleryImages.length;

        // Show/hide navigation arrows
        if (currentGalleryImages.length > 1) {
            prevBtn.classList.remove('hidden');
            nextBtn.classList.remove('hidden');
        } else {
            prevBtn.classList.add('hidden');
            nextBtn.classList.add('hidden');
        }

        // Update thumbnails
        thumbnailsContainer.innerHTML = '';
        if (currentGalleryImages.length > 1) {
            currentGalleryImages.forEach((imageUrl, index) => {
                const thumb = document.createElement('div');
                thumb.className = `flex-shrink-0 w-20 h-20 rounded overflow-hidden cursor-pointer border-2 transition ${
                    index === currentGalleryIndex ? 'border-emerald-600 opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
                }`;
                thumb.innerHTML = `<img src="${imageUrl}" alt="" class="w-full h-full object-cover">`;
                thumb.onclick = () => {
                    currentGalleryIndex = index;
                    updateGalleryDisplay();
                };
                thumbnailsContainer.appendChild(thumb);
            });
        }
    }

    // Close modals on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeVideoModal();
            closeGalleryModal();
        } else if (e.key === 'ArrowLeft') {
            if (!document.getElementById('galleryModal').classList.contains('hidden')) {
                navigateGallery(-1);
            }
        } else if (e.key === 'ArrowRight') {
            if (!document.getElementById('galleryModal').classList.contains('hidden')) {
                navigateGallery(1);
            }
        }
    });

    // Close video modal on background click
    document.getElementById('videoModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeVideoModal();
        }
    });

    // Close gallery modal on background click
    document.getElementById('galleryModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeGalleryModal();
        }
    });

    // Store widget instances
    const widgets = {};
    const updateIntervals = {};

    // Play podcast function with SoundCloud Widget API
    function playPodcast(playerId) {
        const playerContainer = document.getElementById(playerId);
        const audioId = playerId.replace('podcast-', '');
        const overlay = document.getElementById('play-overlay-' + audioId);

        // Show the player if hidden
        if (playerContainer.classList.contains('hidden')) {
            playerContainer.classList.remove('hidden');
        }

        // Check if it's a SoundCloud player
        const scWidget = document.getElementById('sc-widget-' + audioId);
        if (scWidget) {
            // Create widget instance if not exists
            if (!widgets[audioId]) {
                widgets[audioId] = SC.Widget(scWidget);

                // Setup event listeners
                widgets[audioId].bind(SC.Widget.Events.READY, function() {
                    // Get duration
                    widgets[audioId].getDuration(function(duration) {
                        document.getElementById('duration-' + audioId).textContent = formatTime(duration / 1000);
                    });

                    // Start updating progress
                    startProgressUpdate(audioId);
                });

                widgets[audioId].bind(SC.Widget.Events.PLAY, function() {
                    document.getElementById('play-icon-' + audioId).className = 'fas fa-pause text-white text-xl';
                });

                widgets[audioId].bind(SC.Widget.Events.PAUSE, function() {
                    document.getElementById('play-icon-' + audioId).className = 'fas fa-play text-white text-xl ml-1';
                });

                widgets[audioId].bind(SC.Widget.Events.FINISH, function() {
                    document.getElementById('play-icon-' + audioId).className = 'fas fa-play text-white text-xl ml-1';
                    document.getElementById('progress-' + audioId).style.width = '0%';
                });
            }

            // Play the audio
            widgets[audioId].play();

            // Hide overlay when playing
            if (overlay) {
                overlay.style.display = 'none';
            }
        } else {
            // Check for HTML5 audio player
            const audioPlayer = document.getElementById('audio-player-' + audioId);
            if (audioPlayer) {
                audioPlayer.play();
                if (overlay) {
                    overlay.style.display = 'none';
                }
            }
        }
    }

    // Toggle play/pause
    function togglePlayPause(audioId) {
        if (widgets[audioId]) {
            widgets[audioId].isPaused(function(paused) {
                if (paused) {
                    widgets[audioId].play();
                } else {
                    widgets[audioId].pause();
                }
            });
        }
    }

    // Change volume
    function changeVolume(audioId, volume) {
        if (widgets[audioId]) {
            widgets[audioId].setVolume(volume);
        }
    }

    // Seek audio
    function seekAudio(event, audioId) {
        if (widgets[audioId]) {
            const progressBar = event.currentTarget;
            const rect = progressBar.getBoundingClientRect();
            const percent = (event.clientX - rect.left) / rect.width;

            widgets[audioId].getDuration(function(duration) {
                widgets[audioId].seekTo(duration * percent);
            });
        }
    }

    // Start progress update
    function startProgressUpdate(audioId) {
        if (updateIntervals[audioId]) {
            clearInterval(updateIntervals[audioId]);
        }

        updateIntervals[audioId] = setInterval(function() {
            widgets[audioId].getPosition(function(position) {
                widgets[audioId].getDuration(function(duration) {
                    const percent = (position / duration) * 100;
                    document.getElementById('progress-' + audioId).style.width = percent + '%';
                    document.getElementById('current-time-' + audioId).textContent = formatTime(position / 1000);
                });
            });
        }, 100);
    }

    // Format time helper
    function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return mins + ':' + (secs < 10 ? '0' : '') + secs;
    }

</script>

<!-- SoundCloud Widget API -->
<script src="https://w.soundcloud.com/player/api.js"></script>

@endpush