@extends('layout.client')
@section('content')
  <!-- breadcrumb-area-start -->
  <div class="breadcrumb__area grey-bg pt-5 pb-5">
    <div class="container">
       <div class="row">
          <div class="col-lg-12">
             <div class="tp-breadcrumb__content">
                <div class="tp-breadcrumb__list">
                   <span class="tp-breadcrumb__active"><a href="{{route('homepage')}}">Home</a></span>
                   <span class="dvdr">/</span>
                   <span>Categories/All Products</span>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>
 <!-- breadcrumb-area-end -->

 <!-- shop-area-start -->
 <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="tpshop__category">
                   <div class="swiper-container inner-category-two">
                      <div class="swiper-wrapper">
                        @foreach ( $categories as $category)
                        <div class="swiper-slide">
                           <div class="category__item mb-30">
                              <div class="category__thumb fix mb-15">
                                 <a href="{{route('singleproductspage',$category->id)}}"><img src="{{URL::asset('storage/category/'.$category->image)}}" alt="category-thumb"></a>
                              </div>
                              <div class="category__content">
                                 <h5 class="category__title"><a href="#">{{$category->name}}</a></h5>
                              </div>
                           </div>
                        </div>
                       @endforeach
                        
                      </div>
                   </div>
                </div>
                <div class="product__filter-content mb-30">
                   <div class="row align-items-center">
                      <div class="col-sm-4">
                         <div class="product__item-count">
                            <span>Showing 1 - 18 of 40 Products</span>
                         </div>
                      </div>
                      


                   </div>
                </div>
               
                <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-1 tpproduct__shop-item">
                        @foreach ($products as $product )
                        <div class="col" style="z-index: 1;">
                           <div class="tpproduct p-relative mb-20">
                            
                              <div class="tpproduct__thumb p-relative text-center">
                                 <a href="#"><img src="{{URL::asset('storage/items/'.$product->image1)}}" alt="" style="width:308px;height:190px;"></a>
                                 
                                 
                                
                              </div>
                              <div class="tpproduct__content">
                                 <span class="tpproduct__content-weight">
                                    <a href="#"></a>
                                   
                                 </span>
                                 <h4 class="tpproduct__title">
                                    <b>{{$product->name}}<a href="#"></a></b>
                                 </h4>
                                 
                                 <div class="tpproduct__price">
                                    <span>MRP</span>
                                    <del>Offer Price</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>   
              

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

 
@endsection