@extends('layout2.clim.header')
@section('content')
    <style>
        .sidebar {
            height: 60vh;
            background-color: #ffb803;
            padding: 20px;
            overflow-y: auto;
        }

        .sidebar .menu {
            border-bottom: 1px solid #ddd;
        }

        .sidebar a {
            text-decoration: none;
            display: block;
            padding: 8px 12px;
            color: #000;
            font-size: 1.2rem;
        }

        .sidebar a:hover {
            background-color: #e9ecef;
            border-radius: 4px;
        }

        .submenu a {
            padding-left: 40px;
            font-size: 1.2rem;
        }

        .img-fixed-height {
            height: 150px;
            object-fit: cover;
            width: 100%;
        }

        @media screen and (max-width : 768px) {
            .img-fixed-height {
                height: 100px;
                object-fit: cover;
                width: 100%;
            }
        }
    </style>

    <!-- Home Section Start -->
    <section class="home-section-2 home-section-bg pt-0 overflow-hidden">
        <div class="container-fluid p-0">
            <div class="row">
                {{-- <div class="col-3 d-none d-md-block p-0">
                    <div class="sidebar">
                        @foreach ($categories as $key => $category)
                            <a class="menu d-flex align-items-center"
                                href="{{ url('/category/' . $category->slug . '/' . $category->id) }}">
                                <img class="rounded me-3" src="{{ url('/storage/' . $category->image) }}" alt=""
                                    width="25">
                                {{ $category->name }}
                            </a>
                        @endforeach
                    </div>
                </div> --}}
                <div class="col-12 p-0">
                    <img src="/assets/images/banner/arifa-banner-v2.jpg" class="img-fluid" loading="lazy" alt=""
                        style="height: 100%">
                </div>
                {{-- <div class="col-12 col-md-9 p-0">
                    <img src="/assets/images/banner/arifa-banner-v2.jpg" class="img-fluid lazyload" alt=""
                        style="height: 100%">
                </div> --}}
                
                <div class="col-12  p-4">
                    <div class="row row-cols-3 row-cols-md-6 g-3 justify-content-center">
                        @foreach ($categories as $key => $category)
                            <div class="col">
                                <a href="{{ url('/category/' . $category->slug . '/' . $category->id) }}">
                                    <div class="card" style="background-color:transparent">
                                        <img src="{{ asset('storage/' . $category->image) }}" loading="lazy"
                                            class="card-img-top img-fixed-height" alt="...">
                                        
                                    </div>
                                    <h5 class="fw-bold text-center py-2">{{ $category->name }}</h5>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Home Section End -->



    <section class="product-section-4">
        <div class="container-fluid">
            <div class="title">
                <h2>New Arrival</h2>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="slider-7_1 arrow-slider img-slider">
                        <button class="slick-prev slick-arrow" aria-label="Previous" type="button"
                            style="">Previous</button>
                        @foreach ($new_arrivalItems as $product)
                            <div>
                                <div class="card h-100 product-box-4">
                                    <img src="{{ url('/storage/' . $product->image) }}" class="card-img-top" loading="lazy"
                                        alt="...">
                                    <div>
                                        <div class="product-detail">
                                            <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}">
                                                <h5 class="name text-title text-center" style="width: 100%;">
                                                    {{ $product->name }}</h5>
                                            </a>
                                            <h5 class="price theme-color d-flex align-items-center justify-content-center">
                                                TK {{ number_format($product->new_price) }}
                                                @if ($product->old_price)
                                                    <del>TK {{ number_format($product->old_price) }}</del>
                                                @endif
                                            </h5>
                                            <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"
                                                    data-bs-toggle="offcanvas" data-bs-target="#cartDrawer"
                                                    onclick="addToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . $product->image) }}')">

                                                    <div class="d-block text-light">Add to Cart</div>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="product-section-4">
        <div class="container-fluid">
            <div class="title">
                <h2>Top Selling Items</h2>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="slider-7_1 arrow-slider img-slider">
                        <button class="slick-prev slick-arrow" aria-label="Previous" type="button"
                            style="">Previous</button>
                        @foreach ($topSellingItems as $product)
                            <div>
                                <div class="card h-100 product-box-4">
                                    <img src="{{ url('/storage/' . $product->image) }}" class="card-img-top" loading="lazy"
                                        alt="...">
                                    <div>
                                        <div class="product-detail">
                                            <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}">
                                                <h5 class="name text-title text-center" style="width: 100%;">
                                                    {{ $product->name }}</h5>
                                            </a>
                                            <h5 class="price theme-color d-flex align-items-center justify-content-center">
                                                TK {{ number_format($product->new_price) }}
                                                @if ($product->old_price)
                                                    <del>TK {{ number_format($product->old_price) }}</del>
                                                @endif
                                            </h5>
                                            <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"
                                                    data-bs-toggle="offcanvas" data-bs-target="#cartDrawer"
                                                    onclick="addToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . $product->image) }}')">

                                                    <div class="d-block text-light">Add to Cart</div>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @foreach ($categories as $category)
        <section class="product-section-4">
            <div class="container-fluid">
                <div class="title">
                    <h2>{{ $category->name }}</h2>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="slider-7_1 arrow-slider img-slider">
                            <button class="slick-prev slick-arrow" aria-label="Previous" type="button"
                                style="">Previous</button>
                            @foreach ($category->products as $product)
                                <div>
                                    <div class="card h-100 product-box-4">
                                        <img src="{{ url('/storage/' . $product->image) }}" class="card-img-top"
                                            loading="lazy" alt="...">
                                        <div>
                                            <div class="product-detail">
                                                <a href="/product/{{ $product->id }}-{{ Str::slug($product->name) }}">
                                                    <h5 class="name text-title text-center" style="width: 100%;">
                                                        {{ $product->name }}</h5>
                                                </a>
                                                <h5
                                                    class="price theme-color d-flex align-items-center justify-content-center">
                                                    TK {{ number_format($product->new_price) }}
                                                    @if ($product->old_price)
                                                        <del>TK {{ number_format($product->old_price) }}</del>
                                                    @endif
                                                </h5>
                                                <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"
                                                        data-bs-toggle="offcanvas" data-bs-target="#cartDrawer"
                                                        onclick="addToCart('{{ $product->id }}', '{{ e($product->name) }}', {{ number_format($product->new_price, 2, '.', '') }}, '{{ url('/storage/' . $product->image) }}')">

                                                        <div class="d-block text-light">Add to Cart</div>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <button class="slick-next slick-arrow" aria-label="Next" type="button"
                                style="">Next</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endforeach


    <!-- Banner Section Start -->
    <section class="banner-section">
        <div class="container-fluid">
            <div class="row gy-lg-0 gy-3">
                <div class="col-lg-8">
                    <div class="banner-contain-3 h-100 pt-sm-5 hover-effect">
                        <img src="/assets/images/grocery/banner/8.png" class="bg-img blur-up" loading="lazy"
                            alt="">
                        <div
                            class="banner-detail banner-p-sm p-center-right position-relative banner-minus-position banner-detail-deliver">
                            <div>
                                <h3 class="fw-bold banner-contain">Safe Delivery to the door</h3>
                                <h4 class="mb-sm-3 mb-2 delivery-contain">Make money on your terms. Anytime and anyhow.
                                </h4>
                                <ul class="banner-list">
                                    <li>
                                        <div class="delivery-box">
                                            <div class="check-icon">
                                                <i class="fa-solid fa-check"></i>
                                            </div>

                                            <div class="check-contain">
                                                <h5>Get live order tracking</h5>
                                            </div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="delivery-box">
                                            <div class="check-icon">
                                                <i class="fa-solid fa-check"></i>
                                            </div>

                                            <div class="check-contain">
                                                <h5>Get latest feature updates</h5>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                {{-- <button class="btn theme-bg-color text-white mt-sm-4 mt-3 fw-bold"
                                    onclick="location.href = 'shop-left-sidebar.html';">Read More</button> --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="banner-contain-3 pt-lg-4 h-100 hover-effect">
                        <a href="javascript:void(0)">
                            <img src="/assets/images/grocery/banner/9.jpg"
                                class="img-fluid social-image blur-up lazyload w-100" loading="lazy" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Banner Section End -->


    <section class="service-section section-b-space">
        <div class="container-fluid">
            <div class="row g-3 row-cols-xxl-5 row-cols-lg-3 row-cols-md-2">
                <div>
                    <div class="service-contain-2">
                        {{-- <svg class="icon-width">
                            <use
                                xlink:href="https://themes.pixelstrap.com/fastkart/assets/svg/svg/service-icon-4.svg#shipping">
                            </use>
                        </svg> --}}
                        <div class="service-detail">
                            <h3>Free Shipping</h3>
                            <h6 class="text-content">Free Shipping world wide</h6>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="service-contain-2">
                        <div class="service-detail">
                            <h3>24 x 7 Service</h3>
                            <h6 class="text-content">Online Service For 24 x 7</h6>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="service-contain-2">

                        <div class="service-detail">
                            <h3>Online Pay</h3>
                            <h6 class="text-content">Online Payment Avaible</h6>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="service-contain-2">

                        <div class="service-detail">
                            <h3>Festival Offer</h3>
                            <h6 class="text-content">Super Sale Upto 50% off</h6>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="service-contain-2">

                        <div class="service-detail">
                            <h3>100% Original</h3>
                            <h6 class="text-content">100% Money Back</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('script')
@endpush