@extends('user.layouts.app')

@section('body_class', 'club_tour')

@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>Club Tour</li>
        </ul>
    </div>
</div>
<section class="galler-view-page">
    <div class="container">
        <div class="tab-content mt-3 mt-md-4 mt-lg-5" id="galleryTabContent">
            <div class="tab-pane show active" id="image">
                <ul class="gallery-thum images-view">
                    @foreach($clubTours as $tour)
                    @php
                    $imagesArray = explode(',', $tour->image); // all images for this tour
                    @endphp
                    <li>
                        <div class="gallery-thum-inner">
                            <div class="gallery-thum-box">
                                @foreach($imagesArray as $img)
                                <a href="javascript:void(0)">
                                    <img class="lightbox-enabled tour-{{ $tour->id }}"
                                        src="{{ asset('storage/distribution/images/club_tour/' . $img) }}" alt="Image"
                                        data-imgsrc="{{ asset('storage/distribution/images/club_tour/' . $img) }}" data-eventname="{{ $tour->page_title }}"/>
                                </a>
                                @endforeach
                            </div>
                            <div class="gallery-thum-name">{{ $tour->page_title }}</div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>



<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>
@endsection

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

@push('scripts')
<!-- <script>

  document.addEventListener('DOMContentLoaded', function () {
      // Lightbox modal
      const lightboxContainer = document.querySelector('.lightbox-container');
      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 lightboxArray = [];
      let activeItem = 0;

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

      const setActiveMedia = (media) => {
          const images = media.dataset.images.split(',');
          lightboxArray = images;
          const primaryImage = media.dataset.primary;

          // Use proper asset path for the images
          const imagePath = media.dataset.imagePath;  // Image path from the data attribute
          lightboxImageWrapper.innerHTML = `<img src="${imagePath}/${primaryImage}" alt="lightbox image" />`;
          activeItem = lightboxArray.indexOf(primaryImage);
      };

      const transitionSlidesLeft = () => {
          lightboxImageWrapper.classList.add('slideright');
          setTimeout(() => {
              activeItem === 0 ? setActiveMedia(lightboxArray[lightboxArray.length - 1]) : setActiveMedia(lightboxArray[activeItem - 1]);
          }, 250);
          setTimeout(() => {
              lightboxImageWrapper.classList.remove('slideright');
          }, 500);
      };

      const transitionSlidesRight = () => {
          lightboxImageWrapper.classList.add('slideleft');
          setTimeout(() => {
              activeItem === lightboxArray.length - 1 ? setActiveMedia(lightboxArray[0]) : setActiveMedia(lightboxArray[activeItem + 1]);
          }, 250);
          setTimeout(() => {
              lightboxImageWrapper.classList.remove('slideleft');
          }, 500);
      };

      // Add event listeners to each gallery row (lightbox container)
      const lightboxContainers = document.querySelectorAll('[class^="lightbox-container-"]');
      lightboxContainers.forEach(container => {
          container.addEventListener('click', () => {
              showLightBox();
              setActiveMedia(container);
          });
      });

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

      // Lightbox navigation buttons
      lightboxBtns.forEach(btn => {
          btn.addEventListener('click', (e) => {
              e.stopPropagation();
              if (e.currentTarget.id === 'left') {
                  transitionSlidesLeft();
              } else {
                  transitionSlidesRight();
              }
          });
      });

      // Prevent lightbox from closing when clicking on the image wrapper
      lightboxImageWrapper.addEventListener('click', (e) => {
          e.stopPropagation();
      });
  });

</script> -->
@endpush