@extends('layouts.app') 
@section('content')
    <div class="col-sm-12">
        <div class="row">
            <div class="col-12">
                @if($errors->any())
                    <div class="alert alert-warning" role="alert">
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        <ul>
                    </div>
                @endif
            </div>
        </div>
        <form action="{{ route('graficos.avaliacao_cliente.grafico') }}" method="POST" autocomplete="off">
            @csrf
            <div class="row justify-content-md-center">
                <div class="col-sm-3">
                    <div class="input-group mb-3">
                        <span class="input-group-text">Mẽs</span>
                        <input type="text" class="form-control input-month text-center" name="inicial" id="inicial" placeholder="Início" aria-label="Início" maxlength="10" minlength="10" value="{{ $diaSelecionado ?? old('inicial') ?? '' }}" required>


                        <div class="modal" id="atendentes" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Filtro por atendente</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-6 text-right">
                                                <button type="button" class="btn btn-primary btn-sm" id="marcarTodos">Marcar todos</button>
                                            </div>
                                            <div class="col-6">
                                                <button type="button" class="btn btn-secondary btn-sm" id="desmarcarTodos">Desmarcar todos</button>
                                            </div>
                                        </div>
                                        <div class="row my-5">
                                                @if (isset($atendentes))
                                                    @foreach ($atendentes as $atendente)
                                                    <div class="col-4">

                                                        <div class="form-check form-check-inline form-switch">
                                                            <input class="form-check-input" type="checkbox" id="{{ $atendente->agentLogin }}" name="atendentes[]" value="{{ $atendente->agentLogin }}" checked>
                                                            <label class="form-check-label" style="color:black;" for="{{ $atendente->agentLogin }}">{{ $atendente->agentName }}</label>
                                                        </div><br />
                                                    </div>
                                                    @endforeach
                                                @endif
                                        </div>
                                    </div>
                                    
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                                        <button type="submit" class="btn btn-primary">Buscar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    @include('graficos.avaliacao_cliente.grafico')
@endsection

@section('script')
    <script>
        window.addEventListener('load', function() {
            $('.input-month').datepicker({
                format: "mm/yyyy",
                endDate: "0m",
                minViewMode: 1,
                maxViewMode: 2,
                language: "pt-BR",
                autoclose:  true
            })

            $('#marcarTodos').on('click', function() {
                $('.form-check-input').each(function(i){
                    $(this).prop("checked", true)
                })
            });

            $('#desmarcarTodos').on('click', function() {
                $('.form-check-input').each(function(i){
                    $(this).prop("checked", false)
                })
            });

            $('#inicial').on('change', () => {
                $('#atendentes').modal('show')
            })
        })
    </script>
@endsection