@extends('layouts.frontend.master')

@section('title', 'Media - BAU 2001–2002 Alumni Association')

@push('css')
    <style>
        .media-card { transition: .3s; }
        .media-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
        .youtube-frame { width: 100%; height: 220px; border: none; border-radius: 10px; }

        /* Modal styles */
        .media-modal {
            position: fixed;
            inset: 0;
            display: none; /* hidden by default */
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.75);
            z-index: 9999;
            padding: 1rem;
        }
        .media-modal.open { display: flex; }
        .media-modal__inner {
            position: relative;
            max-width: 1200px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .media-modal__img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 0.5rem;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
        }
        .media-modal__close {
            position: absolute;
            top: -12px;
            right: -12px;
            background: #ffffff;
            color: #111827;
            border-radius: 9999px;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
            cursor: pointer;
        }

        .media-card__title {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0.5rem 1rem;
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.59);
            text-align: left;
            box-sizing: border-box;
        }

        /* small-screen image sizing */
        @media (max-width: 640px) {
            .media-modal__img { max-height: 80vh; }
        }
    </style>
@endpush

@section('content')
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <!-- Section Title -->
            <div class="section-title text-center">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">Our Media Gallery</h1>
                <p class="text-gray-600 mb-4">Explore All Our Moments</p>
            </div>

            <h2 class="text-3xl font-bold text-blue-900 mb-6" style="color: rgb(30 64 175);">
                Gallery
                <span class="text-lg font-medium text-gray-600">({{ $featuredMedia->count() }})</span>
            </h2>

            @if ($featuredMedia->count() > 0)
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach ($featuredMedia as $media)
                        {{-- IMAGE --}}
                        @if ($media->file_path)
                            <div class="media-card bg-white rounded-xl shadow-md overflow-hidden border cursor-pointer relative">
                                <img
                                    src="{{ asset('storage/' . $media->file_path) }}"
                                    class="w-full h-56 object-cover media-thumb"
                                    alt="{{ $media->title ?? 'Featured Image' }}"
                                    data-full="{{ asset('storage/' . $media->file_path) }}"
                                />
                                @if($media->title)
                                    <div class="media-card__title">
                                        {{ $media->title }}
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- YOUTUBE VIDEO --}}
                        @if ($media->youtube_link)
                            @php
                                parse_str(parse_url($media->youtube_link, PHP_URL_QUERY), $yt);
                                $videoId = $yt['v'] ?? null;
                                $embedUrl = $videoId ? "https://www.youtube.com/embed/$videoId" : null;
                            @endphp

                            @if ($embedUrl)
                                <div class="media-card bg-white rounded-xl shadow-md overflow-hidden border">
                                    <iframe class="youtube-frame" src="{{ $embedUrl }}" allowfullscreen></iframe>
                                </div>
                            @endif
                        @endif
                    @endforeach
                </div>

                {{-- Pagination Links --}}
                <div class="mt-8">
                    {{ $featuredMedia->links() }}
                </div>

            @else
                <div class="text-center py-16">
                    <i class="fas fa-photo-video text-6xl text-gray-300 mb-6"></i>
                    <h3 class="text-2xl font-semibold text-blue-900 mb-4" style="color: rgb(30 64 175);">No Featured Media Available</h3>
                    <p class="text-gray-500 mt-1">There are no featured images or videos. Please check again later.</p>
                </div>
            @endif


        </div>

        <!-- IMAGE PREVIEW MODAL (Only for images) -->
        <div id="mediaModal" class="media-modal" aria-hidden="true" role="dialog" aria-modal="true">
            <div class="media-modal__inner" id="mediaModalInner">
                <button id="mediaModalClose" class="media-modal__close" aria-label="Close image preview">&times;</button>
                <img id="mediaModalImage" width="100%" class="media-modal__img" src="" alt="Preview Image" />
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script>
        (function () {
            // Elements
            const modal = document.getElementById('mediaModal');
            const modalImage = document.getElementById('mediaModalImage');
            const modalClose = document.getElementById('mediaModalClose');
            const modalInner = document.getElementById('mediaModalInner');

            // Open modal with given image URL
            function openModal(imageUrl, altText = '') {
                modalImage.src = imageUrl;
                modalImage.alt = altText;
                modal.classList.add('open');
                modal.setAttribute('aria-hidden', 'false');

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

            // Close modal and cleanup
            function closeModal() {
                modal.classList.remove('open');
                modalImage.src = '';
                modalImage.alt = '';
                modal.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = '';
            }

            // Click handlers for image thumbnails
            document.querySelectorAll('.media-thumb').forEach(function (img) {
                img.addEventListener('click', function (e) {
                    const full = this.dataset.full || this.src;
                    const alt = this.alt || '';
                    openModal(full, alt);
                });
            });

            // Close button
            modalClose.addEventListener('click', function (e) {
                e.stopPropagation();
                closeModal();
            });

            // Click outside image to close
            modal.addEventListener('click', function (e) {
                // if click is directly on overlay (not on inner container or children), close
                if (e.target === modal || e.target === modalInner) {
                    // if clicked on inner container, don't close (we want only overlay close)
                    if (e.target === modal) closeModal();
                }
            });

            // Close on ESC
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && modal.classList.contains('open')) {
                    closeModal();
                }
            });

            // Optional: prevent clicks inside inner from closing (if using overlay check above)
            modalInner.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        })();
    </script>
@endpush