@extends('front.index')

@section('meta_title')  @lang('front.products')@endsection
@section('meta_des')  @lang('front.products') @endsection
@section('meta_key')  @lang('front.products')@endsection

@section('content')
    <div class="main-content">
        <main class="bg_gray">
            <div class="container margin_30">
                <div class="row">

                    <aside class="col-lg-3" id="sidebar_fixed">
                        <form>
                                                        <div class="filter_type version_2">

                        <div class="filter_col">
                            <div class="inner_bt"><a class="open_filters" href="#"><i class="ti-close"></i></a></div>
                            
                                        
                            </br></br>
    <h4><a class="opened" href="#filter_4" data-bs-toggle="collapse">@lang('front.sort_data')</a></h4>
                                <div class="collapse show" id="filter_4">
                                <input type="checkbox" @if(request()->price_sort_data == 1) checked @endif class="checkboxcheched" name="price_sort_data" value="1"> <span>
                                @lang('front.price_low_to_max')</span>
                                                   <br>
                                                     <input @if(request()->price_sort_data == 2) checked @endif type="checkbox" class="checkboxcheched" name="price_sort_data" value="2"> <span>
                                @lang('front.price_max_to_low')</span>
                                                   <br>
                                </div>
                                </br></br>
                            </br></br>
    <h4><a class="opened" href="#filter_2" data-bs-toggle="collapse">@lang('front.price')</a></h4>
                                <div class="collapse show" id="filter_2">
<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>
                                <input type="number" style=" display: none;
  margin-right: auto;
  margin-left: auto;" name="price_min" style="display:none;" class="min_price text-center"
                                                   placeholder="{{ __('front.min') }}">
                                                   <br>
                                                   <input
                                                type="number" style=" display: none;
  margin-right: auto;
  margin-left: auto;" name="price_max" style="display:none;" class="max_price text-center"
                                                placeholder="{{ __('front.max') }}">
                                </div>
                                </br></br>
                            
                                <h4><a class="opened" href="#filter_1" data-bs-toggle="collapse">@lang('front.ChoserCategary')</a></h4>
                                <div class="collapse show" id="filter_1">
                                    <ul>
                                        @if($categories->count()>0)
                                            @foreach($categories as $k=>$categrry)
                                        <li>
                                            <label class="container_check"> {{$categrry->name}}
                                                <input type="checkbox" value="{{$categrry->id}}" name="cate[]" @if (@in_array(@$categrry->id, @request()->cate)) checked="checked" @endif>


                                                <span class="checkmark"></span>
                                            </label>
                                        </li>
                                            @endforeach
                                        @else
                                            {{trans('front.NoDataProduct')}}
                                        @endif


                                    </ul>
                                </div>


                                <br><br>
                                <div class="buttons">

                                    <button class="btn_1" type="submit">@lang('front.search')</button>
                                    <a  class="btn_1 gray" href="{{route('front.getProducts')}}">Reset</a>
                                </div>
                            </div>
                        </div>
                        </form>
                    </aside>

                    <!-- /col-->
                    <div class="col-lg-9">

                        <!-- /top_banner-->
                        <div id="stick_here"></div>
                        <div class="toolbox elemento_stick add_bottom_30">
                            <div class="container">
                                @lang('front.products') ({{$products->total()}})

                            </div>
                        </div>
                        <!-- /toolbox-->
                        <div class="row small-gutters p-3">
                            @if($products->count()>0)
                                @foreach($products as $getProduct)
                            <div class="col-4 col-md-3  " style="border: 1px solid rgba(0, 0, 0, 0.15);padding: 15px;">
                                <div class="grid_item">
                                @if(@$getProduct->getPriceOfProduct()['discount'] != 0)
                                    <span class="ribbon off">{{@$getProduct->getPriceOfProduct()['discount']}}%</span>
                                @endif
                                    <figure><a href="{{$getProduct->ForLink}}"><img class="img-fluid " src="{{$getProduct->ImageWiteBase}}" data-src="{{$getProduct->ImageWiteBase}}" alt="{{$getProduct->name}}"></a>

                                    </figure>

                                    <a href="{{$getProduct->ForLink}}">
                                        <h3>{{$getProduct->name}}</h3></a>
                                    <div class="price_box"><span class="new_price"><h4 style="color: #deac6d;">{{@$getProduct->price_after_discount}} @lang('LE')</h4></span>
                                        @if(@$getProduct->discount != 0)
                                        <br>
                                        <span class="old_price">{{@$getProduct->price}}</span> <span style="color:red;">{{$getProduct->discount}} %</span>
                                        @endif
                                    </div>
                                    <ul>

                                        <li><a class="tooltip-1" href="{{route('front.favorites.store',[$getProduct->id])}}" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to favorites"><i class="ti-heart"></i><span>{{trans('front.Add-to-fave')}}</span></a></li>
                                        <li><a class="tooltip-1" href="{{route('front.product.OneaddToCarts',[$getProduct->id,'product_id'=>$getProduct->id,'quantity'=>'1','qty'=>'1','specific_id'=>@$getProduct->ProductSpecificOneProduct->size_id ])}}" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to cart"><i class="ti-shopping-cart"></i><span>{{trans('front.Add-to-cart')}}</span></a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- /grid_item-->
                            </div>
                                @endforeach
                            @else
                                    {{trans('front.NoDataProduct')}}
                        @endif
                            <!-- /col-->

                        </div>
                        <!-- /row-->
                        <div class="pagination__wrapper">
                            <ul class="pagination">

                                    @if($products->count()>0)
                                        <div class="row">

                                            <div class="col-md-7 col-sm-7">{{$products->appends(\Request::except('_token'))->render()}}</div>
                                        </div>

                                    @endif
                            </ul>
                        </div>
                        <!-- /main-->
                    </div>
                </div>
            </div>
        </main>
    </div>
<script>
    
        var min_price = "{{$min}}";
    var max_price = "{{$max}}";
    var price_from = "{{(request()->price_min)??$min}}";
       var price_to =  "{{(request()->price_max)??$max}}";
          var step_price = "{{$max}}";
</script>
@endsection