@extends('layouts.app')

@section('title', 'Media Gallery - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">PHOTOS & VIDEOS</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Our Media <span style="color: var(--gold-light);">Gallery</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Gallery Albums Section -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        @if($albums->count() > 0)
            @foreach($albums as $album)
            <div style="margin-bottom: 60px;">
                <div style="border-bottom: 2px solid var(--gray-200); padding-bottom: 12px; margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
                    <div>
                        <h2 style="font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--blue);">{{ $album->name }}</h2>
                        @if($album->description)
                        <p style="font-size: 0.88rem; color: var(--gray-500); margin-top: 4px;">{{ $album->description }}</p>
                        @endif
                    </div>
                    <span class="badge badge-blue">{{ $album->items->count() }} Media Items</span>
                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;">
                    @foreach($album->items as $item)
                    @php
                        $linkUrl = '#';
                        $isImage = false;
                        if ($item->type === 'video' && !empty($item->video_url)) {
                            $linkUrl = $item->video_url;
                        } elseif ($item->type === 'image' && !empty($item->file_path)) {
                            $linkUrl = asset($item->file_path);
                            $isImage = true;
                        }
                    @endphp
                    <a href="{{ $linkUrl }}" class="glightbox" data-gallery="album-{{ $album->id }}" data-title="{{ $item->caption ?? 'Gallery Item' }}" style="display:block; text-decoration:none; color:inherit;">
                        <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; cursor: pointer; transition: var(--transition);" onmouseenter="this.style.transform='scale(1.02)'" onmouseleave="this.style.transform='none'">
                            @if($isImage)
                                <div style="aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #eee;">
                                    @if($item->file_path && file_exists(public_path($item->file_path)))
                                        <img src="{{ asset($item->file_path) }}" alt="{{ $item->caption }}" style="width: 100%; height: 100%; object-fit: cover;">
                                    @else
                                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blue), var(--red)); font-size: 3.5rem; color: white;">📷</div>
                                    @endif
                                </div>
                                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 10px; font-size: 0.78rem; text-align: center;">
                                    {{ $item->caption ?? 'Event Photo' }}
                                </div>
                            @else
                                <div style="aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d1f45, #111); font-size: 3.5rem; color: white; position: relative;">
                                    🎥
                                    <div style="position: absolute; width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3);"><i class="fas fa-play"></i></div>
                                </div>
                                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 10px; font-size: 0.78rem; text-align: center;">
                                    {{ $item->caption ?? 'Video Highlight' }}
                                </div>
                            @endif
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
            @endforeach
        @else
        <!-- Fallback premium layout -->
        <div style="text-align: center; padding: 80px 40px; border: 1px dashed var(--gray-200); border-radius: var(--radius); color: var(--gray-500); max-width: 600px; margin: 0 auto;">
            <i class="fas fa-images" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
            <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.3rem; color: var(--blue); margin-bottom: 8px;">No Albums Created</h3>
            <p>Our media team is currently preparing highlights. Check back soon for high-resolution event coverage, matches, and grading ceremony photos.</p>
        </div>
        @endif
    </div>
</section>

@endsection