@extends('layout2.clim.header')
@section('content')
    <style>
        .category-image-container {
            height: 150px;
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center
        }

        @media screen and (max-width:768px) {
            .category-image-container {
                height: 100px;
            }

        }
    </style>
    <!-- main start -->
    <main id="main-content" class="mb-2">
        <!-- main-slider start -->
        <section class="slider-content">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="home-slider swiper" id="home-slider3">
                            <div class="swiper-wrapper">


                                <div class="swiper-slide">
                                    <div class="slider-image-info">
                                        <div class="slider-image">
                                            <img src="/assets/image/istock3.jpg" class="img-fluid desk-img" alt="slider2">
                                            <img src="/assets/image/istock3.jpg" class="img-fluid mobile-img"
                                                alt="mobile-slider2">
                                        </div>
                                        {{-- <div class="slider-text-content">
                                            <div class="slider-text-info slider-content-right slider-text-right">
                                                <div class="slider-subtitle">
                                                    <span class="text-white">New arrival</span>
                                                </div>
                                                <h2><span class="text-white">Portable pocket speaker off</span></h2>
                                                <a href="{{ route('products') }}" class="btn btn-style">Shop now</a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slider-image-info">
                                        <div class="slider-image">
                                            <img src="/assets/image/istock4.jpg" class="img-fluid desk-img" alt="slider2">
                                            <img src="/assets/image/istock4.jpg" class="img-fluid mobile-img"
                                                alt="mobile-slider2">
                                        </div>
                                        {{-- <div class="slider-text-content">
                                            <div class="slider-text-info slider-content-right slider-text-right">
                                                <div class="slider-subtitle">
                                                    <span class="text-white">New arrival</span>
                                                </div>
                                                <h2><span class="text-white">Portable pocket speaker off</span></h2>
                                                <a href="{{ route('products') }}" class="btn btn-style">Shop now</a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                                {{-- <div class="swiper-slide">
                                    <div class="slider-image-info">
                                        <div class="slider-image">
                                            <img src="/assets/image/istock1.jpg" class="img-fluid desk-img" alt="slider2">
                                            <img src="/assets/image/istock1.jpg" class="img-fluid mobile-img"
                                                alt="mobile-slider2">
                                        </div>
                                        <div class="slider-text-content">
                                            <div class="slider-text-info slider-content-right slider-text-right">
                                                <div class="slider-subtitle">
                                                    <span class="text-dark">New arrival</span>
                                                </div>
                                                <h2><span class="text-dark">Portable pocket speaker off</span></h2>
                                                <a href="{{ route('products') }}" class="btn btn-style">Shop now</a>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="swiper-slide">
                                    <div class="slider-image-info">
                                        <div class="slider-image">
                                            <img src="/assets/image/istock5.jpg" class="img-fluid desk-img" alt="slider1">
                                            <img src="/assets/image/istock5.jpg" class="img-fluid mobile-img"
                                                alt="mobile-slider1">
                                        </div>
                                        {{-- <div class="slider-text-content">
                                            <div class="slider-text-info slider-content-left slider-text-left">
                                                <div class="slider-subtitle">
                                                    <span style="color: #af270c">Unicorn Colour Suitcase </span>
                                                </div>
                                                <h2><span class="text-dark">Welcome To Colour Shop</span></h2>
                                                <a href="{{ route('products') }}" class="btn btn-style">Shop now</a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>

                                <div class="swiper-slide">
                                    <div class="slider-image-info">
                                        <div class="slider-image">
                                            <img src="/assets/image/istock2.jpg" class="img-fluid desk-img" alt="slider2">
                                            <img src="/assets/image/istock2.jpg" class="img-fluid mobile-img"
                                                alt="mobile-slider2">
                                        </div>
                                        {{-- <div class="slider-text-content">
                                            <div class="slider-text-info slider-content-right slider-text-right">
                                                <div class="slider-subtitle">
                                                    <span class="text-white">New arrival</span>
                                                </div>
                                                <h2><span class="text-white">Portable pocket speaker off</span></h2>
                                                <a href="{{ route('products') }}" class="btn btn-style">Shop now</a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>

                            </div>
                            <div class="swiper-buttons">
                                <div class="swiper-buttons-wrap">
                                    <button class="swiper-prev swiper-prev-home-slider"><span><svg viewBox="0 0 24 24"
                                                width="16" height="16" stroke="currentColor" stroke-width="2"
                                                fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                class="css-i6dzq1">
                                                <polyline points="15 18 9 12 15 6"></polyline>
                                            </svg></span></button>
                                    <button class="swiper-next swiper-next-home-slider"><span><svg viewBox="0 0 24 24"
                                                width="16" height="16" stroke="currentColor" stroke-width="2"
                                                fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                class="css-i6dzq1">
                                                <polyline points="9 18 15 12 9 6"></polyline>
                                            </svg></span></button>
                                </div>
                            </div>
                            <div class="swiper-dots">
                                <div class="swiper-pagination swiper-pagination-home-slider"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- main-slider end -->

        <!-- category start -->
        <section class="category-shop section-pt">
            <div class="shop-category">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="section-capture">
                                <div class="section-title">
                                    <h2 data-animate="animate__fadeInUp"><span>Category</span></h2>
                                </div>
                            </div>
                            <div class="category-wrap">
                                <div class="cat-slider swiper" id="category-slider">
                                    <div class="swiper-wrapper">
                                        <div class="row">
                                            @foreach ($categories as $category)
                                                {{-- <div class="swiper-slide" data-animate="animate__fadeInUp"> --}}
                                                <div class="col col-md-2 col-4" data-animate="animate__fadeInUp">
                                                    <div class="cat-info">
                                                        <div class="cat-img-text ">
                                                            <a
                                                                href="{{ url('/category/' . $category->slug . '/' . $category->id) }}">
                                                                <div class="category-image-container border border-dark">
                                                                    <img src="{{ url('/storage/' . $category->image) }}"
                                                                        class="img-fluid rounded"
                                                                        alt="{{ $category->name }}"
                                                                        style="object-fit: cover; width: 100%; height: 100%;">
                                                                </div>
                                                                <div class="cat-title">
                                                                    <span class="cat-text mb-3">{{ $category->name }}</span>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                    </div>
                                </div>
                                <div class="swiper-buttons" data-animate="animate__fadeInUp">
                                    <div class="swiper-buttons-wrap">
                                        <button class="swiper-prev swiper-prev-category"><span><svg viewBox="0 0 24 24"
                                                    width="16" height="16" stroke="currentColor" stroke-width="2"
                                                    fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                    class="css-i6dzq1">
                                                    <polyline points="15 18 9 12 15 6"></polyline>
                                                </svg></span></button>
                                        <button class="swiper-next swiper-next-category"><span><svg viewBox="0 0 24 24"
                                                    width="16" height="16" stroke="currentColor" stroke-width="2"
                                                    fill="none" stroke-linecap="round" stroke-linejoin="round"
                                                    class="css-i6dzq1">
                                                    <polyline points="9 18 15 12 9 6"></polyline>
                                                </svg></span></button>
                                    </div>
                                </div>
                                <div class="swiper-dots">
                                    <div class="swiper-pagination swiper-pagination-category"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- category start -->

        @foreach ($categories as $index => $category)
            <!-- special-product start -->
            <section class="special-product section-pt">
                <div class="collection-category">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="section-capture">
                                    <div class="section-title">
                                        <div class="section-cont-title">
                                            <h2 data-animate="animate__fadeInUp"><span>{{ $category->name }}</span></h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <div class="collection-wrap">
                                    <div class="collection-slider swiper" id="special-product-{{ $index }}">
                                        <div class="swiper-wrapper">
                                            @foreach ($category->products as $product)
                                                <div class="swiper-slide" data-animate="animate__fadeInUp">
                                                    <div
                                                        class="single-product-wrap border border-secondary p-2 rounded d-flex flex-column h-100">
                                                        <div class="product-image banner-hover flex-grow-1 position-relative"
                                                            style="height: 180px; overflow: hidden;">
                                                            <!-- Wishlist Icon -->
                                                            <button
                                                                class="wishlist-btn position-absolute top-0 start-0 m-2 p-0 border-0 bg-transparent"
                                                                onclick="toggleWishlist(this, {{ $product->id }}, '{{ $product->name }}', '{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}', {{ $product->new_price }})"
                                                                title="Add to Wishlist">
                                                                <i
                                                                    class="fa-regular fa-heart fs-5 text-danger wishlist-icon"></i>
                                                            </button>

                                                            <!-- Product Image -->
                                                            <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}"
                                                                class="pro-img h-100 d-block">
                                                                <img src="{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}"
                                                                    class="img-fluid w-100 h-100 object-fit-cover"
                                                                    alt="{{ $product->name }}">
                                                            </a>
                                                        </div>
                                                        <div class="product-content mt-2">
                                                            <div class="product-title" style=" overflow: hidden;">
                                                                <h6 class="m-0">
                                                                    <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}"
                                                                        class="product-title-link text-dark text-decoration-none">
                                                                        {{ $product->name }}
                                                                    </a>
                                                                </h6>
                                                            </div>
                                                            <div class="product-price mt-2">
                                                                <div class="pro-price-box">
                                                                    <span class="new-price fw-bold">TK
                                                                        {{ number_format($product->new_price) }}</span>
                                                                    @if ($product->old_price)
                                                                        <span
                                                                            class="old-price text-muted text-decoration-line-through ms-2">TK
                                                                            {{ number_format($product->old_price) }}</span>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="AddToCart_btn mt-2 d-flex align-items-center justify-content-center">
                                                                <button
                                                                    class="add-button addcart-button btn buy-button text-light primary-color"
                                                                    data-bs-toggle="offcanvas"
                                                                    data-bs-target="#cartDrawer"
                                                                    onclick="AddToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . ($product->thumb_image ?? $product->image)) }}')">

                                                                    <div class="d-block text-light">Add to Cart</div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="swiper-buttons" data-animate="animate__fadeInUp">
                                        <div class="swiper-buttons-wrap">
                                            <button class="swiper-prev swiper-prev-special-{{ $index }}"><span><svg
                                                        viewBox="0 0 24 24" width="16" height="16"
                                                        stroke="currentColor" stroke-width="2" fill="none"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        class="css-i6dzq1">
                                                        <polyline points="15 18 9 12 15 6"></polyline>
                                                    </svg></span></button>
                                            <button class="swiper-next swiper-next-special-{{ $index }}"><span><svg
                                                        viewBox="0 0 24 24" width="16" height="16"
                                                        stroke="currentColor" stroke-width="2" fill="none"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        class="css-i6dzq1">
                                                        <polyline points="9 18 15 12 9 6"></polyline>
                                                    </svg></span></button>
                                        </div>
                                    </div>
                                    <div class="swiper-dots" data-animate="animate__fadeInUp">
                                        <div class="swiper-pagination swiper-pagination-special-{{ $index }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--special-product end -->
        @endforeach
    </main>
    <!-- main end -->


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @foreach ($categories as $index => $category)
                new Swiper('#special-product-{{ $index }}', {
                    loop: false,
                    slidesPerView: 5,
                    spaceBetween: 30,
                    observer: true,
                    observeParents: true,
                    watchSlidesProgress: true,
                    navigation: {
                        prevEl: '.swiper-prev-special-{{ $index }}',
                        nextEl: '.swiper-next-special-{{ $index }}'
                    },
                    pagination: {
                        el: ".swiper-pagination-special-{{ $index }}",
                        clickable: true
                    },
                    autoplay: false,
                    autoplayTimeout: 5000,
                    autoplayHoverPause: true,
                    autoplaySpeed: 250,
                    breakpoints: {
                        0: {
                            slidesPerView: 2,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 12
                        },
                        320: {
                            slidesPerView: 2,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 12
                        },
                        360: {
                            slidesPerView: 2,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 12
                        },
                        540: {
                            slidesPerView: 2,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 12
                        },
                        640: {
                            slidesPerView: 3,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 12
                        },
                        768: {
                            slidesPerView: 3,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 30
                        },
                        1024: {
                            slidesPerView: 4,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 30
                        },
                        1199: {
                            slidesPerView: 5,
                            grid: {
                                rows: 1,
                                fill: 'row'
                            },
                            spaceBetween: 30
                        }
                    }
                });
            @endforeach
        });
    </script>
@endsection