@extends('layouts.main-app')

@section('title')

@section('content')

    <style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
        .swiper-slide img {
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .swiper-slide img:hover {
            transform: scale(1.05);
        }

        /* Container styles */
        .number-container {
            position: relative;
            text-align: center;
        }

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

        .swiper {
            width: 100%;
            height: 100%;
        }
       /* ########################################### */

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        /* Shrunk Navbar Style */
        #navbar.unshrink {
            margin: 0 auto;
            width: 100%;
        }

        .swiper-slide img {
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .swiper-slide img:hover {
            transform: scale(1.05);
        }

    </style>


    {{-- hero section --}}


    <div class="bg-gray-100">

        <!-- Hero Section -->
        <section class="relative  md:mt-0 flex justify-center items-center object-contain 
        h-[70%] sm:h-[80%] md:h-3/4  lg:3/4 xl:h-auto">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/hero-bg.webp') }}" alt="Background Image"
                    class="object-cover  xl:object-contain w-full h-full">
                <!-- Hero Content -->
                <div
                    class="absolute z-10 w-full h-full  flex flex-col justify-center items-center md:object-cover object-contain ">
                    <h1
                        class=" leading-none hero-heading w-full flex justify-center items-center text-white  roboto-font text-4xl sm:text-4xl md:text-4xl lg:text-5xl text-center p-4 pt-10 sm:pt-20 md:pt-20 lg:pt-20 container mx-auto max-w-screen-lg">
                        Your Reliable Partner in Supplies and Services
                    </h1>

                    <!-- Swiper Carousel -->
                    <div class="swiper-container py-4 h-auto w-full overflow-hidden  -mb-10 overflow-y-hidden">
                        <div class="swiper-wrapper">
                         @foreach ($widgets as $widget)
                                {{-- Replace with dynamic data --}}
                                <div class="group swiper-slide flex justify-center items-center relative h-[270px] md:h-[300px] lg:h-[400px] xl:h-[370px] 2xl:h-[500px]"> 


                                    {{-- revision --}}
                                  <div class="relative w-full h-full">
                                      {{-- Main image --}}
                                      <img src="{{ asset($widget->image) }}"
                                          alt="Technical Store"
                                          class="w-full h-full transition-opacity duration-500 ease-in-out object-cover rounded-lg absolute inset-0 group-hover:opacity-0"> 
                                      {{-- Thumbnail image --}}
                                      @php
                                          $thumbnail = is_string($widget->thumbnails) ? json_decode($widget->thumbnails, true) : $widget->thumbnails;
                                      @endphp
                                      <div class="absolute inset-0">
                                          @if($thumbnail > 0)
                                              <img src="{{ asset($thumbnail[1]) }}"
                                                  alt="Technical Store Thumbnail"
                                                  class="w-full h-full object-cover rounded-lg opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-700 group-hover:ease-in-out">
                                          @else
                                              <img src="{{ asset($widget->thumbnails) }}"
                                                  alt="Technical Store Hover"
                                                  class="w-full h-full object-cover rounded-lg opacity-0 group-hover:opacity-100 group-hover:transition-all group-hover:duration-700 group-hover:ease-in-out">
                                          @endif
                                      </div>
                                  </div>
                                {{-- revision --}}

                                  
                                  <span class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-white text-xl roboto-font">{{ $widget->title }}</span>


                                    
                                    <a href="#"
                                      onclick="openModal(
                                          '{{ $widget->title }}',
                                          '{{ $widget->description }}',
                                          @php
                                              $thumbnails = is_string($widget->thumbnails) ? json_decode($widget->thumbnails, true) : [];
                                          @endphp
                                          {{ json_encode(array_map(fn($thumbnail) => asset($thumbnail), $thumbnails)) }}
                                      )"
                                      class="scale-90 ubuntu-font absolute whitespace-nowrap bottom-4 left-1/2 transform -translate-x-1/2 bg-[#4d4848] text-white px-4 py-2 rounded-full shadow-lg hover:bg-orange-700 transition duration-300 text-sm sm:text-base"
                                      data-toggle="modal" 
                                      data-target="#detailsModal">
                                      View Details
                                  </a>
                              </div>
                         @endforeach
                       
                        </div>
                    </div>
                </div>

            <!-- Modal -->
            <div
            id="detailsModal"
            class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center hidden z-50">
            <div
            class="bg-white rounded-2xl shadow-xl w-11/12 sm:w-3/4 lg:w-2/3 xl:w-1/2 transform scale-95 transition-transform duration-300">
            <!-- Close Button -->
            <button
                class="absolute top-4 right-4 text-gray-500 hover:text-red-500 text-3xl p-2 rounded-full bg-gray-100 hover:bg-gray-200 focus:outline-none"
                onclick="closeModal()">
                &times;
            </button>

            <!-- Modal Content -->
            <div class="flex flex-col md:flex-row items-center lg:items-start p-6 space-y-6 lg:space-y-0 lg:space-x-6">
                <!-- Carousel -->
                <div class="relative w-3/4 sm:w-1/2 md:w-1/2 lg:w-1/2  rounded-lg overflow-hidden shadow-lg bg-gray-200">
                    <div
                        id="carousel"
                        class="flex transition-transform duration-500 h-auto"
                        style="transform: translateX(0);">
                        <!-- Thumbnails dynamically injected here -->
                        <div class="swiper-slide flex justify-center items-center">
                            <img src="" alt="Thumbnail" class="w-full h-full object-cover" id="thumbnails">
                        </div>
                    </div> 
                    <!-- Navigation -->
                    <button
                        id="prevBtn"
                        class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-3 hover:bg-gray-700 shadow-md focus:outline-none">
                        &#8592;
                    </button>
                    <button
                        id="nextBtn"
                        class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-3 hover:bg-gray-700 shadow-md focus:outline-none">
                        &#8594;
                    </button>
                    
                </div>

                <!-- Text Content -->
                <div class="w-full lg:w-1/2">
                    <!-- Title -->
                    <h2 id="modalTitle" class="text-3xl font-extrabold text-gray-800 mb-4"></h2>
                    <!-- Description -->
                    <p id="modalDescription" class="text-gray-600 leading-relaxed text-base"></p>
                </div>
            </div>


            </div>
            </div>

              <script>
                let currentSlide = 0;
            
                function updateCarousel() {
                const carousel = document.getElementById("carousel");
                const slides = carousel.children;
                const totalSlides = slides.length;
            
                // Update the transform property to show the current slide
                carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
                }
            
                // Previous Button
                document.getElementById("prevBtn").addEventListener("click", () => {
                const carousel = document.getElementById("carousel");
                const slides = carousel.children;
            
                currentSlide = (currentSlide - 1 + slides.length) % slides.length;
                updateCarousel();
                });
            
                // Next Button
                document.getElementById("nextBtn").addEventListener("click", () => {
                const carousel = document.getElementById("carousel");
                const slides = carousel.children;
            
                currentSlide = (currentSlide + 1) % slides.length;
                updateCarousel();
                });
             </script>

        </section>

        <!-- Values Section -->
        <section>
            <div class="object-contain relative container mx-auto max-w-screen-lg my-14">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/bg-wcu.webp') }}" alt="Background Image"
                class="px-4"
                >
                <!-- Text Content -->
                <h1
                    class="tracking-tight ubuntu-font mt-4 font font-medium uppercase w-full h-full flex flex-col justify-center items-center text-black text-2xl sm:text-5xl md:text-5xl lg:text-6xl text-center container mx-auto max-w-screen-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    Why Choose Us <br> Our Value and Principles
                </h1>
            </div>

            <div class="w-full  bg-[#030B15] object-cover">
                <div class="w-full relative container mx-auto max-w-screen-lg ">
                    <div class="flex flex-col items-center">
                        @php
                            $cards = [
                                [
                                    'number' => '01',
                                    'icon' => 'assets/hero-assets/efficiency-icon.webp',
                                    'image' => 'assets/hero-assets/Effeciency-hover.webp',
                                    'heading' => 'Reliability',
                                    'paragraph' =>
                                        'Our staff are working with our clients and partners to ensure we succeed in providing the best quality and reliable services.',
                                ],
                                [
                                    'number' => '02',
                                    'icon' => 'assets/hero-assets/reliability-icon.webp',
                                    'image' => 'assets/hero-assets/reliability.webp',
                                    'heading' => 'Integrity',
                                    'paragraph' => 'We uphold the highest standards of integrity in all of our actions.',
                                ],
                                [
                                    'number' => '03',
                                    'icon' => 'assets/hero-assets/cost-effective-icon.webp',
                                    'image' => 'assets/hero-assets/Cost-Effective-hover.webp',
                                    'heading' => 'Cost Effective',
                                    'paragraph' => 'We foster innovative ideas to drive business growth and success.',
                                ],
                                [
                                    'number' => '04',
                                    'icon' => 'assets/hero-assets/simplicity-icon.webp',
                                    'image' => 'assets/hero-assets/Simplicity-Hover.webp',
                                    'heading' => 'Simplicity',
                                    'paragraph' => 'Our customers are at the heart of everything we do.',
                                ],
                            ];
                        @endphp
                        <div class="grid grid-cols-2 md:grid-cols-4 scale-75 md:scale-100">
                            @foreach ($cards as $index => $card)
                                @php
                                    // Determine the group number based on the index
                                    $group = floor($index / 1);
                                    // Calculate delay: each group has a delay increment of 200ms
                                    $aosDelay = $group * 200;
                                @endphp
        
                                <div class="relative group">
                                    <div class="w-full h-full">
                                        <img src="{{ asset($card['image']) }}" alt="Image {{ $index }}"
                                            class="group-hover:blur-0 w-full h-full object-cover group-hover:border-l-2 group-hover:border-r-2"
                                            data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                            data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                    </div>
                                    <!-- Overlay -->
                                    <div
                                        class="absolute inset-0 bg-[#030B15] bg-opacity-80 group-transition-opacity duration-500 ease-in-out group-hover:bg-opacity-0">
                                    </div>
                                    <!-- Overlay Content -->
                                    <div class="group ubuntu-font absolute inset-0 bg-opacity-0 flex flex-col justify-center items-center text-center px-0 sm:px-4 md:px-4 lg:px-4 xl-px-4 scale-50 md:scale-100 sm:scale-100"
                                        data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                        data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                        <!-- Number -->
                                        <div class="text-gray-600 group-hover:text-white text-6xl font-bold absolute top-8 left-8 scale-50 sm:scale-100 md:scale-100">
                                            {{ $card['number'] }}
                                        </div>
                                        <!-- Icon -->
                                        <div class="
                                        mb-4 mt-20 sm:mt-0 group ">
                                            <img src="{{ asset($card['icon']) }}" alt="{{ $card['heading'] }}"
                                                class="size-16 transition duration-300 grayscale scale-75 md:scale-100 sm:scale-100">
                                        </div>
                                        <!-- Heading -->
                                        <h3 class="text-2xl font-semibold mb-2 text-gray-600 group-hover:text-white scale-50 md:scale-100 sm:scale-100">
                                            {{ $card['heading'] }}</h3>
                                        <!-- Paragraph -->
                                        <p class=" text-sm leading-relaxed text-gray-600 group-hover:text-white scale-50 md:scale-100 sm:scale-100" >
                                            {{ $card['paragraph'] }}
                                        </p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- awards and certifications --}}
        <section class="h-auto mb-10 sm:mb-0 md:mb-4  ">
            <div class="object-contain relative container mx-auto max-w-screen-lg my-14 ">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/aac.webp') }}" alt="Background Image"
                    class="px-4"
                >
                <!-- Text Content -->
                <h1
                    class=" tracking-tight ubuntu-font mt-4 font font-medium  uppercase w-full h-full flex flex-col justify-center items-center text-black text-xl sm:text-5xl md:text-5xl lg:text-6xl text-center container mx-auto max-w-screen-lg absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    Awards and Certifications
                </h1>
            </div>

             <div
            class=" scale-90 sm:scale-100  w-full h-50 flex flex-col justify-center items-center relative container mx-auto max-w-screen-lg  m">
            <img src="{{ asset('assets/hero-assets/Logo Awards Opacity.webp') }}" alt="Background Image"
                  class="object-cover size-1/2">
           

            <div 
            class="w-auto absolute flex flex-wrap md:flex-nowrap justify-center md:justify-around items-center gap-6 px-4 sm:px-8 lg:px-10  py-4 sm:py-8 lg:py-10  bg-white border rounded-2xl shadow-xl  max-w-screen-lg mx-auto"
          >
            <!-- Box 1 -->
            <div 
              data-aos-once="true"
              data-aos="fade-down" 
              data-aos-delay="50"
              data-aos-duration="500"
              class="group relative size-14  sm:size-24 lg:size-28 rounded-lg sm:rounded-xl lg:rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center transition-transform duration-300 hover:scale-110"
            >
              <img 
                src="{{ asset('assets/hero-assets/award1.webp') }}" 
                alt="Award 1" 
                class="object-cover  rounded-3xl"
              >
              <div 
                class="absolute inset-0 bg-gradient-to-tr from-red-400 via-red-200 to-transparent opacity-0 group-hover:opacity-30 rounded-3xl transition-opacity duration-300"
              ></div>
            </div>
          
            <!-- Vertical Divider -->
            <span class="hidden md:block border-l border-gray-400 h-20 mx-4"></span>
          
            <!-- Box 2 -->
            <div 
              data-aos-once="true"
              data-aos="fade-down" 
              data-aos-delay="300"
              data-aos-duration="500"
              class="group relative size-14  sm:size-24 lg:size-28 rounded-lg sm:rounded-xl lg:rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center transition-transform duration-300 hover:scale-110"
            >
              <img 
                src="{{ asset('assets/hero-assets/award2.webp') }}" 
                alt="Award 2" 
                class="object-cover  rounded-3xl p-4"
              >
              <div 
                class="absolute inset-0 bg-gradient-to-tr from-blue-400 via-blue-200 to-transparent opacity-0 group-hover:opacity-30 rounded-3xl transition-opacity duration-300"
              ></div>
            </div>
          
            <!-- Vertical Divider -->
            <span class="hidden md:block border-l border-gray-400 h-20 mx-4"></span>
          
            <!-- Box 3 -->
            <div 
              data-aos-once="true"
              data-aos="fade-down" 
              data-aos-delay="550"
              data-aos-duration="500"
              class="group relative size-14  sm:size-24 lg:size-28 rounded-lg sm:rounded-xl lg:rounded-3xl shadow-md shadow-gray-500 flex items-center justify-center transition-transform duration-300 hover:scale-110"
            >
              <img 
                src="{{ asset('assets/hero-assets/award3.webp') }}" 
                alt="Award 3" 
                class="object-cover  rounded-3xl p-2"
              >
              <div 
                class="absolute inset-0 bg-gradient-to-tr from-green-400 via-green-200 to-transparent opacity-0 group-hover:opacity-30 rounded-3xl transition-opacity duration-300"
              ></div>
            </div>
          
            <!-- Vertical Divider -->
            <span class="hidden md:block border-l border-gray-400 h-20 mx-4"></span>
          
            <!-- Box 4 -->
            <div 
              data-aos-once="true"
              data-aos="fade-down" 
              data-aos-delay="700"
              data-aos-duration="500"
              class="group relative size-14  sm:size-24 lg:size-28 rounded-lg sm:rounded-xl lg:rounded-3xl rounded-full shadow-md shadow-gray-500 flex items-center justify-center transition-transform duration-300 hover:scale-110"
            >
              <img 
                src="{{ asset('assets/hero-assets/award4.webp') }}" 
                alt="Award 4" 
                class="object-cover rounded-3xl"
              >
              <div 
                class="absolute inset-0 bg-gradient-to-tr from-purple-400 via-purple-200 to-transparent opacity-0 group-hover:opacity-30 rounded-full transition-opacity duration-300"
              ></div>
            </div>
          
            <!-- Vertical Divider -->
            <span class="hidden md:block border-l border-gray-400 h-20 mx-4"></span>
          
            <!-- Box 5 -->
            <div 
              data-aos-once="true"
              data-aos="fade-down" 
              data-aos-delay="950"
              data-aos-duration="500"
              class="group relative size-14  sm:size-24 lg:size-28 rounded-lg sm:rounded-xl lg:rounded-3xl rounded-2xl shadow-md shadow-gray-500 flex items-center justify-center transition-transform duration-300 hover:scale-110"
            >
              <img 
                src="{{ asset('assets/hero-assets/award5.webp') }}" 
                alt="Award 5" 
                class="object-cover  rounded-3xl"
              >
              <div 
                class="absolute inset-0 bg-gradient-to-tr from-yellow-400 via-yellow-200 to-transparent opacity-0 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"
              ></div>
            </div>
          </div>
          


        </section>

        {{-- number counter --}}
        <section class="relative bg-cover bg-center roboto-font ">
            <img 
              src="{{ asset('assets/hero-assets/Statistics.webp') }}" 
              alt="Background Image" 
              class="object-cover sm:object-fill w-full h-2/4  sm:h-1/2 lg:h-[50vh]"
            >
            <div 
              class="scale-75 sm:scale-100 container mx-auto max-w-screen-lg h-full flex flex-col justify-center items-center space-y-4 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4"
            >
              <!-- Title Section -->
              <div class="w-full flex flex-col lg:flex-row justify-between items-center text-center lg:text-left space-y-6 lg:space-y-0">
                <!-- Title -->
                <h1 class="text-4xl sm:text-4xl lg:text-5xl font-bold text-black relative">
                  The Power of a 
                  <span 
                    class="opacity-10 italic text-transparent bg-clip-text text-white text-6xl sm:text-7xl lg:text-8xl absolute -top-6 lg:top-0 left-0 lg:left-20"
                  >
                    human
                  </span>
                  <br> network
                </h1>
                <!-- Subtitle -->
                <p class="text-base sm:text-base lg:text-lg text-gray-900 max-w-full lg:max-w-[450px] ">
                  We believe in building trust through commitment, reliability, and understanding your needs.
                </p>
              </div>
          
              <!-- Statistics Section -->
              <div 
                class="flex flex-wrap md:flex-nowrap justify-center md:justify-between items-center text-gray-900 gap-6 sm:gap-16 lg:gap-16 pt-8"
              >
                <!-- Statistic 1 -->
                <div class="flex flex-col items-center text-center relative">
                  <!-- Main Number -->
                  <div class="text-5xl sm:text-6xl lg:text-7xl font-semibold" id="productsAvailableCounter">0</div>
                  <!-- Shadow Number -->
                  <div 
                    class="absolute text-6xl sm:text-5xl lg:text-8xl font-semibold text-gray-400 opacity-50 -z-10 -mt-6 -ml-8"
                    id="productsAvailableCounterShadow"
                  >
                    0
                  </div>
                  <!-- Caption -->
                  <p class="text-sm sm:text-base lg:text-lg font-medium mt-2">Products Available</p>
                </div>
          
                <!-- Statistic 2 -->
                <div class="flex flex-col items-center text-center relative">
                  <!-- Main Number -->
                  <div class="text-5xl sm:text-6xl lg:text-7xl font-semibold" id="satisfiedCustomerCounter">0</div>
                  <!-- Shadow Number -->
                  <div 
                    class="absolute text-6xl sm:text-5xl lg:text-8xl font-semibold text-gray-400 opacity-50 -z-10 -mt-6 -ml-8"
                    id="satisfiedCustomerCounterShadow"
                  >
                    0
                  </div>
                  <!-- Caption -->
                  <p class="text-sm sm:text-base lg:text-lg font-medium mt-2">Satisfied Customers</p>
                </div>
          
                <!-- Statistic 3 -->
                <div class="flex flex-col items-center text-center relative">
                  <!-- Main Number -->
                  <div class="text-5xl sm:text-6xl lg:text-7xl font-semibold" id="yearsOfOperationCounter">0</div>
                  <!-- Shadow Number -->
                  <div 
                    class="absolute text-6xl sm:text-6xl lg:text-8xl font-semibold text-gray-400 opacity-50 -z-10 -mt-6 -ml-8"
                    id="yearsOfOperationCounterShadow"
                  >
                    0
                  </div>
                  <!-- Caption -->
                  <p class="text-sm sm:text-base lg:text-lg font-medium mt-2">
                    Years of Operation <br>
                    A Company You Can Trust
                  </p>
                </div>
              </div>
            </div>
      </section>
          

        

     
          <!-- Recent Featured News -->
     
          <section class="py-10">
            <div class="container mx-auto text-center max-w-screen-xl flex flex-col">
                <h2 class="text-3xl font-bold">Recent Updates & Insights</h2>
                <div class="grid grid-cols-1 px-4 md:grid-cols-3 gap-6 mt-10">
                    {{-- Blog Card --}}
                    @forelse($recentNews as $news) {{-- Replace with dynamic cards --}}
                        <div class="bg-white shadow-md rounded-sm overflow-hidden hover:scale-105 hover:rotate-1 duration-300 group">
                            <!-- Image Section -->
                            <div class="relative">
                                <img src="{{ asset($news->image) }}" alt="Blog Image" class="w-full h-48 sm:h-56 object-cover">
                                <!-- Badges -->
                                <div class="flex absolute bottom-0 left-0 w-full mt-10">
                                    <!-- Date Badge -->
                                    <div class="bg-black text-white py-3 px-5 text-center flex flex-col items-center">
                                        <p class="text-lg sm:text-xl font-bold">25</p>
                                        <p class="text-xs sm:text-sm uppercase">Dec</p>
                                    </div>
                                    <!-- Author Badge -->
                                    <div class="bg-white shadow-md flex px-4 items-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 text-gray-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                            <path d="M10 8a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
                                        </svg>
                                        <span class="text-xs sm:text-sm font-medium text-gray-700">Admin</span>
                                    </div>
                                </div>
                            </div>
                            <!-- Content Section -->
                            <div class="p-4 text-left">
                                <h2 class="text-base sm:text-lg font-semibold text-gray-800">{{ $news->title }}</h2>
                                <a href="{{route('newsItem', $news->id)}}" class="mt-2 inline-flex items-center text-gray-700 group-hover:underline">
                                    Read More
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 hover:transform  group-hover:-rotate-45 duration-500" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M12.293 9.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L13.586 13H4a1 1 0 110-2h9.586l-1.293-1.293a1 1 0 010-1.414z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    @empty
                    <p class=" flex justify-center items-center">No featured news:</p>
                    @endforelse
                </div>
            </div>
        </section>
    </div>

