@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">
       @if (request()->input())
           <h6>{{$produits->total()}} résultat(s) pour la recherche "{{request()->q}}"
       @endif
      </div>
    </div>
  </section>
  <!-- Section Shop-->
  <section class="section section-xxl bg-default text-md-left">
    <div class="container">
      <div class="row row-50">
        <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}}
                  </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>
                  {{-- <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 " 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