@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">
      
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/hero-bg.webp') }}" alt="Background Image"
                    class="absolute inset-0  w-full h-full object-cover">

                        <!-- Hero Content -->
    <div class="relative  flex flex-col justify-center items-center   ">
            <h1
                class=" leading-none hero-heading w-full mt-36 flex justify-center items-center text-white  roboto-font text-2xl sm:text-3xl md:text-4xl lg:text-4xl 2xl:text-5xl 
                {{-- pt-28 md:pt-36  --}}
                text-center    ">
                Your Reliable Partner in Supplies and Services
            </h1>
        <!-- Swiper Carousel -->
         <div class="swiper-container py-4  w-full overflow-hidden 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-[480px] 

                          duration-150 transition-all ease-in-out "> 
                            
                            {{-- revision --}}
                            <div class="relative  w-full h-full  ">
                              
                                {{-- Main image --}}
                                <img src="{{ asset($widget->image) }}"
                                    alt="Technical Store"
                                    class="w-full h-full brightness-50 transition-opacity duration-500 ease-in-out object-cover rounded-lg absolute inset-0 "> 
                            {{-- Thumbnail image --}}
                                @php
                                    $thumbnails = is_string($widget->thumbnails) ? json_decode($widget->thumbnails, true) : $widget->thumbnails;
                                    $thumbnailArray = is_array($thumbnails) ? $thumbnails : [$widget->thumbnails];
                                @endphp
                                
                                <div class=" thumbnail-cycler" data-thumbnails='@json($thumbnailArray)' data-current-index="0">
                                    @foreach($thumbnailArray as $index => $thumb)
                                        <img src="{{ asset($thumb) }}"
                                            alt="Technical Store Thumbnail {{ $index + 1 }}"
                                            class="w-full h-full object-cover rounded-lg opacity-0 transition-opacity duration-700 absolute inset-0 {{ $index === 0 ? 'first-thumbnail' : '' }}"
                                            style="{{ $index === 0 ? 'opacity: 0;' : '' }}">
                                    @endforeach
                                </div>

                                <div class="relative w-full h-full flex flex-col items-center justify-center ">

                                    <div class="flex items-center justify-center w-full h-full  text-white text-xl roboto-font text-center py-20 ">{{ $widget->title }}
                                    </div>

                                        <div class=" w-full flex justify-center items-center mb-10 ">
                                            <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="ubuntu-font  whitespace-nowrap  bg-white text-black px-4 py-2 rounded-full shadow-lg hover:bg-[#74b0e7] transition duration-300 text-sm sm:text-base"
                                            data-toggle="modal" 
                                            data-target="#detailsModal">
                                            View Details
                                        </a>
                                        </div>
                                   

                                 

                                   
                                </div>
                            </div>
                        {{-- revision --}}  

                     

                        
                <script>
                        document.addEventListener('DOMContentLoaded', function() {
                        const cyclers = document.querySelectorAll('.thumbnail-cycler');
                        cyclers.forEach(cycler => {
                        const thumbnails = cycler.querySelectorAll('img');
                        let intervalId = null;

                        // Add transition styles to all thumbnails
                        thumbnails.forEach(img => {
                        img.style.transition = 'opacity 0.5s ease-in-out';
                        });

                        cycler.closest('.group').addEventListener('mouseenter', () => {
                        let currentIndex = 0;

                        // Fade in first image smoothly
                        requestAnimationFrame(() => {
                            thumbnails[currentIndex].style.opacity = '1';
                        });

                        intervalId = setInterval(() => {
                            // Fade out current image
                            thumbnails[currentIndex].style.opacity = '0';
                            
                            // Update index and fade in next image
                            currentIndex = (currentIndex + 1) % thumbnails.length;
                            requestAnimationFrame(() => {
                                thumbnails[currentIndex].style.opacity = '1';
                            });
                        }, 2000);
                        });

                        cycler.closest('.group').addEventListener('mouseleave', () => {
                        if (intervalId) {
                            clearInterval(intervalId);
                            // Smoothly fade out all images
                            thumbnails.forEach(img => {
                                img.style.opacity = '0';
                            });
                        }
                        });
                        });
                        });
                </script>



                        
                    </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 p-4">
            <div
            class="bg-white rounded-2xl shadow-xl w-full max-w-4xl transform scale-95 transition-transform duration-300 max-h-[90vh] overflow-y-auto">
            <!-- Close Button -->
            <button
                class="absolute top-2 right-2 text-gray-500 hover:text-red-500 text-2xl p-2 rounded-full bg-gray-100 hover:bg-gray-200 focus:outline-none z-10"
                onclick="closeModal()">
                &times;
            </button>

            <!-- Modal Content -->
            <div class="flex flex-col md:flex-row items-start p-4 md:p-6 gap-4 md:gap-6">
                <!-- Carousel -->
                <div class="relative w-full md:w-1/2 rounded-lg overflow-hidden shadow-lg bg-gray-200">
                    <div
                        id="carousel"
                        class="flex transition-transform duration-500 h-[250px] sm:h-[300px] md:h-[350px]"
                        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-2 md:p-3 hover:bg-gray-700 shadow-md focus:outline-none text-sm md:text-base">
                        &#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-2 md:p-3 hover:bg-gray-700 shadow-md focus:outline-none text-sm md:text-base">
                        &#8594;
                    </button>
                    
                </div>

                <!-- Text Content -->
              <div class="w-full md:w-1/2 p-2 md:p-4">
                    <!-- Title -->
                    <h2 id="modalTitle" class="text-xl md:text-3xl font-extrabold text-gray-800 mb-3 md:mb-4"></h2>
                    <!-- Description -->
                    <div class="relative">
                        <p id="modalDescription" 
                           class="text-gray-600 leading-relaxed text-sm md:text-base overflow-y-auto max-h-[200px] md:max-h-[350px] pr-2"></p>
                        <div class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
                    </div>
              </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' =>
                                        'We understand the need and requirements
                                            of our client and are able to respond quickly
                                            and effectively working as partners',
                                ],
                                [
                                    'number' => '02',
                                    'icon' => 'assets/hero-assets/reliability-icon.webp',
                                    'image' => 'assets/hero-assets/reliability.webp',
                                    'heading' => 'Integrity',
                                    'paragraph' => 'Our staff are working with ou clients and
                                                    paitners to ensure we succeed in providing
                                                    the best quality and reliable services.',
                                ],
                                [
                                    'number' => '03',
                                    'icon' => 'assets/hero-assets/cost-effective-icon.webp',
                                    'image' => 'assets/hero-assets/Cost-Effective-hover.webp',
                                    'heading' => 'Cost Effective',
                                    'paragraph' => 'We understand the need to be competitive.
                                                    We ensure we pass the cost benefits to our
                                                    clients by leveraging on our relationships
                                                    with our partners and suppliers.',
                                ],
                                [
                                    'number' => '04',
                                    'icon' => 'assets/hero-assets/simplicity-icon.webp',
                                    'image' => 'assets/hero-assets/Simplicity-Hover.webp',
                                    'heading' => 'Simplicity',
                                    'paragraph' => 'We believe in keeping things simple. We are!
                                                    a one stop shop for all your safetyand
                                                    security requirements. Our account |
                                                    management is based on providing simple
                                                    answers and solutions.',
                                ],
                            ];
                        @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-between p-8 text-center h-full"
                                        data-aos="fade-right" data-aos-offset="500" data-aos-duration="1000"
                                        data-aos-delay="{{ $aosDelay }}" data-aos-once="true">
                                        
                                        <!-- Top Section with Number -->
                                        <div class="text-gray-600 group-hover:text-white text-6xl font-bold text-left">
                                            {{ $card['number'] }}
                                        </div>
                                        
                                        <!-- Middle Section with Icon and Content -->
                                        <div class="flex flex-col items-center h-full pt-10 ">
                                            <!-- Icon -->
                                            <div class="group pb-4">
                                                <img src="{{ asset($card['icon']) }}" 
                                                    alt="{{ $card['heading'] }}"
                                                    class="size-20 transition duration-300 grayscale group-hover:grayscale-0">
                                            </div>
                                            
                                            <!-- Heading -->
                                            <h3 class="text-2xl font-semibold text-white group-hover:text-white pb-3">
                                                {{ $card['heading'] }}
                                            </h3>
                                            
                                            <!-- Paragraph -->
                                            <p class="text-md  p-2 hidden sm:block leading-relaxed text-gray-600 group-hover:text-white max-w-xs text-left">
                                                {{ $card['paragraph'] }}
                                            </p>
                                        </div>
                                        
                                        <!-- Bottom Section (empty for spacing) -->
                                        <div></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>




        

             {{-- awards and certifications --}}
        <section class="h-auto py-10 md:py-16">
            <div class="relative container mx-auto max-w-screen-lg px-4 pt-10">
                <!-- Background Image -->
                <img src="{{ asset('assets/hero-assets/aac.webp') }}" alt="Background Image"
                    class="hidden md:block absolute bottom-10 left-0 px-4">
                <!-- Text Content -->
                <h1 class="tracking-tight ubuntu-font mb-8 md:mb-12 font-medium uppercase text-black text-2xl sm:text-4xl md:text-5xl lg:text-6xl text-center">
                    Awards and Certifications
                </h1>
            </div>

            <div class="relative container mx-auto max-w-screen-lg px-4">
                <img src="{{ asset('assets/hero-assets/Logo Awards Opacity.webp') }}" alt="Background Image"
                    class="w-full max-w-[300px] md:max-w-[400px] mx-auto mb-6 md:mb-8 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                
                <div class="bg-white border rounded-2xl shadow-xl p-4 sm:p-6 md:p-8">
                    <div class="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
                        <!-- Award Items -->
                        @foreach ([
                            ['award1.webp', 'red', '50'],
                            ['award2.webp', 'blue', '300'],
                            ['award3.webp', 'green', '550'],
                            ['award4.webp', 'purple', '700'],
                            ['award5.webp', 'yellow', '950']
                        ] as $index => [$image, $color, $delay])
                            @if($index > 0)
                                <div class="hidden md:block w-px h-20 bg-gray-200 self-center"></div>
                            @endif
                            
                            <div data-aos-once="true"
                                data-aos="fade-down"
                                data-aos-delay="{{ $delay }}"
                                data-aos-duration="500"
                                class="group relative w-16 h-16 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-xl md: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/' . $image) }}"
                                    alt="Award {{ $index + 1 }}"
                                    class="object-cover rounded-xl md:rounded-3xl p-2">
                                <div class="absolute inset-0 bg-gradient-to-tr from-{{ $color }}-400 via-{{ $color }}-200 to-transparent opacity-0 group-hover:opacity-30 rounded-xl md:rounded-3xl transition-opacity duration-300"></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
          


        </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>
          

              {{-- highlights news --}}
       <section>
        <h1 class="text-2xl font-bold text-center pt-4">News Highlights</h1>
        <div class="container mx-auto max-w-screen-xl">
            <div class="grid grid-cols-1 px-4 md:grid-cols-3 gap-6 mt-10">
                {{-- news  Card --}}
                @if($highlights->isEmpty())
                    <p class="text-center text-2xl font-bold">No current news</p>
                @else
                    @foreach ($highlights as $highlight)
                        <div class="rounded-sm overflow-hidden group shadow-gray-300 shadow-md ">
                            <a href="{{ $highlight->link }}" target="_blank">
                                <div class="relative">
                                    <img src="{{ json_decode($highlight->image)[0] }}" alt="Blog Image" class="w-full h-48 sm:h-56 object-cover group-hover:scale-105 duration-500 transition-all ">
                                </div>
                            </a>
                            <div class="mt-2 p-3">
                                <h2 class="text-lg font-semibold">{{ $highlight->title }}</h2>
                                <p class="text-sm text-gray-600">{!! $highlight->description !!}</p>
                            </div>
                        </div>
                    @endforeach
                @endif
            </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: false,
            },
            speed: 2000,
            breakpoints: {
                180: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    scale: 0.3,
                },
                300: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    scale: 0.5,
                },
                420: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    scale: 0.6,
                },
                700: {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    scale: 0.6,
                },
                1024: {
                    slidesPerView: 5,
                    spaceBetween: 40,
                    scale: 0.6,
                },
                1320: {
                    slidesPerView: 5,
                    spaceBetween:60,

                },
                1500: {
                    slidesPerView: 6,
                    spaceBetween:60,

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.8/purify.min.js"></script>



    <!-- JavaScript for modal -->
    <script>
              function openModal(title, description, thumbnails) {
              // Set the title and description
              
              

              document.getElementById("modalTitle").innerText = title;
        document.getElementById("modalDescription").innerHTML = DOMPurify.sanitize(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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cyclers = document.querySelectorAll('.thumbnail-cycler');
    
    cyclers.forEach(cycler => {
        const thumbnails = cycler.querySelectorAll('img');
        let intervalId = null;
        
        // Add transition styles to all thumbnails
        thumbnails.forEach(img => {
            img.style.transition = 'opacity 0.5s ease-in-out';
        });
        
        cycler.closest('.group').addEventListener('mouseenter', () => {
            let currentIndex = 0;
            
            // Fade in first image smoothly
            requestAnimationFrame(() => {
                thumbnails[currentIndex].style.opacity = '1';
            });
            
            intervalId = setInterval(() => {
                // Fade out current image
                thumbnails[currentIndex].style.opacity = '0';
                
                // Update index and fade in next image
                currentIndex = (currentIndex + 1) % thumbnails.length;
                requestAnimationFrame(() => {
                    thumbnails[currentIndex].style.opacity = '1';
                });
            }, 2000);
        });

        cycler.closest('.group').addEventListener('mouseleave', () => {
            if (intervalId) {
                clearInterval(intervalId);
                // Smoothly fade out all images
                thumbnails.forEach(img => {
                    img.style.opacity = '0';
                });
            }
        });
    });
});
</script>