@extends('user.layouts.app')

@section('body_class', 'gallery')

@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}"></div>
  @endforeach
</section>

<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Event Gallery</li>
    </ul>
  </div>
</div>

<section class="galler-view-page">
  <div class="container">
    @php
      $hasAnyValidImage = $events->contains(function ($event) {
          return $event->photos->isNotEmpty();
      });

      $hasAnyValidVideo = $events->contains(function ($gallery) {
          return $gallery->videos->contains(function ($video) {
              return !empty($video->link) || !empty($video->event_video_file);
          });
      });
    @endphp

    <ul class="gallery-tabs" id="galleryTab" role="tablist">
      <li class="gallery-item" role="presentation">
        <button class="gallery-link active" id="image-tab" data-bs-toggle="tab" data-bs-target="#image" type="button" role="tab">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2.67188 18.95L7.60187 15.64C8.39187 15.11 9.53187 15.17 10.2419 15.78L10.5719 16.07C11.3519 16.74 12.6119 16.74 13.3919 16.07L17.5519 12.5C18.3319 11.83 19.5919 11.83 20.3719 12.5L22.0019 13.9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          Photo Gallery
        </button>
      </li>
      <li class="gallery-item" role="presentation">
        <button class="gallery-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video" type="button" role="tab">
          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.5 15V9C22.5 4 20.5 2 15.5 2H9.5C4.5 2 2.5 4 2.5 9V15C2.5 20 4.5 22 9.5 22H15.5C20.5 22 22.5 20 22.5 15Z" stroke="#002B10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3.01953 7.10999H21.9795" stroke="#002B10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M9.01953 2.10999V6.96999" stroke="#002B10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M15.9805 2.10999V6.51999" stroke="#002B10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M10.25 14.45V13.25C10.25 11.71 11.34 11.08 12.67 11.85L13.71 12.45L14.75 13.05C16.08 13.82 16.08 15.08 14.75 15.85L13.71 16.45L12.67 17.05C11.34 17.82 10.25 17.19 10.25 15.65V14.45V14.45Z" stroke="#002B10" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          Video Gallery
        </button>
      </li>
      <li class="gallery-item" role="presentation">
        <a href="{{ route('archive')}}">
        <button class="gallery-link" id="archive" data-bs-toggle="tab" data-bs-target="#image" type="button" role="tab">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M9 10C10.1046 10 11 9.10457 11 8C11 6.89543 10.1046 6 9 6C7.89543 6 7 6.89543 7 8C7 9.10457 7.89543 10 9 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2.67188 18.95L7.60187 15.64C8.39187 15.11 9.53187 15.17 10.2419 15.78L10.5719 16.07C11.3519 16.74 12.6119 16.74 13.3919 16.07L17.5519 12.5C18.3319 11.83 19.5919 11.83 20.3719 12.5L22.0019 13.9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          Archive
        </button>
        </a>
      </li>
    </ul>
    <div class="tab-content" id="galleryTabContent">
      
      <div class="tab-pane fade show active" id="image" role="tabpanel">
        <ul class="gallery-thum images-view">
          

          @foreach($events as $event)
            @if($event->photos->isNotEmpty())
              <li>
                <div class="gallery-thum-inner">
                  <div class="gallery-thum-box">
                    @foreach($event->photos as $photo)
                    <a href="javascript:void(0)">
                      <img class="lightbox-enabled tour-{{ $event->id }}" src="{{ asset('storage/distribution/images/events/' . $photo->name) }}" alt="{{ $event->name }}" data-imgsrc="{{ asset('storage/distribution/images/events/' . $photo->name) }}" data-eventname="{{ $event->name }}"/>
                    </a>
                    @endforeach
                  </div>
                  <div class="gallery-thum-name">{{ $event->name }}</div>
                </div>
              </li>
            @endif
          @endforeach
        </ul>

        @if(!$hasAnyValidImage)
          <div class="gallery-empty-state">
            <p>No images available for any event at the moment.</p>
          </div>
        @endif
      </div>
     


      
      <!-- // Video path -->

      {{--<div class="tab-pane fade" id="video" role="tabpanel">
        <ul class="gallery-thum video-view">
          

          @foreach($events as $event)
            @if($event->galleries->isNotEmpty())
              @foreach($event->galleries as $gallery)
                @if($gallery->videos->isNotEmpty())
                  
                    <li>
                      <div class="gallery-thum-inner">
                        <div class="gallery-thum-box">
                        @foreach($gallery->videos as $video)
                          <a class="lightbox-enabled-video" href="javascript:void(0)" data-event-id="{{ $event->id }}">
                            @if($video->link)
                              {!! $video->link !!}
                            @elseif($video->event_video_file)
                              <!-- If there is a local video file, use video tag -->
                              <video class="lightbox-enabled video-{{ $event->id }}" controls data-imgsrc="{{ asset('storage/distribution/videos/events/' . $video->event_video_file) }}">
                                <source src="{{ asset('storage//distribution/videos/events/'.$video->event_video_file) }}" type="video/mp4">
                              </video>
                            @else
                              <!-- Fallback message if no video is available -->
                              <p>No video available</p>
                            @endif
                          </a>
                        @endforeach
                        </div>
                        <div class="gallery-thum-name">{{ $event->event_name }}</div>
                      </div>
                    </li>
                  
                @endif
              @endforeach
            @endif
          @endforeach
        </ul>
      </div>--}}

      <div class="tab-pane fade" id="video" role="tabpanel">
        @if($hasAnyValidVideo)
        <ul class="gallery-thum video-view">

          @foreach($events as $gallery)
                @php
                  $validVideos = $gallery->videos->filter(function ($video) {
                      return !empty($video->link) || !empty($video->event_video_file);
                  })->values();
                @endphp

                @if($validVideos->isNotEmpty())
                  @php $groupClass = 'video-' . $gallery->id; @endphp

                  <li>
                    <div class="gallery-thum-inner">
                      <div class="gallery-thum-box">
                      @php $groupClass = 'video-' . $gallery->id; @endphp

                      @foreach($validVideos as $video)
                        @php
                          $type = '';
                          $src  = '';

                          if (!empty($video->link)) {
                              // full iframe HTML saved in DB -> extract src
                              if (preg_match('/src="([^"]+)"/', $video->link, $m)) {
                                  $src = $m[1];
                              } else {
                                  $src = $video->link; // fallback if plain URL
                              }
                              $type = 'iframe';
                          } elseif (!empty($video->event_video_file)) {
                              $src  = asset('storage/distribution/videos/events/' . $video->event_video_file);
                              $type = 'video';
                          }
                        @endphp

                        <a
                          class="lightbox-enabled-video {{ $groupClass }}"
                          href="javascript:void(0)"
                          data-type="{{ $type }}"
                          data-src="{{ $src }}"
                          data-event-id="{{ $gallery->id }}"
                          data-eventname="{{ $gallery->name }}"
                        >
                          @if($loop->first)
                            {{-- visible first thumb --}}
                            @if($loop->first && $type === 'iframe')
                              @php
                                // Add class + inline styles so clicks pass through to the <a>
                                $thumbIframe = preg_replace(
                                  '/<iframe\b/',
                                  '<iframe class="thumb-iframe" tabindex="-1" aria-hidden="true" style="pointer-events:none;width:100%;height:259px;border:0;display:block;"',
                                  $video->link
                                );
                              @endphp
                              {!! $thumbIframe !!}
                            @elseif($loop->first && $type === 'video')
                              <video class="inline-thumb" muted playsinline preload="metadata" style="width:100%;height:259px;display:block;object-fit:cover;">
                                <source src="{{ $src }}#t=0.5" type="video/mp4">
                              </video>
                            @else
                              <!-- <p>No video available</p> -->
                            @endif
                          @else
                            {{-- hidden, but kept in DOM for the lightbox group --}}
                            <span style="display:none;"></span>
                          @endif
                        </a>
                      @endforeach
                      </div>

                      <div class="gallery-thum-name">{{ $gallery->name }}</div>
                    </div>
                  </li>
                @endif
          @endforeach

        </ul>
        @endif

        @if(!$hasAnyValidVideo)
          <div class="gallery-empty-state">
            <!-- <p>No videos available for any event at the moment.</p> -->
            <p>No data found.</p>
          </div>
        @endif
      </div>

    </div>
  </div>
