@extends('layouts.frontend.master')

@section('title', 'All Gallery Videos - BAU 2001–2002 Alumni Association')

@push('css')
    <style>
        .video-gallery .video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .video-gallery .play-buttons img {
            transition: opacity 0.3s ease;
        }

        .video-gallery .group:hover .play-buttons {
            opacity: 1;
        }

        .video-gallery .play-buttons {
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

        .video-gallery .video:not([src]) {
            background-color: #000;
        }

        .video-gallery .relative {
            background-color: #000;
        }
    </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 Video Gallery</h1>
                <p class="text-gray-600 mb-4">Explore All Our Moments</p>
            </div>

            <!-- Video Gallery Grid -->
            @if(isset($galleryVideos))
                <div class="video-gallery grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-8">
                    @forelse($galleryVideos as $galleryVideo)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <div class="aspect-w-16 aspect-h-9">
                                @php
                                    $url = $galleryVideo->youtube_link; // database এ রাখা link
                                    preg_match('/(?:v=|\.be\/|shorts\/)([a-zA-Z0-9_-]+)/', $url, $matches);
                                    $videoId = $matches[1] ?? null;
                                @endphp

                                @if($videoId)
                                    <iframe class="w-full h-64"
                                            src="https://www.youtube.com/embed/{{ $videoId }}"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                    </iframe>
                                @else
                                    <p class="text-red-500">Invalid YouTube link</p>
                                @endif
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-lg mb-2">{{$galleryVideo->title}}</h3>
                                <p class="text-gray-600 text-sm">{{ \Illuminate\Support\Str::limit($galleryVideo->description, 100, '...') }}</p>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-full text-center text-gray-600">
                            <p>No active gallery videos available at this time.</p>
                        </div>
                    @endforelse
                </div>
                <div class="d-flex justify-content-center mt-4">
                    <div class="row mt-3">
                        <div class="col">
                            <nav aria-label="Grid Pagination">
                                <ul class="pagination justify-content-center" id="grid-pagination">
                                    {{-- Previous Page --}}
                                    <li class="page-item {{ $galleryVideos->onFirstPage() ? 'disabled' : '' }}">
                                        <a class="page-link" href="{{ $galleryVideos->previousPageUrl() }}" data-page="{{ $galleryVideos->currentPage() - 1 }}">Previous</a>
                                    </li>

                                    {{-- Page Numbers --}}
                                    @for ($i = 1; $i <= $galleryVideos->lastPage(); $i++)
                                        <li class="page-item {{ $galleryVideos->currentPage() == $i ? 'active' : '' }}">
                                            <a class="page-link" href="{{ $galleryVideos->url($i) }}" data-page="{{ $i }}">{{ $i }}</a>
                                        </li>
                                    @endfor

                                    {{-- Next Page --}}
                                    <li class="page-item {{ $galleryVideos->hasMorePages() ? '' : 'disabled' }}">
                                        <a class="page-link" href="{{ $galleryVideos->nextPageUrl() }}" data-page="{{ $galleryVideos->currentPage() + 1 }}">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>

                </div>
            @endif
        </div>
    </section>
@endsection

@push('js')
    <script>
        $(document).ready(function () {

            $('.video-gallery .group').each(function () {
                const $container = $(this);
                const $video = $container.find('.video');
                const $playBtn = $container.find('.play-btn');
                const $stopBtn = $container.find('.stop-btn');
                const $fullscreenBtn = $container.find('.fullscreen-btn');
                const $muteBtn = $container.find('.mute-btn');
                const $unmuteBtn = $container.find('.unmute-btn');

                // Play button click
                $playBtn.on('click', function () {
                    $video[0].play().catch(function (error) {
                        console.error('Video play failed:', error);
                    });
                    $playBtn.addClass('hidden');
                    $stopBtn.removeClass('hidden');
                });

                // Pause button click
                $stopBtn.on('click', function () {
                    $video[0].pause();
                    $video[0].load(); // Reload to show poster image
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });

                // Full-screen button click
                $fullscreenBtn.on('click', function () {
                    const video = $video[0];
                    if (video.requestFullscreen) {
                        video.requestFullscreen();
                    } else if (video.webkitRequestFullscreen) { // Safari
                        video.webkitRequestFullscreen();
                    } else if (video.msRequestFullscreen) { // IE11
                        video.msRequestFullscreen();
                    }
                });

                // Mute button click
                $muteBtn.on('click', function () {
                    $video[0].muted = true;
                    $muteBtn.addClass('hidden');
                    $unmuteBtn.removeClass('hidden');
                });

                // Unmute button click
                $unmuteBtn.on('click', function () {
                    $video[0].muted = false;
                    $unmuteBtn.addClass('hidden');
                    $muteBtn.removeClass('hidden');
                });

                // When video is paused
                $video.on('pause', function () {
                    $video[0].load(); // Reload to show poster image
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });

                // When video ends
                $video.on('ended', function () {
                    $video[0].load(); // Reload to show poster image
                    $stopBtn.addClass('hidden');
                    $playBtn.removeClass('hidden');
                });

                // Update mute/unmute button visibility based on video state
                $video.on('volumechange', function () {
                    if ($video[0].muted) {
                        $muteBtn.addClass('hidden');
                        $unmuteBtn.removeClass('hidden');
                    } else {
                        $unmuteBtn.addClass('hidden');
                        $muteBtn.removeClass('hidden');
                    }
                });
            });
        });
    </script>
@endpush