@extends('layouts.web')

@section('content')
@php
$queryStr['category']=$category->alias;
@endphp

@if($search)
@php
$queryStr['search']=$search;
@endphp
@endif

@if($color_filter)
@php
$queryStr['color']=$color_filter;
@endphp
@endif

@if($silhouette_filter)
@php
$silStr=implode(',',$silhouette_filter);
$queryStr['silhouette']=$silStr;
@endphp
@endif

@if($price_filter)
@php
$queryStr['price']=$price_filter;
@endphp
@endif

@if($brand_filter)
@php
$brandStr=implode(',',$brand_filter);
$queryStr['brand']=$brandStr;
@endphp
@endif

@isset($size_filter)
@php
$queryStr['size']=$size_filter;
@endphp
@endisset

@if($season_filter)
@php
$seasonStr=implode(',',$season_filter);
$queryStr['season']=$seasonStr;
@endphp
@endif

@if($neckline_filter)
@php
$necklineStr=implode(',',$neckline_filter);
$queryStr['neckline']=$necklineStr;
@endphp
@endif

@if($fabric_filter)
@php
$fabricStr=implode(',',$fabric_filter);
$queryStr['fabric']=$fabricStr;
@endphp
@endif

@include('products.filter')
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <!-- <h2>Product Range</h2> -->
            <a href="{{ route('homepage') }}">Home</a>> <span>Products</span>
        </div>
    </div>