@endsection

<script>
  console.log(thumbnails);
</script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 1000,
                disableOnInteraction: true,
            },
            speed: 2000,
            breakpoints: {
                180: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    scale: 0.3,
                },
                300: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    scale: 0.5,
                },
                420: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                    scale: 0.6,
                },
                700: {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    scale: 0.6,
                },
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 40,
                    scale: 0.6,
                },
                1320: {
                    slidesPerView: 6,
                    spaceBetween: 80,

                },
            },
        });
    });
</script>

 
{{-- counter function --}}
<script>
    // Counter Function with Random Numbers
    function animateCounterWithRandom(id, targetValue, duration) {
        const mainCounter = document.getElementById(id);
        const shadowCounter = document.getElementById(`${id}Shadow`);
        const frameRate = 16; // ~60FPS
        const totalFrames = duration / frameRate;
        const increment = targetValue / totalFrames;
        let currentValue = 0;

        const counterInterval = setInterval(() => {
            // Generate a random number close to the current value
            const randomValue = Math.floor(
                currentValue + Math.random() * (increment * 2) - increment
            );

            // Ensure random value doesn't exceed the target
            const displayValue =
                currentValue + increment >= targetValue ?
                targetValue :
                Math.min(randomValue, targetValue);

            mainCounter.textContent = `${displayValue.toLocaleString()}+`;
            shadowCounter.textContent = `${displayValue.toLocaleString()}+`;

            // Increment the actual value
            currentValue += increment;

            if (currentValue >= targetValue) {
                // Final display to ensure the target value is accurate
                mainCounter.textContent = `${targetValue.toLocaleString()}+`;
                shadowCounter.textContent = `${targetValue.toLocaleString()}+`;
                clearInterval(counterInterval);
            }
        }, frameRate);
    }

    // Observer for triggering animation on scroll
    function createObserverWithRandom(targetId, targetValue, duration) {
        const targetElement = document.getElementById(targetId);

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        // Start the counter animation
                        animateCounterWithRandom(targetId, targetValue, duration);
                        // Disconnect observer to prevent re-triggering
                        observer.disconnect();
                    }
                });
            }, {
                threshold: 1
            } // Trigger when 50% of the element is visible
        );

        observer.observe(targetElement);
    }

    // Initialize observers for each counter
    window.onload = () => {
        const duration = 3000; // 2 seconds
        createObserverWithRandom("productsAvailableCounter", 1200, duration); // 1200 Products Available
        createObserverWithRandom("satisfiedCustomerCounter", 500, duration); // 500+ Satisfied Customers
        createObserverWithRandom("yearsOfOperationCounter", 10, duration); // 10+ Years of Operation
    };
