@extends('layouts.website')

@section('title', 'Galeri Video')

@section('content')

{{-- CSS KHUSUS HALAMAN VIDEO MODERN --}}
<style>
    /* 1. HERO SECTION */
    .gallery-hero {
        background: linear-gradient(135deg, #f8f9fa 0%, #e8eaf6 100%);
        padding: 60px 0 40px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        margin-bottom: 50px;
        position: relative;
        overflow: hidden;
    }
    .gallery-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(26, 35, 126, 0.05);
        border-radius: 50%;
    }
    .gallery-hero::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -5%;
        width: 200px;
        height: 200px;
        background: rgba(255, 193, 7, 0.1);
        border-radius: 50%;
    }
    .hero-title {
        font-weight: 800;
        font-size: 2.5rem;
        background: linear-gradient(to right, #1a237e, #283593);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
    }

    /* 2. MASONRY LAYOUT (Sama seperti Galeri Foto) */
    .gallery-masonry {
        column-count: 1; /* Mobile 1 kolom (karena video butuh lebar) */
        column-gap: 1.5rem;
    }
    @media (min-width: 768px) { .gallery-masonry { column-count: 2; } } /* Tablet: 2 Kolom */
    @media (min-width: 1200px) { .gallery-masonry { column-count: 3; } } /* Laptop: 3 Kolom */

    .gallery-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
        position: relative;
    }

    /* 3. CARD STYLING */
    .gallery-card-modern {
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: #fff;
        display: flex;
        flex-direction: column;
    }
    .gallery-card-modern:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(26, 35, 126, 0.2);
    }

    /* VIDEO WRAPPER (Embed YouTube) */
    .video-wrapper {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* Rasio 16:9 */
        background: #000;
        border-bottom: 1px solid #f0f0f0;
    }
    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* CONTENT BODY */
    .video-body-modern {
        padding: 20px;
        background: #fff;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .gallery-title-modern {
        font-weight: 700;
        font-size: 1.1rem;
        color: #2c3e50;
        margin-bottom: 5px;
        line-height: 1.4;
        transition: color 0.3s;
    }
    .gallery-card-modern:hover .gallery-title-modern {
        color: #1a237e;
    }

    .gallery-date-modern {
        color: #999;
        font-size: 0.85rem;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    .gallery-date-modern i {
        margin-right: 6px;
        color: #ffc107;
    }

    /* BUTTON YOUTUBE MODERN */
    .btn-youtube-modern {
        background: linear-gradient(to right, #ff0000, #cc0000);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 10px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-shadow: 0 4px 10px rgba(255, 0, 0, 0.2);
    }
    .btn-youtube-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255, 0, 0, 0.3);
        color: white;
    }

    /* PAGINATION STYLING */
    .custom-pagination .page-item.active .page-link {
        background-color: #1a237e;
        border-color: #1a237e;
    }
    .custom-pagination .page-link {
        color: #1a237e;
    }

    /* EMPTY STATE */
    .empty-state-modern {
        text-align: center;
        padding: 80px 20px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
</style>

{{-- 1. HERO SECTION --}}
<div class="gallery-hero text-center">
    <div class="container position-relative z-1" data-aos="zoom-in" data-aos-duration="1000">
        <span class="badge bg-danger text-white mb-2 px-3 py-2 rounded-pill shadow-sm">
            <i class="fab fa-youtube me-1"></i> Video Kegiatan
        </span>
        <h1 class="hero-title">Galeri Video Sekolah</h1>
        <p class="text-muted mx-auto" style="max-width: 600px;">
            Saksikan keseruan kegiatan, acara, dan profil sekolah melalui koleksi video dokumentasi kami di saluran YouTube resmi.
        </p>
    </div>
</div>

<div class="container mb-5">
    
    {{-- 2. MASONRY VIDEO GRID --}}
    @if ($allVideos->isEmpty())
        <div class="row justify-content-center">
            <div class="col-md-8" data-aos="fade-up">
                <div class="empty-state-modern">
                    <img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="YouTube" width="100" class="mb-3 opacity-50">
                    <h4 class="fw-bold text-dark">Galeri Video Kosong</h4>
                    <p class="text-muted">Belum ada video yang ditambahkan ke galeri saat ini.</p>
                </div>
            </div>
        </div>
    @else
        <div class="gallery-masonry">
            @foreach ($allVideos as $index => $video)
                @php
                    $date = isset($video->created_at) ? \Carbon\Carbon::parse($video->created_at)->format('d M Y') : '-';
                @endphp

                <div class="gallery-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="{{ ($index % 3) * 100 }}">
                    <div class="gallery-card-modern">
                        
                        {{-- Video Embed --}}
                        <div class="video-wrapper">
                            <iframe src="https://www.youtube.com/embed/{{ $video->youtube_id }}" 
                                    title="{{ $video->title }}" 
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                    allowfullscreen
                                    loading="lazy">
                            </iframe>
                        </div>

                        {{-- Info Body --}}
                        <div class="video-body-modern">
                            <div>
                                <h5 class="gallery-title-modern">{{ $video->title }}</h5>
                                <div class="gallery-date-modern">
                                    <i class="far fa-calendar-alt"></i> Diposting: {{ $date }}
                                </div>
                            </div>
                            
                            <a href="https://www.youtube.com/watch?v={{ $video->youtube_id }}" target="_blank" class="btn-youtube-modern mt-3">
                                <i class="fab fa-youtube me-2"></i> Tonton di YouTube
                            </a>
                        </div>

                    </div>
                </div>
            @endforeach
        </div>
    @endif
    
    {{-- 3. PAGINASI --}}
    <div class="d-flex justify-content-center mt-5" data-aos="fade-up">
        <div class="custom-pagination">
            {{ $allVideos->links() }}
        </div>
    </div>
    
</div>

@endsection