@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-2">
      <img
        src="{{asset($newsItem->image)}}" 
        alt="Golf Image"
        class=" object-contain h-[400px] w-[280px] "
      />
      
      <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 sm:text-xl font-bold">{{ \Carbon\Carbon::parse($newsItem->date)->format('d') }}</p>
            <p class="text-xs sm:text-sm uppercase">{{ \Carbon\Carbon::parse($newsItem->date)->format('M') }}</p>
          </div>
          <h1 class="text-2xl font-bold text-gray-800">{{$newsItem->title}}</h1>
        </div>

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

      </div>
    </div>

    {{-- search bar --}}
    <div class="bg-white p-6 rounded-lg shadow-md h-fit ">
      <!-- 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">Other News</h2>
          @foreach ($news->sortByDesc('created_at')->take(3) as $new)
           <div class=" pb-2">
              <a href="{{route('newsItem', $new->id)}}" class=" h-fit">
                <div class="flex"> 
                  <div class="size-14">
                    <img src="{{asset($new->image)}}" alt="" class="rounded-md w-full h-full object-cover">
                  </div>
                  <div class="flex jsutify-center items-center pl-2">
                    <h3 class="text-black text-md md:text-md font-medium eas">{{$new->title}}</h3>
                  </div>
                </div>
              </a>
            </div>
            
          @endforeach
        </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>
  </div>
</div>
        </section>



        
      
          
     


      

    </div>
{{-- 
    <script>
      const scrollContainer = document.getElementById("scroll-container");
    
      let scrollingInterval;
  
      // // Function to start auto-scrolling
      // const startAutoScroll = () => {
      //   scrollingInterval = setInterval(() => {
      //     scrollContainer.scrollBy(0, 1); // Scroll down 1px every 10ms
      //   }, 3);
      // };
    
      // Function to stop auto-scrolling
      // const stopAutoScroll = () => {
      //   clearInterval(scrollingInterval);
      // };
      // // Start scrolling when the page loads
      // startAutoScroll();
    
      // // Add event listeners to stop and resume scrolling
      scrollContainer.addEventListener("mouseenter", stopAutoScroll); // Stop scrolling on hover
      scrollContainer.addEventListener("mouseleave", startAutoScroll); // Resume scrolling when hover ends
    </script> --}}


@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) {
        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 => 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}`;
                const formattedDate = new Date(news.created_at).toLocaleDateString();
                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">${formattedDate}</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>