@extends('layouts.main-app')

@section('title', 'SMN Events')

@section('content')
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>

<style>
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

        .ubuntu-font {
            font-family: 'Ubuntu';
        }
            /* ########################################### *
        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        /* Shrunk Navbar Style */
        #navbar.unshrink {
            margin: 0 auto;
            width: 100%;
        }

        @media (max-width: 600px) {
    #eventContainer .flex {
      flex-direction: column; /* Stack image and content on smaller screens */
    }

    #eventContainer img {
      width: 100%; /* Full width on mobile */
    }

    #eventContainer .p-4 {
      margin-left: 0; /* Remove left margin for smaller screens */
    }
  }

</style>





<div class="">
         @include('layouts.header')
        {{-- news article--}}

    <section class="container mx-auto max-w-screen-lg py-10 mb-28 h-auto w-auto">

      <div class="container mx-auto p-6">
        <!-- Carousel Section -->
        <div class="relative">
          <div class="rounded-lg h-2/6 sm:h-3/5 w-auto relative">
            {{--  --}}
            <img
              id="carouselImage"
              src="{{ asset(isset($eventsDetails) ? json_decode($eventsDetails->image)[0] : 'assets/smn/event1.webp') }}"
              alt="{{ isset($eventsDetails) ? $eventsDetails->title : 'Featured Event' }}"
              class="w-full h-full object-fill rounded-lg"
            />
            
            <!-- Add thumbnail container below main image -->
            <div class="flex gap-2 mt-4 overflow-x-auto">
              @if(isset($eventsDetails) && $eventsDetails->image)
                  @foreach(json_decode($eventsDetails->image) as $index => $image)
                  <img
                    src="{{ asset($image) }}"
                    alt="Thumbnail {{ $index + 1 }}"
                    class="w-20 h-20 object-cover rounded cursor-pointer hover:opacity-75 transition-opacity"
                    onclick="changeMainImage('{{ asset($image) }}')"
                  />
                @endforeach
              @endif
            </div>
          </div>
          <!-- Carousel Controls -->
          <div
            class="w-auto flex justify-between border-[1.2px] rounded-xl shadow-md cursor-pointer absolute left-1/2 -bottom-2 md:bottom-4 lg:bottom-4 py-1 px-4 bg-white -translate-x-1/2 z-30 scale-75  z-sm:scale-100">
            <div class="text-3xl px-4" onclick="prevImage()">
              <span>&lt;</span>
            </div>
            <div class="text-3xl px-4" onclick="nextImage()">
              <span>&gt;</span>
            </div>
          </div>
          <!-- Hover Overlay -->
          <div
            id="carouselOverlay"
            class="overflow-clip absolute h-auto w-full top-0 left-0 right-0 bottom-0 bg-gradient-to-t from-[#000000d0] to-transparent opacity-0 hover:opacity-100 transition-all duration-300 flex flex-col justify-between p-10 items-start rounded-lg">
            {{-- description --}}
            <div class="text-right w-full flex justify-end items-end">
              <p id="carouselDescription" class="w-auto text-end  text-sm text-black bg-white/50 rounded-lg p-1 backdrop-blur-sm">
                {!! isset($eventsDetails) && $eventsDetails->description ? $eventsDetails->description : 'No description available' !!}
              </p>
            </div>
            <div
              class="space-y-4 text-white flex-1 flex flex-col h-full w-full justify-end items-start">
              {{-- date --}}
              <div
                id="carouselDate"
                class="text-sm text-white border border-white/50 px-8 rounded-full py-2 flex items-center backdrop-blur-sm bg-black/30">
                <span>📅 {{ isset($eventsDetails) && $eventsDetails->event_date ? $eventsDetails->event_date->format('d M Y') : 'Date TBA' }}</span>
              </div>
              {{-- title --}}
              <h3 id="carouselTitle" class="text-3xl roboto-font font-bold">
                  {{ isset($eventsDetails) ? $eventsDetails->title : 'No Event Title' }}
              </h3>
            {{-- location --}}
              <div class="flex items-center roboto-font bg-black/30 px-4 py-2 rounded-lg backdrop-blur-sm">
                <span id="carouselLocation">📍 {{ isset($eventsDetails) ? $eventsDetails->location : 'No Event Location' }}</span>
              </div>
            </div>
          </div>
        </div>
        
                <!-- Tab Navigation -->
                <div class="flex justify-start items-center my-4 space-x-4 border-[1.6px] border-gray-300 p-2 px-4 ">
                  @foreach($eventCategories as $category)
                    <button
                      class="px-4 py-2 text-gray-500 text-xs focus:outline-none"
                      onclick="changeTab('{{ $category->name }}')"
                    >
                      {{ $category->name }}
                    </button>
                  @endforeach
                </div>
              


              <!-- Event Cards -->
    <div id="eventContainer" class="grid gap-6 px-4">
      <!-- Single Event Card -->
      @foreach($events as $event)
      <div class="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden" data-category="{{ $event->category->name }}">
            <!-- Event Image -->
            <img
            {{-- dispaly here the first image --}}
              src="{{ asset(json_decode($event->image)[0]) }}"
              alt="{{ $event->title }}"
              class="w-full md:w-1/4 h-auto object-cover"
            />
            <!-- Event Details -->
            <div class="flex flex-col justify-between p-4 md:ml-4 w-full">
              <!-- Date and Time -->
              <div class="flex flex-wrap items-center text-sm text-gray-600 border-[1.6px] border-gray-500 rounded-lg p-3 space-x-4 mb-4">
                <span>📅 {{ $event->event_date->format('d M Y') }}</span> <!-- Display event date -->
                <span>⏰ {{ $event->event_time }}</span> <!-- Assuming event_time is available -->
              </div>
              <!-- Event Title -->
              <h3 class="text-xl md:text-2xl font-bold roboto-font mb-4">
                {{ $event->title }} <!-- Display event title -->
              </h3>
              {{-- <h4 class="text-sm text-gray-600 roboto-font">{{ $event->category->name }}</h4>
              <h4 class="text-sm text-gray-600 roboto-font">{{ $event->description }}</h4> --}}
              <!-- Location and Button -->
              <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
                <span class="text-gray-600">📍 {{ $event->location }}</span> <!-- Display event location -->
                <button 
                  class="px-4 py-2 bg-blue-500 text-white rounded-lg roboto-font hover:bg-blue-600"
                  onclick='showEventImages({!! json_encode(json_decode($event->image)) !!}, {
                    title: @json($event->title),
                    description: @json($event->description),
                    category: @json($event->category->name),
                    event_date: @json($event->event_date->format('d M Y')),
                    location: @json($event->location)
                  })'
                >
                  View Event
                </button>
              </div>
            </div>
      </div>
      @endforeach
    </div>


    <!-- Custom Pagination -->
    <div class="flex justify-center mt-6 space-x-4">
      @if ($events->onFirstPage())
        <span class="disabled px-4 py-2 bg-gray-300 text-gray-500 rounded-full font-extrabold  text-2xl">
          <i class='bx bxs-chevron-left'></i>
        </span>
      @else
        <a href="{{ $events->previousPageUrl() }}" class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600"><i class='bx bxs-chevron-left' ></i></a>
      @endif

      @for ($i = 1; $i <= $events->lastPage(); $i++)
        @if ($i == $events->currentPage())
          <span class="px-4 py-2 bg-blue-500 text-white rounded-full">{{ $i }}</span>
        @else
          <a href="{{ $events->url($i) }}" class="px-4 py-2 bg-white text-blue-500 rounded-full hover:bg-gray-200">{{ $i }}</a>
        @endif
      @endfor

      @if ($events->hasMorePages())
        <a href="{{ $events->nextPageUrl() }}" class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600">
          <i class='bx bxs-chevron-right text-2xl' ></i>
        </a>
      @else
        <span class="disabled px-4 py-2 bg-gray-300 text-gray-500 rounded-full  text-2xl"><i class='bx bxs-chevron-right' ></i></span>
      @endif
    </div>

  </section>


  {{-- <!-- Dummy Data Script -->
  <script>
    // Dummy data for carousel
    const carouselData = [
      {
        image: "{{ asset('assets/smn/event1.webp') }}",
        title: "Singapore Maritime Golf Dinner Event 2023",
        description:
          "An exciting evening of golf, networking, and camaraderie for professionals in the maritime industry.",
        date: "📅 08 Mar 2023",
        location: "📍 Singapore",
      },
      {
        image: "{{ asset('assets/smn/event0.webp') }}",
        title: "Corporate Networking Gala 2024",
        description:
          "A formal event to connect industry leaders, share insights, and celebrate achievements.",
        date: "📅 15 Apr 2024",
        location: "📍 Marina Bay Sands, Singapore",
      },
      {
        image: "{{ asset('assets/smn/event1.webp') }}",
        title: "Annual Gala Dinner",
        description:
          "Celebrate another successful year with an evening of fine dining and live entertainment.",
        date: "📅 10 Dec 2024",
        location: "📍 Ritz Carlton, Singapore",
      },
    ];
    // Carousel logic
    let currentImageIndex = 0;

    function updateCarousel() {
      const carouselImage = document.getElementById("carouselImage");
      const carouselTitle = document.getElementById("carouselTitle");
      const carouselDescription = document.getElementById("carouselDescription");
      const carouselDate = document.getElementById("carouselDate");
      const carouselLocation = document.getElementById("carouselLocation");

      const currentData = carouselData[currentImageIndex];

      carouselImage.src = currentData.image;
      carouselTitle.textContent = currentData.title;
      carouselDescription.textContent = currentData.description;
      carouselDate.textContent = currentData.date;
      carouselLocation.textContent = currentData.location;
    }

    function prevImage() {
      currentImageIndex =
        (currentImageIndex - 1 + carouselData.length) % carouselData.length;
      updateCarousel();
    }

    function nextImage() {
      currentImageIndex = (currentImageIndex + 1) % carouselData.length;
      updateCarousel();
    }

    // Initialize carousel
    window.onload = updateCarousel;
  </script>
       --}}


    </div>

