{{-- resources/views/public/gallery/index.blade.php --}}
@extends('layouts.public')
@section('title', 'Galeri Madrasah')

@section('content')

@php
    $sliderPhotos = collect();
    if(isset($fotos)) {
        foreach($fotos as $group) {
            $sliderPhotos->push($group->first());
            if($sliderPhotos->count() >= 5) break;
        }
    }
@endphp

<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 60vh; padding-top: 120px; padding-bottom: 160px;">
    @if($sliderPhotos->count() > 0)
    <div id="galleryHeroCarousel" class="carousel slide carousel-fade position-absolute top-0 start-0 w-100 h-100" data-bs-ride="carousel" style="z-index: 0;">
        <div class="carousel-inner w-100 h-100">
            @foreach($sliderPhotos as $idx => $photo)
            <div class="carousel-item w-100 h-100 {{ $idx == 0 ? 'active' : '' }}" data-bs-interval="4000">
                <img src="{{ asset('storage/galeri/' . $photo->file_path) }}" class="d-block w-100 h-100 object-fit-cover" alt="Slide Galeri">
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%); z-index: 0;"></div>
    @endif

    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(to bottom, rgba(11, 44, 94, 0.75) 0%, rgba(21, 101, 192, 0.95) 100%); z-index: 1;"></div>
    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-4" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 1rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            <i class="bi bi-camera me-1"></i> Dokumentasi
        </span>
        <h1 class="fw-bold mx-auto mb-3" style="font-size: 3.5rem; max-width: 900px; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.3); font-family: 'Cairo', sans-serif;">
            Galeri Madrasah
        </h1>
        <p class="lead mx-auto" style="max-width: 700px; color: rgba(255,255,255,0.9); font-weight: 400;">
            Dokumentasi ragam aktivitas, prestasi, dan fasilitas melalui lensa kamera kami.
        </p>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 0;">
    <div class="container">
        
        <div class="card border-0 shadow-lg rounded-4 p-4 p-md-5 bg-white" style="margin-top: -80px; z-index: 3; position: relative;">
            <ul class="nav nav-pills justify-content-center mb-5" id="galeri-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active px-4 fw-bold rounded-pill" id="foto-tab" data-bs-toggle="pill" data-bs-target="#tab-foto" type="button" role="tab" style="transition: all 0.3s;">
                        <i class="bi bi-camera me-1"></i> Album Foto
                    </button>
                </li>
                <li class="nav-item ms-2" role="presentation">
                    <button class="nav-link px-4 fw-bold rounded-pill border" id="video-tab" data-bs-toggle="pill" data-bs-target="#tab-video" type="button" role="tab" style="transition: all 0.3s;">
                        <i class="bi bi-youtube text-danger me-1"></i> Video
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="galeriTabContent">
                <div class="tab-pane fade show active" id="tab-foto" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                        @forelse($fotos as $batchId => $group)
                            @php 
                                $cover = $group->first(); 
                                $count = $group->count(); 
                            @endphp
                            <div class="col">
                                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift" data-bs-toggle="modal" data-bs-target="#modalAlbum{{ $cover->id }}" style="cursor: pointer; transition: transform 0.3s;">
                                    <div class="position-relative bg-light text-center" style="height: 250px;">
                                        <img src="{{ asset('storage/galeri/' . $cover->file_path) }}" class="w-100 h-100 object-fit-cover" alt="Album Cover">
                                        <div class="position-absolute top-0 end-0 m-3">
                                            <span class="badge bg-dark bg-opacity-75 rounded-pill px-3 py-2 shadow-sm" style="backdrop-filter: blur(4px);">
                                                <i class="bi bi-images me-1"></i> {{ $count }} Foto
                                            </span>
                                        </div>
                                    </div>
                                    <div class="card-body p-4 text-center">
                                        <h5 class="fw-bold text-dark mb-2">{{ $cover->judul }}</h5>
                                        <p class="text-muted small mb-0 text-truncate">{{ $cover->deskripsi ?? 'Klik untuk melihat isi album' }}</p>
                                    </div>
                                </div>
                            </div>

                            <div class="modal fade" id="modalAlbum{{ $cover->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                    <div class="modal-content bg-transparent border-0">
                                        <div class="modal-header border-bottom-0 pb-0 justify-content-between align-items-center">
                                            <h4 class="modal-title fw-bold text-white shadow-sm">{{ $cover->judul }}</h4>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div id="carouselAlbum{{ $cover->id }}" class="carousel slide" data-bs-ride="carousel">
                                                <div class="carousel-inner rounded-4 shadow-lg overflow-hidden border border-secondary border-opacity-25">
                                                    @foreach($group as $idx => $img)
                                                    <div class="carousel-item {{ $idx == 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/galeri/' . $img->file_path) }}" class="d-block w-100 object-fit-contain bg-dark" style="height: 75vh;" alt="Foto">
                                                    </div>
                                                    @endforeach
                                                </div>
                                                @if($count > 1)
                                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselAlbum{{ $cover->id }}" data-bs-slide="prev">
                                                    <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                                                    <span class="visually-hidden">Previous</span>
                                                </button>
                                                <button class="carousel-control-next" type="button" data-bs-target="#carouselAlbum{{ $cover->id }}" data-bs-slide="next">
                                                    <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                                                    <span class="visually-hidden">Next</span>
                                                </button>
                                                @endif
                                            </div>
                                            @if($cover->deskripsi)
                                                <div class="bg-dark bg-opacity-75 rounded-3 p-3 mt-3 mx-auto" style="max-width: 800px; backdrop-filter: blur(5px);">
                                                    <p class="text-center text-white mb-0" style="font-size: 1.1rem;">{{ $cover->deskripsi }}</p>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center text-muted py-5">
                                <i class="bi bi-camera" style="font-size: 3rem; opacity: 0.5;"></i>
                                <p class="mt-3">Belum ada album foto yang dipublikasikan.</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-video" role="tabpanel">
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                        @forelse($videos as $vid)
                            @php 
                                preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/\s]{11})%i', $vid->video_url, $match);
                                $yt_id = $match[1] ?? null;
                            @endphp
                            <div class="col">
                                <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden hover-lift" style="transition: transform 0.3s;">
                                    <div class="position-relative bg-dark text-center" style="height: 250px;">
                                        @if($yt_id)
                                            <img src="https://img.youtube.com/vi/{{ $yt_id }}/maxresdefault.jpg" class="w-100 h-100 object-fit-cover opacity-75" alt="Thumbnail Video">
                                        @endif
                                        <div class="position-absolute w-100 h-100 top-0 start-0 d-flex align-items-center justify-content-center">
                                            <a href="{{ $vid->video_url }}" target="_blank" class="text-white text-decoration-none" title="Tonton Video">
                                                <i class="bi bi-play-circle-fill text-danger bg-white rounded-circle shadow" style="font-size: 4.5rem; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body p-4 text-center">
                                        <h5 class="fw-bold text-dark mb-2">{{ $vid->judul }}</h5>
                                        <p class="text-muted small mb-0">{{ $vid->deskripsi ?? 'Tautan Video Eksternal' }}</p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center text-muted py-5">
                                <i class="bi bi-youtube" style="font-size: 3rem; opacity: 0.5;"></i>
                                <p class="mt-3">Belum ada tautan video yang dipublikasikan.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<style>
    .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important; }
</style>
@endsection