@extends('frontend.layouts.layouts')
@section('title', 'Home')
@section('content')
    <link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <div class="relative w-full">
        <div class="swiper default-carousel">
            <div class="swiper-wrapper">

                @foreach ($banner as $bn)
                    <div class="swiper-slide">
                        <div class="relative z-0">
                            <img src="{{ asset($bn->picture) }}" class="absolute object-cover w-full h-full"
                                alt="Flowbite Logo">

                            <div class="relative inset-0 z-0 flex items-center justify-center py-80">
                                <style>
                                    .marcellus-font {
                                        font-family: 'Marcellus', serif;
                                    }



                                    .swiper-wrapper {
                                        width: 100%;
                                        height: max-content !important;
                                        padding-bottom: 64px !important;
                                        -webkit-transition-timing-function: linear !important;
                                        transition-timing-function: linear !important;
                                        position: relative;
                                    }

                                    .swiper-pagination-bullet {
                                        background: #4f46e5;
                                    }
                                </style>
                                <div>
                                    <h1
                                        class="p-4 text-xl text-center text-white sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                                        Creator of <span class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl"
                                            style="font-family: 'Brush Script MT',  cursive;">
                                            person
                                        </span>
                                        to
                                        <span class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl"
                                            style="font-family: 'Brush Script MT',  cursive;">person</span>
                                        <br>
                                        Household, Beauty and Care solutions
                                    </h1>
                                </div>
                            </div>
                            <div class="absolute inset-0 z-50 flex items-end justify-center">
                                <div class="grid w-full max-w-lg grid-cols-1 gap-4 mb-20 sm:grid-cols-2">
                                    <div class="flex justify-center">
                                        <a href="{{ url('shop') }}"
                                            class="py-2 text-sm text-center text-white bg-blue-600 bg-opacity-75 rounded-full hover:bg-blue-7800 w-60 sm:px-12 sm:text-base">SHOP
                                            NOW</a>
                                    </div>
                                    <div class="flex justify-center">
                                        <a href="{{ url('about-us') }}"
                                            class="py-2 text-sm text-white border-2 border-white rounded-full hover:bg-black tedt-center w-60 sm:px-12 sm:text-base">DISCOVER
                                            MORE</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="flex items-center justify-center gap-8 lg:justify-start">
                <button id="slider-button-left"
                    class="swiper-button-prev group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !left-5 hover:bg-indigo-600">
                    <svg class="w-5 h-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg"
                        width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M10.0002 11.9999L6 7.99971L10.0025 3.99719" stroke="currentColor" stroke-width="1.6"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
                <button id="slider-button-right"
                    class="swiper-button-next group !p-2 flex justify-center items-center border border-solid border-indigo-600 !w-12 !h-12 transition-all duration-500 rounded-full !top-2/4 !-translate-y-8 !right-5 hover:bg-indigo-600">
                    <svg class="w-5 h-5 text-indigo-600 group-hover:text-white" xmlns="http://www.w3.org/2000/svg"
                        width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.99984 4.00012L10 8.00029L5.99748 12.0028" stroke="currentColor" stroke-width="1.6"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </button>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var swiperContainer = document.querySelector('.swiper-wrapper');
            var slides = swiperContainer.querySelectorAll('.swiper-slide');
            var slidesLength = slides.length;

            // Duplicate slides if not enough
            if (slidesLength < 3) {
                for (var i = 0; i < slidesLength; i++) {
                    var clone = slides[i].cloneNode(true);
                    swiperContainer.appendChild(clone);
                }
            }

            var swiper = new Swiper(".default-carousel", {
                loop: true,
                autoplay: {
                    delay: 3000, // Time in milliseconds (3 seconds)
                    disableOnInteraction: false, // Continue autoplay after user interaction
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        });
    </script>




    <div class="container mx-auto" style="font-family: 'Poppins', sans-serif;">
        <div class="overflow-hidden ">
            <div class="p-10 " data-aos="fade-up">
                <p class="text-4xl font-medium ">Our Unique Brands</p>
                <div class="flex items-start justify-start">
                    <hr class="w-20 border-t-4 border-yellow-400 ml-60">
                </div>

            </div>
            <div class="grid grid-cols-1 gap-4 mx-10 md:grid-cols-2">
                <div class="relative " data-aos="fade-right">
                    <img src="{{ asset('img/img-stanhome.png') }}" class="" alt="Flowbite Logo">
                    <div
                        class="absolute inset-0 flex items-center justify-center duration-300 bg-blue-700 opacity-0 hover:opacity-70 ">
                        <img src="{{ asset('img/logo-stanhome (1).png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    </div>
                </div>
                <div class="relative" data-aos="fade-left">
                    <img src="{{ asset('img/img-kiotis.png') }}" class="" alt="Flowbite Logo">
                    <div
                        class="absolute inset-0 flex items-center justify-center duration-300 bg-blue-700 opacity-0 hover:opacity-70">
                        <img src="{{ asset('img/logo-kiotis.png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="p-10 " id="results" data-aos="fade-up">
                <p class="text-4xl text-center ">Top Selling Products</p>
                <div class="flex items-center justify-center ">
                    <hr class="w-20 mt-2 border-t-4 border-yellow-400">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

                <div class="w-full" data-aos="fade-right">
                    <p class="font-bold ">POPULAR CATEGORIES</p>
                    <div class="flex flex-col items-center p-3 ">
                        <form id="filter-form" class="w-full p-3" method="GET" action="{{ route('products.filter') }}">
                            <div class="w-full space-y-2">
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>All Products</span>
                                    <input type="checkbox" name="category[]" value="All Products"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('all_products', old('category', [])) ? 'checked' : '' }}>
                                </label>
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>Home Care</span>
                                    <input type="checkbox" name="category[]" value="Home Care"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('home_care', old('category', [])) ? 'checked' : '' }}>
                                </label>
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>Family Care</span>
                                    <input type="checkbox" name="category[]" value="Family Care"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('family_care', old('category', [])) ? 'checked' : '' }}>
                                </label>
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>Beauty</span>
                                    <input type="checkbox" name="category[]" value="Beauty"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('beauty', old('category', [])) ? 'checked' : '' }}>
                                </label>
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>Health & Wellness</span>
                                    <input type="checkbox" name="category[]" value="Health & Wellness"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('health_wellness', old('category', [])) ? 'checked' : '' }}>
                                </label>
                            </div>
                        </form>

                        <div class="my-4"><a href="{{ url('shop') }}"
                                class="px-16 py-2 text-white bg-blue-600 rounded-full w-80 ">Visit
                                Shop</a></div>
                    </div>
                    <div class="flex flex-col items-center p-3 ">
                        <div class="relative ">
                            <div> <img src="{{ asset('img/img-leftpanel-ad.png') }}" class="object-contain w-fit h-96"
                                    alt="Flowbite Logo">
                            </div>
                            <div
                                class="absolute inset-0 flex items-end justify-center mb-10 duration-300 opacity-0 hover:opacity-70 ">
                                <button class="px-10 py-2 text-white border-2 border-white rounded-full ">SHOP
                                    NOW</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const form = document.getElementById('filter-form');

                        // Scroll to results section if the page URL contains a query string
                        if (window.location.search) {
                            setTimeout(function() {
                                const resultsSection = document.getElementById('results');
                                if (resultsSection) {
                                    window.scrollTo({
                                        top: resultsSection.offsetTop,
                                        behavior: 'smooth'
                                    });
                                }
                            }, 100); // Delay to ensure page content is fully loaded
                        }

                        // Automatically submit the form on checkbox change
                        form.addEventListener('change', function() {
                            form.submit(); // Submit the form on checkbox change
                        });
                    });
                </script>
                <div class="grid grid-cols-1 col-span-3 gap-5 p-10 md:grid-cols-2 lg:grid-cols-3" data-aos="fade-down">
                    @foreach ($products as $product)
                        <div class="relative z-10 p-3 bg-gray-100 cursor-pointer h-96"
                            onclick="document.getElementById('addItemModal_{{ $product->id }}').style.display='flex'">
                            <!-- Hidden overlay and buttons -->
                            <div
                                class="absolute inset-0 z-10 flex flex-col justify-between p-4 transition-opacity duration-300 bg-gray-700 bg-opacity-50 rounded-lg opacity-0 hover:opacity-90">
                                <div class="flex items-end justify-end">
                                    <!-- Button inside the overlay -->
                                    <button type="button" class="w-10 h-10 m-2 text-white bg-blue-700 rounded-full">
                                        <img src="{{ asset('img/shop/icon-eyeglasses.png') }}" class="w-auto h-auto px-2"
                                            alt="Product Image">
                                    </button>
                                </div>
                                <div class="z-50 flex justify-center">
                                    <form action="{{ route('cart.store') }}" method="POST">
                                        @csrf
                                        @php
                                            $firstChannelProduct = $product->channelProducts->first();
                                        @endphp
                                        <input type="hidden" name="product_id"
                                            value="{{ $firstChannelProduct ? $firstChannelProduct->id : '' }}">
                                        <input type="hidden" name="price"
                                            value="{{ $firstChannelProduct ? $firstChannelProduct->price1 : '' }}">
                                        <input type="hidden" name="name" value="{{ $product->name }}">
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit"
                                            class="flex items-center px-10 py-2 space-x-2 text-white bg-blue-700 rounded-full">
                                            <span class="text-sm">ADD TO CART</span>
                                            <img src="{{ asset('img/icon-add-to-cart.png') }}" alt="Add to Cart"
                                                class="w-5 h-5">
                                        </button>
                                    </form>
                                </div>

                            </div>

                            <!-- Content inside the clickable div -->
                            <button type="button"
                                class="flex flex-col items-center justify-center w-full h-full p-4 bg-gray-100 rounded-lg">
                                @if ($product->channelProducts->isNotEmpty())
                                    @php
                                        $first = $product->channelProducts->first();
                                        $first2 = $first->quantity;
                                    @endphp
                                    <p class="mb-2">Remaining Quantity:
                                        {{ $first2 ? number_format((float) $first2, 2) : 'N/A' }}
                                    </p>
                                @endif



                                <div class="flex items-center justify-center flex-grow mb-2">
                                    @if ($product->channelProducts->isNotEmpty())
                                        @php
                                            $firstChannelProduct = $product->channelProducts->first();
                                        @endphp
                                        @if ($firstChannelProduct)
                                            <img src="{{ asset($firstChannelProduct->picture_channel) }}"
                                                alt="Channel Product Image" class="object-contain max-w-full max-h-40">
                                        @else
                                            <p>No image available.</p>
                                        @endif
                                    @else
                                        <p>No channel products available for this product.</p>
                                    @endif
                                </div>
                                <p class="mb-2 text-center">{{ $product->name }}</p>
                                @if ($product->channelProducts->isNotEmpty())
                                    @php
                                        $first = $product->channelProducts->first();
                                        $first1 = $first->price1;
                                    @endphp
                                    <p class="text-center text-red-700">
                                        ₱ {{ $first1 ? number_format((float) $first1, 2) : 'N/A' }}
                                    </p>
                                @endif
                            </button>
                        </div>




                        <!-- Modal Structure -->
                        <div id="addItemModal_{{ $product->id }}"
                            class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50 modal">

                            <div class="w-full max-h-full p-4 overflow-auto bg-white rounded-lg shadow-md md:p-10">
                                <div class="flex flex-col items-center justify-between md:flex-row">



                                    <div class="flex flex-col justify-center mb-5">
                                        @foreach ($product->channelProducts as $channelProduct)
                                            @if ($channelProduct->picture_channel)
                                                <div class="m-2 border-2 h-36 w-36">
                                                    <img src="{{ asset($channelProduct->picture_channel) }}"
                                                        class="object-contain cursor-pointer w-36 h-36 thumbnail"
                                                        data-image="{{ asset($channelProduct->picture_channel) }}"
                                                        alt="Product Image">
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>

                                    <div
                                        class="relative flex items-center justify-center w-full h-full mx-4 bg-gray-100 image-gallery">
                                        <div class="image-container">
                                            @if ($product->channelProducts->isNotEmpty())
                                                @php
                                                    $firstImage = $product->channelProducts->first();
                                                    $imageUrl = asset($firstImage->picture_channel);
                                                @endphp
                                                <img id="mainImage-{{ $product->id }}" src="{{ $imageUrl }}"
                                                    alt="{{ $product->name }}" class="p-20 h- zoomable-image">

                                                <div class="magnifier"></div>
                                            @endif
                                        </div>
                                    </div>


                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const modals = document.querySelectorAll('.modal');

                                            modals.forEach(modal => {
                                                const thumbnails = modal.querySelectorAll('.thumbnail');
                                                const mainImage = modal.querySelector('[id^="mainImage-"]');

                                                thumbnails.forEach(thumbnail => {
                                                    thumbnail.addEventListener('click', function() {
                                                        const imageUrl = this.dataset.image;
                                                        mainImage.src = imageUrl;
                                                    });
                                                });
                                            });
                                        });
                                    </script>


                                    <style>
                                        .image-gallery {
                                            display: flex;
                                            flex-wrap: wrap;
                                        }

                                        .image-container {
                                            position: relative;
                                            margin: 10px;
                                            overflow: hidden;
                                            /* Ensure magnifier does not overflow container */
                                        }

                                        .image-container img {
                                            display: block;
                                            width: 100%;
                                            height: auto;
                                            /* Maintain aspect ratio */
                                        }

                                        .magnifier {
                                            position: absolute;
                                            border: 2px solid #333;
                                            border-radius: 50%;
                                            cursor: none;
                                            width: 250px;
                                            /* Size of the magnifying glass */
                                            height: 250px;
                                            background-repeat: no-repeat;
                                            background-size: cover;
                                            /* Ensure zoomed image covers the magnifier */
                                            display: none;
                                            pointer-events: none;
                                            transform: translate(-50%, -50%);
                                            transition: background-size 0.3s ease, background-position 0.3s ease;
                                            /* Smooth transition */
                                            z-index: 1000;
                                            /* Ensure magnifier appears above other elements */
                                        }

                                        .image-container.active .magnifier {
                                            display: block;
                                        }
                                    </style>
                                    <div class="p-4">
                                        <p class="text-3xl font-bold">{{ $product->name }}</p>
                                        @if ($product->channelProducts->isNotEmpty())
                                            @php
                                                $first = $product->channelProducts->first();
                                                $first1 = $first->price1;
                                                $first2 = $first->quantity;
                                                $firstId = $first->id;
                                            @endphp
                                            <p class="mt-10 text-3xl text-red-700"
                                                id="product-price-{{ $product->id }}">
                                                ₱ {{ $first1 ? number_format((float) $first1, 2) : 'N/A' }}
                                            </p>
                                            <p class="p-3">Remaining Quantity: <span
                                                    id="remaining_quantity_{{ $product->id }}">{{ $first2 ? number_format((float) $first2, 2) : 'N/A' }}</span>
                                            </p>
                                        @endif



                                        <p>{!! $product->description !!}</p>
                                        <div class="my-5">
                                            <ul class="space-y-2">

                                                @foreach ($product->channelProducts as $channelProduct)
                                                    @if (!empty($channelProduct->particulars))
                                                        <li class="flex items-center">
                                                            <input type="checkbox" id="item2_{{ $channelProduct->id }}"
                                                                name="items[]" value="{{ $channelProduct->id }}"
                                                                class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                                                                checked disabled>
                                                            <label for="item2_{{ $channelProduct->id }}"
                                                                class="ml-2 text-gray-700">{{ $channelProduct->particulars }}</label>
                                                        </li>
                                                    @endif
                                                @endforeach



                                            </ul>




                                        </div>
                                        <hr class="my-4 border-t border-gray-300">
                                        <p class="py-1 font-bold">Variant</p>
                                        <div class="grid grid-cols-2 gap-4 pb-2">
                                            @foreach ($product->channelProducts as $channelProduct)
                                                @if ($channelProduct->variant && $channelProduct->price1 && $channelProduct->quantity && $channelProduct->id)
                                                    <label class="flex items-center mb-2 text-xs">
                                                        <input type="radio" name="variant_{{ $product->id }}"
                                                            value="{{ $channelProduct->price1 }}"
                                                            data-price-id="product-price-{{ $product->id }}"
                                                            data-quantity-id="remaining_quantity_{{ $product->id }}"
                                                            data-id-id="channelid_{{ $product->id }}"
                                                            data-quantity="{{ $channelProduct->quantity }}"
                                                            data-id="{{ $channelProduct->id }}"
                                                            onchange="updatePrice(this)" class="mr-2">
                                                        <span>{{ $channelProduct->variant }}</span>
                                                    </label>
                                                @endif
                                            @endforeach
                                        </div>

                                        <script>
                                            function updatePrice(element) {
                                                // Get the selected price and quantity from the radio button
                                                const selectedPrice = element.value;
                                                const selectedQuantity = element.getAttribute('data-quantity');
                                                const selectedId = element.getAttribute('data-id');
                                                console.log('Selected price:', selectedPrice); // Debugging log
                                                console.log('Selected quantity:', selectedQuantity); // Debugging log

                                                // Get the associated price and quantity element IDs from the radio button's data attributes
                                                const priceElementId = element.getAttribute('data-price-id');
                                                const quantityElementId = element.getAttribute('data-quantity-id');
                                                const idElementId = element.getAttribute('data-id-id');
                                                console.log('Price element ID:', priceElementId); // Debugging log
                                                console.log('Quantity element ID:', quantityElementId); // Debugging log

                                                // Update the price and quantity elements with the selected values
                                                if (priceElementId) {
                                                    const priceElement = document.getElementById(priceElementId);
                                                    if (priceElement) {
                                                        priceElement.textContent = '₱ ' + parseFloat(selectedPrice).toFixed(2);
                                                    }
                                                }

                                                if (quantityElementId) {
                                                    const quantityElement = document.getElementById(quantityElementId);
                                                    if (quantityElement) {
                                                        quantityElement.textContent = selectedQuantity ? number_format(parseFloat(selectedQuantity), 2) : 'N/A';
                                                    }
                                                }

                                                if (idElementId) {
                                                    const idElement = document.getElementById(idElementId);
                                                    if (idElement) {
                                                        idElement.value = selectedId; // Set the hidden input's value
                                                    }
                                                }
                                            }

                                            function number_format(number, decimals) {
                                                const fixed = number.toFixed(decimals);
                                                return fixed.replace(/\d(?=(?:\d{3})+\.\d{2}$)/g, '$&,');
                                            }
                                        </script>

                                        <div class="flex flex-col items-center md:flex-row">
                                            <p class="mr-4 font-bold">Quantity</p>
                                            <div class="flex items-center w-40 space-x-4 border-2 rounded-sm h-14">
                                                <button type="button" onclick="decrementQuantity('{{ $product->id }}')"
                                                    class="flex items-center justify-center w-8 h-8 text-gray-700">-</button>
                                                <input type="text" id="quantity_{{ $product->id }}" name="quantity"
                                                    value="1" readonly class="w-12 h-8 text-center rounded-lg">
                                                <button type="button" onclick="incrementQuantity('{{ $product->id }}')"
                                                    class="flex items-center justify-center w-8 h-8 text-gray-700">+</button>
                                            </div>
                                        </div>
                                        <div class="flex flex-col items-center justify-center my-10 md:flex-row">
                                            <form action="{{ route('cart.store') }}" method="POST">
                                                @csrf

                                                <!-- Product ID -->
                                                <input type="hidden" id="channelid_{{ $product->id }}"
                                                    name="product_id" value="{{ $firstId }}">

                                                <!-- Quantity -->
                                                <input type="hidden" name="quantity"
                                                    id="modal_quantity_{{ $product->id }}" value="1">

                                                <div class="flex flex-col items-center justify-center my-10 md:flex-row">
                                                    <!-- Add to Cart Button -->
                                                    <button type="submit" name="action" value="add_to_cart"
                                                        class="flex items-center justify-center w-40 h-10 mr-5 text-white bg-blue-600 rounded-full">
                                                        ADD TO CART
                                                    </button>

                                                    <!-- Buy Now Button -->
                                                    <button type="submit" name="action" value="buy_now"
                                                        class="flex items-center justify-center w-40 h-10 text-blue-700 bg-gray-100 rounded-full">
                                                        BUY NOW
                                                    </button>
                                                </div>
                                            </form>
                                        </div>


                                        <hr class="my-4 border-t border-gray-300">
                                        <div>
                                            <p class="mr-4">Category: <span class="text-gray-200">Home Care</span></p>
                                        </div>
                                        <div class="flex items-center justify-end m-5">
                                            <button
                                                onclick="document.getElementById('addItemModal_{{ $product->id }}').style.display='none'"
                                                class="w-20 h-10 text-white bg-red-500">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="modal_quantity_{{ $product->id }}" name="quantity" value="1">
                    @endforeach




                    <script>
                        document.querySelectorAll('.image-container').forEach(container => {
                            const magnifier = container.querySelector('.magnifier');
                            const img = container.querySelector('img');

                            container.addEventListener('mousemove', (e) => {
                                const {
                                    top,
                                    left,
                                    width,
                                    height
                                } = container.getBoundingClientRect();
                                const x = e.pageX - left - window.scrollX;
                                const y = e.pageY - top - window.scrollY;

                                // Center the magnifier
                                magnifier.style.left = `${x}px`;
                                magnifier.style.top = `${y}px`;

                                // Update magnifier background and position
                                magnifier.style.backgroundImage = `url(${img.src})`;
                                magnifier.style.backgroundSize = `${width * 1.5}px ${height * 1.5}px`; // Adjust zoom level
                                magnifier.style.backgroundPosition =
                                    `-${x * 1.5 - magnifier.offsetWidth / 2}px -${y * 1.5 - magnifier.offsetHeight / 2}px`; // Center the zoomed image
                            });

                            container.addEventListener('mouseenter', () => {
                                container.classList.add('active');
                            });

                            container.addEventListener('mouseleave', () => {
                                container.classList.remove('active');
                            });
                        });
                    </script>




                    <script>
                        function incrementQuantity(productId) {
                            var quantityInput = document.getElementById('quantity_' + productId);
                            var remainingQuantity = parseInt(document.getElementById('remaining_quantity_' + productId).textContent);
                            var newValue = parseInt(quantityInput.value) + 1;

                            // Ensure the new value does not exceed the remaining quantity
                            if (newValue <= remainingQuantity) {
                                quantityInput.value = newValue;
                                document.getElementById('modal_quantity_' + productId).value = newValue;
                            }
                        }

                        function decrementQuantity(productId) {
                            var quantityInput = document.getElementById('quantity_' + productId);
                            var newValue = Math.max(1, parseInt(quantityInput.value) - 1);

                            // Update the quantity input and hidden input
                            quantityInput.value = newValue;
                            document.getElementById('modal_quantity_' + productId).value = newValue;
                        }
                    </script>
                </div>

            </div>

            <div class="px-4 overflow-hidden splide md:px-16" aria-label="Splide Carousel">
                <div class="splide__track">
                    <ul class="splide__list">
                        @foreach ($productpromo as $promo)
                            <li class="splide__slide">
                                <div class="relative h-96" data-aos="fade-right">
                                    <!-- Image container -->
                                    <div class="flex flex-col items-center bg-gray-200">
                                        <img src="{{ asset($promo->picture) }}" class="object-cover w-full h-96"
                                            alt="{{ $promo->title }}">
                                    </div>
                                    <!-- Overlay container -->
                                    <div
                                        class="absolute inset-0 flex flex-col items-start justify-center p-4 duration-300 bg-blue-600 bg-opacity-60 hover:bg-opacity-10">
                                        <p class="text-3xl text-white md:text-6xl">{{ $promo->title }}</p>
                                        <p class="text-xl text-center text-white md:text-3xl">
                                            "{{ $promo->description }}"
                                        </p>
                                        <button
                                            class="px-8 py-3 mt-4 text-white bg-blue-500 border-2 border-blue-500 rounded-full md:px-20">SHOP
                                            NOW</button>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>




            <div class="grid grid-cols-1 gap-4 p-20 md:grid-cols-4 " data-aos="fade-right">
                <div class="flex flex-col items-center ">
                    <img src="{{ asset('img/icon-values-1.png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    <p class="text-center">TOP SELLING</p>
                    <p class="text-center">PRODUCTS</p>
                </div>
                <div class="flex flex-col items-center ">
                    <img src="{{ asset('img/icon-values-2.png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    <p class="text-center">ECO-FRIENDLY</p>
                    <p class="text-center">SOLUTIONS</p>
                </div>
                <div class="flex flex-col items-center ">
                    <img src="{{ asset('img/icon-values-3.png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    <p class="text-center">TRUSTED BY</p>
                    <p class="text-center">PROFESSIONAL</p>
                </div>
                <div class="flex flex-col items-center ">
                    <img src="{{ asset('img/icon-values-4.png') }}" class="w-auto h-auto " alt="Flowbite Logo">
                    <p class="text-center">COMMUNITY AND</p>
                    <p class="text-center">SUPPORT</p>
                </div>
            </div>
            <div class="text-center ">
                <h2 class="text-4xl ">Great Words From People</h2>
                <p class="mt-2 text-blue-700 ">Real Stories from Satisfied Customers</p>
                <div class="flex items-center justify-center mt-2">
                    <hr class="w-20 border-t-4 border-yellow-400 ">
                </div>
            </div>

            <div id="myCarousel" class="px-4 mt-10 splide md:px-16" aria-label="Splide Carousel ">
                <div class="overflow-hidden splide__track">
                    <ul class="splide__list">


                        @foreach ($testimony as $testimony)
                            <li class="splide__slide">
                                <div class="flex justify-center -mb-5"><img src="{{ asset('img/icon-quote.png') }}">
                                </div>

                                <div
                                    class="flex flex-col items-center justify-center text-center border-2 border-blue-800 rounded-md h-80">
                                    <p class="text-2xl">{{ $testimony->testimony }}.</p>
                                </div>

                                <div class="flex flex-col items-center justify-center md:flex-row -mt-28">
                                    <img src="{{ asset($testimony->picture) }}"
                                        class="m-10 border-8 border-gray-300 rounded-full w-28 h-28" alt="Flowbite Logo">
                                    <div>
                                        <p class="font-bold tex-xl">{{ $testimony->customer_name }}.</p>
                                        <p class="block bg-gray-50">Customer</p>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>


            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var splide = new Splide('.splide', {
                        type: 'loop',
                        perPage: 2,
                        gap: '1rem',
                        breakpoints: {
                            768: { // Below 768px (tablet size and smaller)
                                perPage: 1, // Show 1 slide per page on mobile
                                gap: '0.5rem', // Reduce gap on mobile
                            },
                            1024: { // Below 1024px (tablet)
                                perPage: 2, // Show 2 slides per page
                                gap: '1rem',
                            }
                        }
                    });

                    splide.mount();
                });
            </script>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var splide = new Splide('#myCarousel', { // Use the id selector here
                        type: 'loop',
                        perPage: 2,
                        gap: '1rem',
                        breakpoints: {
                            768: { // Below 768px (tablet size and smaller)
                                perPage: 1, // Show 1 slide per page on mobile
                                gap: '0.5rem', // Reduce gap on mobile
                            },
                            1024: { // Below 1024px (tablet)
                                perPage: 2, // Show 2 slides per page
                                gap: '1rem',
                            }
                        }
                    });

                    splide.mount();
                });
            </script>



            <div class="p-10" data-aos="fade-up">
                <div class="py-5">
                    <p class="text-4xl hover:underline">New Blog Posts</p>
                    <div class="ml-48 ">
                        <hr class="w-20 border-t-4 border-yellow-400 ">
                    </div>

                </div>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-4 ">

                    @foreach ($blogs as $blog)
                        <div>
                            <a href="{{ url('blogscategories/' . $blog->id) }}">
                                <div class="relative">
                                    <img src="{{ asset($blog->picture) }}" class="object-cover w-full h-64"
                                        alt="{{ $blog->title }}">
                                    <div
                                        class="absolute inset-0 z-0 flex items-end justify-end duration-300 bg-black bg-opacity-10 hover:bg-opacity-60">
                                        <div
                                            class="w-16 h-16 p-2 m-2 text-sm text-center text-white bg-blue-800 rounded-full">
                                            <p class="font-bold">{{ $blog->created_at->format('d') }}</p>
                                            <p>{{ $blog->created_at->format('M') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="p-5">
                                <p>
                                    <span class="text-sm text-gray-400">By Admin</span> |
                                    <span class="text-blue-600 text-md">{{ $blog->category }}</span>
                                </p>
                                <p class="mb-2 font-semibold">{{ $blog->title }}</p>
                                <a href="{{ url('blogscategories/' . $blog->id) }}"
                                    class="text-sm font-bold text-blue-600 hover:text-blue-800">
                                    Read More →
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>



    <script>
        function incrementQuantity(productId) {
            var quantityInput = document.getElementById('quantity_' + productId);
            var newValue = parseInt(quantityInput.value) + 1;
            quantityInput.value = newValue;
            document.getElementById('modal_quantity_' + productId).value = newValue;
        }

        function decrementQuantity(productId) {
            var quantityInput = document.getElementById('quantity_' + productId);
            var newValue = Math.max(1, parseInt(quantityInput.value) - 1);
            quantityInput.value = newValue;
            document.getElementById('modal_quantity_' + productId).value = newValue;
        }
    </script>
@endsection