@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - Home</title>
@endpush
@section('main-section')
    <!-- Main Content -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    @if (session()->has('success_message'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Success',
                    text: '{{ session()->get('success_message') }}',
                    icon: 'success',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif

    @if (count($errors) > 0)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Error',
                    html: '<ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
                    icon: 'warning',
                    toast: true,
                    position: 'top-end', // Top-left corner
                    customClass: {
                        popup: 'swal-elongated'
                    },
                    showConfirmButton: false,
                    timer: 3000 // Disappears after 2 seconds
                });
            });
        </script>
    @endif

    <style>
.imgblogcover img {
    max-width: 100%;
    margin: auto;
    max-height: 100%;
    width:auto;
}
    </style>

    <main>
        <!-- Hero Banner Section -->
        <!-- <div class="w-full h-64 md:h-80 yellow-gradient flex items-center justify-center p-4">
            <h1 class="text-3xl md:text-5xl font-extrabold text-blue-900 text-center leading-tight">
                Unleash Your Potential,<br class="hidden md:block"> Fuel Your Performance.
            </h1>
        </div> -->

        <!-- <div class="w-full h-64 md:h-80 relative overflow-hidden"> -->
<div 
    x-data="{ active: 0, total: {{ count($banners) }} }"
    x-init="setInterval(() => { active = (active + 1) % total }, 5000)" 
    class="relative w-full overflow-hidden">

    <!-- Slides -->
    <div class="relative h-[400px]">
        @foreach($banners as $index => $banner)
            <div 
                x-show="active === {{ $index }}" 
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="absolute inset-0">
                
                <!-- Desktop Banner -->
                <a href="{{ $banner->banner_url }}"><img src="{{ asset($banner->banner_image) }}" 
                     class="hidden sm:block w-full" 
                     alt="{{ $banner->banner_title }}"></a>

                <!-- Mobile Banner -->
                 <a href="{{ $banner->banner_url }}"><img src="{{ asset($banner->banner_mobile_image) }}" 
                     class="block sm:hidden w-full  bg-secondary" 
                     alt="{{ $banner->banner_title }}"></a>

                {{-- <div class="absolute bottom-8 left-0 right-0 flex justify-center">
                    <a href="{{ $banner->banner_url ?? '#' }}" 
                       class="bg-blue-600 hover:bg-blue-700 px-4 py-2 text-white rounded-lg shadow-md">
                        Buy Now
                    </a>
                </div> --}}
            </div>
        @endforeach
    </div>

    <!-- Controls -->
    @if(count($banners) > 1)
        <button 
            @click="active = (active - 1 + total) % total"
            class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white px-3 py-2 rounded-full">
            ‹
        </button>
        <button 
            @click="active = (active + 1) % total"
            class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white px-3 py-2 rounded-full">
            ›
        </button>

        <!-- Dots -->
        <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
            @foreach($banners as $index => $banner)
                <button 
                    @click="active = {{ $index }}"
                    :class="active === {{ $index }} ? 'bg-white w-4 h-4' : 'bg-gray-400 w-3 h-3'"
                    class="rounded-full transition-all duration-300"></button>
            @endforeach
        </div>
    @endif
