@extends('adminlte::page')

@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 align-items-end"> <!-- Alinea todos los elementos en la parte inferior -->
                        <!-- Campos de fecha -->
                        <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>
                        
                        <!-- Botón Filtrar -->
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary btn-block">
                                <i class="fas fa-filter mr-2"></i>Filtrar
                            </button>
                        </div>
                        
                         <!-- Botones adicionales alineados a la derecha -->
                         <div class="col-md-4 d-flex justify-content-end gap-2">
                            <a href="{{ url('/admin3') }}" class="btn btn-success">
                                <i class="fas fa-chart-line mr-2"></i>Gráfica
                            </a>
                            <a href="{{ route('admin.reportes.unificado') }}" class="btn btn-secondary">
                                <i class="fas fa-file-alt mr-2"></i>Reporte del personal
                            </a>
                            <a href="{{ route('admin.solicituds.index') }}" class="btn btn-info text-white">
                                <i class="fas fa-clipboard-list mr-2"></i>Actividades
                            </a>
                        </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>Cantidad de {{ $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>Cantidad de ' + 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