</section>

<!-- For Image LIGHTBOX -->
<section class="lightbox-container">
  <span class="material-symbols-outlined material-icons lightbox-btn left" id="left">
    arrow_back
  </span>
  <span class="material-symbols-outlined material-icons lightbox-btn right" id="right">
    arrow_forwards
  </span>
  <span id="close" class="close material-icons material-symbols-outlined">
    <img src="{{ asset('images/close-icon.svg') }}" alt="">
  </span>
  <div class="lightbox-image-wrapper">
    <!-- <img alt="lightboximage" class="lightbox-image" /> -->
    <div class="image-wrapper">
      <img alt="lightboximage" class="lightbox-image" />
    </div>
    <!-- Add the title container here -->
    <!-- <div class="lightbox-event-name" id="lightbox-event-name"></div> -->
    <h3 class="lightbox-event-name" id="lightbox-event-name"></h3>
  </div>
</section>

<!-- VIDEO LIGHTBOX (separate from the image one you already have) -->
<section class="lightbox-container lightbox-container-video" id="video-lightbox" style="display:none;">
  <span class="material-symbols-outlined material-icons lightbox-btn left" id="video-left">
    arrow_back
  </span>
  <span class="material-symbols-outlined material-icons lightbox-btn right" id="video-right">
    arrow_forwards
  </span>
  <span id="video-close" class="close material-icons material-symbols-outlined">
    <img src="{{ asset('images/close-icon.svg') }}" alt="">
  </span>

  <!-- wrapper for video/iframe -->
  <div class="lightbox-video-wrapper" id="video-lightbox-wrapper">
     <h3 class="lightbox-event-name" id="video-lightbox-title"></h3>
  </div>

  <!-- ADD THIS: caption under the video -->
  <!-- <h3 class="lightbox-event-name" id="video-lightbox-title"></h3> -->
