@extends('layout.client')
@section('contentstyle')
   <style>
    .tptestimonial__item {
    min-height: 300px; /* Set a minimum height that suits your design */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space evenly between children */
}
/* .tpproduct__title {

  height: 0px;
  
} */

        .text-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            /* Semi-transparent black */
            padding: 10px;
            color: white;
            /* White text on the overlay */
        }

        @media only screen and (max-width:674px) {
            html {
               overflow-x: hidden;
            }
            .carousel-caption {
                padding-bottom: 150px !important;
                /* Adjusting for mobile screens */
            }
            .swiper-container {
                 overflow: hidden!important;
            }

            .tpblog__item {
                width: 82px !important;
                height: 133px !important;
                 display: flex;
        
        
    flex-direction: column;
    align-items: center;
    text-align: center;
            }

            .tpblog__thumb img {
                width: 80px !important;
                height: 80px !important;
            }

            .tpblog__thumb {
                border-radius: 5px 5px 5px 5px !important;
                width: 75px !important;
                height: 75px !important;
                
                
                display: flex;
    justify-content: center;
            }

            .tpblog__thumb a {
                width: 75px !important;
                height: 75px !important;
            }

            .sub-categories-grid {
                grid-template-columns: repeat(4, 1fr) !important;
                    gap: 0px!important;
                    padding: 0 5px!important;
               
            }
            .tpblog__wrapper {
                  padding: 10px 10px 10px 10px!important;
            }

        }