</div>




        <!-- Main Categories Section (Half on banner) -->
        {{-- <div class="container mx-auto px-4 -mt-12 md:-mt-16 relative z-10"> --}}
        <div class="container mx-auto px-4 mt-8 relative z-10">
            <div class="bg-white p-6 rounded-2xl shadow-xl border border-slate-200">
                <h2 class="text-xl md:text-2xl font-bold mb-6 text-center md:text-left">Top Categories</h2>
                <div class="relative flex items-center">
                    <!-- Left Arrow Button -->
                    <button id="scroll-left"
                        class="absolute left-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors  items-center justify-center" style="display:flex;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-chevron-left">
                            <path d="m15 18-6-6 6-6" />
                        </svg>
                    </button>
                    <!-- Category Scroll Container -->
                    <div id="category-container"
                        class="flex flex-nowrap md:grid md:grid-cols-6 lg:grid-cols-7 gap-4 md:gap-6 overflow-x-auto category-scroll-container flex-1">
                        <!-- Category Card 1 -->
                        @foreach ($cartegory as $cartegorys)
                            <form method="GET" action="/our-product-search">
                                <input type="hidden" name="category" value="{{ $cartegorys->category_name }}">
                                <button type="submit"
                                    class="flex-none w-40 text-center block category-icon-bg p-2 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 transform hover:scale-105">
                                    <img src="{{ $cartegorys->banner_image }}" alt="{{ $cartegorys->category_name }}"
                                        class="w-20 h-20 mx-auto rounded-full object-cover">
                                    <p class="mt-2 text-xs font-medium truncate">{{ $cartegorys->category_name }}</p>
                                </button>
                            </form>
                        @endforeach

                    </div>
                    <!-- Right Arrow Button -->
                    <button id="scroll-right"
                        class="absolute right-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors  items-center justify-center" style="display:flex">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-chevron-right">
                            <path d="m9 18 6-6-6-6" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>




        <div class="container mx-auto px-4 py-8">
            <!-- Featured Products by Category -->
            <section class="space-y-12">


        @foreach ($feedsWithProducts->where('display_order', 1) as $feed)
    @if ($feed->products->count())
        <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200 mt-8 relative">

            <!-- Header -->
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg md:text-xl font-bold">
                    {{ $feed->name ?? 'Featured Products' }}
                </h3>
                <a href="/our-product" class="text-xs font-medium text-blue-700 hover:text-yellow-500">
                    View All &rarr;
                </a>
            </div>

            <!-- Scroll buttons -->
            <button 
                class="scroll-left absolute left-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors flex lg:hidden items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="lucide lucide-chevron-left">
                    <path d="m15 18-6-6 6-6" />
                </svg>
            </button>

            <button 
                class="scroll-right absolute right-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors flex lg:hidden items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="lucide lucide-chevron-right">
                    <path d="m9 18 6-6-6-6" />
                </svg>
            </button>

            <!-- Product List -->
            <div class="flex flex-nowrap overflow-x-auto md:grid md:grid-cols-3 lg:grid-cols-7 gap-4 product-list-container scroll-smooth">
                @foreach ($feed->products as $product)
                    <a href="/product-views/{{ $product->product_url }}">
                        <div
                            class="flex-none w-[180px] md:w-auto p-2 bg-gray-50 rounded-xl shadow-md border border-slate-200 text-center transform transition duration-300 hover:scale-105 hover:border-yellow-400 relative">

                            {{-- Discount --}}
                            @if ($product->sale_price > 0 && $product->price > $product->sale_price)
                                @php
                                    $discount = (($product->price - $product->sale_price) / $product->price) * 100;
                                @endphp
                                <span class="discount-badge">{{ round($discount) }}% OFF</span>
                            @endif

                            {{-- Image --}}
                            <div class="flex-1 flex items-center justify-center overflow-hidden h-[200px] mb-2">
                                <img src="{{ $product->images }}" alt="{{ $product->product_title }}"
                                    class="max-h-full max-w-full object-contain rounded-lg mb-2">
                            </div>

                            {{-- Details --}}
                            <div class="text-left p-2">
                                <h4 class="text-xs font-semibold mb-1">
                                    {{ Str::limit($product->product_title, 25, '...') }}
                                </h4>
                                <p class="text-[0.6rem] text-blue-500 mb-1">{{ $product->title_addition }}</p>
                                <div class="flex items-center gap-1">
                                    @if ($product->price > $product->sale_price)
                                        <span class="text-sm font-bold text-yellow-500">₹{{ $product->sale_price }}</span>
                                    @endif
                                    <span class="text-xs line-through text-slate-400">₹{{ $product->price }}</span>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="d-flex">
                                @if ($product->quantity > 0)
                                    <form action="{{ route('wishlist.remove', $product->id) }}"
                                        method="POST" class="d-inline-block me-2">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btnicon"><i class="fa fa-heart"></i></button>
                                    </form>
                                @endif
                                @if ($product->quantity > 0)
                                    <form action="{{ route('cart.store', $product) }}" method="POST"
                                        class="add-to-cart-form">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <input type="hidden" name="product_price" value="{{ $product->price }}">

                                        <button
                                            class="yellow-gradient add-to-cart-btn w-full text-blue-900 font-bold text-xs py-2 px-4 rounded-full mt-2 shine-effect"
                                            data-product-id="{{ $product->id }}"
                                            data-product-price="{{ $product->price }}"
                                            data-user-email="{{ auth()->user() ? auth()->user()->email : '' }}">
                                            Add to Cart
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
@endforeach

                <!-- Category: Best Sellers -->
                <div class="bg-white p-4 rounded-2xl relative  shadow-xl border border-slate-200 mt-8">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg md:text-xl font-bold">Best Sellers</h3>
                        <a href="/our-product" class="text-xs font-medium text-blue-700 hover:text-yellow-500">View All
                            &rarr;</a>
                    </div>


                     <button id="product-scroll-left"
                        class="absolute left-0 top-1/2 -translate-y-1/2 p-2 bg-white rounded-full shadow-lg z-50 
                            hover:bg-slate-100 transition-colors flex items-center justify-center lg:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-chevron-left">
                            <path d="m15 18-6-6 6-6" />
                        </svg>
                    </button>

                    <div id="product-container" class="flex flex-nowrap md:grid md:grid-cols-3 lg:grid-cols-7 gap-4 product-list-container">



                        @foreach ($products as $product)
                            <!-- <a href="/product-views/{{ $product->product_url }}">     <div class="flex-none w-[180px] md:w-auto p-2 bg-gray-50 rounded-xl shadow-md border border-slate-200 text-center transform transition duration-300 hover:scale-105 hover:border-yellow-400 relative"> -->
                            <a href="/product-views/{{ $product->product_url }}">
                                <div
                                    class="flex-none w-[180px] md:w-auto p-2 bg-gray-50 rounded-xl shadow-md border border-slate-200 text-center transform transition duration-300 hover:scale-105 hover:border-yellow-400 relative">
                                    @if ($product->sale_price > 0 && $product->price > $product->sale_price)
                                        @php
                                            $discount =
                                                (($product->price - $product->sale_price) / $product->price) * 100;
                                        @endphp
                                        <span class="discount-badge">{{ round($discount) }}% OFF</span>
                                    @endif

                                    <div class="flex-1 flex items-center justify-center overflow-hidden h-[200px]  mb-2">
                                        <img src="{{ $product->images }}" alt="{{ $product->product_title }}"
                                            class="max-h-full max-w-full object-contain rounded-lg">
                                    </div>

                                    <!-- <img src="{{ $product->images }}" alt="Omega 3" class="w-full h-auto rounded-lg mb-2"> -->
                                    <div class="text-left p-2">
                                        <h4 class="text-xs font-semibold mb-1">
                                            {{ Str::limit($product->product_title, 25, '...') }}</h4>
                                        <p class="text-[0.6rem] text-blue-500 mb-1">{{ $product->title_addition }}</p>
                                        @if ($product->discount > 0)
                                            @if ($product->price > $product->sale_price)
                                                <span
                                                    class="text-xs line-through text-slate-400">₹{{ $product->sale_price }}</span>
                                            @endif
                                        @else
                                            <div class="flex items-center gap-1">
                                                <!-- <span class="text-xs line-through text-slate-400">₹{{ $product->after_discount }}</span> -->
                                                @if ($product->price > $product->sale_price)
                                                    <span
                                                        class="text-sm font-bold text-yellow-500">₹{{ $product->sale_price }}</span>
                                                @endif
                                                <span
                                                    class="text-xs line-through text-slate-400">₹{{ $product->price }}</span>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="d-flex">
                                        @if ($product->quantity > 0)
                                            <form action="{{ route('wishlist.remove', $product->id) }}" method="POST"
                                                class="d-inline-block me-2">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btnicon"><i class="fa fa-heart"></i></button>
                                            </form>
                                        @endif

                                        @if ($product->quantity > 0)
                                            <form action="{{ route('cart.store', $product) }}" method="POST"
                                                class="add-to-cart-form">
                                                {{ csrf_field() }}
                                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                                <input type="hidden" name="product_price" value="{{ $product->price }}">

                                                <button
                                                    class="yellow-gradient add-to-cart-btn w-full text-blue-900 font-bold text-xs py-2 px-4 rounded-full mt-2 shine-effect"
                                                    data-product-id="{{ $product->id }}"
                                                    data-product-price="{{ $product->price }}"
                                                    data-user-email="{{ auth()->user() ? auth()->user()->email : '' }}">
                                                    Add to Cart
                                                </button>

                                            </form>
                                            
                                        @endif
                                    </div>
                                </div>
                            </a>
                        @endforeach

                        {{-- @foreach ($variants as $product)


                <a href="/product-variant-views/{{$product->product_url}}">   <div class="flex-none w-[180px] md:w-auto p-2 bg-gray-50 rounded-xl shadow-md border border-slate-200 text-center transform transition duration-300 hover:scale-105 hover:border-yellow-400 relative">
                @if ($product->sale_price > 0 && $product->price > $product->sale_price)
                        @php
                            $discount = (($product->price - $product->sale_price) / $product->price) * 100;
                        @endphp
                        <span class="discount-badge">{{ round($discount) }}% OFF</span>
                    @endif

                    <div class="flex-1 flex items-center justify-center overflow-hidden h-[200px]  mb-2">
                                        <!-- <img 
                                            src="{{ $product->images }}" 
                                            alt="{{ $product->product_title }}" 
                                            class="max-h-full max-w-full object-contain rounded-lg"
                                        > -->

                                        <img src="{{$product->picture_url}}" alt="Omega 3" class="max-h-full max-w-full object-contain rounded-lg">

                                    </div>

                           
                            <div class="text-left p-2">
                                <h4 class="text-xs font-semibold mb-1">{{ Str::limit($product->title, 25, '...') }}</h4>
                                <p class="text-[0.6rem] text-blue-500 mb-1">{{$product->additional_title}}</p>
                                @if ($product->discount > 0)
                                <div class="flex items-center gap-1">
                                    <span class="text-xs line-through text-slate-400">₹{{$product->after_discount  }}</span>
                                    <span class="text-sm font-bold text-yellow-500">₹{{$product->price}}</span>
                                </div>
                            @else
                            <div class="flex items-center gap-1">
                                    <span class="text-sm font-bold text-yellow-500">₹{{$product->price}}</span>
                                </div>
                            @endif
                            </div>
                            <button class="yellow-gradient w-full text-blue-900 font-bold text-xs py-2 px-4 rounded-full mt-2 shine-effect">
                                Add to Cart
                            </button>
                            <div class="d-flex">
                                @if ($product->quantity > 0)
                                <form action="{{ route('wishlist.remove', $product->id) }}" method="POST" class="d-inline-block me-2">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btnicon"><i class="fa fa-heart"></i></button>
                                </form>
                                @endif
                                @if ($product->quantity > 0)
                                <form action="{{ route('cart.store', $product) }}" method="POST" class="add-to-cart-form">
                                    {{ csrf_field() }}
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="product_price" value="{{ $product->price }}">

                                    <button class="yellow-gradient add-to-cart-btn w-full text-blue-900 font-bold text-xs py-2 px-4 rounded-full mt-2 shine-effect" data-product-id="{{ $product->id }}" 
                                    data-product-price="{{ $product->price }}" 
                                    data-user-email="{{ auth()->user() ? auth()->user()->email : '' }}">
                                Add to Cart
                            </button>

                                    <!-- <button type="submit" class="btnicon add-to-cart-btn" 
                                        data-product-id="{{ $product->id }}" 
                                        data-product-price="{{ $product->price }}" 
                                        data-user-email="{{ auth()->user() ? auth()->user()->email : '' }}">
                                        <i class="fa fa-shopping-bag"></i>
                                    </button> -->
                                </form>
                                @endif
                                </div>
                        </div></a>
                @endforeach --}}
                    </div>


                     <button id="product-scroll-right"
                        class="absolute right-0 top-1/2 -translate-y-1/2 p-2 bg-white rounded-full shadow-lg z-50 
                            hover:bg-slate-100 transition-colors flex items-center justify-center lg:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="lucide lucide-chevron-right">
                            <path d="m9 18 6-6-6-6" />
                        </svg>
                    </button>

                </div>

                <!-- Category: Exclusive Deals -->