</section>



@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
  <script>
    // document.addEventListener('DOMContentLoaded', function () {
    //   // Select all anchor tags with the class 'lightbox-enabled-video'
    //   const anchorTags = document.querySelectorAll('.lightbox-enabled-video');

    //   anchorTags.forEach((anchor) => {
    //     // Fetch the event ID from the anchor's data-event-id attribute
    //     const eventId = anchor.getAttribute('data-event-id');
        
    //     // Find the iframe inside this anchor tag
    //     const iframe = anchor.querySelector('iframe');
        
    //     // Check if iframe exists and eventId is available
    //     if (iframe && eventId) {
    //       // Set the iframe's width to 100% and height to 259px dynamically
    //       iframe.width = "100%"; // Set width to 100% of its parent container
    //       iframe.height = "259px"; // Set fixed height to 259px

    //       // Set the data-imgsrc attribute to the iframe's src value
    //       const iframeSrc = iframe.getAttribute('src');
    //       iframe.setAttribute('data-imgsrc', iframeSrc);

    //       // Add the lightbox-enabled and dynamic video-${eventId} class
    //       iframe.classList.add('lightbox-enabled', `video-${eventId}`);
    //     }
    //   });
    // });

    // if (lightboxContainer) {
    //   const lightboxImageWrapper = document.querySelector('.lightbox-image-wrapper');
    //   const lightboxBtns = document.querySelectorAll('.lightbox-btn');
    //   const lightboxBtnRight = document.querySelector('#right');
    //   const lightboxBtnLeft = document.querySelector('#left');
    //   const close = document.querySelector('#close');

    //   let activeItem;
    //   let lightboxArray = [];

    //   const showLightBox = () => lightboxContainer.classList.add('active');
    //   const hideLightBox = () => lightboxContainer.classList.remove('active');

    //   // render based on media type (video or iframe)
    //   const renderInLightbox = (src, type) => {
    //     if (type === 'video') {
    //       lightboxImageWrapper.innerHTML = `
    //         <video controls autoplay style="max-width:100%;height:auto;">
    //           <source src="${src}" type="video/mp4" />
    //           Your browser does not support the video tag.
    //         </video>
    //       `;
    //     } else if (type === 'iframe') {
    //       lightboxImageWrapper.innerHTML = `
    //         <iframe src="${src}" title="Video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    //       `;
    //     }
    //   };

    //   const setActiveMedia = (media) => {
    //     const videoLink = media.dataset.videoLink || '';
    //     const videoFile = media.dataset.videoFile || '';
        
    //     if (videoLink) {
    //       // External link (YouTube/Vimeo)
    //       renderInLightbox(videoLink, 'iframe');
    //     } else if (videoFile) {
    //       // Local video file
    //       const src = asset('storage/distribution/videos/events/' + videoFile);
    //       renderInLightbox(src, 'video');
    //     }
    //     activeItem = lightboxArray.indexOf(media);
    //   };

    //   const transitionSlidesLeft = () => {
    //     if (activeItem === 0) return; // stop at first slide
    //     lightboxBtnLeft.focus();
    //     lightboxImageWrapper.classList.add('slideright');
    //     setTimeout(() => {
    //       const prev = activeItem - 1;
    //       setActiveMedia(lightboxArray[prev]);
    //     }, 250);
    //     setTimeout(() => lightboxImageWrapper.classList.remove('slideright'), 500);
    //   };

    //   const transitionSlidesRight = () => {
    //     if (activeItem === lightboxArray.length - 1) return; // stop at last slide
    //     lightboxBtnRight.focus();
    //     lightboxImageWrapper.classList.add('slideleft');
    //     setTimeout(() => {
    //       const next = activeItem + 1;
    //       setActiveMedia(lightboxArray[next]);
    //     }, 250);
    //     setTimeout(() => lightboxImageWrapper.classList.remove('slideleft'), 500);
    //   };

    //   // single click handler for all video thumbnails (including links and video files)
    //   document.querySelectorAll('.lightbox-enabled-video').forEach(media => {
    //     media.addEventListener('click', () => {
    //       const classes = Array.from(media.classList);

    //       // group by shared class: prefer "tour-*"
    //       const groupClass = classes.find(c => c.startsWith('tour-'));

    //       // collect videos in the same group
    //       lightboxArray = Array.from(document.querySelectorAll(`.lightbox-enabled-video.${groupClass}`));

    //       showLightBox();
    //       setActiveMedia(media);
    //     });
    //   });

    //   // close controls
    //   lightboxContainer.addEventListener('click', hideLightBox);
    //   close.addEventListener('click', hideLightBox);

    //   // nav controls
    //   lightboxBtns.forEach(btn => {
    //     btn.addEventListener('click', (e) => {
    //       e.stopPropagation();
    //       e.currentTarget.id === 'left' ? transitionSlidesLeft() : transitionSlidesRight();
    //     });
    //   });

    //   // prevent close when clicking inside media area
    //   lightboxImageWrapper.addEventListener('click', (e) => e.stopPropagation());
    // }

  </script>

  <script>
    // (function () {
    //   // === SELECTORS FOR VIDEO LIGHTBOX ===
    //   const videoLightbox      = document.getElementById('video-lightbox');
    //   const videoWrapper       = document.getElementById('video-lightbox-wrapper');
    //   const videoBtnLeft       = document.getElementById('video-left');
    //   const videoBtnRight      = document.getElementById('video-right');
    //   const videoBtnClose      = document.getElementById('video-close');

    //   if (!videoLightbox || !videoWrapper) return;

    //   let videoItems = [];   // current group elements
    //   let activeIndex = 0;

    //   const openVideoLightbox = () => {
    //     videoLightbox.style.display = 'flex';
    //     videoLightbox.classList.add('active');
    //     document.body.style.overflow = 'hidden';
    //   };

    //   const closeVideoLightbox = () => {
    //     videoLightbox.style.display = 'none';
    //     videoLightbox.classList.remove('active');
    //     document.body.style.overflow = '';
    //     // stop playback by clearing DOM
    //     videoWrapper.innerHTML = '';
    //   };

    //   // render either <video> or <iframe>
    //   const renderVideo = (type, src) => {
    //     if (!src) {
    //       videoWrapper.innerHTML = '<p style="color:#fff;text-align:center;">No video source</p>';
    //       return;
    //     }
    //     if (type === 'video') {
    //       videoWrapper.innerHTML = `
    //         <video controls autoplay playsinline style="width:100%;height:100%;display:block;object-fit:cover;">
    //           <source src="${src}" type="video/mp4" />
    //           Your browser does not support the video tag.
    //         </video>
    //       `;
    //       return;
    //     }
    //     // iframe (YouTube/Vimeo/etc.)
    //     videoWrapper.innerHTML = `
    //       <iframe src="${src}"
    //               title="Video player"
    //               frameborder="0"
    //               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    //               referrerpolicy="strict-origin-when-cross-origin"
    //               allowfullscreen
    //               style="width:100%;height:100%;display:block;border:none;">
    //       </iframe>
    //     `;
    //   };

    //   const setActiveByIndex = (i) => {
    //     const el = videoItems[i];
    //     if (!el) return;
    //     activeIndex = i;
    //     renderVideo(el.dataset.type, el.dataset.src);
    //   };

    //   const goPrev = () => {
    //     if (activeIndex <= 0) return;
    //     setActiveByIndex(activeIndex - 1);
    //   };

    //   const goNext = () => {
    //     if (activeIndex >= videoItems.length - 1) return;
    //     setActiveByIndex(activeIndex + 1);
    //   };

    //   // === your requirement: show only the first thumb per gallery-thum-box ===
    //   document.querySelectorAll('.gallery-thum-box').forEach(box => {
    //     const thumbs = box.querySelectorAll('.lightbox-enabled-video');
    //     thumbs.forEach((el, index) => {
    //       el.style.display = index === 0 ? 'block' : 'none';
    //     });
    //   });

    //   // Click to open video lightbox
    //   document.querySelectorAll('.lightbox-enabled-video').forEach(el => {
    //     el.addEventListener('click', () => {
    //       // find group by class "video-<eventId>"
    //       const classes = Array.from(el.classList);
    //       const groupClass = classes.find(c => c.startsWith('video-'));
    //       if (!groupClass) return;

    //       // gather all (even hidden) anchors in same group in DOM order
    //       videoItems = Array.from(document.querySelectorAll('.lightbox-enabled-video.' + groupClass));

    //       const start = videoItems.indexOf(el);
    //       openVideoLightbox();
    //       setActiveByIndex(start >= 0 ? start : 0);
    //     });
    //   });

    //   // close and controls
    //   videoLightbox.addEventListener('click', closeVideoLightbox);
    //   videoBtnClose.addEventListener('click', (e) => { e.stopPropagation(); closeVideoLightbox(); });

    //   // prevent closing when clicking inside content
    //   videoWrapper.addEventListener('click', (e) => e.stopPropagation());

    //   // nav buttons
    //   videoBtnLeft.addEventListener('click', (e) => { e.stopPropagation(); goPrev(); });
    //   videoBtnRight.addEventListener('click', (e) => { e.stopPropagation(); goNext(); });

    //   // keyboard
    //   document.addEventListener('keydown', (e) => {
    //     if (!videoLightbox.classList.contains('active')) return;
    //     if (e.key === 'Escape') closeVideoLightbox();
    //     if (e.key === 'ArrowLeft') goPrev();
    //     if (e.key === 'ArrowRight') goNext();
    //   });
    // })(); //last correct script

    (function () {
      // ===== LIGHTBOX ELEMENTS =====
      const videoLightbox = document.getElementById('video-lightbox');
      const videoWrapper  = document.getElementById('video-lightbox-wrapper');
      const videoBtnLeft  = document.getElementById('video-left');
      const videoBtnRight = document.getElementById('video-right');
      const videoBtnClose = document.getElementById('video-close');
      const videoCaption  = document.getElementById('video-lightbox-title'); // <-- new caption element

      if (!videoLightbox || !videoWrapper) return;

      let videoItems = [];   // anchors (<a.lightbox-enabled-video>) for CURRENT <li>
      let activeIndex = 0;

      // ===== OPEN/CLOSE =====
      // const openVideoLightbox = () => {
      //   videoLightbox.style.display = 'flex';
      //   videoLightbox.classList.add('active');
      //   document.body.style.overflow = 'hidden';
      // };

      const openVideoLightbox = () => {
        videoLightbox.style.display = 'flex';
        videoLightbox.classList.add('active');
        document.body.style.overflow = 'hidden';
      };

      // const closeVideoLightbox = () => {
      //   videoLightbox.style.display = 'none';
      //   videoLightbox.classList.remove('active');
      //   document.body.style.overflow = '';
      //   // stop playback by nuking DOM
      //   videoWrapper.innerHTML = '';
      //   if (videoCaption) videoCaption.textContent = ''; // clear caption on close
      // };

      const closeVideoLightbox = () => {
        videoLightbox.style.display = 'none';
        videoLightbox.classList.remove('active');
        document.body.style.overflow = '';

        // Stop playback by nuking DOM
        videoWrapper.innerHTML = '';

        // Remove the dynamically created event name <h3> element
        const eventNameElement = document.getElementById('video-lightbox-title');
        if (eventNameElement) {
          eventNameElement.remove();
        }
      };

      // ===== RENDERER =====
      // const renderVideo = (type, src) => {
      //   if (!src) {
      //     videoWrapper.innerHTML = '<p style="color:#fff;text-align:center;">No video source</p>';
      //     return;
      //   }

      //   if (type === 'video') {
      //     videoWrapper.innerHTML = `
      //       <video controls autoplay playsinline style="width:100%;height:100%;display:block;object-fit:cover;">
      //         <source src="${src}" type="video/mp4" />
      //         Your browser does not support the video tag.
      //       </video>
      //     `;
      //     return;
      //   }

      //   // default: iframe (YouTube/Vimeo/etc.)
      //   videoWrapper.innerHTML = `
      //     <iframe
      //       src="${src}"
      //       title="Video player"
      //       frameborder="0"
      //       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      //       referrerpolicy="strict-origin-when-cross-origin"
      //       allowfullscreen
      //       style="width:100%;height:100%;display:block;border:none;">
      //     </iframe>
      //   `;
      // };

      // const renderVideo = (type, src, eventName) => {
      //   if (!src) {
      //     videoWrapper.innerHTML = '<p style="color:#fff;text-align:center;">No video source</p>';
      //   } else if (type === 'video') {
      //     videoWrapper.innerHTML = `
      //       <video controls autoplay playsinline style="width:100%;height:100%;display:block;object-fit:cover;">
      //         <source src="${src}" type="video/mp4" />
      //         Your browser does not support the video tag.
      //       </video>
      //     `;
      //   } else {
      //     // default: iframe
      //     videoWrapper.innerHTML = `
      //       <iframe
      //         src="${src}"
      //         title="Video player"
      //         frameborder="0"
      //         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      //         referrerpolicy="strict-origin-when-cross-origin"
      //         allowfullscreen
      //         style="width:100%;height:100%;display:block;border:none;">
      //       </iframe>
      //     `;
      //   }

      //   // ✅ Set the event name (caption) below the video
      //   if (videoCaption) {
      //     videoCaption.textContent = eventName || '';
      //   }
      // };

      // const renderVideo = (type, src, eventName) => {
      //   // First, check if there's a valid source
      //   if (!src) {
      //     videoWrapper.innerHTML = '<p style="color:#fff;text-align:center;">No video source</p>';
      //   } else if (type === 'video') {
      //     videoWrapper.innerHTML = `
      //       <video controls autoplay playsinline style="width:100%;height:100%;display:block;object-fit:cover;">
      //         <source src="${src}" type="video/mp4" />
      //         Your browser does not support the video tag.
      //       </video>
      //     `;
      //   } else {
      //     // Default: iframe (for YouTube, Vimeo, etc.)
      //     videoWrapper.innerHTML = `
      //       <iframe
      //         src="${src}"
      //         title="Video player"
      //         frameborder="0"
      //         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      //         referrerpolicy="strict-origin-when-cross-origin"
      //         allowfullscreen
      //         style="width:100%;height:100%;display:block;border:none;">
      //       </iframe>
      //     `;
      //   }

      //   // Dynamically create the <h3> element for event name under the video/iframe
      //   const eventNameElement = document.createElement('h3');
      //   eventNameElement.id = 'video-lightbox-title';
      //   eventNameElement.classList.add('lightbox-event-name');
      //   eventNameElement.textContent = eventName || ''; // Set event name as the text content

      //   // Append the <h3> element to the videoWrapper
      //   videoWrapper.appendChild(eventNameElement);
      // };

      const renderVideo = (type, src, eventName) => {
        // First, clear the videoWrapper to avoid old content persisting
        videoWrapper.innerHTML = '';

        // Render video or iframe based on the type
        if (!src) {
          videoWrapper.innerHTML = '<p style="color:#fff;text-align:center;">No video source</p>';
        } else if (type === 'video') {
          // Render video
          const videoElement = document.createElement('video');
          videoElement.controls = true;
          videoElement.autoplay = true;
          videoElement.playsInline = true;
          videoElement.style.width = '100%';
          videoElement.style.height = '100%';
          videoElement.style.objectFit = 'cover';
          videoElement.style.overflow = 'hidden';
          
          const sourceElement = document.createElement('source');
          sourceElement.src = src;
          sourceElement.type = 'video/mp4';
          
          videoElement.appendChild(sourceElement);
          videoWrapper.appendChild(videoElement);  // Add the video element to the wrapper
        } else {
          // Default: iframe (for YouTube, Vimeo, etc.)
          const iframeElement = document.createElement('iframe');
          iframeElement.src = src;
          iframeElement.title = 'Video player';
          iframeElement.frameBorder = '0';
          iframeElement.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
          iframeElement.referrerPolicy = 'strict-origin-when-cross-origin';
          iframeElement.allowFullscreen = true;
          iframeElement.style.width = '100%';
          iframeElement.style.height = '100%';
          iframeElement.style.display = 'block';
          iframeElement.style.border = 'none';

          videoWrapper.appendChild(iframeElement);  // Add the iframe to the wrapper
        }

        // Create the event name <h3> element dynamically under the video/iframe
        const eventNameElement = document.createElement('h3');
        eventNameElement.id = 'video-lightbox-title';
        eventNameElement.classList.add('lightbox-event-name');
        eventNameElement.textContent = eventName || '';  // Set the event name as the text content

        // Append the event name <h3> under the video or iframe
        videoWrapper.appendChild(eventNameElement);
      };

      // const setActiveByIndex = (i) => {
      //   const el = videoItems[i];
      //   if (!el) return;
      //   activeIndex = i;
      //   renderVideo(el.dataset.type, el.dataset.src);
      // };

      const setActiveByIndex = (i) => {
        const el = videoItems[i];
        if (!el) return;
        activeIndex = i;
        const type = el.dataset.type;
        const src = el.dataset.src;
        const title = el.dataset.eventname || ''; // ✅ get event name
        renderVideo(type, src, title);
      };


      const goPrev = () => {
        if (activeIndex <= 0) return;
        setActiveByIndex(activeIndex - 1);
      };

      const goNext = () => {
        if (activeIndex >= videoItems.length - 1) return;
        setActiveByIndex(activeIndex + 1);
      };

      // ===== ONLY FIRST THUMB VISIBLE PER .gallery-thum-box =====
      document.querySelectorAll('.gallery-thum-box').forEach(box => {
        const thumbs = box.querySelectorAll('.lightbox-enabled-video');
        thumbs.forEach((el, index) => {
          el.style.display = index === 0 ? 'block' : 'none';
        });
      });

      // ===== CLICK HANDLER (SCOPED TO THE SAME <li>/<.gallery-thum-box>) =====
      document.querySelectorAll('.lightbox-enabled-video').forEach(el => {
        el.addEventListener('click', () => {
          // IMPORTANT: limit the group to THIS <li> only
          const container =
            el.closest('.gallery-thum-box') || // preferred
            el.closest('li');                   // fallback

          if (!container) return;

          // get all anchors in this container (even the hidden ones)
          videoItems = Array.from(container.querySelectorAll('.lightbox-enabled-video'));

          // figure out which one we clicked
          const startIndex = Math.max(0, videoItems.indexOf(el));

          openVideoLightbox();
          setActiveByIndex(startIndex);
        });
      });

      // ===== CONTROLS & CLOSE =====
      // click on overlay closes
      videoLightbox.addEventListener('click', closeVideoLightbox);

      // close button
      if (videoBtnClose) {
        videoBtnClose.addEventListener('click', (e) => {
          e.stopPropagation();
          closeVideoLightbox();
        });
      }

      // prevent overlay-close when clicking inside the player
      videoWrapper.addEventListener('click', (e) => e.stopPropagation());

      // nav buttons
      if (videoBtnLeft) {
        videoBtnLeft.addEventListener('click', (e) => {
          e.stopPropagation();
          goPrev();
        });
      }
      if (videoBtnRight) {
        videoBtnRight.addEventListener('click', (e) => {
          e.stopPropagation();
          goNext();
        });
      }

      // keyboard
      document.addEventListener('keydown', (e) => {
        if (!videoLightbox.classList.contains('active')) return;
        if (e.key === 'Escape')      closeVideoLightbox();
        else if (e.key === 'ArrowLeft')  goPrev();
        else if (e.key === 'ArrowRight') goNext();
      });
    })();
  </script>

  <!-- <script>
    document.addEventListener("DOMContentLoaded", () => {
      let activeContainer = null; // currently open video container

      document.querySelectorAll(".lightbox-enabled-video").forEach((el) => {
        el.addEventListener("click", () => {
          const type = el.dataset.type;
          const src  = el.dataset.src;

          // Remove any existing open embed
          if (activeContainer) {
            activeContainer.remove();
            activeContainer = null;
          }

          // Create a wrapper below the clicked item
          const container = document.createElement("div");
          container.className = "inline-video-container";
          container.style.marginTop = "10px";
          container.style.width = "100%";
          container.style.height = "259px";

          // Add iframe or video
          if (type === "iframe") {
            container.innerHTML = `
              <iframe src="${src}"
                width="100%" height="259"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
                style="display:block;border:none;">
              </iframe>
            `;
          } else if (type === "video") {
            container.innerHTML = `
              <video controls autoplay playsinline
                style="width:100%;height:259px;display:block;object-fit:cover;">
                <source src="${src}" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            `;
          }

          // Insert below the clicked element
          el.insertAdjacentElement("afterend", container);
          activeContainer = container;
        });
      });

      // Keep your rule: show only first thumb per gallery-thum-box
      document.querySelectorAll(".gallery-thum-box").forEach((box) => {
        const thumbs = box.querySelectorAll(".lightbox-enabled-video");
        thumbs.forEach((el, index) => {
          el.style.display = index === 0 ? "block" : "none";
        });
      });
    });
  </script> -->

