@extends('layouts.app')

@section('title', 'Discount Store')

@section('content')

    <section class="pt-lg-5 pt-md-5 pt-3 mt-lg-0 mt-md-5 pb-1">

        <div class="row align-items-start">
            <div class="col-lg-12 col-12 pe-lg-0 mb-4 mb-lg-0">

                <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                                aria-label="Slide 1" aria-current="true"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                                aria-label="Slide 2" class=""></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                                aria-label="Slide 3" class=""></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item max-height1 active" data-bs-interval="10000">
                            <img src="./images/banner-new1.jpg" usemap="#banner-new1-workmap" class="d-block w-100 d-lg-block d-md-block d-none"
                                 alt="...">
                            <img src="./images/banner-m.jpg" class="d-block w-100 d-lg-none d-md-none d-block"
                                 alt="...">

                        </div>
                        <map name="banner-new1-workmap">
                            <area  href="/search" coords="508,300,801,650" shape="rect" title="Shop Now">
                        </map>
                        <map name="banner-2-workmap">
                            <area  href="/search" coords="108,300,400,650" shape="rect" title="Shop Now">
                        </map>
                        <map name="banner-3-workmap">
                            <area  href="/search" coords="108,300,400,650" shape="rect" title="Shop Now">
                        </map>





                        <div class="carousel-item max-height1" data-bs-interval="2000">
                            <img src="./images/banner-2.jpg" usemap="#banner-2-workmap" class="d-block w-100  d-lg-block d-md-block d-none"
                                 alt="...">
                            <img src="./images/banner-m1.jpg" class="d-block w-100 d-lg-none d-md-none d-block"
                                 alt="...">
                        </div>
                        <div class="carousel-item max-height1">
                            <img src="./images/banner-3.jpg" usemap="#banner-3-workmap" class="d-block w-100 d-lg-block d-md-block d-none"
                                 alt="...">
                            <img src="./images/banner-m2.jpg" class="d-block w-100 d-lg-none d-md-none d-block"
                                 alt="...">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                            data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                            data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- ============================================-->
    <!-- ===============Category Mobile View start=============================-->
    <section class="pt-0 pb-0 d-md-none">
        <div class="container-fluid">
            <div class="mb-3 text-end">
                <button type="button" class="view-catagories" id="toggleButton" onclick="toggleSection()">View More</button>
            </div>
            <div class="category-container-small g-4 justify-content-center p-2 row" id='smallSection'>
                
                    @foreach ($categories->take(6) as $category)
                        <div class="col-2 category-box-small {{ $category->slug}}">
                            <a  href="{{ route('search.by-category', $category) }}">{{ $category->name }}</a>
                        </div>
                    @endforeach
            </div>
            <div id="mySection" class="category-container g-4 justify-content-center p-2 row d-none">
                
                    @foreach ($categories as $category)
                        <div class="category-box {{ $category->slug}}">
                            <a  href="{{ route('search.by-category', $category) }}">{{ $category->name }}</a>
                        </div>
                    @endforeach
            </div>
        </div>
    </section>
    <script>
  function toggleSection() {
    console.log('toggles')
    var section = document.getElementById('mySection');
    var small_section = document.getElementById('smallSection');
    var button = document.getElementById('toggleButton');

    if (section.classList.contains('d-none')) {
      section.classList.remove('d-none')
      small_section.classList.add('d-none')
      button.innerText = 'View Less';
    } else {
      
        section.classList.add('d-none')
      small_section.classList.remove('d-none')
      button.innerText = 'View More';
    }
  }
