@extends('frontend.layouts.navBar')

@section('content')
    <style>
        .section.produit {

            padding-top: 0;
        }

        .container.produit {
            max-width: 1659px;
            margin-top: 96px;
            margin-bottom: 96px;

        }
    </style>



    <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 produit section-xxl bg-default text-md-left">
            <div class="container produit">
                <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">Recherche...</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">


                        @if ($category)
                            {{ $category->nom }}
                        @endif
                        <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