@push('filter-buttons')
    <button type="button" class="btn btn-sm btn-custom-sm btn-bmg-primary waves-effect waves-light btn-show-filter-row"
        data-toggle="tooltip" data-filter="#page-filters" title="Filtros">
        <i class="ion ion-md-funnel"></i>
    </button>
@endpush
@push('filter-content')
    @component('bootstrap::filter', ['id' => 'page-filters', 'class' => 'shared-filter'])
        <div class="col-4 area-inputs checkboxies mt-4">
            <h3 class="header-title m-b-15">Canal</h3>
            <blockquote class="blockquote font-14 pb-0 mb-0">
                <div class="form-group">
                    <select class="form-control select2" name="area" id="filter-area">
                        <option value="">Todos</option>
                        @foreach ($filter['areas'] as $area)
                            <option value="{{ $area->areaID }}">{{ $area->area }}</option>
                        @endforeach
                    </select>
                </div>
            </blockquote>
        </div>

        <div class="col-6 mt-4" id="operations-inputs">
            <h3 class="header-title m-b-15">Agrupamento <span class="font-12 text-muted">(Mantenha o mouse no agrupamento pra ver o canal)</span></h3>
            <div class="form-group">
                <div id="operations">
                    @foreach ($filter['operations'] as $operation)
                        <div class="operations-item" data-area-id="{{ $operation->areaID }}" style="display: none;">
                            <div class="custom-control custom-checkbox m-t-5 form-check-inline col">
                                <input
                                    id="operation_{{ $operation->operationID }}"
                                    type="checkbox"
                                    name="operation[]"
                                    value="{{ $operation->operationID }}"
                                    class="custom-control-input operation-check">
                                    <label
                                        class="custom-control-label"
                                        for="operation_{{ $operation->operationID }}"
                                        title="{{ $operation->area }} - {{ $operation->operation }}">
                                        {{ $operation->operation }}
                                    </label>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        @slot('footer')
            <div class="col-9">
                <div class="custom-control custom-checkbox float-right m-t-5 m-r-15" id="checkall_checkbox">
                    <input type="checkbox" id="checkall_operations" class="checkall custom-control-input" checked
                        data-check=".operation-check">
                    <label for="checkall_operations" class="custom-control-label">Marcar Todos</label>
                </div>
            </div>
            <div class="col-3 mb-4">
                <button id="apply_filter" 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
@push('page-js')
    <script>
        $('#checkall_operations').click(function() {
            let boolCheck = $(this).prop('checked');
            let checkBoxes = $(this).data('check');
            $(`${checkBoxes}:visible`).prop('checked', boolCheck);
        });

        $(document).ready(function() {
            $('#filter-area').change(function (e) {
                e.preventDefault();
                const filterArea = $(this).val();

                $('#operations .operations-item').hide().find('input').prop('checked', false).hide();

                if (filterArea != '') {
                    $(`#operations .operations-item[data-area-id=${filterArea}]`).show().find('input').prop('checked', true).show();
                }
            });

            // refreshLabelLastUpdate();
        });
    </script>
@endpush