</script>
    <style>
        button.view-catagories {
            border: 0;
            background: no-repeat;
            color: #f04d24;
            border-radius: 10px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 8px;
            letter-spacing: 0.05em;
            font-family:Arial, Helvetica, sans-serif;
            padding-right: 0;
        }
        .category-box-small a {
            color: #fff;
            background: #066eba40;
            font-size:8px;
        }
        .category-container-small {
            display: flex;
            flex-wrap: nowrap;
            gap: 2px;
        }
        .category-box-small {
            background: #0772ba;
            color: white !important;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 11px;
            text-transform: uppercase;
            font-weight: 600;
            margin: 0;            
            flex-basis: 64px;
            background-image: url(https://img.freepik.com/premium-photo/abstract-background-images-wallpaper-ai-generated_643360-46346.jpg);
            background-blend-mode: multiply;
            background-size: cover;
            background-repeat: no-repeat;
            /* background-position-y: 14px; */
        }
        </style>
    <!-- ===============Category Mobile View start=============================-->
    <!-- ===============Category Mobile View start=============================-->
    <style>
        .hiddens {
      display: none;
    }
        .category-box a {
            color: #fff;
            background: #066eba40;
        }
        .category-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
        }

        .category-box {
            background: #0772ba;
            color: white !important;
            border-radius: 18px;
            aspect-ratio: 2/3;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 11px;
            font-size: small;
            text-transform: uppercase;
            letter-spacing: .1em;
            font-weight: 600;
            margin: 0;
            background-image: url(https://images.freeimages.com/images/large-previews/d78/christmas-dogs-1638042.jpg);
            background-blend-mode: multiply;
            background-size: cover;
            background-repeat: no-repeat;
            background-position-y: 14px;
        }
        .category-box.men {
            background-image: url(https://www.discountprice.store/storage/category_image/QVsLBlQNd7yoCScIKEpm8ztTThFMj9KOGNE162An.jpg);
        }
        .category-box.women {
            background-image: url(https://www.discountprice.store/storage/category_image/pU1RoPQYCPadpoJ8XKTyTc5nMSt4KLY1KpXVKs0V.jpg);
        }
        .category-box.baby-products {
            background-image: url(https://www.discountprice.store/storage/category_image/eJS3GY0taDyHQNLj51A4ZVBDerjLGfd0zba30nPv.jpg);
        }
        .category-box.bags-wallets-and-luggage {
            background-image: url(https://www.discountprice.store/storage/category_image/IctJD7o7rnpszRxLeAeswCBU2XKuZqZbYPcMphOM.jpg);
        }
        .category-box.beauty {
            background-image: url(https://www.discountprice.store/storage/category_image/SGteJcWZraK1Ndi2Wfe1lLBf2eaObNjjFecivRYL.jpg);
        }
        .category-box.home-kitchen {
            background-image: url(https://www.discountprice.store/storage/category_image/UcwovXtDzDBc9UVB2bDx9KYmg5oifvkCuvyEDIrk.jpg);
        }
        .category-box.health-personal-care {
            background-image: url(https://www.discountprice.store/storage/category_image/wtfHgZh5wNQIMgH9nNlRU3kiPP8zXKMgxAufnuY7.jpg);
        }
        .category-box.grocery-gourmet-foods {
            background-image: url(https://www.discountprice.store/storage/category_image/EtHVqE49NSmbnWD23PExkaM0mDvllrPuj6j8jvGd.jpg);
        }
        .category-box.electronics {
            background-image: url(https://www.discountprice.store/storage/category_image/q1TiYFVkORmLpuH2jmdGI3aDr2F40RpIvG3wy8yW.jpg);
        }
        .category-box.health-otc {
            background-image: url(https://www.discountprice.store/storage/category_image/J4k7sGoeqdhJMBKcniVjyMAOzdApLJd7RmwHb9WC.jpg);
        }
        .category-box.it-stationery-office-furniture {
            background-image: url(https://www.discountprice.store/storage/category_image/bzyO7SxkM2cUguM0KtCATQSK4fv9OSlJD4tJGShL.jpg);
        }
        .category-box.packaged-foods-dry-fruits {
            background-image: url(https://www.discountprice.store/storage/category_image/U9RIMs4QCbXOnAY2g170ejuczQVU2EzGjBn59k2K.jpg);
        }
        .category-box.cold-drink-juices {
            background-image: url(https://www.discountprice.store/storage/category_image/zB2Eih0uO5OsKf1CHPRCf5dulmkN6crichQiU0zA.jpg);
        }
    </style>

    <!-- ==================Category Mobile View End==========================-->

    <section class="pt-4 pb-4 d-none d-md-block">
        <div class="container-fluid">
            <div class="row g-4 justify-content-center ">
                @if ($categories->count() > 0)
                    @foreach ($categories as $category)
                        <div class="categories-div">
                            <a href="{{ route('search.by-category', $category) }}">
                                <img loading="lazy"
                                    class="img-fluid"
                                    src="{{ asset('storage/' . $category->image) }}" alt="..."></a>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!-- ============================================-->
    <section class="pt-4 pb-4">
        <div class="row g-1 ">

            <div id="carousel-offer" class="carousel carousel-dark slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active " data-bs-interval="10000">
                        <div class="d-flex">
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6 overflow-hidden">
                                <span class="bhrkogumm">
                                    <img class="img-fluid" src="./images/bvvcxbcvxbxvzzasqw.jpg" alt="...">
                                </span>
                            </div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6">
                                <span class="bhrkogumm">
                                    <img class="img-fluid" src="./images/bvvcxbcvxbxvzz.jpg"alt="...">
                                </span>
                            </div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6">
                                <span class="bhrkogumm">
                                    <img class="img-fluid" src="./images/bvvcxbcvxbxvzzasqwxdsx.jpg" alt="...">
                                </span>
                            </div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6">
                                <span class="bhrkogumm">
                                    <img class="img-fluid"src="./images/bvvcxbcvxbxv.jpg" alt="...">
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item" data-bs-interval="20000">
                        <div class="d-flex">
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6 overflow-hidden"><span
                                    class="bhrkogumm"><img class="img-fluid" src="./images/bvvcxbcvxbxvzzasqw.jpg"
                                                           alt="..."></span></div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6"><img class="img-fluid"
                                                                                                   src="./images/bvvcxbcvxbxvzz.jpg"
                                                                                                   alt="..."></div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6"><img class="img-fluid"
                                                                                                   src="./images/bvvcxbcvxbxvzzasqwxdsx.jpg"
                                                                                                   alt="..."></div>
                            <div class="d-flex align-items-center col-lg-3 col-md-3 col-sm-6"><img class="img-fluid"
                                                                                                   src="./images/bvvcxbcvxbxv.jpg"
                                                                                                   alt="..."></div>
                        </div>
                    </div>

                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carousel-offer"
                        data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carousel-offer"
                        data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>


            <!-- <div class="d-flex align-items-center col-2"><img class="img-fluid" src="./images/bvvcxbcvxbxvz.jpg" alt="..."></div>
                        <div class="d-flex align-items-center col-2"><img class="img-fluid" src="./images/bvvcxbcvxbxvzzasqw.jpg" alt="..."></div> -->
        </div>
    </section>


    <?php
    use App\Models\Item;

    ?>

    <section class="pt-4 pb-4">
        <div class="container-fluid">
            <div class="section-header">
                <h3>Best Seller</h3>
                <h1>FEATURED PRODUCTS</h1>
            </div>
            <div class="row mt-3">
                <!-- <div class="col-lg-12 mx-auto text-center mb-5" data-aos="fade-up">
                                  <h5 class="fw-bold fs-3 fs-lg-5 lh-sm"> WOMEN CATEGORIES<span class="line-tt"></span> </h5>
                                </div> -->
                <div class="col-lg-12 col-md-12">
                    <div class="row align-items-center g-2 mt-3">
                        @if ($items->count() > 0)
                            @foreach ($items as $item)
                                <div class="col-md-3 col-lg-2 product-mobile">
                                    <x-item-card :item="$item"/>
                                </div>
                            @endforeach
                        @else
                            <div class="text-center" style="margin-top: 20%;">
                                <h3>No Product Found</h3>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-4 pb-4 d-none">
        <div class="container-fluid">
            <div class="row g-3 justify-content-center ">
                <?php
                $i = 0; ?>
                @if (!empty($offers))
                    @foreach ($offers as $offer)
                        <div class="col-lg-3 col-sm-6" id="offer-12">
                            <a href="#" data-toggle="modal" data-target="#basicModal{{ $offer->id }}">
                                <div class="d-flex">
                                    <div class="left-cupp-md{{ $i }} left-cupp p-3 col-6">
                                        <h6 class="text-white mt-2">
                                            @if (!empty($offer->limit))
                                                Buy Worth {{ $offer->limit }} and
                                            @endif Get @if ($offer->type == 'flat')
                                                Flat Rs.{{ $offer->amount }}
                                            @else
                                                {{ $offer->amount }}%
                                            @endif Off
                                        </h6>
                                        <p class="text-white mb-0" style="font-size:10px;">
                                            @if (!empty($offer->limit))
                                                {{ $offer->limit }} min txn
                                            @else
                                                No min txn
                                            @endif
                                        </p>
                                        @if (!empty($offer->end_date))
                                            <p class="text-white mb-0" style="font-size:10px;">Valid
                                                till {{ date('F, Y', strtotime($offer->end_date)) }}</p>
                                        @endif
                                    </div>
                                    <div class="right-cupp p-3 col-6">
                                        <h5 class="">CODE</h5>
                                        <h5 class="text-danger bbfgded">{{ $offer->name }}</h5>
                                    </div>
                                </div>
                            </a>
                        </div>


                        <div class="modal fade" id="basicModal{{ $offer->id }}" tabindex="-1"
                             style="display: none;" aria-modal="true" role="dialog">
                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header left-cupp-md{{ $i }} border-bottom-0">
                                        <button type="button" class="btn-close bg-white" data-dismiss="modal"
                                                aria-label="Close"></button>
                                    </div>
                                    <div class="px-4 left-cupp-md{{ $i }} mb-3">
                                        <h2 class="text-white text-upercase ">
                                            @if (!empty($offer->limit))
                                                Buy Worth {{ $offer->limit }} and
                                            @endif Get @if ($offer->type == 'flat')
                                                Flat Rs.{{ $offer->amount }}
                                            @else
                                                {{ $offer->amount }}%
                                            @endif Off
                                        </h2>
                                        <p class="text-white text-upercase ">
                                            @if (!empty($offer->limit))
                                                {{ $offer->limit }} min txn
                                            @else
                                                No min txn
                                            @endif
                                        </p>
                                        <div class="modakk-code-priny row p-2 mb-3">
                                            <div class="col-8">
                                                <h6 class="text-white mb-0">CODE: </h6>
                                                <h2 class="text-danger">{{ $offer->name }}</h2>
                                            </div>
                                            <div class="col-4">

                                                <button class="mdllbtnn"
                                                        onclick="copyCodeToClipboard({{ $offer->id }})"
                                                        title="COPY LINK"
                                                        ata-toggle="tooltip">COPY CODE
                                                </button>
                                                <input type="text" class="d-none" id="myInput{{ $offer->id }}"
                                                       value="{{ $offer->name }}"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        <h6>Terms & Conditions</h6>
                                        <p style="font-size:12px;">
                                            • Flat 10% discount on First Order </br>
                                            • Customers have to necessarily use the promo code NIK100</br>
                                            • Max discount that can be availed in a month is Rs.300</br>
                                            • Valid for 25th May of this month</br>
                                            • No minimum transaction value is required to avail the offer</br>
                                            • The final payable amount after the applicable discount will be visible on
                                            the OTP page</br>
                                            • The coupon code will not be applicable if a cart contains any baby food
                                            product</br>
                                            • In case of a partial refund to be processed, the discount amount will be
                                            calculated on a pro-rata basis, with the proportionate discount amount being
                                            subtracted from the refund amount


                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <?php
                        $i = $i + 1; ?>
                    @endforeach
                @endif


                <!-- modal -->

                <div class="modal locamodalpop fade" id="largeModal" tabindex="-1" aria-modal="true" role="dialog"
                     style="display: none; padding-left: 0px;">
                    <div class="modal-dialog modal-md">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Welcome to<span class="far px-2"> DISCOUNT STORE</span></h5>
                            </div>
                            <div class="modal-body">
                                <div class="row">

                                    <div class="col-12">
                                        <p>Please provide your delivery location to see products at nearby store</p>
                                        <button class="btn buttonding w-100" onclick="getLocation()">Detect my
                                            location
                                        </button>
                                        <div class="oval-container mt-2">
                                            <div class="oval">
                                                <span class="separator-text">
                                                    <div class="or">OR</div>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 mt-2">
                                        <input type="search" class="form-control " placeholder="Enter ZIpcode / City">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- modal -->


                {{-- <div class="col-3">
                    <a href="#" data-toggle="modal" data-target="#basicModal">
                      <div class="d-flex">
                        <div class="left-cupp1 p-3 col-6">
                          <h6 class="text-white mt-2">Flat 10% off</h6>
                          <p class="text-white mb-0"style="font-size:10px;">No min txn</p>
                          <p class="text-white mb-0" style="font-size:10px;">Valid till 25 May </p>
                        </div>
                        <div class="right-cupp1 p-3 col-6">
                          <h5 class="">CODE</h5>
                          <h4 class="text-danger bbfgded">NIK100</h4>
                        </div>
                      </div>
                    </a>
                </div>



                <div class="col-3">
                <a href="#" data-toggle="modal" data-target="#basicModal">
                      <div class="d-flex">
                        <div class="left-cupp2 p-3 col-6">
                          <h6 class="text-white mt-2">Flat 10% off</h6>
                          <p class="text-white mb-0"style="font-size:10px;">No min txn</p>
                          <p class="text-white mb-0" style="font-size:10px;">Valid till 25 May </p>
                        </div>
                        <div class="right-cupp2 p-3 col-6">
                          <h5 class="">CODE</h5>
                          <h4 class="text-danger bbfgded">NIK100</h4>
                        </div>
                      </div>
                    </a>
                </div>


                <div class="col-3">
                <a href="#" data-toggle="modal" data-target="#basicModal">
                      <div class="d-flex">
                        <div class="left-cupp3 p-3 col-6">
                          <h6 class="text-white mt-2">Flat 10% off</h6>
                          <p class="text-white mb-0"style="font-size:10px;">No min txn</p>
                          <p class="text-white mb-0" style="font-size:10px;">Valid till 25 May </p>
                        </div>
                        <div class="right-cupp3 p-3 col-6">
                          <h5 class="">CODE</h5>
                          <h4 class="text-danger bbfgded">NIK100</h4>
                        </div>
                      </div>
                    </a>
                </div> --}}


            </div>
        </div>
    </section>


    <!-- modal -->


    <!-- modal -->

    <section class="pt-4 pb-4">
        <div class="container-fluid">
            <div class="section-header "><a href="#">
                    <img loading="lazy" class="img-fluid" src="./images/banner2.jpg"></a>
            </div>
        </div>
    </section>
    <!-- -------------------------------------------------------------------- -->


    <section class="pt-4 pb-7 ">
        <div class="container-fluid">

            <div class="section-header">
                <h3>Best</h3>
                <h1>Trending Brands</h1>
            </div>

            <div class="mt-5 ">

                <div class="trand-div-first text-lg-end text-md-end text-center">
                    <img loading="lazy" class="img-fluid h-100" src="./images/banner-23.jpg">
                </div>
                <div class="trand-div">
                    <div id="carouselExampleDark1" class="carousel carousel-dark slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleDark1" data-bs-slide-to="0"
                                    class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleDark1" data-bs-slide-to="1"
                                    aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleDark1" data-bs-slide-to="2"
                                    aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner mb-5">
                            <div class="carousel-item active" data-bs-interval="10000">
                                <div class="row text-center g-0">
                                    @if ($brands->count() > 0)
                                        @foreach ($brands as $brand)
                                            <div class="col-lg-2 col-md-3 cateogary-mobile p-0">
                                                <figure class="card card-product-grid border mb-0">
                                                    <a href="{{ route('search.by-brand', $brand) }}"
                                                       class="img-wrap-brand">
                                                        <img loading="lazy"
                                                             src="{{ asset('storage/' . $brand->image) }}"
                                                             style="width: 100%;">
                                                    </a>
                                                    <figcaption class="info-wrap" style=" white-space: nowrap; ">
                                                        <p class="text-desk mb-1">{{ $brand->name }}</p>
                                                    </figcaption>
                                                </figure>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="text-center mt-5">
                                            <h3>No Brands to display</h3>
                                        </div>
                                    @endif

                                </div>
                            </div>
                            <div class="carousel-item" data-bs-interval="20000">
                                <div class="row text-center g-0">
                                    @if ($brands->count() > 0)
                                        @foreach ($brands as $brand)
                                            <div class="col-lg-2 col-md-3 cateogary-mobile p-0">
                                                <figure class="card card-product-grid border mb-0">
                                                    <a href="{{ route('search.by-brand', $brand) }}"
                                                       class="img-wrap-brand">
                                                        <img loading="lazy"
                                                             src="{{ asset('storage/' . $brand->image) }}"
                                                             style="width: 100%;">
                                                    </a>
                                                    <figcaption class="info-wrap" style=" white-space: nowrap;">
                                                        <p class="text-desk mb-1">{{ $brand->name }}</p>
                                                    </figcaption>
                                                </figure>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="text-center mt-5">
                                            <h3>No Brands to display</h3>
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-4 pb-4">
        <div class="container-fluid">
            <a href="#">
                <img loading="lazy" class="img-fluid" src="./images/banner99.jpg"></a>
        </div>
    </section>
    @if (auth()->check())

        <section class="pt-4 pb-4">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-lg-2">
                        <div class="mt-4">
                            <h4>Buy It Again</br> <span class="line-seall"> </span></h4>
                        </div>
                        <div class="mt-4">
                            <a href="/category/personal-care" class="hedlogbtn ">See All <i
                                    class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-10">
                        <div class="mt-4">
                            <div class="row align-items-center g-2 mt-3">
                                @if ($recentItems->count() > 0)
                                    @foreach ($recentItems as $item)
                                        <div class="col-md-2 col-lg-2 product-mobile">
                                            <x-item-card :item="$item"/>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center" style="margin-top: 20%;">
                                        <h3>No Product Found</h3>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

    @endif
    @if ($home_items->count() > 0)
    <section class="pt-4 pb-4">
        <div class="container-fluid">
            <div class="row">

                <div class="col-lg-2">
                    <div class="mt-4">
                        <h4>Your Browsing History </br> <span class="line-seall"> </span></h4>
                    </div>
                    <div class="mt-4">
                        <a href="/category/home-care" class="hedlogbtn ">See All <i
                                class="fas fa-arrow-right"></i></a>
                    </div>
                </div>

                <div class="col-lg-10">
                    <div class="mt-4">
                        <div class="row align-items-center g-2 mt-3">
                            @if ($home_items->count() > 0)
                                @foreach ($home_items as $item)
                                    <div class="col-md-3 col-lg-2 product-mobile">
                                        <x-item-card :item="$item"/>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center" style="margin-top: 20%;">
                                    <h3>No Product Found</h3>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    @endif
    <!-- ============================================-->


    <!-- ============================================-->

@endsection

@section('extras')
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>


    {{-- <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script> --}}
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> --}}

    {{-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  --}}
    {{-- <script>
    $(document).ready(function(){

      $(".carousel").carousel({
        //ปิดการเล่น auto
        interval: false,
        pause: true
      });

      $( ".carousel .carousel-inner" ).swipe( {
        swipeLeft: function ( event, direction, distance, duration, fingerCount ) {
          this.parent( ).carousel( 'next' );
        },
        swipeRight: function ( ) {
          this.parent( ).carousel( 'prev' );
        },
        threshold: 0,
        tap: function(event, target) {
          // get the location: in my case the target is my link
          window.location = $(this).find('.carousel-item.active a').attr('href');
        },
        //เอา  a ออกถ้าต้องการให้ slide ที่เป็น tag a สามารถคลิกได้
        excludedElements:"label, button, input, select, textarea, .noSwipe"
      } );

      $('.carousel .carousel-inner').on('dragstart', 'a', function () {
        return false;
      });

    });



    </script> --}}


    <script>
        $(document).ready(function() {

            // document.getElementById('nav-1').classList.add('active');
            $('#offer-12').click(function() {
                $('#basicModal').modal('show');
            });

        });

        // function add_cart(id) {

        //     var cart_no = document.getElementById('cart_no').textContent;

        //     $.ajax({
        //         type: 'Post',
        //         url: '{{ route('add.to.cart') }}',
        //         datatype: 'json',
        //         data: {
        //             '_token': "{{ csrf_token() }}",
        //             'item_id': id,
        //         },
        //         success: function (data) {
        //             const obj = JSON.parse(data);

        //             document.getElementById('cart_div-' + id).classList.add('d-none');
        //             document.getElementById('quantity_div-' + id).classList.remove('d-none');
        //             document.getElementById('cart_no').textContent = parseInt(cart_no) + 1;

        //             setCartCountBadge(parseInt(cart_no) + 1)

        //             // document.getElementById('cart_div' + type + '-' + id).classList.add('d-none');
        //             // document.getElementById('quantity_div' + type + '-' + id).classList.remove('d-none');
        //             //
        //             // Array.from(document.querySelectorAll('#cart_no')).forEach(element => {
        //             //     const currentItemCount = parseInt(element.textContent);
        //             //     element.textContent = currentItemCount + 1;
        //             //
        //             // });
        //         },
        //         complete: function () {
        //         },
        //         error: function () {
        //         },
        //     });

        // }

        function add_favorite(id) {

            $.ajax({
                type: 'Get',
                url: '{{ route('add_favorite') }}',
                datatype: 'json',
                data: {
                    'item_id': id,
                },
                success: function(data) {
                    const obj = JSON.parse(data);

                    document.getElementById('favorite_icon-' + id).classList.add('d-none');
                    document.getElementById('favorite_icon1-' + id).classList.remove('d-none');

                },
                complete: function() {
                },
                error: function() {
                },
            });

        }

        function select_category(id) {
            $.ajax({
                type: 'Get',
                url: '{{ route('welcome') }}',
                datatype: 'json',
                data: {
                    'category_id': id,
                },
                success: function(data) {
                    const obj = JSON.parse(data);
                    $('.nav-link').removeClass('active');
                    const item = $('#category_div');
                    item.empty();
                    if (obj.new.items.length === 0) {
                        item.append('<div class="text-center mt-5 mb-5"><h4>No Product Found</h4></div>');
                    } else {
                        $.each(obj.new.items, function(key, value) {
                            item.append(
                                '<div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100"><div class="card card-span h-100 text-white"><div class="img-style-low"><img loading="lazy" class="img-fluid h-100" src="https://chittarr.com/storage/' +
                                value.image +
                                '" alt="..."/></div><div class="card-img-overlay "></div><div class="card-body  bg-200  bttn"><div class="d-flex"><div class="col-12"><h5 class="fw-bold text-1000 text-truncate" style="text-transform: uppercase;">' +
                                value.name +
                                '</h5></div></div><div class="col-12"><div class="fw-bold"><span class="pink-color">Rs.' +
                                value.price +
                                '</span></div></div></div><a class="stretched-link" href="/item/' +
                                value.slug + '"></a></div></div>');
                        });
                    }

                    document.getElementById('nav-' + id).classList.add('active');

                },
                complete: function() {
                },
                error: function() {
                },
            });

        }

        function copyCodeToClipboard(id) {
            /* Get the text field */
            const copyText = document.getElementById('myInput' + id);

            /* Select the text field */
            copyText.select();
            copyText.setSelectionRange(0, 99999); /* For mobile devices */

            /* Copy the text inside the text field */
            navigator.clipboard.writeText(copyText.value);

            /* Alert the copied text */
            $('#toast').toast('show');
            // $('.toast').toast('show');
        }
    </script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QVB8XG3B3C"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-QVB8XG3B3C');
</script>
@endsection