@php
    use Carbon\Carbon;
@endphp

@extends('layouts.site')

@section('scripts')

@endsection

@section('page-content')

<!-- ============================ Page Title Start================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/bg2.png)no-repeat;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">

                <h2 class="ipt-title text-light">Notre Boutique</h2>
                <span class="text-light opacity-75">Des Produits Exclusifs Rien Que Pour Vous !</span>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Page Title End ================================== -->


<!-- ============================ All List Wrap ================================== -->
<section class="gray-simple">
    <div class="container">
        <div class="row">
            <!-- Search Sidebar -->


            <div class="col-lg-4 col-md-12 col-sm-12">
                <div class="bg-white rounded mb-3">
                    <div class="sidebar_header d-flex align-items-center justify-content-between px-4 py-3 br-bottom">
                        <h4 class="fs-bold fs-5 mb-0">Filtre</h4>
                        <div class="ssh-header">
                            <a href="javascript:void(0);" class="clear_all ft-medium text-muted">Tout Effacer</a>
                            <a href="#search_open" data-bs-toggle="collapse" aria-expanded="false" role="button" class="collapsed _filter-ico ml-2"><i class="fa-solid fa-filter"></i></a>
                        </div>
                    </div>

                    <!-- Find New Property -->
                    <div class="sidebar-widgets collapse miz_show" id="search_open" data-bs-parent="#search_open">
                        <form method="GET" action="{{ route('site.search_shop') }}">

                            @csrf

                            <div class="search-inner">
                                <div class="filter-search-box px-4 pt-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="keyword" placeholder="Mots-cles..." />
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Localisation, Adresse.." />
                                    </div>
                                </div>

                                <div class="filter_wraps">
                                    <!-- Job categories Search -->
                                    <div class="single_search_boxed px-4 pt-0 br-bottom">
                                        <div class="widget-boxed-header">
                                            <h4>
                                                <a href="#categories" class="ft-medium fs-md" data-bs-toggle="collapse" aria-expanded="true" role="button">Catégories</a>
                                            </h4>
                                        </div>
                                        <div class="widget-boxed-body collapse show" id="categories" data-bs-parent="#categories">
                                            <div class="side-list no-border">
                                                <!-- Single Filter Card -->
                                                <div class="single_filter_card">
                                                    <div class="card-body p-0">
                                                        <div class="inner_widget_link">
                                                            <ul class="no-ul-list filter-list">

                                                                @if($categories->count() > 0)
                                                                    @foreach($categories as $item)
                                                                    <li>
                                                                        <input id="{{ $item->id }}" class="form-check-input" name="categroy_id" type="checkbox" />
                                                                        <label for="{{ $item->id }}" class="form-check-label">
                                                                            {{ $item->libelle }} <b class="text-primary">({{ $item->products->count() }})</b>

                                                                        </label>
                                                                    </li>
                                                                    @endforeach
                                                                @else
                                                                <li>
                                                                    <input id="a1" class="form-check-input" name="ADA" type="checkbox" />
                                                                    <label for="a1" class="form-check-label">Aucune catégorie (0)</label>
                                                                </li>
                                                                @endif

                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                                <div class="form-group filter_button pt-3 pb-3 px-4">
                                    <button type="submit" class="btn btn-primary full-width">Recherche</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>


            </div>
            <!-- Sidebar End -->

            <div class="col-lg-7 col-md-12 col-sm-12">
                <div class="row justify-content-center mb-4">
                    <div class="col-lg-12 col-md-12">
                        <div class="item-shorting-box">
                            <div class="item-shorting clearfix">
                                <div class="left-column"><h4 class="m-sm-0 mb-2">Affichage 1 - 10 de {{ $products->count() }} Resultats</h4></div>
                            </div>
                            <div class="item-shorting-box-right">
                                <div class="shorting-by small">
                                    <select>
                                        <option value="0">10 par Page</option>
                                        <option value="1">20 par Page</option>
                                        <option value="2">50 par Page</option>
                                        <option value="3">10 par Page</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Start All List -->
                <div class="row justify-content-center gx-xl-3 gx-3 gy-4">

                    @if($products->count() > 0)
                        @foreach($products as $item)
                        <!-- Single Item -->
                        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
                            <div class="jobstock-grid-blog">



                                <div class="jobstock-grid-blog-thumb">
                                    <a href="{{ route('site.shop_produit', ['id' => $item->id]) }}">
                                        <img src="{{ asset('storage/' . $item->image) }}" class="img-fluid" style="height: 200px;width:300px;">
                                    </a>
                                </div>
                                <div class="jobstock-grid-blog-body">
                                    <div class="jobstock-grid-body-header">
                                        <div class="jobstock-grid-title">
                                            <h4>
                                                <a href="{{ route('site.shop_produit', ['id' => $item->id]) }}">
                                                    {{ $item->libelle }}
                                                </a>
                                            </h4>
                                        </div>
                                    </div>
                                    <div class="jobstock-grid-body-middle">
                                        <p>{!! Str::limit($item->description, 80, $end='...') !!}</p>
                                        &nbsp;
                                        <p class="text-primary">
                                            <i class="bi bi-piggy-bank"></i>
                                            <strong>{{ $item->price }} XAF</strong>
                                        </p>
                                    </div>
                                    <div class="jobstock-grid-body-footer">
                                        <div class="instructor-corses">
                                            @if($item->category_id)
                                            <span class="featured-text bg-primary">{{ $item->category->libelle }}</span>
                                            @endif
                                        </div>
                                        &nbsp;
                                        <div class="instructor-corses">
                                            <a href="#" class="addCartPlus" id="addCartPlus" data-product-id="{{ $item->id }}">
                                                <span class="badge badge-primary bg-primary">
                                                    <i class="bi bi-cart2"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    @else
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                        <center>
                            <br>
                            <img src="{{ URL::to('assets/img/empty-pana.svg') }}" height="400" width="400" class="align-items-center" />
                            <br><br>
                            <h3>Notre boutique est vide pour le moment !</h3>
                        </center>
                    </div>
                    @endif

                </div>

                <!-- Pagination -->
                {{ $products->links('vendor.pagination.bootstrap-4') }}
            </div>
        </div>
    </div>
</section>
<!-- ============================ All List Wrap ================================== -->




<!-- ============================ Call To Action ================================== -->
<section class="bg-cover primary-bg-dark" style="background:url(assets/img/footer-bg-dark.png)no-repeat;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-10 col-md-12 col-sm-12">

                <div class="call-action-wrap">
                    <div class="sec-heading center">
                        <h2 class="lh-base mb-3 text-light">Devenez un Partenaire<br>JOBBO</h2>
                        <p class="fs-6 text-light">Devenez Partenaire de JOBBO et Développez Votre Activité et Profitez d'une Visibilité Accrue, Accédez à
                            Des Opportunités de Qualité et Rejoignez Une Communauté Dynamique de Clients et de Collaborateurs.</p>
                    </div>
                    <div class="call-action-buttons mt-3">
                        <a href="{{ route('site.register_freelance') }}" class="btn btn-lg btn-dark fw-medium px-xl-5 px-lg-4 me-2">Freelance</a>
                        <a href="{{ route('site.register_entreprise') }}" class="btn btn-lg btn-whites fw-medium px-xl-5 px-lg-4 text-primary">Entreprise</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- ============================ Call To Action End ================================== -->

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->



@endsection