@extends('layouts.web')

@section('content')
<style>
    .page-item .page-link {
        padding: 7px 17px;
    }

    .page-item.active .page-link {
        z-index: 3;
        background-color: var(--main-color) !important;
        border: var(--main-color) solid 1px !important;
        color: #fff !important;
    }

    .bredcrumbs ul li {
        float: left;
        border: 1px solid #d7d7d7;
        background: #d7d7d7;
        display: inline;
        margin-bottom: 10px;
        border-radius: 3px;
        padding: 2px 5px;
        margin-left: 12px;
    }

    .bredcrumbs ul li:first-child {
        margin-left: 0px;
    }

    .bredcrumbs ul li a {
        color: #121212;
        padding: 2px 5px;
        font-size: 12px;
        text-decoration: none;
    }
</style>
@php
$queryStr['category']=$category->alias;
@endphp
@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
$queryStr['brand']=$brand_filter;
@endphp
@endif

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

@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

<!-- mobile navbar start -->
<div class="container" id="">
    <div class="mob-main d-xxl-none d-xl-none d-lg-none d-md-block d-sm-block d-block">
        <div id="mobfilter" class="sidenav">
            <a class="close-icon" href="javascript:void(0)" class="closebtn " onclick="closeFilter()">&times;</a>
            <!-- mobile By Designer start -->
            <div class="filter-content by-designer">
                <h2 class="mob-filter-heading ">By Designer</h2>
                <ul>
                    <li><a href="#">Arietta Australia</a></li>
                    <li><a href="#">Arietta CURVE Australia</a></li>
                    <li><a href="#">Cizzy Bridal</a></li>
                    <li><a href="#">Maggie Sottero</a></li>
                    <li><a href="#">Rebecca Ingram</a></li>
                    <li><a href="#">Moonlight Bridal</a></li>
                    <li><a href="#">Tina Holly</a></li>
                </ul>
            </div>
            <!-- mobile By Designer end -->

            <!--mobile-range start-->
            <div class="filter-content ">
                <h2 class="mob-filter-heading mb-2">Price</h2>
                <div class="price-range-slider">
                    <div id="slider-range2" class="range-bar"></div>
                    <p class="range-value">
                        <input type="text" id="amount2" readonly>
                    </p>
                </div>
            </div>
            <!--mobile-range end-->

            <!-- Size start -->
            <div class="filter-content filter-size">
                <h2 class="mob-filter-heading mb-2">Size</h2>
                <ul>
                    <li><a href="#">L </a></li>
                    <li><a href="#">M </a></li>
                    <li><a href="#">S </a></li>
                    <li><a href="#">Xl </a></li>
                    <li><a href="#">XS </a></li>
                    <li><a href="#">XXl </a></li>
                    <li><a href="#">XXS </a></li>
                </ul>
            </div>
            <!-- Size end-->
            <!-- color start-->
            <div class="clearfix"></div>

            <div class="filter-color mt-2">
                <h2 class="mob-filter-heading mb-2 ">Color</h2>
                <ul>
                    <li>
                        <a href="#">
                            <img src="imgs/color1.jpg" alt="">Black </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/color2.jpg" alt="">Blue </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/color3.jpg" alt="">Brown </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/color4.jpg" alt="">Red </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/color6.jpg" alt="">White </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="imgs/color5.jpg" alt="">Pink </a>
                    </li>
                </ul>
            </div>
            <!-- color end-->
            <!-- by-style start-->
            <div class="filter-content mt-2 by-style">
                <h2 class="mob-filter-heading ">By Style</h2>
                <ul>
                    <li><a href="#">A Line </a></li>
                    <li><a href="#">Ball Gown </a></li>
                    <li><a href="#">Curve </a></li>
                    <li><a href="#">Fit and Flare </a></li>
                    <li><a href="#">Minimal </a></li>
                    <li><a href="#">Off Shoulder </a></li>
                    <li><a href="#">Ruffled Rkirt</a></li>
                    <li><a href="#">Satin </a></li>
                    <li><a href="#">Sleeves </a></li>
                    <li><a href="#">Strapless</a></li>
                </ul>
            </div>
            <!-- by-style end-->
        </div>
    </div>
</div>

<!-- mobile navbar end -->

