@extends('layouts.main-app')

@section('title', 'Consulting')

@section('content')

<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
    <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%;
        }
</style>

    <div class="">

       
      
        @include('layouts.header')
        {{-- blog article--}}

<section>
          
<div class="max-w-screen-lg mx-auto p-4 py-20">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 ">
    <div class="sm:col-span-3">
     <div class=" w-full object-contain flex justify-center items-center ">
        <img
        id="mainImage"
        src="{{asset(json_decode($eventsDetails->image)[0])}}" 
        alt="Golf Image"
        class=" rounded-lg shadow-md"
      />
      </div>

       <div class="grid grid-cols-3 md:grid-cols-10 mt-4 gap-2">
        @foreach(json_decode($eventsDetails->image) as $image)
          <img
            src="{{asset($image)}}" 
            alt="Event Image"
            class="object-cover rounded-lg shadow-md  size-20 cursor-pointer hover:opacity-75 transition-opacity"
            onclick="updateMainImage('{{asset($image)}}')"
          />
        @endforeach
      </div>


      <script>
        function getEvents() {
          
        }
      </script>
      
      <div class="bg-white p-6 mt-6 rounded-lg shadow-lg ">
        <div class="flex items-center space-x-4">
          <div class="bg-blue-600 text-white px-4 py-2 rounded-lg text-center">
            <p class="text-lg font-bold">{{date('d', strtotime($eventsDetails->date))}}</p>
            <p class="text-sm">{{date('M', strtotime($eventsDetails->date))}}</p>
          </div>
            <h1 class="text-2xl font-bold text-gray-800">{{$eventsDetails->title}}</h1>
        </div>

        <p class="mt-4 text-gray-600">
         {!! $eventsDetails->description !!}
        </p>

      </div>
    </div>

    {{-- search bar --}}
    {{-- <div class="bg-white p-6 rounded-lg shadow-md ">
      <!-- Search Box -->
      <div class="mb-6">
        <label for="search" class="block text-gray-700 font-semibold w-full">Enter Keyword</label>
        <div class="">
          <div class="flex items-center mt-2">
            <input
              id="search"
              type="text"
              name="search"
              placeholder="Search..."
              class="flex-1 p-2 border border-gray-300 rounded-l-lg"
              onkeyup="searchNews(this.value)"
            />
            <button type="button" class="bg-blue-600/80 hover:bg-blue-600 transition-all duration-300 text-white px-4 py-2 rounded-r-lg">
              Search
            </button>
          </div>
        </div>
      </div>
{{-- 
      <!-- Search Results Card - Hidden by default -->
      <div id="searchResultsCard" class="mb-6 hidden">
        <h2 class="text-gray-800 font-bold mb-2">Search Results</h2>
        <div id="searchResults" class="space-y-2">
          <!-- Search results will be populated here -->
        </div>
      </div> --}}

      {{-- <!-- Recent Posts -->
      <div class="mb-6" id="recentPosts">
        <h2 class="text-gray-800 font-bold mb-2">Recent Posts</h2>
        <ul id="searchResults" class="list-disc pl-4 text-gray-600">
          @foreach ($eventsDetails as $event)
            <li class="news-item">
              <a href="{{route('eventsItem', $event->id)}}">
                <div class="flex flex-col py-1 w-full my-2"> 
                  <div class="">
                    <img src="{{asset($event->image)}}" alt="" class="rounded-md w-full h-full object-cover">
                  </div>
                  <div class="p-1">
                    <h3 class="text-black text-md md:text-md font-medium">{{$event->title}}</h3>
                  </div>
                </div>
              </a>
            </li>
          @endforeach
        </ul>
      </div> --}}


      <!-- Contact Section -->
      {{-- <div class="mt-6">
        <h2 class="text-gray-800 font-bold mb-2">Contact Us</h2>
        <p class="text-gray-600">
          Reach out to us and let us know how we can assist you. Contact us now!
        </p>
      </div>
    </div> --}}


    {{-- <a href="{{ route('event-registration.show', $eventsDetails->id) }}">
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-center">
        Register Now
      </button>
    </a> --}}
  </div>
</div>
        </section>



        
      
          
     


      

     
        @include('layouts.footer')
    </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 >= 1200 && 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 searchNews(query) {
    console.log('Searching for:', query);
    const searchResultsCard = document.getElementById('searchResultsCard');
    const recentPosts = document.getElementById('recentPosts');
    const searchResults = document.getElementById('searchResults');
    
    if (query.length > 2) {
        // Show search results, hide recent posts
        searchResultsCard.classList.remove('hidden');
        recentPosts.classList.add('hidden');
        
        fetch(`/news/search`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ search: query })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data);
            searchResults.innerHTML = ''; // Clear current results
            
            if (data.length === 0) {
                searchResults.innerHTML = '<p class="text-gray-500">No results found</p>';
                return;
            }
            
            data.forEach(news => {
                const imageUrl = news.image.startsWith('/') ? news.image : `/${news.image}`;
                searchResults.innerHTML += `
                    <div class="border-b border-gray-200 pb-2">
                        <a href="/news/${news.id}" class="hover:bg-gray-50 block transition-colors duration-200">
                            <div class="flex items-start space-x-3"> 
                                <div class="w-20 h-20 flex-shrink-0">
                                    <img src="${imageUrl}" alt="${news.title}" class="rounded-md w-full h-full object-cover">
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-black text-md font-medium">${news.title}</h3>
                                    <p class="text-gray-500 text-sm mt-1">${news.created_at}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                `;
            });
        })
        .catch(error => {
            console.error('Error:', error);
            searchResults.innerHTML = '<p class="text-red-500">An error occurred while searching</p>';
        });
    } else {
        // Hide search results, show recent posts
        searchResultsCard.classList.add('hidden');
        recentPosts.classList.remove('hidden');
    }
}
</script>

<script>
function updateMainImage(imageSrc) {
    document.getElementById('mainImage').src = imageSrc;
}
</script>