@extends('adminlte::page')

@section('content_header')
    <h1><b>Totales por Gerencia</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 por Gerencia</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th>Gerencia</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody id="tablaResultados">
                            @foreach($registros_por_gerencia as $registro)
                            <tr>
                                <td>{{ $registro->gerencia }}</td>
                                <td>{{ $registro->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>
<button id="btnExportar" class="btn btn-success mb-3">
    <i class="fas fa-file-excel"></i> Exportar Excel Filtrado
</button>
@stop

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  document.getElementById('btnExportar').addEventListener('click', function() {
    const fecha_inicio = document.getElementById('fecha_inicio').value;
    const fecha_fin = document.getElementById('fecha_fin').value;

    // Mostrar carga
    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generando...';
    this.disabled = true;

    // Llamar al servidor para obtener datos filtrados
    fetch("{{ route('admin.exportar.excel') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            fecha_inicio: fecha_inicio,
            fecha_fin: fecha_fin
        })
    })
    .then(response => response.json())
    .then(data => {
        if(data.length === 0) {
            alert('No hay datos para exportar');
            return;
        }

        // Importar SheetJS dinámicamente
        const script = document.createElement('script');
        script.src = 'https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js';
        script.onload = () => {
            // Crear libro de trabajo
            const wb = XLSX.utils.book_new();
            
            // Preparar datos
            const datosExportar = data.map(item => ({
                'Nro': '', // Se llenará después
                'Gerencia': item.gerencia,
                'Tipo': item.tipo,
                'Acuerdo': item.acuerdo,
                'Atendido': item.atendido,
                'Departamento': item.departamento,
                'Persona': item.Persona,
                'Estado': item.estado,
                'Fecha': item.fecha
            }));

            // Agregar números consecutivos
            datosExportar.forEach((item, index) => { item.Nro = index + 1; });

            // Crear hoja de cálculo
            const ws = XLSX.utils.json_to_sheet(datosExportar);
            
            // Agregar hoja al libro
            XLSX.utils.book_append_sheet(wb, ws, 'Reporte');

            // Generar archivo XLS
            XLSX.writeFile(wb, `Reporte_${fecha_inicio || 'inicio'}_a_${fecha_fin || 'fin'}.xlsx`);
        };
        document.head.appendChild(script);
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Ocurrió un error al exportar');
    })
    .finally(() => {
        this.innerHTML = '<i class="fas fa-file-excel"></i> Exportar Excel Filtrado';
        this.disabled = false;
    });
});
</script>
@stop