{{-- @foreach ($feedsWithProducts->where('id', '!=', 9) as $feed) --}}
@foreach ($feedsWithProducts->where('display_order', '!=', 1) as $feed)
    @if ($feed->products->count())
        <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200 mt-8 relative">

            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg md:text-xl font-bold">
                    {{ $feed->name ?? 'Featured Products' }}
                </h3>
                <a href="/our-product" class="text-xs font-medium text-blue-700 hover:text-yellow-500">
                    View All &rarr;
                </a>
            </div>

            <button 
                class="scroll-left absolute left-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors flex lg:hidden items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="lucide lucide-chevron-left">
                    <path d="m15 18-6-6 6-6" />
                </svg>
            </button>
            <button 
                class="scroll-right absolute right-0 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-md z-10 hover:bg-slate-100 transition-colors flex lg:hidden items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" class="lucide lucide-chevron-right">
                    <path d="m9 18 6-6-6-6" />
                </svg>
            </button>

            <div class="flex flex-nowrap overflow-x-auto md:grid md:grid-cols-3 lg:grid-cols-7 gap-4 product-list-container scroll-smooth">
                @foreach ($feed->products as $product)
                    <a href="/product-views/{{ $product->product_url }}">
                        <div
                            class="flex-none w-[180px] md:w-auto p-2 bg-gray-50 rounded-xl shadow-md border border-slate-200 text-center transform transition duration-300 hover:scale-105 hover:border-yellow-400 relative">

                            {{-- Discount --}}
                            @if ($product->sale_price > 0 && $product->price > $product->sale_price)
                                @php
                                    $discount = (($product->price - $product->sale_price) / $product->price) * 100;
                                @endphp
                                <span class="discount-badge">{{ round($discount) }}% OFF</span>
                            @endif

                            {{-- Image --}}
                            <div class="flex-1 flex items-center justify-center overflow-hidden h-[200px] mb-2">
                                <img src="{{ $product->images }}" alt="{{ $product->product_title }}"
                                    class="max-h-full max-w-full object-contain rounded-lg mb-2">
                            </div>

                            {{-- Details --}}
                            <div class="text-left p-2">
                                <h4 class="text-xs font-semibold mb-1">
                                    {{ Str::limit($product->product_title, 25, '...') }}
                                </h4>
                                <p class="text-[0.6rem] text-blue-500 mb-1">{{ $product->title_addition }}</p>
                                <div class="flex items-center gap-1">
                                    @if ($product->price > $product->sale_price)
                                        <span class="text-sm font-bold text-yellow-500">₹{{ $product->sale_price }}</span>
                                    @endif
                                    <span class="text-xs line-through text-slate-400">₹{{ $product->price }}</span>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="d-flex">
                                @if ($product->quantity > 0)
                                    <form action="{{ route('wishlist.remove', $product->id) }}"
                                        method="POST" class="d-inline-block me-2">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btnicon"><i class="fa fa-heart"></i></button>
                                    </form>
                                @endif
                                @if ($product->quantity > 0)
                                    <form action="{{ route('cart.store', $product) }}" method="POST"
                                        class="add-to-cart-form">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <input type="hidden" name="product_price" value="{{ $product->price }}">

                                        <button
                                            class="yellow-gradient add-to-cart-btn w-full text-blue-900 font-bold text-xs py-2 px-4 rounded-full mt-2 shine-effect"
                                            data-product-id="{{ $product->id }}"
                                            data-product-price="{{ $product->price }}"
                                            data-user-email="{{ auth()->user() ? auth()->user()->email : '' }}">
                                            Add to Cart
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
@endforeach




            </section>


            <section id="blog" class="mt-10">
                <div class="container-fluid">
                    <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200 relative">
                        <div class="section-title mb-6">
                            <h2 class="text-xl md:text-2xl font-bold">Blogs</h2>
                        </div>
            
                        <!-- Swiper Container -->
                        <div class="swiper myBlogSwiper">
                            <div class="swiper-wrapper">
                                @foreach($blogs as $item)
                                    <div class="swiper-slide">
                                        <a href="/blog/{{ $item->blog_url }}">
                                            <div
                                                class="bg-gray-50 rounded-xl shadow-md border border-slate-200 overflow-hidden hover:scale-105 transition-transform duration-300">
                        
                                                <!-- Thumbnail -->
                                                <div class="h-[160px] w-full overflow-hidden imgblogcover">
                                                    <img src="{{ $item->blog_thumbnail }}"
                                                        alt="{{ $item->banner_title }}"
                                                        class="w-full h-full object-cover">
                                                </div>
                        
                                                <!-- Content -->
                                                <div class="p-3 text-left">
                                                    <div class="text-xs text-slate-500 mb-1 flex items-center gap-1">
                                                        <i class="fa fa-calendar text-yellow-500"></i>
                                                        {{ \Carbon\Carbon::parse($item->created_at)->format('M d, Y') }}
                                                    </div>
                                                    
                                                    <h4 class="text-sm font-semibold mb-1 text-slate-800">
                                                        {{ Str::limit($item->blog_title, 30, '...') }}
                                                    </h4>
                                                    
                                                    <p class="text-xs text-slate-600 mb-2">
                                                        {{ Str::limit($item->blog_description, 80, '...') }}
                                                    </p>
                        
                                                    <div class="text-xs font-bold text-blue-600 flex items-center gap-1 hover:text-yellow-500 transition">
                                                        Read More <i class="fa fa-arrow-right"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
            
                            <!-- Swiper Pagination -->
                            <div class="swiper-pagination mt-4"></div>
            
                            <!-- Swiper Arrows -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
            
            
        </div>
    </main>
