@extends('layout.client')
@section('contentstyle')
    <style>
        .tpproduct__content{
            height:145px;
        }
        .secpadd {
            padding-top: 50px;
            padding-bottom: 5px;
        }

        .tpslider__five__title {
            font-size: 55px
        }

        .header__logo img {
            width: 60px
        }

        @media screen and (orientation: landscape) {
            .carousel-item img {
                height: 100vh;
            }
        }

        /* .carousel-item img{height:100vh}  */
        .tpslider__five__brand img {
            width: 140px;
            height: 156px;
        }

        .tpslider__five__title h3 {
            font-size: 50px
        }

        @media only screen and (max-width: 360px) {

            /* Add your styles for small screens here */
            .tpslider__five__title {
                font-size: 15px;
            }

            .tpslider__five__title h3 {
                font-size: 15px
            }

            .carousel-caption p {
                display: none;
            }

            .tpslider__five__brand img {
                width: 90px;
                height: 90px;
            }

        }
    </style>
@endsection
@section('content')
    <section>

        <div id="carouselExampleCaptions" class="carousel slide">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>

            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ URL::asset('assets/img/banner/lady.jpeg') }}" alt="" class="d-block w-100"
                        alt="...">
                    <div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
                        <!-- <div class="tpslider__five__brand mb-10">
                            <img src="assets/img/logo/nadan.png" alt="logo">
                        </div> -->

                        <h3 class="tpslider__five__title mb-25">KISAN

                            SPICES>
                        <p class=" bg-dark bg-opacity-50 py-2 px-4" style="color:white;">At Kisan Spices, we bring you the finest selection of spices, nuts, honey, millets, and more, sourced directly from trusted farmers and suppliers. Our mission is to deliver nature’s purest and most authentic flavors to your kitchen, ensuring every product is fresh, natural, and packed with wholesome goodness.
                        <a href="{{ route('allproductspage') }}" class="btn btn-outline-light px-4 py-2 rounded-0">Shop
                            Now</a>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="{{ URL::asset('assets/img/banner/sweetpota.jpg') }}" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
                        <div class="tpslider__five__brand mb-10">
                            <img src="assets/img/logo/nadan.png" alt="logo">
                        </div>
                        <h3 class="tpslider__five__title mb-25">KISANr> SPICES/h3>



                        <p class=" bg-dark bg-opacity-50 py-2 px-4" style="color:white";>At Kisan Spices, we bring you the finest selection of spices, nuts, honey, millets, and more, sourced directly from trusted farmers and suppliers. Our mission is to deliver nature’s purest and most authentic flavors to your kitchen, ensuring every product is fresh, natural, and packed with wholesome goodness.
                        <a href="{{ route('allproductspage') }}" class="btn btn-outline-light px-4 py-2 rounded-0">Shop
                            Now</a>
                    </div>
                </div>

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                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="#carouselExampleCaptions"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>



    </section>
    {{-- test --}}
    <section class="blog-area pb-30">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center pt-50">
                    <div class="tpsection mb-35">
                        <h4 class="tpsection__sub-title">~Our Categories ~</h4>
                        <h4 class="tpsection__title">Our Categories</h4>
                        <p>At Kisan Spices, we bring you the finest selection of spices, nuts, honey, millets, and more, sourced directly from trusted farmers and suppliers. Our mission is to deliver nature’s purest and most authentic flavors to your kitchen, ensuring every product is fresh, natural, and packed with wholesome goodness.
                    </div>
                </div>
            </div>
            <div
                class="swiper-container tpblog-active swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">

                <div class="swiper-wrapper" id="swiper-wrapper-de107e9c4db1071aa9" aria-live="off"
                    style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">

