@extends('user.layouts.app')


@section('body_class', 'biodiversity')
@push('styles')
<style type="text/css">

</style>
@endpush
@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>Biodiversity</li>
        </ul>
      </div>
    </div>

      <section class="galler-view-page">
        <div class="container">
          <div class="page-title">
            <h4 data-aos="fade-up" class="aos-init">Biodiversity</h4>
          </div>
          <div class="tab-content" id="galleryTabContent">
            <div class="tab-pane fade show active" id="image" role="tabpanel">
              <ul class="gallery-thum images-view">
                @if(!empty($biodiversity))
                  @foreach($biodiversity as $bio)
                <li>
                  <div class="gallery-thum-inner">
                    <div class="gallery-thum-box">
                      <a href="javascript:void(0)">
                        <img class="lightbox-enabled" src="{{ asset('storage/distribution/images/biodiversity_image/'.$bio->bio_image) }}" data-imgsrc="{{ asset('storage/distribution/images/biodiversity_image/'.$bio->bio_image) }}" alt="" />
                      </a>
                    <!-- <div class="gallery-thum-name">{{ $bio->title }}</div> -->
                    </div>
                  </div>
                </li>
                @endforeach
          @endif
              
              </ul>
            </div>
            
          </div>
        </div>
      </section>
<section class="lightbox-container bio">
  <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 bio">
    <!-- <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>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>


<!-- FullCalendar CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>


<script>

    document.addEventListener('DOMContentLoaded', function () {
        let calendarEl = document.getElementById('calendar');

        let calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            themeSystem: 'bootstrap5',
            timeZone: 'Asia/Kolkata',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            events: "{{ route('user.events.json') }}",
            eventClick: function(info) {
                let eventId = info.event.id;   
                fetch(`/events/${eventId}`)
                    .then(res => res.json())
                    .then(data => {   
                        document.getElementById('modalTitle').textContent   = data.title;

                        // Show single date or date range in main Date field
                        if (data.start_date && data.end_date && data.start_date !== data.end_date) {
                            document.getElementById('modalDate').textContent = `${data.start_date} - ${data.end_date}`;
                        } else {
                            document.getElementById('modalDate').textContent = data.start_date ?? '';
                        }

                        // Start time + (start date if multi-day event)
                        if (data.start_time) {
                            if (data.start_date && data.end_date && data.start_date !== data.end_date) {
                                document.getElementById('modalStart').textContent = `${data.start_time} (${data.start_date})`;
                            } else {
                                document.getElementById('modalStart').textContent = data.start_time;
                            }
                        } else {
                            document.getElementById('modalStart').textContent = '';
                        }

                        // End time + (end date if multi-day event)
                        if (data.end_time) {
                            if (data.start_date && data.end_date && data.start_date !== data.end_date) {
                                document.getElementById('modalEnd').textContent = `${data.end_time} (${data.end_date})`;
                            } else {
                                document.getElementById('modalEnd').textContent = data.end_time;
                            }
                        } else {
                            document.getElementById('modalEnd').textContent = '';
                        }

                        document.getElementById('modalAddress').textContent = data.address ?? '';
                        document.getElementById('modalCreated').textContent = data.created_at ?? '';

                        let modal = new bootstrap.Modal(document.getElementById('eventModal'));
                        modal.show();
                    });
            }
        });

        calendar.render();
    });

</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightboxContainer = document.querySelector('.lightbox-container.bio');
  if (!lightboxContainer) return;

  const lightboxImageWrapper = document.querySelector('.lightbox-image-wrapper.bio .image-wrapper img');
  const lightboxEventName = document.getElementById('lightbox-event-name');
  const lightboxBtnRight = document.getElementById('right');
  const lightboxBtnLeft = document.getElementById('left');
  const closeBtn = document.getElementById('close');

  let activeIndex = 0;
  let lightboxArray = [];

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

  const renderLightboxContent = (index) => {
    const media = lightboxArray[index];
    const src = media.dataset.imgsrc || media.getAttribute('src');
    const eventName = media.dataset.eventname || media.alt ;
    lightboxImageWrapper.src = src;
    lightboxEventName.textContent = eventName;
  };

  // Slide LEFT (previous) — stop completely at first index
  const transitionSlidesLeft = () => {
    if (activeIndex <= 0) return; // don't animate or change
    lightboxImageWrapper.classList.add('slideright');
    setTimeout(() => {
      activeIndex--;
      renderLightboxContent(activeIndex);
    }, 200);
    setTimeout(() => lightboxImageWrapper.classList.remove('slideright'), 500);
  };

  // Slide RIGHT (next) — stop completely at last index
  const transitionSlidesRight = () => {
    if (activeIndex >= lightboxArray.length - 1) return; // don't animate or change
    lightboxImageWrapper.classList.add('slideleft');
    setTimeout(() => {
      activeIndex++;
      renderLightboxContent(activeIndex);
    }, 200);
    setTimeout(() => lightboxImageWrapper.classList.remove('slideleft'), 500);
  };

  // Thumbnails click handler
  document.querySelectorAll('.lightbox-enabled').forEach((thumb, index) => {
    thumb.addEventListener('click', () => {
      lightboxArray = Array.from(document.querySelectorAll('.lightbox-enabled'));
      activeIndex = index;
      renderLightboxContent(activeIndex);
      showLightBox();
    });
  });

  // Close and event prevention
  closeBtn.addEventListener('click', hideLightBox);
  lightboxContainer.addEventListener('click', hideLightBox);
  document.querySelector('.lightbox-image-wrapper.bio').addEventListener('click', (e) => e.stopPropagation());

  // Button clicks
  lightboxBtnLeft.addEventListener('click', (e) => {
    e.stopPropagation();
    transitionSlidesLeft();
  });
  lightboxBtnRight.addEventListener('click', (e) => {
    e.stopPropagation();
    transitionSlidesRight();
  });

  // Optional keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (!lightboxContainer.classList.contains('active')) return;
    if (e.key === 'ArrowLeft') transitionSlidesLeft();
    if (e.key === 'ArrowRight') transitionSlidesRight();
    if (e.key === 'Escape') hideLightBox();
  });
});
</script>



@endpush