@section('content_header')
    <h1><b>Totales por Tipo de Actividad</b></h1>
    <hr>
@stop

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Filtrar por rango de fechas</h3>
            </div>
            <div class="card-body">
                <form id="filtroFechasForm">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="fecha_inicio">Fecha de inicio</label>
                            <input type="date" id="fecha_inicio" name="fecha_inicio" class="form-control" 
                                   value="{{ $fecha_inicio ?? '' }}">
                        </div>
                        <div class="col-md-3">
                            <label for="fecha_fin">Fecha de fin</label>
                            <input type="date" id="fecha_fin" name="fecha_fin" class="form-control"
                                   value="{{ $fecha_fin ?? '' }}">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary" style="margin-top: 30px;">
                                Filtrar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Indicadores</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th>Indicadores</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="tablaResultados">
                            @foreach($solicitudes_por_tipo as $solicitud)
                            <tr>
                                <td>{{ $solicitud->tipo }}</td>
                                <td>{{ $solicitud->total }}</td>
                            </tr>
                            @endforeach                          
                        </tbody>
                        <tfoot>
                            <tr class="table-active bg-primary text-white">
                                <td><strong>TOTAL GENERAL</strong></td>
                                <td><strong id="totalGeneral">{{ $total_general }}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Función para actualizar la tabla
        function actualizarTabla(fecha_inicio, fecha_fin) {
            $.ajax({
                url: "{{ route('admin.filtrar.fechas6') }}",
                method: 'GET',
                data: {
                    fecha_inicio: fecha_inicio,
                    fecha_fin: fecha_fin
                },
                success: function(response) {
                    var html = '';
                    response.solicitudes_por_tipo.forEach(function(solicitud) {
                        html += '<tr>' +
                               '<td>' + solicitud.tipo + '</td>' +
                               '<td>' + solicitud.total + '</td>' +
                               '</tr>';
                    });
                    $('#tablaResultados').html(html);
                    $('#totalGeneral').text(response.total_general);
                },
                error: function(xhr) {
                    console.error('Error al filtrar por fechas');
                }
            });
        }

        // Enviar el formulario con AJAX
        $('#filtroFechasForm').on('submit', function(e) {
            e.preventDefault();
            
            var fecha_inicio = $('#fecha_inicio').val();
            var fecha_fin = $('#fecha_fin').val();

            if (fecha_inicio && fecha_fin) {
                actualizarTabla(fecha_inicio, fecha_fin);
            } else {
                alert('Por favor, selecciona un rango de fechas válido.');
            }
        });
    });
</script>
@stop