@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>Notice & Circulars</li>
        </ul>
      </div>
    </div>

      <section class="galler-view-page">
        <div class="container">
          <div class="page-title">
            <h4 data-aos="fade-up" class="aos-init">Notice & Circulars</h4>
          </div>
          @if(!empty($notices) && $notices->isNotEmpty())
            @php
              $today = \Carbon\Carbon::today();
              $yesterday = \Carbon\Carbon::yesterday();
              $grouped = $notices->groupBy(function ($notice) use ($today, $yesterday) {
                  $d = $notice->start_date_time ?? $notice->created_at;
                  $d = $d instanceof \Carbon\Carbon ? $d : \Carbon\Carbon::parse($d);

                  if ($d->isSameDay($today)) return 'Today';
                  if ($d->isSameDay($yesterday)) return 'Yesterday';
                  // <!-- return $d->format('l, jS M Y'); -->
                  return $d->format('d-m-Y');
              });
            @endphp

            @foreach($grouped as $dateLabel => $items)
              <h5>{{ $dateLabel }}</h5>
              <div class="tab-content" id="galleryTabContent">
                <div class="tab-pane fade show active" id="image" role="tabpanel">
                  <ul class="gallery-thum images-view">
                    @foreach($items as $notice)
                      <li>
                        <div class="gallery-thum-inner">
                          <div class="gallery-thum-box">
                            <a href="javascript:void(0)">
                              <img class="lightbox-enabled"
                                  src="{{ !empty($notice->file_path) ? asset('storage/distribution/images/notice_image/'.$notice->file_path) : asset('images/avatars.svg') }}"
                                  data-imgsrc="{{ !empty($notice->file_path) ? asset('storage/distribution/images/notice_image/'.$notice->file_path) : asset('images/avatars.svg') }}"
                                  data-eventname="{{ $notice->title }}"
                                  alt="{{ $notice->title }}" />
                            </a>
                            <div class="gallery-thum-name">{{ $notice->title }}</div>
                            <div class="gallery-thum-box-bottom">
                              <div class="d-flex align-items-center gap-2">
                                <a href="javascript:void()">
                                  <img style="width:24px;height:24px;" src="{{ asset('images/logos_whatsapp-icon.svg') }}" alt="">
                                </a>
                                <a href="javascript:void(0)" class="copy-image-link"
                                   data-image-url="{{ !empty($notice->file_path) ? asset('storage/distribution/images/notice_image/'.$notice->file_path) : asset('images/avatars.svg') }}">
                                  <small class="green">Share ➤</small>
                                </a>
                              </div>
                              <small class="green">
                                {{ ($notice->created_at instanceof \Carbon\Carbon ? $notice->created_at : \Carbon\Carbon::parse($notice->created_at))->format('g:i A') }}
                              </small>
                            </div>
                          </div>
                        </div>
                      </li>
                    @endforeach
                  </ul>
                </div>
              </div>
            @endforeach
          @else
            <div class="gallery-empty-state">
              <p>No data found.</p>
            </div>
          @endif
        </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 updateArrowState = () => {
    const isFirst = activeIndex <= 0;
    const isLast = activeIndex >= lightboxArray.length - 1;

    lightboxBtnLeft.style.opacity = isFirst ? '0.35' : '1';
    lightboxBtnLeft.style.pointerEvents = isFirst ? 'none' : 'auto';

    lightboxBtnRight.style.opacity = isLast ? '0.35' : '1';
    lightboxBtnRight.style.pointerEvents = isLast ? 'none' : 'auto';
  };

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

  // 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();
  });

  const copyToClipboard = async (text) => {
    if (!text) return false;
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
        return true;
      }
    } catch (e) {}

    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.left = '-9999px';
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    const ok = document.execCommand('copy');
    document.body.removeChild(textarea);
    return ok;
  };

  document.querySelectorAll('.copy-image-link').forEach((btn) => {
    btn.addEventListener('click', async (e) => {
      e.preventDefault();
      const imageUrl = btn.dataset.imageUrl || '';
      const copied = await copyToClipboard(imageUrl);
      if (copied) {
        Swal.fire({
          icon: 'success',
          title: 'Link Copied',
          text: 'Image link copied to clipboard.',
          timer: 1500,
          showConfirmButton: false
        });
      } else {
        Swal.fire({
          icon: 'error',
          title: 'Copy failed',
          text: 'Could not copy image link.'
        });
      }
    });
  });
});
</script>



@endpush