@section('content')

    <main class="main">
        <div class="page-header text-center" style="background-image: url('{{asset('assets/website/assets/images/page-header-bg.jpg')}}')">
            <div class="container">

            </div><!-- End .container -->
        </div><!-- End .page-header -->
        <nav aria-label="breadcrumb" class="breadcrumb-nav mb-2">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('web.index')}}">House Nutrition</a></li>
                    <li class="breadcrumb-item active"><a href="#">Shop</a></li>
                </ol>
            </div><!-- End .container -->
        </nav><!-- End .breadcrumb-nav -->

        <div class="page-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="toolbox">
                            <div class="toolbox-left">
                                <div class="toolbox-info">
                                    Showing <span>{{$products->count()}} of {{$count}}</span> Products
                                </div><!-- End .toolbox-info -->
                            </div><!-- End .toolbox-left -->


                        </div><!-- End .toolbox -->

                        <div class="products mb-3">
                            <div class="row justify-content-center">
                                @foreach($products as $product)
                                <div class="col-6 col-md-4 col-lg-3">
                                    <div class="product text-center">
                                        <figure class="product-media">
                                            {{--                                            <span class="product-label label-sale">{{ $product->default_image_url }}</span>--}}
                                            <a href="product.html">
                                                <img  loading="lazy" src="{{ $product->default_image_url }}" alt="{{$product->name}}" class="product-image" >
                                            </a>

                                            {{--                                            <div class="product-action-vertical">--}}
                                            {{--                                                <a href="#" class="btn-product-icon btn-wishlist" title="Add to wishlist"><span>add to wishlist</span></a>--}}
                                            {{--                                                <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>--}}
                                            {{--                                                <a href="#" class="btn-product-icon btn-compare" title="Compare"><span>Compare</span></a>--}}
                                            {{--                                            </div><!-- End .product-action-vertical -->--}}

                                            <div class="product-action">
                                                <button  class="btn-product btn-cart addToCart" title="Add to cart"  data-product_id="{{$product->id}}"><span>Acheter</span></button>
                                            </div><!-- End .product-action -->
                                        </figure><!-- End .product-media -->

                                        <div class="product-body">
                                            <div class="product-cat">
                                                <a href="#">{{$product->brand_name}} - {{$product->category_name}}</a>
                                            </div><!-- End .product-cat -->
                                            <h3 class="product-title"><a href="product.html" >{{$product->name}}</a></h3><!-- End .product-title -->
                                            <div class="product-price">
                                                <span class="new-price">{{$product->detail}} TND</span>
                                                {{--                                                <span class="old-price">Was $290.00</span>--}}
                                            </div><!-- End .product-price -->
                                            <div class="ratings-container">
                                                <div class="ratings">
                                                    <div class="ratings-val" style="width: 100%;"></div><!-- End .ratings-val -->
                                                </div><!-- End .ratings -->
                                                <span class="ratings-text"></span>
                                            </div><!-- End .rating-container -->
                                        </div><!-- End .product-body -->
                                    </div><!-- End .product -->
                                </div><!-- End .col-sm-6 col-lg-4 -->
                                @endforeach

                            </div><!-- End .row -->
                        </div><!-- End .products -->
                        {{ $products->links() }}

                    </div><!-- End .col-lg-9 -->

                        <aside class="col-lg-3 order-lg-first">
                            <form action="{{route('web.shop')}}">

                                <div class="sidebar sidebar-shop">
                                <div class="widget widget-clean">
                                    <input type="submit" class="btn btn-outline-primary-2 btn-order btn-block" value="Filtrer">

                                </div><!-- End .widget widget-clean -->

                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title">
                                        <a data-toggle="collapse" href="#widget-1" role="button" aria-expanded="true" aria-controls="widget-1">
                                            Catégorie
                                        </a>
                                    </h3><!-- End .widget-title -->

                                    <div class="collapse show" id="widget-1">
                                        <div class="widget-body">
                                            <div class="filter-items filter-items-count">
                                                @foreach(\App\Helpers\WebHelper::allCategories() as $category)
                                                    <div class="filter-item">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input" id="cat-{{$category->id}}" value="{{$category->id}}" name="categories[]">
                                                            <label class="custom-control-label" for="cat-{{$category->id}}">{{$category->name}}</label>
                                                        </div><!-- End .custom-checkbox -->
                                                        {{--                                                    <span class="item-count">3</span>--}}
                                                    </div><!-- End .filter-item -->
                                                @endforeach



                                            </div><!-- End .filter-items -->
                                        </div><!-- End .widget-body -->
                                    </div><!-- End .collapse -->
                                </div><!-- End .widget -->

                                <div class="widget widget-collapsible">
                                    <h3 class="widget-title">
                                        <a data-toggle="collapse" href="#widget-4" role="button" aria-expanded="true" aria-controls="widget-4">
                                            Brand
                                        </a>
                                    </h3><!-- End .widget-title -->

                                    <div class="collapse show" id="widget-4">
                                        <div class="widget-body">
                                            <div class="filter-items">
                                                @foreach(\App\Helpers\WebHelper::allBrands() as $brand)
                                                    <div class="filter-item">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input" id="brand-{{$brand->id}}" value="{{$brand->id}}" name="brands[]">
                                                            <label class="custom-control-label" for="brand-{{$brand->id}}">{{$brand->name}}</label>
                                                        </div><!-- End .custom-checkbox -->
                                                        {{--                                                    <span class="item-count">3</span>--}}
                                                    </div><!-- End .filter-item -->
                                                @endforeach




                                            </div><!-- End .filter-items -->
                                        </div><!-- End .widget-body -->
                                    </div><!-- End .collapse -->
                                </div><!-- End .widget -->

                            </div><!-- End .sidebar sidebar-shop -->
                            </form>
                        </aside><!-- End .col-lg-3 -->


                </div><!-- End .row -->
            </div><!-- End .container -->
        </div><!-- End .page-content -->
    </main><!-- End .main -->




@stop
@include('website.layouts.header')
@include('website.layouts.topbar')
@include('website.layouts.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->


<link href="{{URL::asset('assets/website/assets/css/plugins/nouislider/nouislider.css')}}" rel="stylesheet" type="text/css"/>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-knob/jquery.knob.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-sparkline/jquery.sparkline.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.time.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.tooltip.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.selection.js')}}"></script>--}}
<script src="{{URL::asset('assets/website/assets/js/nouislider.min.js')}}"></script><


{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('admin.end')