@endpush

@push('styles')
  <style>
    /* Center the video lightbox in the middle of the page */
    #video-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      z-index: 9999;
      justify-content: center;   /* horizontal center */
      align-items: center;       /* vertical center */
    }

    /* make sure it's flex when active */
    #video-lightbox.active {
      display: flex;
    }

    /* wrapper area for iframe or video */
    #video-lightbox-wrapper {
      display: flex;
      flex-direction: column;
      max-width: 75vw;
      width: 75%;
      max-height: 90vh;
      height: 90%;
      background: #fff;
      border-radius: 8px;
      padding: 8px;
      box-shadow: 0 0 25px rgba(0,0,0,0.5);
    }

    /* iframe & video dimensions */
    #video-lightbox-wrapper iframe,
    #video-lightbox-wrapper video {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      object-fit: cover;
    }
    /* ----31/10/2025----- */

        /* .lightbox-container {
        width: 100svw;
        height: 100svh;
        position: fixed;
        top: 0;
        left: 0;
        display: flex
    ;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .8);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
    } */
    span#video-close{position: fixed;top: 10px;right: 10px;}
    
    .gallery-thum li .gallery-thum-box video,
    .galler-view-page a.lightbox-enabled-video{transition: 0.4s;}
    .galler-view-page a.lightbox-enabled-video:hover{transform: scale(1.1);}

    .lightbox-container-video {
      display: none;
      flex-direction: column;           /* stack player + caption vertically */
      align-items: center;
    }

    .gallery-empty-state {
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px 16px;
    }

    .gallery-empty-state p {
      margin: 0;
      font-size: 18px;
      line-height: 1.6;
      /* color: #002b10; */
      font-weight: 500;
    }

    #video-lightbox-wrapper { width: 100%; }
    #video-lightbox-title {
      margin-top: 10px;
      color: #002B10;
      text-align: center;
      font-size: 16px;
      display: none;
    }

  </style>
@endpush