@foreach ( $categories as $category)
                    <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 8"
                        style="width: 262.5px; margin-right: 20px;">
                        <div class="tpblog__item">
                            <div class="tpblog__thumb fix">
                                <a href="{{route('singleproductspage',$category->id)}}"><img src="{{URL::asset('storage/category/'.$category->image)}}" alt="" style="width:263px;height:175px;"></a>
                            </div>
                            <div class="tpblog__wrapper">

                                <h4 class="tpblog__title"><a href="#">{{$category->name}}</a></h4>
                            </div>
                        </div>
                    </div>



                    @endforeach

                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
    </section>

    <section class="weekly-product-area grey-bg pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center pt-60">
                    <div class="tpsection mb-20">
                        <h4 class="tpsection__sub-title">~ Special Products ~</h4>
                        <h4 class="tpsection__title"><a href="{{route('offerspage')}}"> Top Offers </a></h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="tpnavtab__area pb-40">

                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-all" role="tabpanel"
                                aria-labelledby="nav-all-tab" tabindex="0">
                                <div class="tpproduct__arrow p-relative">
                                    <div class="swiper-container tpproduct-active tpslider-bottom p-relative">
                                        <div class="swiper-wrapper">

                                            @foreach ($catproductDetails as $productDetail)
                                            <div class="swiper-slide">
                                                <div class="tpproduct p-relative">
                                                    <div class="tpproduct__thumb p-relative text-center">
                                                        <a href="{{route('offerspage')}}"> <img src="{{ URL::asset('storage/items/' . $productDetail->product->image1) }}"
                                                                alt="" style="height:120px;"></a>

                                                        <div class="tpproduct__info bage">
                                                            <span
                                                                class="tpproduct__info-discount bage__discount">{{ $productDetail->offerpercentage }}%</span>

                                                        </div>

                                                    </div>
                                                    <div class="tpproduct__content">
                                                        {{-- <span class="tpproduct__content-weight">
                                                            <a href="#">Fresh </a>
                                                        </span> --}}
                                                        <h4 class="tpproduct__title">
                                                            <a href="#">{{ $productDetail->product->name }}</a>
                                                        </h4>

                                                        <div class="tpproduct__price">
                                                            <span>{{ $productDetail->offerprize }}</span>
                                                            <del>{{ $productDetail->mrp }}</del>
                                                        </div>
                                                        <div
                                                            class="tpproduct__hover-btn d-flex justify-content-center mb-10">
                                                            <a class="tp-btn-2" href="{{ route('loginpage') }}">Add to
                                                                cart</a>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>

                                            @endforeach

                                        </div>
                                    </div>
                                    <div class="tpproduct-btn">
                                        <div class="tpprduct-arrow tpproduct-btn__prv"><a href="#"><i
                                                    class="icon-chevron-left"></i></a></div>
                                        <div class="tpprduct-arrow tpproduct-btn__nxt"><a href="#"><i
                                                    class="icon-chevron-right"></i></a></div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="tpproduct__all-item text-center">
                        <h2>Discover thousands of other quality products.

                        </h2>

                    </div>
                    <div class="tpproduct__hover-btn d-flex justify-content-center mb-10">
                        <a class="tp-btn-2" href="{{ route('allproductspage') }}">Shop All Products </a>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- product-area-end -->

    <!-- product-coundown-area-start -->
    <section class="product-coundown-area tpcoundown__bg grey-bg pb-25"
        data-background="{{ URL::asset('assets/img/banner/cheera.jpg') }}"
        style="background-image: url(&quot;assets/img/banner/cheera.jpg&quot;);">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="tpcoundown p-relative ml-175 secpadd">
                        <div class="section__content mb-35">



                            <div class="row">
                                <div class="col-md-12">
                                    <div class="tpabout__title-img text-center mb-45">
                                        <img src="{{ URL::asset('assets/img/logo/adukkalaorganic.png') }}"><br>

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

                        </div>
                    </div>
                </div>
            </div>
    </section>
    <!-- product-coundown-area-end -->
    <section class="product-feature-area product-feature grey-bg pt-80 pb-40">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <div class="tpfeature__thumb p-relative pb-40">
                        <img src="assets/img/banner/thakkali.jpg" alt="">

                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <div class="tpproduct-feature p-relative pt-5 pb-40">
                        <div class="tpsection tpfeature__content mb-15">
                            <p class="organic">
                                At Kisan Spices, we bring you the finest selection of spices, nuts, honey, millets, and more, sourced directly from trusted farmers and suppliers. Our mission is to deliver nature’s purest and most authentic flavors to your kitchen, ensuring every product is fresh, natural, and packed with wholesome goodness.

Experience the aromatic allure of handpicked spices like cardamom, pepper, cinnamon, and star anise that transform everyday cooking into a gourmet experience. Complement your dishes with the sweetness of natural honey and the rich taste of premium-quality nuts like almonds, cashews, and pistachios.