@endsection

@section('extrascripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const scrollLeftBtn = document.getElementById('scroll-left');
            const scrollRightBtn = document.getElementById('scroll-right');
            const categoryContainer = document.getElementById('category-container');

            const updateArrowVisibility = () => {
                // Only show arrows on desktop where scrolling is needed
                if (window.innerWidth >= 768) {
                    if (categoryContainer.scrollWidth > categoryContainer.clientWidth) {
                        scrollLeftBtn.classList.remove('hidden');
                        scrollRightBtn.classList.remove('hidden');
                    } else {
                        scrollLeftBtn.classList.add('hidden');
                        scrollRightBtn.classList.add('hidden');
                    }
                } else {
                    // Hide arrows on mobile by default
                    scrollLeftBtn.classList.add('hidden');
                    scrollRightBtn.classList.add('hidden');
                }
            };

            if (scrollLeftBtn && scrollRightBtn && categoryContainer) {
                scrollLeftBtn.addEventListener('click', () => {
                    categoryContainer.scrollBy({
                        left: -200,
                        behavior: 'smooth'
                    });
                });

                scrollRightBtn.addEventListener('click', () => {
                    categoryContainer.scrollBy({
                        left: 200,
                        behavior: 'smooth'
                    });
                });

                // Initial check and check on resize
                updateArrowVisibility();
                window.addEventListener('resize', updateArrowVisibility);
            }
        });


         document.addEventListener('DOMContentLoaded', () => {
        const scrollLeftBtn = document.getElementById('product-scroll-left');
        const scrollRightBtn = document.getElementById('product-scroll-right');
        const productContainer = document.getElementById('product-container');

        const updateArrowVisibility = () => {
            if (window.innerWidth < 768) {
                if (productContainer.scrollWidth > productContainer.clientWidth) {
                    scrollLeftBtn.classList.remove('hidden');
                    scrollRightBtn.classList.remove('hidden');
                } else {
                    scrollLeftBtn.classList.add('hidden');
                    scrollRightBtn.classList.add('hidden');
                }
            } else {
                // Hide arrows on desktop
                scrollLeftBtn.classList.add('hidden');
                scrollRightBtn.classList.add('hidden');
            }
        };

        if (scrollLeftBtn && scrollRightBtn && productContainer) {
            scrollLeftBtn.addEventListener('click', () => {
                productContainer.scrollBy({ left: -200, behavior: 'smooth' });
            });

            scrollRightBtn.addEventListener('click', () => {
                productContainer.scrollBy({ left: 200, behavior: 'smooth' });
            });

            updateArrowVisibility();
            window.addEventListener('resize', updateArrowVisibility);
        }
    });

    document.querySelectorAll('.bg-white').forEach(feed => {
    const container = feed.querySelector('.product-list-container');
    const leftBtn = feed.querySelector('.scroll-left');
    const rightBtn = feed.querySelector('.scroll-right');

    if (container && leftBtn && rightBtn) {
        leftBtn.addEventListener('click', () => {
            container.scrollBy({ left: -200, behavior: 'smooth' });
        });

        rightBtn.addEventListener('click', () => {
            container.scrollBy({ left: 200, behavior: 'smooth' });
        });
    }
});

    </script>


<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".myBlogSwiper", {
        slidesPerView: 1,
        spaceBetween: 15,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            640: { slidesPerView: 2 },
            1024: { slidesPerView: 3 },
            1280: { slidesPerView: 4 }
        }
    });
</script>

@endsection