@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="/">Accueil</a></li>
          <li class="active">Produit</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">
                          <a href="{{route('produits.index', ['categorieId'=>$categorie])}}" style="    color: #464c52;">{{$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="{{route('produits.search')}}" method="GET">
                      <div class="form-wrap">
                        <input class="form-input" id="search-form" type="text" name="q" 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="{{route('produit.show', ['id'=> $produit])}}">{{$produit->nom}}</a></h5>
                   
                  
                  @if($produit->promotion)
                  @foreach($promotions as $promotion )
                <span class="product-badge product-badge-sale">{{$promotion->remise}}</span>
                @endforeach
                  @endif
                    
                    
                     
                </div>
               
                <div class="product-button-wrap mt-4">
                  <div class="product-button"><a class="button button-secondary button-zakaria " href="{{route('produit.show', ['id'=> $produit])}}"><i class="fa-solid fa-plus" style="color: grey; text-align:center"></i></a></div>
                 
                </div>
              </article>
            </div>
            
           
            @endforeach
           
            
           
           
          </div>
          <div class="pagination-wrap">
            <!-- Bootstrap Pagination-->
            {!! $produits->links()!!}
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

@endsection