For those seeking healthier options, our range of millets and dried fruits offers the perfect blend of nutrition and taste. From finger millet to dried cranberries, every product is carefully selected to meet your health and lifestyle needs. Additionally, our freshly ground powders, including turmeric and chili, bring vibrant colors and bold flavors to your meals.

Whether you're creating a hearty home-cooked meal or exploring the art of baking, Kisan Spices is your trusted partner in delivering quality ingredients that inspire delicious creations. Celebrate the richness of nature with every bite!



                            <p class="organic">For any inquiries or assistance, feel free to contact us. Our team is here to help you with any questions or concerns you may have. We're committed to providing exceptional customer service and ensuring that your experience with Kisan Spices is smooth and enjoyable. Reach out to us today!/p>
                        </div>
                        <div class="row">
                            {{-- <div class="col-lg-6 col-md-6">
                                <div class="tpfeature__btn">
                                    <a class="tp-btn-4" href="#">Register Here</a>
                                </div>
                            </div> --}}
                            <div class="col-lg-6 col-md-6">

                                <div class="tpfeature__btn">
                                    <a class="tp-btn-3" href="">
                                        <i class="fab fa-whatsapp"></i> Whatsapp
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>
    </section>
    <!-- blog-area-start -->

    <section class="banner-area pb-60 pt-60 grey-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="tpbanner__item mb-30">

                        <div class="tpbanner__content dataimg"
                            data-background="{{ URL::asset('assets/img/catimg/pic1.PNG') }}">

                        </div>

                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="tpbanner__item mb-30">
                        <div class="tpbanner__content dataimg"
                            data-background="{{ URL::asset('assets/img/catimg/pic2.PNG') }}">

                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="tpbanner__item mb-30">

                        <div class="tpbanner__content dataimg"
                            data-background="{{ URL::asset('assets/img/catimg/pic3.PNG') }}">


                        </div>
                        </a>
                    </div>
                </div>
            </div>
            <p class="organic">kisan spices</p>


        </div>
    </section>
    <section class="testimonial-area tptestimonial__bg pt-80 pb-55 p-relative">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="tpsection mb-35">
                        <h4 class="tpsection__sub-title">~ Happy Customer ~</h4>
                        <h4 class="tpsection__title">People says about kisan Spices</h4>

                    </div>
                </div>
            </div>
            <div class="swiper-container tptestimonial-active3 p-relative">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="row justify-content-center p-relative">
                            <div class="col-md-12">
                                <div class="tptestimonial__item text-center mb-30">
                                    <div class="tptestimonial__avata mb-25">
                                        <img src="{{ URL::asset('assets/img/about/avatar.jpg') }}" alt="">
                                    </div>
                                    <div class="tptestimonial__content tptestimonial__content2">
                                        <p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                            Ipsum has been the industry's standard dummy text ever since the 1500s. "
                                        </p>

                                        <h4 class="tptestimonial__title">Name</h4>
                                        <span class="tptestimonial__avata-position">Designation</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="row justify-content-center p-relative">
                            <div class="col-md-12">
                                <div class="tptestimonial__item text-center mb-30">
                                    <div class="tptestimonial__avata mb-25">
                                        <img src="{{ URL::asset('assets/img/about/avatar.jpg') }}" alt="">
                                    </div>
                                    <div class="tptestimonial__content tptestimonial__content2">
                                        <p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                            Ipsum has been the industry's standard dummy text ever since the 1500s. "
                                        </p>

                                        <h4 class="tptestimonial__title">Name</h4>
                                        <span class="tptestimonial__avata-position">Designation</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="row justify-content-center p-relative">
                            <div class="col-md-12">
                                <div class="tptestimonial__item text-center mb-30">
                                    <div class="tptestimonial__avata mb-25">
                                        <img src="{{ URL::asset('assets/img/about/avatar.jpg') }}" alt="">
                                    </div>
                                    <div class="tptestimonial__content tptestimonial__content2">
                                        <p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                            Ipsum has been the industry's standard dummy text ever since the 1500s. "
                                        </p>

                                        <h4 class="tptestimonial__title">Name</h4>
                                        <span class="tptestimonial__avata-position">Designation</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </section>
    <!-- blog-area-end -->
@endsection