@extends('front.app')
@section('content')
    <div class="container pt-10 pt-md-14">
        @php
            if (! function_exists('getYouTubeId')) {
            function getYouTubeId($url)
            {
                preg_match("/(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^\?&\"'>]+)/", $url, $matches);
                return $matches[5] ?? null;
            }
        }
        @endphp
        <div class="col-md-8 col-lg-7 col-xl-6 col-xxl-5">
            <h1 class="display-1 mb-3">Galerie Video</h1>
        </div>

        <div class="row">
            <!-- Loop through all videos -->
            @foreach($videoGallery as $video)
                <div class="col-md-4 mt-2 mb-10">
                    <div class="video-item">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal-{{ $video->id }}">
                            <div class="video-thumbnail">
                                @if($video->video_type === 'youtube')
                                    <img src="https://img.youtube.com/vi/{{ getYouTubeId($video->youtube_url) }}/hqdefault.jpg"
                                         class="img-fluid thumbnail-img" alt="Video thumbnail">
                                @else
                                    <video id="thumbnail-video-{{ $video->id }}" class="thumbnail-img" controls>
                                        <source src="{{ asset('storage/' . $video->local_video_path) }}"
                                                type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                        </a>
                    </div>
                </div>
                <div class="modal fade" id="videoModal-{{ $video->id }}" tabindex="-1" aria-labelledby="videoModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @if($video->video_type === 'youtube')
                                    <!-- Embed YouTube Video -->
                                    <div class="ratio ratio-16x9">
                                        <iframe id="video-iframe-{{ $video->id }}"
                                                src="https://www.youtube.com/embed/{{ getYouTubeId($video->youtube_url) }}"
                                                frameborder="0" allowfullscreen></iframe>
                                    </div>
                                @else
                                    <!-- Local Video -->
                                    <video id="video-player-{{ $video->id }}" width="100%" height="auto" controls>
                                        <source src="{{ asset('storage/' . $video->local_video_path) }}"
                                                type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var modals = document.querySelectorAll('.modal');

            modals.forEach(function (modal) {
                modal.addEventListener('hidden.bs.modal', function () {
                    var videoId = modal.id.replace('videoModal-', ''); // Extract video ID from modal ID
                    var video = document.getElementById('video-player-' + videoId);
                    var iframe = document.getElementById('video-iframe-' + videoId);

                    if (video) {
                        video.pause(); // Pause local video
                        video.currentTime = 0; // Optionally reset the video to the start
                    }

                    if (iframe) {
                        var iframeSrc = iframe.src; // Get current src of iframe
                        iframe.src = ''; // Remove src to stop the video
                        iframe.src = iframeSrc; // Reset src to reload video
                    }
                });
            });
        });
    </script>
@endpush