@if(!empty($selected_data))
    <i class="fa-solid fa-filter filter-icon"></i>
    @foreach($selected_data as $key => $data)
        @if(count($data['values'])==1)
            <div class="filter-item">
                <span>{{ @$data['label']}}:</span>
                <b>{{ array_values(@$data['values'])[0] }}</b>
                <input type="checkbox" name="search[{!! @$data['field'] !!}][]" value="{{ array_values(@$data['values'])[0] }}" class="selected_checkbox" data-column="{{ @$data['column'] }}" style="display:none">
                <button type="button" class="btn filter-remove-btn ml-1 remove_column_selected_data" data-name="search[{!! @$data['field'] !!}][]"><i class="fa-solid fa-xmark"></i></button>
            </div>
        @else
            <div class="filter-item">
                <span>{{ @$data['label']}}:</span>
                <b>Multiple Values</b>
                <div class="dropdown ml-1">
                    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-caret-down"></i></button>
                    <div class="dropdown-menu dropdown-menu-right" style="">
                        <div class="checkbox-container">
                            @foreach($data['values'] as $ikey => $data_select)
                            @php
                                $slug = Str::slug($ikey);
                            @endphp
                            <div class="dropdown-filter-item form-check custom-control custom-checkbox ">
                                <input type="checkbox" id="col_{{ @$data['column'] }}_{{ @$slug }}" name="search[{!! @$data['field'] !!}][]" value="{{ $ikey }}" checked="checked" class="dropdown-filter-menu-item custom-control-input  form-check-input selected_checkbox {{ @$data['column'] }}-check-input" data-column="{{@$data['column'] }}" data-slug="{{ @$slug }}">
                                <label class="form-check-label custom-control-label" for="col_{{ @$data['column'] }}_{{ @$slug }}">{{ @$data_select }}</label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <button type="button" class="btn filter-remove-btn ml-1 remove_column_selected_data" data-name="search[{!! @$data['field'] !!}][]"><i class="fa-solid fa-xmark"></i></button>
            </div>
        @endif
    @endforeach 
    <button type="button" class="btn btn-danger clear-all-btn ml-1 clear_all_selected_data"><span>Clear All</span></button>
    <script>
        $('.app-content-wrap').addClass('has-filter');
    </script>
@else
    <script>
        $('.app-content-wrap').removeClass('has-filter');
    </script>
@endif

 
<script>
    $('.clear_all_selected_data').click(function(){
        $(".form-search-input:checked").each( function(i, val) {
            $("input[name='"+val.name+"']").prop('checked',false);
        });
        $('.btn-sort').removeClass("active");
        orderBy['value']    ='asc';
        orderBy['key']      ='{{ @$table }}.name';
        displayList();
        $('.app-content-wrap').removeClass('has-filter');
        $('#display_search_data').html('');
        $('.btn-filter-dropdown').addClass('data-no-load');
        
    });

    $('.remove_column_selected_data').click(function(){
        $(this).parent().remove();
        var name = $(this).data('name');
        $("input[name='"+name+"']").prop('checked',false);

        displayList();
    });

    $('.selected_checkbox').change(function(){
        var column  = $(this).data('column');
        var slug    = $(this).data('slug');

        $('#field_'+column+'_'+slug).prop('checked',false);

        displayList();
    });

</script>