@extends('layout.master')
@section('content')
{{-- video section --}}
<div id="player-div" class="backdrop-blur-lg !z-[999] hidden fixed top-0 left-0 w-full h-full  items-center justify-center">
    <div class="absolute top-10 right-10">
      <i class="fas fa-xmark text-4xl text-red-600 hover:text-red-800 cursor-pointer" onclick="closeVideo()"></i>
    </div>
    <div id="player" class="md:h-[80%] md:w-1/2 rounded-xl">
    
    </div>
  </div>
  <div class="md:p-20 p-10 video-section ">
    <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Our Memories</h2>
        <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
            {{ config('app.name') }} Videos. </p>
    </div>
      <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-5 md:mt-20 mt-10">
        
        @if (count($videos)>0)
          @foreach ($videos as $key=>$video)
          <div class="flex justify-center group transition-all duration-500 {{$key==0?'md:col-span-2 nd:row-span-2':''}}">
              <div class="rounded-lg shadow-lg bg-white w-full {{$key==0?'md:h-[500px]':'md:h-[230px]'}} overflow-hidden relative">
                <div class="h-full w-full">
                  <img class="w-full h-full object-cover object-center rounded-lg" src="{{$video->getFirstMediaUrl('video')}}" alt="">
                </div>
                <div class="absolute overlay opacity-0 invisible   group-hover:opacity-100 group-hover:visible transition-all duration-500 ease-linear flex items-center justify-center top-0 left-0 w-full h-full">
                  <div class="video tex-white" data-video-id="{{$video->link}}">
                    <i class="fa-regular fa-circle-play text-white text-5xl cursor-pointer hover:scale-125 duration-300"></i>
                  </div>
                </div>
              </div>
          </div>
          @endforeach
        @endif
      </div>
  </div>
  {{--end of video section --}}
@endsection

@section('css')
  <style>
    /* video section */
.video-section .overlay,.album-section .overlay{
  background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(3,0,0,1) 99%);
}
/* end of video section */
  </style>
@endsection

@section('script')
<script src="https://www.youtube.com/iframe_api"></script> 
<script>
  // Function to load YouTube video
  var player;
  function loadVideo(videoId) {
    if (player) {
        player.loadVideoById(videoId);
    } else {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: videoId,
            events: {
                'onReady': onPlayerReady
            }
        });
    }
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  }
  
  function stopVideo() {
    player.stopVideo();
  }
function closeVideo()
{
  document.getElementById("player-div").style.display="none";
  document.body.style.overflow="auto";
  stopVideo();
}

// Add click event listeners to each video
document.querySelectorAll('.video').forEach(function(video) {
    video.addEventListener('click', function() {
        var videoId = this.getAttribute('data-video-id');
        loadVideo(videoId);
        document.getElementById('player-div').style.display="flex";
        document.body.style.overflow="hidden";
    });
});




</script>
@endsection