@push('filter-buttons')
    <div class="dropdown bootstrap-select mb-0" style="width: fit-content;" data-toggle="tooltip"
         data-title="Selecione as colunas para visualização">
        <select id="select-columns" name="select-columns[]" class="selectpicker input-sm"
                data-style="btn-bmg-primary btn-sm btn-custom-sm font-14"
                aria-label="select-cycle" multiple title="Selecione as colunas...">
            @foreach($configColumns as $value => $label)
                <option value="{{ $value }}" @if($label['selected'] === true) selected @endif>
                    {{ $label['name'] }}
                </option>
            @endforeach
        </select>
    </div>
    <button type="button" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light"
            data-filter="#filter-eps" data-toggle="tooltip" data-title="Filtro Callcenter">
        <i class="ion ion-md-business"></i>
    </button>
    <button type="button" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light"
            data-filter="#filter-areas" data-toggle="tooltip" data-title="Filtrar Canal">
        <i class="ion ion-md-funnel"></i>
    </button>
    <button type="button" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light"
            data-modal="#filter-areas-modal" data-toggle="tooltip" data-title="Ordenação Manual">
        <i class="ion ion-md-list"></i>
    </button>
    <button type="button"
            class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light show-skill segment-dep"
            data-toggle="tooltip" data-title="Skill">
        <i class="ion ion-md-add"></i>
    </button>
    <button class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light" type="button" id="update"
            data-toggle="tooltip" title="Atualizar">
        <i class="ion ion-md-sync"></i>
    </button>
@endpush

@push('filter-content')
    @component('bootstrap::filter', ['id' => 'filter-eps'])
        <div class="col-12 eps-inputs checkboxies mt-4">
            <h3 class="header-title m-b-15">Callcenter</h3>
            <blockquote class="blockquote font-14 pb-0 mb-0">
                @forelse($eps as  $v)
                    <div class="custom-control custom-checkbox m-t-5 form-check-inline col-sm-3">
                        <input checked id="eps_{{$v->callcenter}}" type="checkbox" name="eps[]"
                               value='{{ $v->callcenter }}' class="custom-control-input">
                        <label class="custom-control-label" for="eps_{{$v->callcenter}}">
                            {{ $v->callcenter }}
                        </label>
                    </div>
                @empty
                    <h5><i>Não há itens para filtragem...</i></h5>
                @endforelse
            </blockquote>
        </div>
        <div class="clearfix"></div>
        @slot('footer')
            <div class="col-9">
                <div class="custom-control custom-checkbox float-right m-t-5 m-r-15">
                    <input type="checkbox" id="checkall_1" class="checkall custom-control-input" checked>
                    <label for="checkall_1" class="custom-control-label">Marcar Todos</label>
                </div>
            </div>
            <div class="col-3 mb-4">
                <button id="aplicar_filtros_eps"
                        class="btn-block btn btn-primary btn-custom waves-effect waves-light" type="button">
                    <i class="ion ion-md-refresh mr-2"></i> Atualizar
                </button>
            </div>
        @endslot
    @endcomponent

    @component('bootstrap::filter', ['id' => 'filter-areas'])
        <div class="col-12 eps-inputs checkboxies mt-4">
            <h3 class="header-title m-b-15">Canal</h3>
            <blockquote class="blockquote font-14 pb-0 mb-0">
                @forelse($areas as  $area)
                    <div class="custom-control custom-checkbox m-t-5 form-check-inline col-3"
                         style="display: inline-flex;">
                        <input checked id="area_{{$area->areaID}}" type="checkbox" name="area[]"
                               value='{{$area->areaID}}' class="custom-control-input">
                        <label for="area_{{$area->areaID}}" class="custom-control-label">
                            {{ $area->alias }}
                        </label>
                    </div>
                @empty
                    <h5><i>Não há itens para filtragem...</i></h5>
                @endforelse
            </blockquote>
        </div>
        <div class="clearfix"></div>
        @slot('footer')
            <div class="col-9">
                <div class="custom-control custom-checkbox float-right m-t-5 m-r-15">
                    <input type="checkbox" id="checkall_2" class="checkall custom-control-input" checked>
                    <label for="checkall_2" class="custom-control-label">Marcar Todos</label>
                </div>
            </div>
            <div class="col-3 mb-4">
                <button id="aplicar_filtros"
                        class="btn-block btn btn-primary btn-custom waves-effect waves-light" type="button">
                    <i class="ion ion-md-refresh mr-2"></i> Atualizar
                </button>
            </div>
        @endslot
    @endcomponent
@endpush