</section>
<!--internal main section-->
<section>

    <div class="container-fluid px-4">
        <div class="row">
            <div class="col-8">
                <div class="float-start d-xxl-none d-xl-none d-lg-none d-md-none d-sm-block d-block"> <a class="filter-service filter-icon" onclick="openFilter()" href="javascript:void(0)">Filter <i class="fa fa-align-center"></i></a></div>
                <div class="float-start d-xxl-block d-xl-block d-lg-block d-md-block d-sm-none d-none"> <a class="filter-service filter-icon" href="javascript:void(0)" id="deskFilter">Filter &nbsp;<img src="{{ asset('imgs/filter.png') }}" /></div>
                <div class="float-start featured-b">
                    <div class="dropdown">
                        <!-- <button class="btn " type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Featured &nbsp;<img src="{{ asset('imgs/alignment.png') }}" />
                        </button> -->
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Best Selling</a></li>
                            <li><a class="dropdown-item" href="#">Price, Low to High</a></li>
                            <li><a class="dropdown-item" href="#">Price, high to low</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right">
                <div class="grid-icons">
                    <div class="grip50 d-xxl-block d-xl-block d-lg-block d-md-block d-sm-block d-none">
                        <a href="javascript:void(0)" class="active layoutView" data-view="four">
                            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-grid-4" viewBox="0 0 14 14">
                                <path d="M0 0h2v2H0zm0 8h2v2H0zm0-4h2v2H0zm0 8h2v2H0zM4 0h2v2H4zm0 8h2v2H4zm0-4h2v2H4zm0 8h2v2H4zM8 0h2v2H8zm0 8h2v2H8zm0-4h2v2H8zm0 8h2v2H8zm4-12h2v2h-2zm0 8h2v2h-2zm0-4h2v2h-2zm0 8h2v2h-2z" fill-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="grip25 d-xxl-block d-xl-block d-lg-block d-md-block d-sm-block d-none">
                        <a href="javascript:void(0)" class="layoutView" data-view="three">
                            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-grid-3" viewBox="0 0 14 14">
                                <path d="M0 0h3v3H0zm0 11h3v3H0zm0-5.5h3v3H0zM5.5 0h3v3h-3zm0 11h3v3h-3zm0-5.5h3v3h-3zM11 0h3v3h-3zm0 11h3v3h-3zm0-5.5h3v3h-3z" fill-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                    <div class="grip33"><a href="javascript:void(0)" class="layoutView" data-view="two">
                            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-grid-2" viewBox="0 0 14 14">
                                <path d="M8 0h6v6H8zm0 8h6v6H8zM0 0h6v6H0zm0 8h6v6H0z" fill-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                    <!-- <div class="grip33 d-xxl-none d-xl-none d-lg-none d-md-none d-sm-none d-block">
                        <a href="javascript:void(0)" class="active layoutView" data-view="two">
                            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-grid-2" viewBox="0 0 14 14">
                                <path d="M8 0h6v6H8zm0 8h6v6H8zM0 0h6v6H0zm0 8h6v6H0z" fill-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div> -->
                </div>
            </div>
            <!-- </div> -->
            <div class="row">
                <div class="col-12">
                    <div class="bredcrumbs">
                        <ul class="list-unstyled m-0">
                            <!-- searched color bredcrumb -->
                            @isset($filters['color'])
                            @php $colorArr=$queryStr;
                            unset($colorArr['color']); @endphp
                            <li><a href="{{ route('productListing',$colorArr) }}">{{$color_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endisset

                            <!-- search silhouette bredcrumb -->
                            @isset($filters['silhouette'])
                            @foreach($filters['silhouette'] as $sil_filter)
                            @php $key = array_search(nameToAlias($sil_filter), $silhouette_filter); @endphp
                            @if ($key !== false)
                            @php
                            $silFilterVal=$silhouette_filter;
                            unset($silFilterVal[$key]);
                            $silArr=$queryStr;
                            @endphp
                            @if(count($silFilterVal)>0)
                            @php $silArr['silhouette']=implode(',',$silFilterVal); @endphp
                            @else
                            @php unset($silArr['silhouette']); @endphp
                            @endif
                            @endif
                            <li><a href="{{ route('productListing',$silArr) }}">{{$sil_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endforeach
                            @endisset


                            <!-- search season bredcrumb -->
                            @isset($filters['season'])
                            @foreach($filters['season'] as $sea_filter)
                            @php $key = array_search(nameToAlias($sea_filter), $season_filter); @endphp
                            @if ($key !== false)
                            @php
                            $seaFilterVal=$season_filter;
                            unset($seaFilterVal[$key]);
                            $seaArr=$queryStr;
                            @endphp
                            @if(count($seaFilterVal)>0)
                            @php $seaArr['season']=implode(',',$seaFilterVal); @endphp
                            @else
                            @php unset($seaArr['season']); @endphp
                            @endif
                            @endif
                            <li><a href="{{ route('productListing',$seaArr) }}">{{$sea_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endforeach
                            @endisset


                            <!-- search neckline bredcrumb -->
                            @isset($filters['neckline'])
                            @foreach($filters['neckline'] as $nec_filter)
                            @php $key = array_search(nameToAlias($nec_filter), $neckline_filter); @endphp
                            @if ($key !== false)
                            @php
                            $necFilterVal=$neckline_filter;
                            unset($necFilterVal[$key]);
                            $necArr=$queryStr;
                            @endphp
                            @if(count($necFilterVal)>0)
                            @php $necArr['neckline']=implode(',',$necFilterVal); @endphp
                            @else
                            @php unset($necArr['neckline']); @endphp
                            @endif
                            @endif
                            <li><a href="{{ route('productListing',$necArr) }}">{{$nec_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endforeach
                            @endisset

                            <!-- search fabric bredcrumb -->
                            @isset($filters['fabric'])
                            @foreach($filters['fabric'] as $fab_filter)
                            @php $key = array_search(nameToAlias($fab_filter), $fabric_filter); @endphp
                            @if ($key !== false)
                            @php
                            $fabFilterVal=$fabric_filter;
                            unset($fabFilterVal[$key]);
                            $fabArr=$queryStr;
                            @endphp
                            @if(count($fabFilterVal)>0)
                            @php $fabArr['fabric']=implode(',',$fabFilterVal); @endphp
                            @else
                            @php unset($fabArr['fabric']); @endphp
                            @endif
                            @endif
                            <li><a href="{{ route('productListing',$fabArr) }}">{{$fab_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endforeach
                            @endisset

                            <!-- search brand bredcrumb -->

                            @isset($filters['brand'])
                            @foreach($filters['brand'] as $bran_filter)
                            @php $key = array_search(nameToAlias($bran_filter), $brand_filter); @endphp
                            @if ($key !== false)
                            @php
                            $branFilterVal=$brand_filter;
                            unset($branFilterVal[$key]);
                            $branArr=$queryStr;
                            @endphp
                            @if(count($branFilterVal)>0)
                            @php $branArr['brand']=implode(',',$branFilterVal); @endphp
                            @else
                            @php unset($branArr['brand']); @endphp
                            @endif
                            @endif

                            <li><a href="{{ route('productListing',$branArr) }}">{{$bran_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endforeach
                            @endisset

                            <!-- search price bredcrumb -->
                            @isset($filters['price'])
                            @php $priceArr=$queryStr;
                            unset($priceArr['price']); @endphp
                            <li><a href="{{ route('productListing',$priceArr) }}">{{$filters['price']}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endisset

                            <!-- search size bredcrumb -->
                            @isset($filters['size'])
                            @php $sizeArr=$queryStr;
                            unset($sizeArr['size']); @endphp
                            <li><a href="{{ route('productListing',$sizeArr) }}">Size-{{$size_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                            @endisset


                            @if(count($filters)>0)
                            <li class="clear_all"><a href="{{ route('productListing',['category'=>$category->alias]) }}">Clear ALL</a></li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="hide-filter-main">
                    <div class="filter-wht ">
                        <div class="left-bar-pad ">
                            <div class="accordion" id="accordionExample">
                                <!--By Designer start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> By Designer</button>
                                    </h2>
                                    <div id="collapseOne" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content">
                                            <ul>

                                                @php $filterBrandArr=[]; @endphp
                                                @isset($brand_filter)
                                                @php $filterBrandArr=$brand_filter; @endphp
                                                @endisset


                                                @foreach($brands as $brand)
                                                @php
                                                $brandArr=$queryStr;
                                                $brandStr=$brand_filter;
                                                @endphp
                                                @if(!in_array(nameToAlias($brand->name),$brand_filter))
                                                @php
                                                $brandFilter=nameToAlias($brand->name);
                                                $brandStr[]=$brandFilter;
                                                @endphp
                                                @endif
                                                @php
                                                $brandStr=implode(',',$brandStr);
                                                $brandArr['brand']=$brandStr;
                                                @endphp

                                                <li>
                                                    <a href="{{ route('productListing',$brandArr) }}">{{ $brand->name }}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="brand" value="{{nameToAlias($brand->name)}}" {!! in_array(nameToAlias($brand->name),$filterBrandArr) ? 'checked' : '' !!}>
                                                    </a>
                                                </li>
                                                @endforeach

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--By Designer end-->
                                <!--season start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> By Seasons </button>
                                    </h2>
                                    <div id="collapseTwo" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content">

                                            <ul>
                                                @php $filterSeasonArr=[]; @endphp
                                                @isset($season_filter)
                                                @php $filterSeasonArr=$season_filter; @endphp
                                                @endisset

                                                @foreach($seasons as $season)
                                                @php
                                                $seasonArr=$queryStr;
                                                $seasonStr=$season_filter;
                                                @endphp
                                                @if(!in_array(nameToAlias($season->name),$season_filter))
                                                @php
                                                $seasonFilter=nameToAlias($season->name);
                                                $seasonStr[]=$seasonFilter;
                                                @endphp
                                                @endif
                                                @php
                                                $seasonStr=implode(',',$seasonStr);
                                                $seasonArr['season']=$seasonStr;
                                                @endphp
                                                <li><a href="{{ route('productListing',$seasonArr) }}">{{ $season->name }}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="season" value="{{nameToAlias($season->name)}}" {!! in_array(nameToAlias($season->name), $filterSeasonArr) ? 'checked' : '' !!}></a></li>
                                                @endforeach

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--season end-->
                                <!--price start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> Price </button>
                                    </h2>
                                    <div id="collapseFive" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content filter-size">
                                            <div class="price-range-slider">
                                                <div id="slider-range" class="range-bar"></div>
                                                <p class="range-value">
                                                    <input type="text" id="amount" readonly>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--price end-->
                                <!--size start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Size </button>
                                    </h2>
                                    <div id="collapseThree" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content filter-color">
                                            <ul>
                                                @php $filterSizeArr=[]; @endphp
                                                @isset($filters['size'])
                                                @php $filterSizeArr=$filters['size']; @endphp
                                                @endisset

                                                @foreach($sizes as $size)
                                                @php
                                                $sizeArr=$queryStr;
                                                $sizeArr['size']=$size->size;
                                                @endphp

                                                <li><a href="{{ route('productListing',$sizeArr) }}">{{$size->size}}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="size" value="{{$size->size}}" {!! ($size->size===$filterSizeArr) ? 'checked' : '' !!}></a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--size end-->

                                <!--By color start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Color </button>
                                    </h2>
                                    <div id="collapseFour" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content by-style filter-color">
                                            <ul>
                                                @php $filterColorArr=''; @endphp
                                                @isset($filters['color'])
                                                @php $filterColorArr=$filters['color']; @endphp
                                                @endisset

                                                @foreach($colors as $color)
                                                @php $colorImg=asset(Storage::url('public/colors/'.$color->image));
                                                $colorArr=$queryStr;
                                                $colorArr['color']=$color->alias;
                                                @endphp
                                                <li>
                                                    <a href="{{ route('productListing',$colorArr) }}">
                                                        <img src="{!! $colorImg !!}" alt="">{{ $color->name }}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="color" value="{{$color->alias}}" name="filters['color']" value="" {!! ($color->name==$filterColorArr) ? 'checked' : '' !!}> {{$filterColorArr}}
                                                    </a>
                                                </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--By Color end-->

                                <!--By style start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> By Style </button>
                                    </h2>
                                    <div id="collapseSix" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content by-style">
                                            <ul>

                                                @php $filterSilArr=[]; @endphp
                                                @isset($silhouette_filter)
                                                @php $filterSilArr=$silhouette_filter; @endphp
                                                @endisset

                                                @foreach($silhouettes as $silhouette)
                                                @php
                                                $silArr=$queryStr;
                                                $silStr=[];
                                                $silStr=$silhouette_filter;
                                                @endphp
                                                @if(!in_array(nameToAlias($silhouette->name),$silhouette_filter))
                                                @php
                                                $silhFilter=nameToAlias($silhouette->name);
                                                $silStr[]=$silhFilter;
                                                @endphp
                                                @endif
                                                @php
                                                $silStr=implode(',',$silStr);
                                                $silArr['silhouette']=$silStr;
                                                @endphp
                                                <li><a href="{{ route('productListing',$silArr) }}">{{$silhouette->name}}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="silhouette" value="{{nameToAlias($silhouette->name)}}" {!! in_array(nameToAlias($silhouette->name),$filterSilArr) ? 'checked' : '' !!}> </a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--By style end-->

                                <!--By fabric start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven"> By Fabric </button>
                                    </h2>
                                    <div id="collapseSeven" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content by-style">
                                            <ul>
                                                @php $filterFabricArr=[]; @endphp
                                                @isset($fabric_filter)
                                                @php $filterFabricArr=$fabric_filter @endphp
                                                @endisset

                                                @foreach($fabrics as $fabric)
                                                @php
                                                $fabricArr=$queryStr;
                                                $fabricStr=$fabric_filter;
                                                @endphp
                                                @if(!in_array(nameToAlias($fabric->name),$fabric_filter))
                                                @php
                                                $fabricFilter=nameToAlias($fabric->name);
                                                $fabricStr[]=$fabricFilter;
                                                @endphp
                                                @endif
                                                @php
                                                $fabricStr=implode(',',$fabricStr);
                                                $fabricArr['fabric']=$fabricStr;
                                                @endphp
                                                <li><a href="{{ route('productListing',$fabricArr) }}">{{ $fabric->name }}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="fabric" value="{{nameToAlias($fabric->name)}}" {!! in_array(nameToAlias($fabric->name),$filterFabricArr) ? 'checked' : '' !!}>
                                                    </a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--By fabric end-->

                                <!--By neckline start-->
                                <div class="accordion-item border-0 mb-3">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight"> By Neckline </button>
                                    </h2>
                                    <div id="collapseEight" class="accordion-collapse collapse " data-bs-parent="#accordionExample">
                                        <div class="accordion-body filter-content by-style">
                                            <ul>
                                                @php $filterNecklineArr=[]; @endphp
                                                @isset($neckline_filter)
                                                @php $filterNecklineArr=$neckline_filter @endphp
                                                @endisset

                                                @foreach($necklines as $neckline)
                                                @php
                                                $necklineArr=$queryStr;
                                                $necklineStr=$neckline_filter;
                                                @endphp
                                                @if(!in_array(nameToAlias($neckline->name),$neckline_filter))
                                                @php
                                                $necklineFilter=nameToAlias($neckline->name);
                                                $necklineStr[]=$necklineFilter;
                                                @endphp
                                                @endif
                                                @php
                                                $necklineStr=implode(',',$necklineStr);
                                                $necklineArr['neckline']=$necklineStr;
                                                @endphp
                                                <li><a href="{{ route('productListing',$necklineArr) }}">{{ $neckline->name }}
                                                        <input class="form-check-input filter-check" type="checkbox" data-type="neckline" value="{{nameToAlias($neckline->name)}}" {!! in_array(nameToAlias($neckline->name),$filterNecklineArr) ? 'checked' : '' !!}></a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <!--By neckline end-->
                            </div>
                        </div>

                    </div>

                    <!-- <div class="all-prodshow"> -->
                    <div class="all-prodshow">


                        @if($products->count()>0)
                        @include('products.listing')
                        @else
                        <h4 class="text-center">No Record!</h4>
                        @endif

                    </div>

                </div>
            </div>
        </div>
</section>
<!--internal main section-->
@endsection
@push('scripts')
<script>
    //-----JS for Price Range slider-----
    min = ;
    max = ;
    grid_type = "";
    $(function() {
        $("#slider-range").slider({
            range: true,
            min: min,
            max: max,
            values: [, ],
            slide: function(event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                var urlParams = new URLSearchParams(window.location.search);
                console.log("querys: " + urlParams.toString());
                if (urlParams.has('price')) {
                    urlParams.delete('price');
                    console.log("Printer Removed: " + urlParams.toString());
                }

                let url = window.location.href.split('?')[0];
                // console.log(urlParams.size);
                if (urlParams.size > 0) {
                    urlParams = '?' + urlParams + '&price=' + ui.values[0] + '-' + ui.values[1];
                } else {
                    urlParams = '?price=' + ui.values[0] + '-' + ui.values[1];
                }
                console.log(urlParams);
                window.location = url + urlParams;
            }
        });
        $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
    });

    //-----JS for Price Range slider-----
    $(function() {
        $("#slider-range2").slider({
            range: true,
            min: min,
            max: max,
            values: [, ],
            slide: function(event, ui) {
                $("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
                var urlParams = new URLSearchParams(window.location.search);
                console.log("querys: " + urlParams.toString());
                if (urlParams.has('price')) {
                    urlParams.delete('price');
                    console.log("Printer Removed: " + urlParams.toString());
                }

                let url = window.location.href.split('?')[0];
                // console.log(urlParams.size);
                if (urlParams.size > 0) {
                    urlParams = '?' + urlParams + '&price=' + ui.values[0] + '-' + ui.values[1];
                } else {
                    urlParams = '?price=' + ui.values[0] + '-' + ui.values[1];
                }
                console.log(urlParams);
                window.location = url + urlParams;
            }
        });
        $("#amount2").val("$" + $("#slider-range2").slider("values", 0) + " - $" + $("#slider-range2").slider("values", 1));
    });

    $(document).on('click', '.filter-check', function() {
        type = $(this).attr('data-type');
        if ($(this).prop('checked')) {
            window.location = $(this).parent().attr('href');
        } else {
            url = $(this).parent().attr('href');
            val = $(this).val();
            // removeURLParameter(url, type, val);
            window.location = removeURLParameter(url, type, val);
        }

    });

    function removeURLParameter(url, parameter, val = '') {
        //prefer to use l.search if you have a location/link object
        var urlparts = url.split('?');
        if (urlparts.length >= 2) {

            var prefix = encodeURIComponent(parameter) + '='; //size=
            var pars = urlparts[1].split(/[&;]/g); // array 2  ['price=1-569', 'size=0']

            //reverse iteration as may be destructive
            for (var i = pars.length; i-- > 0;) {
                //idiom for string.startsWith

                if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                    // console.log(encodeURIComponent(val));
                    parr = pars[i].split('=').pop();
                    parr = parr.replace(/%2C/g, ",");
                    values = parr.split(",");
                    console.log(pars);
                    pars.splice(i, 1);

                    if (values.length > 1) {
                        for (var x = values.length; x-- > 0;) {
                            console.log('values[x] ' + values[x]);
                            if (values[x].lastIndexOf(encodeURIComponent(val), 0) !== -1) {
                                // console.log(val);
                                // console.log(parr);
                                values.splice(x, 1);
                                // pars.replace(parr, 1);
                            }
                        }

                        pars.push(encodeURIComponent(parameter) + "=" + values);
                        // console.log('values '+values);
                        // console.log('pars '+pars);
                    } else {

                        pars.splice(i, 1);
                    }

                }
            }

            url = urlparts[0] + '?' + pars.join('&');
            return url;
        } else {
            return url;
        }
    }

    $(document).on('click', '.pagination a', function(event) {
        event.preventDefault();
        let url = $(this).attr('href');
        fetchItems(url);
    });

    function fetchItems(url) {
        $.ajax({
            url: url,
            data: {
                grid_type: grid_type
            },
            success: function(data) {
                $('.all-prodshow').html(data);
            }
        });
    }

    function toggleFilter() {
        if (!$('.filter-wht').hasClass('show')) {
            $('.filter-wht .left-bar-pad').animate({
                'width': '250px',
                'padding': '0 0px 0px 0px'
            }, 500);
            $('.filter-wht').addClass('show');
            $('.accordion').show();
            $('.accordion').animate({
                'position': 'relative',
                'left': '0px'
            }, 500);

        } else {
            $('.filter-wht .left-bar-pad').animate({
                'width': '0px',
                'padding': '0px'
            }, 1000);
            $('.filter-wht').animate({
                'padding': '0px'
            }, 1000);
            $('.filter-wht').removeClass('show');
            $('.accordion').animate({
                'position': 'relative',
                'left': '-250px'
            }, 1000);

            setTimeout(() => {
                $('.accordion').hide();
            }, 1000);
        }
    }
    $(document).ready(function() {
        $('.accordion').hide();
        $('#deskFilter').click(function() {
            toggleFilter();
        });
    });

    $(document).on('click', '.layoutView', function() {
        grid_type = $(this).attr('data-view');
        url = $(location).attr('href');

        $.ajax({
            url: url,
            method: 'get',
            data: {
                grid_type: grid_type
            },
            success: function(data) {
                $('.all-prodshow').html(data);
            }
        });
    })
</script>
@endpush