@push('filter-buttons')
    <a href="javascript:void('')" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light"
       id="reportrange" data-toggle="tooltip" title="Selecione um período"
       data-date="{{ date('Y-m') }}">
        <i class="ion ion-md-calendar"></i>&nbsp;<span></span>
    </a>
    <button type="button" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light" data-toggle="tooltip" data-filter="#filter-competition-reports" title="" data-original-title="Filtros">
        <i class="ion ion-md-options"></i>
    </button>
    <button class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light" type="button" id="update-all"
            data-toggle="tooltip" title="Atualizar">
        <i class="ion ion-md-sync"></i>
    </button>
@endpush

@push('filter-content')
    @component('bootstrap::filter', ['id' => 'filter-competition-reports', 'class' => 'shared-filter'])

        <input type="hidden" name="filtersJson" value="{{$filtersCompetition['json']->toJson()}}">

        <div class="col-sm-12 col-md-2 mt-4">
            <h3 class="header-title m-b-15">Tipo</h3>
            <div class="form-group">
                <blockquote class="blockquote font-14 pb-0 mb-0">
                    <div class="custom-control custom-radio m-t-5 form-check-inline">
                        <input checked id="type_nps" type="radio"
                               class="custom-control-input" value='NPS' name="type_layout">
                        <label class="custom-control-label" for="type_nps">
                            NPS
                        </label>
                    </div>
                    <div class="custom-control custom-radio m-t-5 form-check-inline">
                        <input id="type_recontato" type="radio"
                               class="custom-control-input" value='Recontato' name="type_layout">
                        <label class="custom-control-label" for="type_recontato">
                            Recontato
                        </label>
                    </div>
                </blockquote>
            </div>
        </div>

        <div class="col-sm-12 col-md-2 mt-4">
            <h3 class="header-title m-b-15">Callcenter</h3>
            <div class="form-group">
                <blockquote class="blockquote font-14 pb-0 mb-0">
                    @foreach($filtersCompetition['callcenters'] as $callcenter)
                        <div class="custom-control custom-checkbox m-t-5 form-check-inline check-callcenter">
                            <input id="callcenter_{{ $callcenter['callcenterID'] }}" type="checkbox"
                                   class="call-check custom-control-input" value="{{ $callcenter['callcenterID'] }}" name="callcenter[]">
                            <label class="custom-control-label" for="callcenter_{{ $callcenter['callcenterID'] }}">
                                {{ $callcenter['callcenter'] }}
                            </label>
                        </div>
                    @endforeach
                </blockquote>
            </div>
        </div>

        <div class="col-sm-12 col-md-2 mt-4">
            <h3 class="header-title m-b-15">
                <a href="javascript:void(0);" class="text-right text-primary float-right font-24" data-toggle="tooltip" title="Marcar todos os canais" data-toggle-all="operation">
                    <i class="mdi mdi-toggle-switch"></i>
                </a> Canal
            </h3>
            </h3>
            <div class="form-group" data-toggle-all="operation">
                <blockquote class="blockquote font-14 pb-0 mb-0 pr-0 block-channels">
                    @foreach($filtersCompetition['channels'] as $channel)
                        <div class="custom-control custom-checkbox m-t-5 form-check-inline check-channel " data-name="{{$channel->area}}">
                            <input id="operation_{{ $loop->iteration }}" type="checkbox"
                                   class="call-check custom-control-input" name="operation[]" data-ids="[]" data-tipo="{{ $channel->Tipo }}">
                            <label class="custom-control-label w-100 text-white text-break px-1"  style="background-color: {{ $channel->colorRGB }}" for="operation_{{ $loop->iteration }}">
                                {{ $channel->area }}
                            </label>
                        </div>
                    @endforeach
                </blockquote>
            </div>
        </div>

        <div class="col-sm-12 col-md-6 mt-4">
            <h3 class="header-title m-b-15">
                <a href="javascript:void(0);" class="text-right text-primary float-right font-24" data-toggle="tooltip" title="Marcar todos os agrupamentos" data-toggle-all="grouping">
                    <i class="mdi mdi-toggle-switch"></i>
                </a> Agrupamento
            </h3>
            <div class="form-group"  data-toggle-all="grouping">
                <blockquote class="blockquote font-14 pb-0 mb-0 row block-group">
                    @foreach($filtersCompetition['groupings'] as $grouping)
                        <div title="{{-- $grouping->area --}}" data-name="{{$grouping->operation}}"
                            class="custom-control custom-checkbox m-t-5 form-check-inline mx-0 groupingVisibleControl-{{ $loop->iteration }} col-sm-12 col-md-6 col-lg-4">
                            <input id="grouping_{{ $loop->iteration }}" type="checkbox"
                                   class="call-check custom-control-input" data-iteration="{{ $loop->iteration }}" name="grouping[]" data-ids="[]">
                            <label class="custom-control-label" for="grouping_{{ $loop->iteration }}" for="grouping_{{ $grouping->operationID }}">
                                {{ $grouping->operation }}
                            </label>
                        </div>
                    @endforeach
                </blockquote>
            </div>
        </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" class="checkall custom-control-input" checked
                           data-check=".call-check">
                    <label for="checkall" class="custom-control-label">Marcar Todos</label>
                </div>
            </div> --}}
            <div class="col-3 offset-9 mb-4">
                <button id="apply_filters"
                        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