@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
    @include('web.layouts.header')



        <section class="products_pg section">
            <div class="container">
                <form class="form" id="filter">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="filter_box">
                                <div class="title_box in-flex">
                                    <h5 class="title text-white mb-0">{{ __('web.filters') }}</h5>
                                    <a style="cursor: pointer" onclick="clearFilter()" class="underline text-white" id="clear_filter">{{ __('web.clear_filters') }}</a>
                                </div>
                                
                                <div class="card-body">
                                        @if(($category->category_id ? $category->category : $category)->brand_status == 'true')
                                            <div class="item">
                                                <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter1" role="button" aria-expanded="true" aria-controls="collapseFilter1">
                                                    {{ __('web.brands') }}
                                                </a>
                                                <div class="collapse show" id="collapseFilter1">
                                                    <div class="collapse_body">
                                                        <div class="brands_radios d-flex flex-wrap">
                                                            @isset($brands)
                                                                @foreach($brands as $row)
                                                                    <div class="form-check">
                                                                        <input class="form-check-input choice_choice"  type="radio" name="brand_id" value="{{$row->id}}" id="brandRadio{{$row->id}}">
                                                                        <label class="form-check-label" for="brandRadio{{$row->id}}">
                                                                            <img src="{{asset($row->image)}}" class="brand_logo" alt=""/>
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            @endisset
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if(count($attribute_one) > 0)
                                            <div class="item">
                                                @foreach($attribute_one as $row)
                                                    <div class="form-group mb-3">
                                                        <select onchange="filter()" name="choices[]"  class="form-control select_choice selectItem form-select">
                                                            <option selected value=""> {{$row->name}} </option>
                                                            @foreach($row->choices as $choice)
                                                                <option value="{{$choice->choice_id}}">{{$choice->choice->currentLangauge->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        @if($main)
                                            <div class="item">
                                                    <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter{{$main->id}}" role="button" aria-expanded="false" aria-controls="collapseFilter{{$main->id}}">
                                                        {{$main->name}}
                                                    </a>
                                                    <div class="collapse" id="collapseFilter{{$main->id}}">
                                                        <div class="collapse_body">
                                                            <div class="checkboxes">
                                                                @foreach($main->choices as $choice)
                                                                    <div class="form-check mb-2">
                                                                        <input class="form-check-input choice_choice"   name="attribute_id[]" type="checkbox" value="{{$choice->choice_id}}" id="styleCheck{{$choice->id}}">
                                                                        <label class="form-check-label" for="styleCheck{{$choice->id}}">
                                                                            {{$choice->choice->currentLangauge->name}}
                                                                        </label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                        @if($sub)
                                                        <div class="item sub_attributes" id="sub_attribute_{{$main->id}}">
                                                            <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFilter{{$sub->id}}" role="button" aria-expanded="false" aria-controls="collapseFilter{{$sub->id}}">
                                                                {{$sub->name}}
                                                            </a>
                                                            <div class="collapse" id="collapseFilter{{$sub->id}}">
                                                                <div class="collapse_body">
                                                                    <div class="checkboxes">
                                                                        @foreach($sub->choices as $choice)
                                                                            <div class="form-check mb-2">
                                                                                <input class="form-check-input choice_choice"   name="choice_id[]" type="checkbox" value="{{$choice->choice_id}}" id="styleCheck{{$choice->id}}">
                                                                                <label class="form-check-label" for="styleCheck{{$choice->id}}">
                                                                                    {{$choice->choice->currentLangauge->name}}
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                        @endif
                                        @if(($category->category_id ? $category->category : $category)->gender_status == 'true')
                                            <div class="item">
                                                <a class="collapse_title" data-bs-toggle="collapse" href="#collapseFiltergender" role="button" aria-expanded="false" aria-controls="collapseFiltergender">
                                                    {{ __('web.gender') }}
                                                </a>
                                                <div class="collapse" id="collapseFiltergender">
                                                    <div class="collapse_body">
                                                        <div class="checkboxes">
                                                            <div class="form-check mb-2">
                                                                <input class="form-check-input choice_choice" type="radio"  name="gender" value="male" id="priceRadio1">
                                                                <label class="form-check-label" for="priceRadio1">
                                                                    {{ __('web.male') }}
                                                                </label>
                                                            </div>
                                                            <div class="form-check mb-2">
                                                                <input class="form-check-input choice_choice" type="radio"  name="gender" value="female" id="priceRadio2">
                                                                <label class="form-check-label" for="priceRadio2">
                                                                    {{ __('web.female') }}
                                                                </label>
                                                            </div>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        @endif

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="search_filter mb-5 mt-2">

                                    <div class="row justify-content-between align-items-center">
                                        <div class="col-lg-4 col-6">
                                            <h4 class="fw-bold color-primary text-uppercase mb-0 px-1">@if($category->category_id) {{$category->category->currentDescription->name}} -  @endif {{$category->name}} </h4>
                                        </div>
                                        <div class="col-lg-4 col-6">
                                            <div class="form-group d-flex align-items-center">
                                                <label class="label">{{__('web.featured')}}</label>
                                                <select onchange="filter()" name="order_by" class="form-control selectItem form-select">
                                                    <option value="">{{__('web.featured_with')}}</option>
                                                    <option value="highest_rate">{{__('web.highest_rate')}}</option>
                                                    <option value="lowest_rate">{{__('web.lowest_rate')}}</option>
                                                    <option value="highest_cost">{{__('web.highest_cost')}}</option>
                                                    <option value="lowest_cost">{{__('web.lowest_cost')}}</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>

                            </div>
                            
                            <div class="products_sec pt-0" id="products">

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




    <!-- Start section -->
        @include('web.layouts.newsletter')
    </main>
@section('inject_js')
    <script>
        $('.selectItem').on('change', function () {  
            var item = this;
            var all_option = item.options
            $.each(item.options, function (index,value) {
                value.removeAttribute('selected')
            });
            item.options[item.options.selectedIndex].setAttribute("selected", "selected");
            filter()
       });  
        $('.choice_choice').on('click', function () {
            var item = this;
            item.setAttribute("checked", "checked");
            filter()
       });  
       
    </script>
    <script>
        let url_fetch_subAttr = "{{route('fetch.attributeSub')}}";
        let url_fetch_filter = "{{route('filter',$category->id)}}"
        filter()
        function clearFilter()
        {
            $('.choice_choice').prop( "checked", false );
            $('option').removeAttr('selected')
            
            $.each($('.selectItem'), function (key,item) {
                var item = this;
                var all_option = item.options
                $.each(item.options, function (index,value) {
                    if(index == '0')
                    {
                        value.setAttribute("selected", "selected");
                    }
                });
            });
            
            filter()
        }
        function filter()
        {
            let data = $('#filter').serialize();
            $.ajax
            ({
                url : url_fetch_filter,
                type: 'GET',
                data: data,
                success:function(data)
                {
                    $('#products').html(data);
                }
            })
        }
        function showSubAttribute()
        {
            let data = $('#filter').serialize();
            $.ajax
            ({
                url : url_fetch_subAttr,
                type: 'GET',
                data: data,
                success:function(data)
                {
                    $('.sub_attributes').html('');
                    $.each( data.data, function( key, value ) {
                        $('#sub_attribute_'+key).html(value);
                    });
                }
            })
        }
        
    </script>
    <!--<script>-->
    <!--    $(".brands_radios .form-check .form-check-input").on("click", function(){-->
    <!--        if($(this).hasClass( "active" ))-->
    <!--        {-->
    <!--            $(this).prop( "checked", false );-->
    <!--        }-->
    <!--        $(this).toggleClass("active");-->
    <!--        $(this).parent(".form-check").siblings().find(".form-check-input").removeClass("active");-->
    <!--        filter()-->
    <!--    })-->
    <!--    $(".checkboxes .form-check .form-check-input[type=checkbox]"). on("click", function(){-->
    <!--        if($(this).hasClass( "active" ))-->
    <!--        {-->
    <!--            $(this).prop( "checked", false );-->
    <!--        }-->
    <!--        $(this).toggleClass("active");-->
    <!--        filter()-->
    <!--    })-->
        
    <!--    $(".checkboxes .form-check .form-check-input[type=radio]").on("click", function(){-->
    <!--        if($(this).hasClass( "active" ))-->
    <!--        {-->
    <!--            $(this).prop( "checked", false );-->
    <!--        }-->
    <!--        $(this).toggleClass("active");-->
    <!--        $(this).parent(".form-check").siblings().find(".form-check-input").removeClass("active");-->
    <!--        filter()-->
    <!--    })-->
    <!--    $("#clear_filter").on("click", function(){-->
    <!--        $(".filter_box").find(".form-check-input").removeClass("active");-->
    <!--    })-->
    <!--</script>-->
@endsection
@stop