</style>
@endsection
@section('content')
<section>
    <div id="carouselExampleCaptions" class="carousel slide carousel-sec" data-bs-ride="carousel" data-bs-interval="5000">
        <!-- Carousel Indicators -->
        <div class="carousel-indicators">
            @foreach ($homeBanners as $key => $banner)
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $key }}"
                    class="{{ $key == 0 ? 'active' : '' }} base-controle" aria-current="true"
                    aria-label="Slide {{ $key + 1 }}"></button>
            @endforeach
        </div>

        <!-- Carousel Items -->
        <div class="carousel-inner">
            @foreach ($homeBanners as $key => $banner)
                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                    <!-- Background Image -->
                    <img src="{{ URL::asset('storage/home-banner/' . $banner->background_image) }}"
                        alt="Background Image" class="d-block w-100"  style="height:500px; width:50%;">
                    <!-- Overlay for Better Clarity -->
                    <div class="carousel-overlay"></div>

                    <!-- Carousel Caption -->
                    <div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
                        <div class="container">
                            <!-- Large Screen Layout -->
                            <div class="row d-none d-md-flex align-items-center">
                                <!-- Product Image -->
                                <div class="col-md-4 text-center mb-3">
                                    <img src="{{ URL::asset('storage/home-banner/' . $banner->product_image) }}"
                                        alt="Product Image" class="img-fluid home-b-image">
                                </div>

                                <!-- Product Info -->
                                <div class="col-md-6 text-center text-md-start">
                                    <h2 class="product-name">{{ $banner->product->name }}</h2>
                                    <p class="product-description">{{ $banner->description }}</p>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <a href="{{ route('catproductspage', ['id' => $banner->product->category_id, 'subCategoryId' => $banner->product->sub_category_id ?? null]) }}"
                                                class="btn btn-danger button-1-adjust w-100">Shop Now</a>
                                        </div>
                                        <div class="col-6">
                                            <a href="{{ route('product.info', $banner->product->id) }}"
                                                class="btn btn-primary button-2-adjust w-100">Know More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Small Screen Layout -->
                                   <div class="row d-md-none d-lg-none">
                                <!-- First Row: Product Name -->
                                
                                <!-- Second Row: Split into two columns -->
                                <div class="col-12 small-screen-row-2">
                                    <!-- First Column: Product Image -->
                                    <div class="home-b-image">
                                        <img src="{{ URL::asset('storage/home-banner/' . $banner->product_image) }}"
                                             alt="" class="img-fluid" style="height:100px; width:80px;">
                                    </div>

                                    <!-- Second Column: Product Info -->
                                    <div class="product-info">
                                        <!-- Product Name -->
                                        <h2 class="product-name">{{ $banner->product->name }}</h2>

                                        <!-- Buttons -->
                                        <div class="button-row">
                                            <a href="{{ route('catproductspage', ['id' => $banner->product->category_id, 'subCategoryId' => $banner->product->sub_category_id ?? null]) }}"
                                               class="btn btn-danger button-1-adjust w-100">Shop Now</a>
                                            <a href="{{ route('product.info', $banner->product->id) }}"
                                               class="btn btn-primary button-2-adjust w-100">Know More</a>
                                        </div>
                                    </div>
                                </div>

                                <!-- Third Row: Product Description -->
                                <div class="col-12">
                                    <p class="product-description">{{ $banner->description }}</p>
                                </div>
                            </div>
                            <!-- End small screen layout -->
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <!-- Carousel Controls -->
        <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>



    <!--subcategory section -->
    <section class="blog-area pb-30">
        <div class="container-fluid">
            <div class="row mt-5">
                <div class="col-lg-12 text-center pt-5 mt-5">
                    <div class="tpsection" id="shop-now-button">
                        <h4 class="tpsection__title"> Shop Now </h4>
                    </div>
                </div>
            </div>
            <div class="swiper-container tpblog-active">
                <div class="sub-categories-grid">
                    @foreach ($categories as $category)
                        <div class="sub-category-item">
                            <div class="tpblog__item">
                                <div class="tpblog__thumb fix">
                                    <a
                                        href="{{ route('catproductspage', ['id' => $category->id, 'subCategoryId' => null]) }}">
                                                                  <img class="card-img-top p-1" src="{{ URL::asset('storage/category/' . $category->image) }}" alt="" style="width: 100px; height: 100px;  object-fit: cover;">

                                    </a>
                                </div>

                                <div class="">
                                    <p class="tpblog__title"><a href="{{ route('catproductspage', ['id' => $category->id, 'subCategoryId' => null]) }}">{{ $category->name }}</a></p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
    </section>

    {{-- ---------------- Removed category  ------------- --}}

     <section class="weekly-product-area grey-bg">
        <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('descriptionpage', $productDetail->product->id) }}"><img
                                                            src="{{ URL::asset('storage/items/' . $productDetail->product->image1) }}"
                                                            alt="" class="responsive-image"></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="{{ route('descriptionpage', $productDetail->product->id) }}"
                                                                    class="pname ">{{ $productDetail->product->name }}</a>
                                                            </h4>

                                                            <div class="tpproduct__price pname  pl-3 pb-4">
                                                                           <del> ₹{{ $productDetail->mrp }}</del>
                                                                <span>₹{{ $productDetail->offerprize }}&nbsp;</span>
                                                     
                                                            </div>
                                                            <div
                                                                class="tpproduct__hover-btn d-flex justify-content-center mb-10">
                                                                <form action="{{ route('addtocart') }}" method="POST">
                                                                    @csrf
                                                                    <input type="hidden"
                                                                        value="{{ $productDetail->id }}"
                                                                        name="productdetails_id" id="pdetails_id">
                                                                    <input type="hidden" value="1" name="quantity">
                                                                    <button class="tp-btn-2 " type="submit">Add to
                                                                        Cart</button>
                                                                </form>
                                                            </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>
    </section>
    <!-- product-area-end -->
 <!-- <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="tpsection mt-4 mb-35 pt-3">
                        
                        <h4 class="tpsection__title">Know Our Farmer</h4>
                    </div>
                </div>
            </div> -->
    
   <!-- <section>
        <div id="carouselKnowFarmer" class="carousel slide carousel-sec" data-bs-ride="carousel"
            data-bs-interval="5000">
            <div class="carousel-indicators">
                @foreach ($knowFarmer as $key => $farmer)
                    <button type="button" data-bs-target="#carouselKnowFarmer" data-bs-slide-to="{{ $key }}"
                        class="{{ $key == 0 ? 'active' : '' }} base-controle" aria-current="true"
                        aria-label="Slide {{ $key + 1 }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach ($knowFarmer as $key => $farmer)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <img src="{{ URL::asset('storage/know-farmer/' . $farmer->farm_image) }}" alt="Background Image"
                            class="d-block w-100">
                        <div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
                            <div class="container">
                                <div class="row">
                                   
                               

                                    <div class="col-md-4 col-4 col-lg-4 col-xl-4 farmer-conatinr ">
                                        <img src="{{ URL::asset('storage/know-farmer/' . $farmer->farmer_image) }}"
                                            alt="Farmer Image" class="img-fluid know-farmer-image">
                                    </div>

                                   
                                    <div class="col-md-8  col-8 col-lg-8 col-xl-8 ">
                                        
                                        <div class="row">
                                            <div class="col ">
                                                <h4 class="product-name-farmer  text-overlay">{{ $farmer->name }}</h4>
                                            </div>
                                        </div>

                                        
                                        <div class="row">
                                            <div class="col">
                                                <p class="text-overlay product-description-farmer">{{ $farmer->description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselKnowFarmer"
                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="#carouselKnowFarmer"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section> -->

    {{-- know your farmer end  --}}


    <!-- news-banner-area-start -->
    <!-- <section class="grey-bg news-banner-area pt-55 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">~ News ~</h4>
                        <h4 class="tpsection__title">Discover Our Latest Stories</h4>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center p-relative">
                <div class="col-lg-12">
                    @if($news && $news->news_video)  
                        <div class="news-banner__item text-center mb-30">
                            <video class="news-video" controls>
                                <source src="{{ URL::asset('storage/news/'.$news->news_video) }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    @else
                        <div class="alert alert-warning text-center">
                            No news video has been uploaded yet.
                        </div>
                    @endif
                </div>
            </div>
            <div class="row justify-content-center p-relative">
                <div class="col-lg-12 text-center mt-1"> 
                    <p>Stay connected! Visit our YouTube channel to watch our latest videos ! <a href="https://www.youtube.com/channel/UCA0vf7vasw1D1PvUPVYDGOA" target="_blank" class="youtube-icon">
                        <i class="fab fa-youtube fa-2x"></i> 
                    </a></p>
                </div>
            </div>
        </div>
    </section> -->

    <!-- news-banner-area-end -->

{{-- Health & Wellness Highlights starts  --}}
    <!-- <section>
        <div id="dynamicCarousel" class="carousel slide">
          
            <div class="carousel-indicators">
                @foreach ($highlights as $index => $slide)
                    <button type="button" data-bs-target="#dynamicCarousel" data-bs-slide-to="{{ $index }}"
                        class="{{ $index === 0 ? 'active' : '' }}" aria-current="{{ $index === 0 ? 'true' : 'false' }}"
                        aria-label="Slide {{ $index + 1 }}">
                    </button>
                @endforeach
            </div>

           
            <div class="carousel-inner">
                @foreach ($highlights as $index => $slide)
                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                        <img src="{{ URL::asset('storage/health-wellness/' . $slide->image) }}"
                            alt="Slide {{ $index + 1 }}" class="d-block w-100">
                        <div class="carousel-caption d-flex flex-column h-100 align-items-center justify-content-center">
                           
                            <h6 class="tpslider__five__title mb-25" style="font-size: 1.25rem;">{{ $slide['heading'] }}
                            </h6>

                           
                           <p class="bg-dark_wellness   wellness_description bg-opacity-50 py-2 px-4"
                                style="color:white;  ">
                                {{ $slide['description'] }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>

            
            <button class="carousel-control-prev" type="button" data-bs-target="#dynamicCarousel" data-bs-slide="prev"
                id="prevSlide">
                <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="#dynamicCarousel" data-bs-slide="next"
                id="nextSlide">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section> -->
    {{-- Health & Wellness Highlights ends  --}}


   <!-- blog-area-start -->
<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 pt-60">
                    <div class="tpsection mb-20">
                        <h4 class="tpsection__sub-title">-- What Our Clients Say --</h4>
                        <h4 class="tpsection__title">Reviews </h4>                   
                     </div>
                </div>
            </div>





        <div class="swiper-container tptestimonial-active3 p-relative">
            <div class="swiper-wrapper">

                @foreach($testimonials as $testimonial) <!-- Assuming $testimonials is the array passed from the controller -->
                    <div class="swiper-slide">
                        <div class="row justify-content-center p-relative">
                            <div class="">
                                <div class="tptestimonial__item text-center mb-30">
                                    <div class="tptestimonial__avata mb-25">
                                        <img src="{{ URL::asset('storage/testimonials/' . $testimonial->image) }}" alt="">
                                    </div>
                                    <div class="tptestimonial__content tptestimonial__content2">
                                        <p>"{{ $testimonial->description }}"</p>
                                        <h4 class="tptestimonial__title">{{ $testimonial->name }}</h4>
                                        <span class="tptestimonial__avata-position">{{ $testimonial->designation }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

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


@endsection