@section('content')

    <main class="main">
        <div class="page-header text-center mb-2" style="background-image: url('{{asset('assets/website/assets/images/demos/demo-4/bg-5.jpg')}}')">
            <div class="container">
                <h1 class="page-title">HOUSE NUTRITION<span class="text-center font-secondary">Spécialistes de la nutrition sportive</span></h1>
            </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')}}">{{config('global.raisonsociale')}}</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-fluid">
                <div class="row">
                    <div class="col-lg-9">


                        <div class="products mb-3" id="productsList">
                            <div class="row justify-content-center">
                                @foreach($products as $product)
                                    <div class="col-6 col-md-4 col-lg-3">
                                        @include('website2.layouts.product-component', ['product' => $product])
                                    </div><!-- End .col-sm-6 col-lg-4 -->
                                @endforeach

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


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

                    <aside class="col-lg-3 order-lg-first">
                        <form action="{{route('web.shop')}}" id="filterForm">
                            @csrf
                            <div class="sidebar sidebar-shop">

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

{{--                                    <div class="collapse show" id="widget-5">--}}
{{--                                        <div class="widget-body">--}}
{{--                                            <div class="filter-price">--}}
{{--                                                <div class="filter-price-text">--}}
{{--                                                    Price Range:--}}
{{--                                                    <span id="filter-price-range"></span>--}}
{{--                                                </div><!-- End .filter-price-text -->--}}

{{--                                                <div id="price-slider"></div><!-- End #price-slider -->--}}
{{--                                            </div><!-- End .filter-price -->--}}
{{--                                        </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" class="font-secondary">
                                            Marques
                                        </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[]"
                                                                   @if (in_array($brand->id, $request->brands)) checked @endif>
                                                            <label class="custom-control-label"
                                                                   for="brand-{{$brand->id}}">
                                                                <img src="{{asset($brand->default_image_url)}}"
                                                                     alt="{{$brand->name}}"
                                                                     style="height: 30px;width:50px;display: inline">
                                                                <span style="">{{$brand->name}}</span>
                                                            </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-1" role="button" aria-expanded="true"
                                           aria-controls="widget-1"  class="font-secondary">
                                            Catégories
                                        </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[]"
                                                                   @if (in_array($category->id, $request->categories)) checked @endif>
                                                            <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-2" role="button" aria-expanded="true"
                                           aria-controls="widget-4"  class="font-secondary">
                                            Goûts
                                        </a>
                                    </h3><!-- End .widget-title -->

                                    <div class="collapse show" id="widget-2">
                                        <div class="widget-body">
                                            <div class="filter-items">
                                                @foreach(\App\Helpers\WebHelper::allTaste() as $taste)
                                                    <div class="filter-item">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input"
                                                                   id="taste-{{$taste->id}}" value="{{$taste->id}}"
                                                                   name="tastes[]"
                                                                   @if (in_array($taste->id, $request->tastes)) checked @endif>
                                                            <label class="custom-control-label"
                                                                   for="taste-{{$taste->id}}">{{$taste->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('website2.layouts.header')
@include('website2.layouts.topbar')
@include('website2.layouts.footer')

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


<link href="{{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="{{asset('assets/website/assets/website/assets/js/nouislider.min.js')}}"></script>
{{--<script>--}}
{{--    var startSlider = document.getElementById('filter-price-range');--}}

{{--    noUiSlider.create(startSlider, {--}}
{{--        start: [20, 80],--}}
{{--        range: {--}}
{{--            'min': [0],--}}
{{--            'max': [100]--}}
{{--        }--}}
{{--    });--}}
{{--</script>--}}
<style>
    /*.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, .custom-control-label::before, .custom-control-label::after, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {*/
    /*    margin-top: 20px;*/
    /*}*/

    .filter-items {
        max-height: 350px;
        overflow-y: scroll;
    }

    .filter-items::-webkit-scrollbar {
        width: 6px;
    }

    .filter-items::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    .filter-items::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
</style>

<script>
    $('.custom-control-label').click(function () {
        const processChange = debounce(() => filter());
        processChange();

    });
    function debounce(func, timeout = 300){
        let timer;
        return (args) => {
            clearTimeout(timer);
            timer = setTimeout(() => { func.apply(this, args); }, timeout);
        };
    }
    function filter(){
        var formData = $('#filterForm').serialize();
        $.ajax({
            type: 'get',
            url: "{{route('web.shop')}}",
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                $('#productsList').html(data.html);
                $(document).ready(function () {
                    let square_width=$('.square-product').width();
                    $('.square-product').css('height',square_width);
                });

                $(window).resize(function () {
                    let square_width=$('.square-product').width();
                    $('.square-product').css('height',square_width);
                });
            }, error: function (reject) {

            }
        });
    }
</script>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('website2.layouts.end')