<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <h2>Product Range</h2>
            <a href="index.php">Home</a>> <span>Product Range</span>
        </div>
    </div>
</section>
<!--internal main section-->
<section class="internal-main-section">
    <div class="container">

        <div class="row">
            <div class="col-12 d-xxl-none d-xl-none d-lg-none d-md-block d-sm-block d-block">
                <a class="filter-button-mob" onclick="openFilter()" href="#"><i class="fa fa-sliders" aria-hidden="true"></i> Filter</a>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 d-xxl-block d-xl-block d-lg-block d-md-none d-sm-none d-none">
                <div class="left-bar-pad">
                    <div class="accordion" id="accordionExample">
                        <!--By Designer start-->
                        <div class="accordion-item border-0">
                            <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 show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content">
                                    <ul>
                                        @foreach($brands as $brand)
                                        @php
                                        $brandArr=$queryStr;
                                        $brandArr['brand']=$brand->alias;
                                        @endphp
                                        <li><a href="{{ route('productListing',$brandArr) }}">{{ $brand->name }}</a></li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--By Designer end-->

                        <!--By Season start-->
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header">
                                <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix"> By Seasons </button>
                            </h2>
                            <div id="collapseSix" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content">
                                    <ul>
                                        @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 }}</a></li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--By Season end-->

                        <!--price-range start-->
                        <div class="accordion-item border-0">
                            <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"> Price </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content">
                                    <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-range end-->
                        <!--Size start-->
                        <div class="accordion-item border-0">
                            <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"> Size </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content filter-size">
                                    <ul>
                                        @foreach($sizes as $size)
                                        @php
                                        $sizeArr=$queryStr;
                                        $sizeArr['size']=$size->size;
                                        @endphp

                                        <li><a href="{{ route('productListing',$sizeArr) }}">{{$size->size}} </a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--size end-->
                        <!--color start-->
                        <div class="accordion-item border-0">
                            <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"> Color </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content filter-color">
                                    <ul>
                                        @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 }}
                                            </a>
                                        </li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--color end-->

                        <!--By Style start-->
                        <div class="accordion-item border-0">
                            <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"> By Style </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content by-style">
                                    <ul>
                                                                                @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}} </a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--By Style end-->

                        <!--By Fabric start-->
                        <div class="accordion-item border-0">
                            <h2 class="accordion-header">
                                <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven"> By Fabric </button>
                            </h2>
                            <div id="collapseSeven" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content">
                                    <ul>
                                        @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 }}</a></li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--By Fabric end-->

                          <!--By Neckline start-->
                          <div class="accordion-item border-0">
                            <h2 class="accordion-header">
                                <button class="accordion-button filter-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="true" aria-controls="collapseEight"> By Neckline </button>
                            </h2>
                            <div id="collapseEight" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                <div class="accordion-body filter-content">
                                    <ul>
                                        @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 }}</a></li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--By Neckline end-->

                    </div>
                </div>
            </div>
            <!--internal list start-->

            <div class="col-xxl-9 col-xl-9 col-lg-9 col-lg-9 col-md-12 col-sm-12 col-12 list-prod-main">
                <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'])
                                @php $brandArr=$queryStr;
                                unset($brandArr['brand']); @endphp
                                <li><a href="{{ route('productListing',$brandArr) }}">{{$brand_filter}} &nbsp; <img src="{{ asset('images/cancel.png') }}" width="10" /></li>
                                @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 id="items-container">
                    @if($products->count()>0)
                    @include('products.listing')
                    @else
                    <h4 class="text-center">No Record!</h4>
                    @endif
                </div>
            </div>

            <!--internal list end-->
        </div>
    </div>
</section>
<!--internal main section-->
@endsection
@push('scripts')
<script>
    //-----JS for Price Range slider-----
    min = ;
    max = ;
    $(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: [min, max],
            slide: function(event, ui) {
                $("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
            }
        });
        $("#amount2").val("$" + $("#slider-range2").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
    });

    $(document).on('change', '#amount', function() {
        alert(7);
    });

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

    function fetchItems(url) {
        $.ajax({
            url: url,
            success: function(data) {
                $('#items-container').html(data);
            }
        });
    }
</script>
@endpush