@extends('layout.client')
@section('content')


  <!-- shop-area-start -->
  <section class="shop-area-start grey-bg pt-25 pb-200">
    <div class="container">
      <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12">
          <div class="tpshop__details">


            <div class="col-xl-12 col-lg-12 col-md-12">
              <div class="tpshop__top ml-60">
                <div class="tpshop__banner mb-30" data-background="assets/img/banner/shop-bg-1.jpg"
                  style="background-image: url(&quot;assets/img/banner/shop-bg-1.jpg&quot;);">
                  <div class="tpshop__content text-center">

                    <h4 class="tpshop__content-title mb-20"> <br>Offers</h4>

                  </div>
                </div>

                <section class="shop-area-start grey-bg pb-200">
                  <div class="container">
                    <div class="row">
                      <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="tpshop__details">
                          <div class="col-xl-12 col-lg-12 col-md-12">
                            <div class="tpshop__top">
                              <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active whight-product" id="nav-popular" role="tabpanel"
                                  aria-labelledby="nav-popular-tab">
                                  <div
                                    class="row row-cols-xxl-3 row-cols-xl-3 row-cols-lg-3 row-cols-md-3 row-cols-sm-2 row-cols-2 tpproduct__shop-item">
                                    @foreach ($catproductDetails as $productDetail)
                                      <div class="col" style="z-index: 1;">
                                        <div class="tpproduct p-relative mb-20">
                                          <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="" style="height:200px; width:200px; object-fit:contain;">
                                            </a>
                                            <div class="tpproduct__info bage">
                                              <span
                                                class="tpproduct__info-discount bage__discount">{{ $productDetail->offerpercentage }}%</span>

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

                                            </div>

                                            <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">
                                                <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>
                            </div>
                            <div class="basic-pagination text-center mt-35"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>



                {{-- <div class="basic-pagination text-center mt-35">
                        <nav>
                           <ul>
                              <li>
                                 <span class="current">1</span>
                              </li>
                              <li>
                                 <a href="blog.html">2</a>
                              </li>
                              <li>
                                 <a href="blog.html">3</a>
                              </li>
                              <li>
                                 <a href="blog.html">
                                    <i class="icon-chevrons-right"></i>
                                 </a>
                              </li>
                           </ul>
                         </nav>
                     </div>    --}}
              </div>
            </div>

            <div class="basic-pagination text-center mt-35">


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