@endsection


<!-- Add this script to handle the shrinking navbar event -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navbar = document.getElementById('navbar');
            window.addEventListener('scroll', function() {
                if (window.innerWidth >= 900 && window.scrollY > 100) { // Check for mobile screen
                    navbar.classList.add('shrink');
                    navbar.classList.remove('unshrink');
                } else {
                    navbar.classList.remove('shrink');
                    navbar.classList.add('unshrink');
                }
            });
        });
    </script>

<script>
  function changeMainImage(src) {
    document.getElementById('carouselImage').src = src;
  }
</script>

<script>
function showEventImages(images, event) {
  // Update carousel image
  const carouselImage = document.getElementById('carouselImage');
  carouselImage.src = "{{ asset('') }}" + images[0];
  
  // Update overlay content
  document.getElementById('carouselTitle').innerHTML = event.title;
  document.getElementById('carouselDescription').innerHTML = event.description;
  document.getElementById('carouselDate').innerHTML = `📅 ${event.event_date}`;
  document.getElementById('carouselLocation').innerHTML = `📍 ${event.location}`;
  document.getElementById('carouselCategory').innerHTML = event.category ? event.category.name : 'No Category';

  // Hide thumbnails
  const thumbnailContainer = document.querySelector('.flex.gap-2.mt-4');
  if (thumbnailContainer) {
    thumbnailContainer.style.display = 'none';
  }

  // Set up carousel data
  window.eventImages = images;
  window.currentImageIndex = 0;
}

function prevImage() {
  if (!window.eventImages) return;
  window.currentImageIndex = (window.currentImageIndex - 1 + window.eventImages.length) % window.eventImages.length;
  document.getElementById('carouselImage').src = "{{ asset('') }}" + window.eventImages[window.currentImageIndex];
}

function nextImage() {
  if (!window.eventImages) return;
  window.currentImageIndex = (window.currentImageIndex + 1) % window.eventImages.length;
  document.getElementById('carouselImage').src = "{{ asset('') }}" + window.eventImages[window.currentImageIndex];
}

</script>

<script>
  function changeTab(categoryName) {
    const eventCards = document.querySelectorAll('#eventContainer > div');
    eventCards.forEach(card => {
      if (card.getAttribute('data-category') === categoryName) {
        card.style.display = 'flex'; // Show matching category
      } else {
        card.style.display = 'none'; // Hide non-matching category
      }
    });
  }
</script>