@extends('website.layouts.master')

@section('title') Shop @endsection

@section('content')
    <!-- Breadcrumb Section Start -->
    <section class="breadscrumb-section pt-0">
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-12">
                    <div class="breadscrumb-contain">
                        <h2>spécialiste en nutrition sportive</h2>
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a href="{{route('web.index')}}">
                                        <i class="fa-solid fa-house"></i>
                                    </a>
                                </li>

                                <li class="breadcrumb-item active">Shop</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb Section End -->
    <!-- Shop Section Start -->
    <section class="section-b-space shop-section">
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-custome-3">
                    <div class="left-box wow fadeInUp">
                        <div class="shop-left-sidebar">
                            <div class="back-button">
                                <h3><i class="fa-solid fa-arrow-left"></i> Back</h3>
                            </div>

                            <div class="filter-category">
                                <div class="filter-title">
                                    <h2>Filters</h2>
                                    <a href="javascript:void(0)">Clear All</a>
                                </div>
                                <ul>

                                </ul>
                            </div>
                            <form action="{{route('web.shop')}}" id="filterForm">
                                @csrf
                            <div class="accordion custome-accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne" aria-expanded="true"
                                                aria-controls="collapseOne">
                                            <span>Categories</span>
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                         aria-labelledby="headingOne">
                                        <div class="accordion-body">
                                            <div class="form-floating theme-form-floating-2 search-box">
                                                <input type="search" class="form-control search"  data-target="category"
                                                       placeholder="Search ..">
                                                <label for="search">Search</label>
                                            </div>

                                            <ul class="category-list custom-padding custom-height"  id="category">
                                                @foreach(\App\Helpers\WebHelper::allCategories() as $category)
                                                    <li class="form-check-label" >
                                                        <div class="orm-check ps-0 m-0 category-list-box custom-control custom-checkbox">
                                                            <input type="checkbox" class="checkbox_animated custom-control-input"
                                                                   id="category-{{$category->id}}" value="{{$category->id}}"
                                                                   name="categories[]"
                                                                   @if (in_array($category->id, $request->categories)) checked @endif>
                                                            <label class="form-check-label custom-control-label"
                                                                   for="category-{{$category->id}}">
                                                                <span class="name">{{$category->name}}</span>
                                                                {{--                                                                <span class="number">(08)</span>--}}
                                                            </label>
                                                        </div><!-- End .custom-checkbox -->
                                                        {{--                                                    <span class="item-count">3</span>--}}
                                                    </li><!-- End .filter-item -->
                                                @endforeach


                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapseOne" aria-expanded="true"
                                                aria-controls="collapseOne">
                                            <span>Brands</span>
                                        </button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse show"
                                         aria-labelledby="headingOne">
                                        <div class="accordion-body">
                                            <div class="form-floating theme-form-floating-2 search-box">
                                                <input type="search" class="form-control search"  data-target="brand"
                                                       placeholder="Search ..">
                                                <label for="search">Search</label>
                                            </div>

                                            <ul class="category-list custom-padding custom-height" id="brand">
                                                @foreach(\App\Helpers\WebHelper::allBrands() as $brand)
                                                    <li class="form-check-label" >
                                                        <div class="orm-check ps-0 m-0 category-list-box custom-control custom-checkbox">
                                                            <input type="checkbox" class="checkbox_animated custom-control-input"
                                                                   id="brand-{{$brand->id}}" value="{{$brand->id}}"
                                                                   name="brands[]"
                                                                   @if (in_array($brand->id, $request->brands)) checked @endif>
                                                            <label class="form-check-label custom-control-label"
                                                                   for="brand-{{$brand->id}}">
                                                                <span class="name"><img src="{{$brand->default_image_url}}" alt="{{$brand->name}}" width="50px">{{$brand->name}}</span>
                                                                {{--                                                                <span class="number">(08)</span>--}}
                                                            </label>
                                                        </div><!-- End .custom-checkbox -->
                                                        {{--                                                    <span class="item-count">3</span>--}}
                                                    </li><!-- End .filter-item -->
                                                @endforeach


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

{{--                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                                                aria-expanded="false" aria-controls="collapseTwo">
                                            <span>Variations</span>
                                        </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse show"
                                         aria-labelledby="headingTwo">
                                        <div class="accordion-body filter-items">
                                            <ul class="category-list custom-padding  custom-height">
                                                @foreach(\App\Helpers\WebHelper::allTaste() as $taste)
                                                    <li>
                                                        <div class="orm-check ps-0 m-0 category-list-box custom-control custom-checkbox">
                                                            <input type="checkbox" class="checkbox_animated custom-control-input"
                                                                   id="taste-{{$taste->id}}" value="{{$taste->id}}"
                                                                   name="tastes[]"
                                                                   @if (in_array($taste->id, $request->tastes)) checked @endif>
                                                            <label class="form-check-label custom-control-label"
                                                                   for="taste-{{$taste->id}}">
                                                                <span class="name">{{$taste->name}}</span>
--}}{{--                                                                <span class="number">(08)</span>--}}{{--
                                                                </label>
                                                        </div><!-- End .custom-checkbox -->
                                                        --}}{{--                                                    <span class="item-count">3</span>--}}{{--
                                                    </li><!-- End .filter-item -->
                                                @endforeach

                                            </ul>
                                        </div>
                                    </div>
                                </div>--}}


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

                <div class="col-custome-9">
                    <div class="show-button">
                        <div class="filter-button-group mt-0">
                            <div class="filter-button d-inline-block d-lg-none">
                                <a><i class="fa-solid fa-filter"></i> Filter Menu</a>
                            </div>
                        </div>

                        <div class="top-filter-menu">
                            <div class="category-dropdown">
                                <h5 class="text-content">Sort By :</h5>
                                <div class="dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton1"
                                            data-bs-toggle="dropdown">
                                        <span>Most Popular</span> <i class="fa-solid fa-angle-down"></i>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                        <li>
                                            <a class="dropdown-item" id="pop" href="javascript:void(0)">Popularity</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="low" href="javascript:void(0)">Low - High
                                                Price</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="high" href="javascript:void(0)">High - Low
                                                Price</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="rating" href="javascript:void(0)">Average
                                                Rating</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="aToz" href="javascript:void(0)">A - Z Order</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="zToa" href="javascript:void(0)">Z - A Order</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" id="off" href="javascript:void(0)">% Off - Hight To
                                                Low</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="grid-option d-none d-md-block">
                                <ul>
                                    <li class="three-grid active">
                                        <a href="javascript:void(0)">
                                            <img src="{{asset('website/assets/svg/grid-3.svg')}}" class="blur-up lazyload" alt="">
                                        </a>
                                    </li>
                                    <li class="grid-btn  ">
                                        <a href="javascript:void(0)">
                                            <img src="{{asset('website/assets/svg/grid-4.svg')}}" class="blur-up lazyload" alt="">

                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="productsList">
                        <div class="row  product-list-section">
                            @foreach($products as $product)
                                <div class="col-6 col-md-4 ">
                                    @include('website.components.product-card', ['product' => $product])
                                </div><!-- End .col-sm-6 col-lg-4 -->
                            @endforeach


                        </div>
                        {{$products->links()}}
                    </div>



                </div>
            </div>
        </div>
    </section>
    <!-- Shop Section End -->

@endsection

@section('script')
    <script>
        $('.form-check-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>
    <script>
        $(".search").on("keyup", function() {
            var target=$(this).attr('data-target');
            var value = $(this).val().toLowerCase();

            $("#"+target).children().each(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            })
        });
    </script>
@endsection