@extends('frontend.layouts.navBar')

@section('content')




    <div class="page">
<section class="breadcrumbs-custom">
    <div class="parallax-container" data-parallax-img="{{asset('frontend/images/bg-shop.jpg')}}">
      <div class="breadcrumbs-custom-body parallax-content context-dark">
        <div class="container">
          <h2 class="breadcrumbs-custom-title">Shop</h2>
        </div>
      </div>
    </div>
    <div class="breadcrumbs-custom-footer">
      <div class="container">
        <ul class="breadcrumbs-custom-path">
          <li><a href="index.html">Home</a></li>
          <li class="active">Shop</li>
        </ul>
      </div>
    </div>
  </section>
  <!-- Section Shop-->
  <section class="section section-xxl bg-default text-md-left">
    <div class="container">
      <div class="row row-50">
        
              <!-- RD Search Form-->
              <div class="col-lg-4 col-xl-3">
                <div class="aside row row-30 row-md-50 justify-content-md-between">
                  
                  <div class="aside-item col-sm-6 col-md-5 col-lg-12">
                    <h6 class="aside-title">Categories</h6>
                    <ul class="list-shop-filter">
                      @foreach($categories as $categorie)
                      <li>
                        <label class="checkbox-inline">
                          <input name="input-group-radio" value="checkbox-1" type="checkbox"> {{$categorie->nom}}<a>
                        </label><span class="list-shop-filter-number">({{ $categorie->produits->count() }})</span>
                      </li>
                      @endforeach
                      
                      
                      
                    </ul>
                    <!-- RD Search Form-->
                    <form class="rd-search form-search" action="search-results.html" method="GET">
                      <div class="form-wrap">
                        <input class="form-input" id="search-form" type="text" name="s" autocomplete="off">
                        <label class="form-label" for="search-form">Search the shop...</label>
                        <button class="button-search fl-bigmug-line-search74" type="submit"></button>
                      </div>
                    </form>
                  </div>
                  
                </div>
              </div>
        <div class="col-lg-8 col-xl-9">
          
          <div class="row row-30 row-lg-50">
            @foreach ($produits as $produit)
                
           
            <div class="col-sm-6 col-md-4 col-lg-6 col-xl-4">
              <!-- Product-->
              <article class="product">
                <div class="product-body">
                  <div class="product-figure"><img src="{{ asset('storage/image/'.$produit->image) }}" alt="" width="220" height="160"/>
                     </div>
                  <h5 class="transform-none product-title"><a href="single-product.html">{{$produit->nom}}</a></h5>
                  {{-- <div class="product-price-wrap">
                 
                  </div> --}}
                </div>
                
                {{-- <span class=""></span> --}}
                <div class="product-button-wrap mt-4">
                  <div class="product-button"><a class="button button-secondary button-zakaria fl-bigmug-line-search74" href="single-product.html"></a></div>
                  <div class="product-button"><a class="button button-primary button-zakaria fl-bigmug-line-shopping202" href="cart-page.html"></a></div>
                </div>
              </article>
            </div>
            @endforeach
           
            
           
           
          </div>
          <div class="pagination-wrap">
            <!-- Bootstrap Pagination-->
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item page-item-control disabled"><a class="page-link" href="#" aria-label="Previous"><span class="icon" aria-hidden="true"></span></a></li>
                <li class="page-item active"><span class="page-link">1</span></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item page-item-control"><a class="page-link" href="#" aria-label="Next"><span class="icon" aria-hidden="true"></span></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

@endsection