</script>


    <!-- JavaScript for modal -->
    <script>
              function openModal(title, description, thumbnails) {
              // Set the title and description
              document.getElementById("modalTitle").innerText = title;
              document.getElementById("modalDescription").innerText = description;

              // Populate the carousel with thumbnails
              const carousel = document.getElementById("carousel");
              carousel.innerHTML = ""; // Clear previous images

              if (Array.isArray(thumbnails) && thumbnails.length > 0) {
                  thumbnails.forEach((thumbnail) => {
                      const imgDiv = document.createElement("div");
                      imgDiv.classList.add("swiper-slide", "flex", "justify-center", "items-center");

                      const img = document.createElement("img");
                      img.src = thumbnail;
                      img.alt = title;
                      img.classList.add("bg-gray-200", "w-full", "h-auto", "rounded-lg");

                      imgDiv.appendChild(img);
                      carousel.appendChild(imgDiv);
                  });
              } else {
                  // Fallback for no thumbnails
                  const fallback = document.createElement("p");
                  fallback.innerText = "No Thumbnails Available";
                  fallback.classList.add("text-gray-500", "italic");
                  carousel.appendChild(fallback);
              }

              // Show the modal
              const modal = document.getElementById("detailsModal");
              modal.classList.remove("hidden");
              modal.classList.add("flex");
          }

          function closeModal() {
              const modal = document.getElementById("detailsModal");
              modal.classList.add("hidden");
              modal.classList.remove("flex");
          }

    </script>