@extends('adminlte::page')

@section('content_header')
<h1><b>Departamento de Tecnología, Información y Comunicación</b></h1>
<hr>
@stop

@section('content')
<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-md-4">
                <h3 class="card-title mb-0">Registros de Desarrollo</h3>
            </div>
            <div class="col-md-8">
                <div class="d-flex flex-wrap justify-content-end">
                    <div class="filter-group mr-3 mb-2">
                        <label for="filtroGerencia" class="mr-2 mb-0">Gerencia:</label>
                        <select id="filtroGerencia" class="form-control form-control-sm" style="width: 200px">
                            <option value="">Todas</option>
                            <option value="AUDITORIA INTERNA">AUDITORIA INTERNA</option>
                            <option value="CONSULTORIA JURIDICA">CONSULTORIA JURIDICA</option>
                            <option value="DESPACHO DE PRESIDENCIA">DESPACHO DE PRESIDENCIA</option>
<option value="GERENCIA COMERCIAL">GERENCIA COMERCIAL</option>
<option value="GERENCIA DE ADMINISTRACIÓN Y FINANZAS">GERENCIA DE ADMINISTRACIÓN Y FINANZAS</option>
<option value="GERENCIA DE COMUNICACIÓN CORPORATIVA">GERENCIA DE COMUNICACIÓN CORPORATIVA</option>
<option value="GERENCIA DE CONTRATACIONES">GERENCIA DE CONTRATACIONES</option>
<option value="GERENCIA DE FUENTES HIDRICAS">GERENCIA DE FUENTES HIDRICAS</option>
<option value="GERENCIA DE GESTIÓN COMUNITARIA">GERENCIA DE GESTIÓN COMUNITARIA</option>
<option value="GERENCIA DE MANTENIMIENTO DE REDES DE AGUA IRIBARREN">GERENCIA DE MANTENIMIENTO DE REDES DE AGUA IRIBARREN</option>
<option value="GERENCIA DE MANTENIMIENTO ELECTROMECANICO METROPOLITANA">GERENCIA DE MANTENIMIENTO ELECTROMECANICO METROPOLITANA</option>
<option value="GERENCIA DE PLANIFICACIÓN ESTRATEGICA">GERENCIA DE PLANIFICACIÓN ESTRATEGICA</option>
<option value="GERENCIA DE PLANIFICACIÓN Y PRESUPUESTO">GERENCIA DE PLANIFICACIÓN Y PRESUPUESTO</option>
<option value="GERENCIA DE PREVENCIÓN, CONTROL Y PERDIDA">GERENCIA DE PREVENCIÓN, CONTROL Y PERDIDA</option>
<option value="GERENCIA DE SERVICIOS GENERALES">GERENCIA DE SERVICIOS GENERALES</option>
<option value="GERENCIA DE TALENTO HUMANO">GERENCIA DE TALENTO HUMANO</option>
<option value="GERENCIA DE TECNOLOGÍA, INFORMACIÓN Y COMUNICACIÓN">GERENCIA DE TECNOLOGÍA, INFORMACIÓN Y COMUNICACIÓN</option>
<option value="GERENCIA OPERATIVA IRIBARREN">GERENCIA OPERATIVA IRIBARREN</option>
<option value="GERENCIA OPERATIVA MUNICIPIOS FORANEOS">GERENCIA OPERATIVA MUNICIPIOS FORANEOS</option>
<option value="GERENCIA OPERATIVA PALAVECINO">GERENCIA OPERATIVA PALAVECINO</option>
<option value="GERENCIA TECNICA">GERENCIA TECNICA</option>
<option value="GERENTE DE OBRAS">GERENTE DE OBRAS</option>
<option value="PRESIDENCIA">PRESIDENCIA</option>
<option value="VARIAS GERENCIAS">VARIAS GERENCIAS</option>
<option value="VICE PRESIDENCIA ADMINISTRATIVA">VICE PRESIDENCIA ADMINISTRATIVA</option>
<option value="VICE PRESIDENCIA OPERATIVA">VICE PRESIDENCIA OPERATIVA</option>
                        </select>
                    </div>
                    <div class="filter-group mr-3 mb-2">
                        <label for="filtroAtencion" class="mr-2 mb-0">Tipo de Atención:</label>
                        <select id="filtroAtencion" class="form-control form-control-sm" style="width: 180px">
                            <option value="">Todos</option>
                            <option value="Intranet">Intranet</option>
                                        <option value="Otros">Otros</option>
                                        <option value="Redes">Redes</option>
                                        <option value="Servidor">Servidor</option>
                                        <option value="SIA">SIA</option>
                                        <option value="Web">Web</option>
                                        <option value="Zimbra">Zimbra</option>
                        </select>
                    </div>
                    <div class="filter-group mb-2">
                        <div class="d-flex align-items-center">
                            <label class="mr-2 mb-0">Fecha:</label>
                            <div class="input-group input-group-sm">
                                <input type="text" id="filtroFechaInicio" class="form-control" placeholder="Inicio" style="width: 100px">
                                <div class="input-group-append">
                                    <span class="input-group-text">-</span>
                                </div>
                                <input type="text" id="filtroFechaFin" class="form-control" placeholder="Fin" style="width: 100px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card-body p-2">
        <div class="mb-2 text-right">
            <div class="d-flex justify-content-end">
                <a href="{{ url('/admin/clientes/create') }}" class="btn btn-primary btn-sm mr-2">
                    <i class="fas fa-plus"></i> Crear nuevo
                </a>
                   <!-- NUEVO BOTÓN PARA USUARIOS -->
            <a href="{{ route('admin.usuarios.create') }}" class="btn btn-warning btn-sm mr-2">
                <i class="fas fa-user-plus"></i> Crear Usuario
            </a>
                <button id="exportarExcel" class="btn btn-success btn-sm">
                    <i class="fas fa-file-excel"></i> Exportar a Excel
                </button>
                <button id="exportarPdf" class="btn btn-danger btn-sm mr-2">
                    <i class="fas fa-file-pdf"></i> Exportar a PDF
                </button>
                <a href="{{ url('/admin5') }}" class="btn btn-info btn-sm">
                    <i class="fas fa-chart-bar"></i> Gráfica
                </a>
            </div>
        </div>
        
        <div class="table-responsive">
            <table id="clientesTable" class="table table-bordered table-striped table-hover mb-0" style="font-size: 0.875rem">
                <thead>
                    <tr>
                        <th style="width: 50px; text-align: center">Nro</th>
                        <th style="min-width: 20px">Gerencia</th>
                        <th style="min-width: 20px">Atención</th>
                        <th style="min-width: 100px">Incidencia</th>
                        <th style="width: 90px">Atendido</th>
                        <th style="min-width: 100px">Observación</th>
                        <th style="width: 90px" data-order-data="6">Fecha</th>
                        <th style="width: 90px">Hora</th>
                        <th style="width: 120px">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @php $contador = 1; @endphp
                    @foreach ($clientes as $cliente)
                        <tr>
                            <td style="text-align: center">{{ $contador++ }}</td>
                            <td>{{ $cliente->gerencia ?? 'N/A' }}</td>
                            <td>{{ $cliente->tipofalla ?? 'N/A' }}</td>
                            <td>{{ $cliente->falla ?? 'N/A' }}</td>
                            <td>{{ $cliente->atendido ?? 'N/A' }}</td>
                            <td>{{ $cliente->observacion ?? 'N/A' }}</td>
                            <td class="text-center" data-order="{{ $cliente->fecha ?? '' }}">
                                {{ $cliente->fecha ? \Carbon\Carbon::parse($cliente->fecha)->format('d/m/Y') : 'N/A' }}
                            </td>
                            <td class="text-center">{{ $cliente->created_at ? $cliente->created_at->format('h:i A') : 'N/A' }}</td>
                            <td class="text-center">
                                <div class="btn-group" role="group" aria-label="Acciones">
                                    <a href="{{ url('/admin/clientes', $cliente->id) }}" style="border-radius: 4px 0px 0px 4px" class="btn btn-info btn-sm"><i class="fas fa-eye"></i></a>
                                    <a href="{{ url('/admin/clientes/' . $cliente->id . '/edit') }}" class="btn btn-success btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <form action="{{ url('/admin/clientes', $cliente->id) }}" method="post" onclick="preguntar{{ $cliente->id }}(event)" id="miFormulario{{ $cliente->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" style="border-radius: 0px 4px 4px 0px"><i class="fas fa-trash"></i></button>
                                    </form>
                                    <script>
                                        function preguntar{{ $cliente->id }}(event) {
                                            event.preventDefault();
                                            Swal.fire({
                                                title: '¿Desea eliminar el registro?',
                                                text: '',
                                                icon: 'question',
                                                showDenyButton: true,
                                                confirmButtonText: 'Eliminar',
                                                confirmButtonColor: '#a5161d',
                                                denyButtonColor: '#270a0a',
                                                denyButtonText: 'Cancelar',
                                            }).then((result) => {
                                                if (result.isConfirmed) {
                                                    var form = $('#miFormulario{{ $cliente->id }}');
                                                    form.submit();
                                                }
                                            });
                                        }
                                    </script>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@stop

@section('css')
<link rel="stylesheet" href="{{ asset('vendor/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    .card-header {
        padding: 0.75rem 1.25rem;
    }
    .table th, .table td {
        padding: 0.5rem;
        vertical-align: middle;
    }
    .btn-group {
        display: flex;
        justify-content: center;
    }
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        margin: 0 1px;
    }
    .filter-group {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }
    .filter-group:last-child {
        margin-right: 0;
    }
    .filter-group label {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .input-group-sm > .form-control,
    .input-group-sm > .input-group-append > .input-group-text {
        height: calc(1.8125rem + 2px);
        font-size: 0.875rem;
    }
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 992px) {
        .filter-group {
            width: 100%;
            margin-right: 0;
            margin-bottom: 10px;
        }
        .filter-group select, .filter-group .input-group {
            flex-grow: 1;
        }
    }
</style>
@stop

@section('js')
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
<script>
    const { jsPDF } = window.jspdf;
    
    $(function () {
        // Configuración de Flatpickr para fechas
        flatpickr("#filtroFechaInicio", {
            dateFormat: "d/m/Y",
            locale: "es",
            allowInput: true,
            maxDate: "today",
            onChange: function(selectedDates, dateStr) {
                if(dateStr) {
                    fechaFin.set('minDate', dateStr);
                } else {
                    fechaFin.clear();
                }
                aplicarFiltroFecha();
            }
        });

        const fechaFin = flatpickr("#filtroFechaFin", {
            dateFormat: "d/m/Y",
            locale: "es",
            allowInput: true,
            maxDate: "today",
            onChange: function(selectedDates, dateStr) {
                aplicarFiltroFecha();
            }
        });

        var table = $('#clientesTable').DataTable({
            "responsive": true,
            "autoWidth": false,
            "scrollX": true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            "order": [[0, "asc"]],
            "pageLength": 10,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
            "columnDefs": [
                { "type": "date", "targets": 6 }, // Para ordenamiento correcto de fechas
                { "targets": [8], "orderable": false } // Columna de acciones no ordenable
            ]
        });

        // Función para aplicar el filtro de rango de fechas
        function aplicarFiltroFecha() {
    const inicio = $('#filtroFechaInicio').val();
    const fin = $('#filtroFechaFin').val();

    // Limpiar filtros anteriores
    $.fn.dataTable.ext.search.pop();
    
    // Aplicar nuevo filtro
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            if (!inicio && !fin) return true;
            
            const fechaCell = data[6]; // Columna de fecha (índice 6 en el código original)
            if (!fechaCell || fechaCell === 'N/A') return false;
            
            // Convertir fecha de la tabla a objeto Date (formato d/m/Y)
            const [dia, mes, anio] = fechaCell.split('/');
            const fechaRow = new Date(`${anio}-${mes}-${dia}`);
            
            // Convertir fechas de filtro a objetos Date
            let fechaInicioObj = inicio ? 
                new Date(inicio.split('/').reverse().join('-')) : null;
            let fechaFinObj = fin ? 
                new Date(fin.split('/').reverse().join('-')) : null;
            
            // Ajustar fecha fin para incluir todo el día
            if (fechaFinObj) {
                fechaFinObj.setDate(fechaFinObj.getDate() + 1);
            }
            
            // Comparación corregida
            if (inicio && fin) {
                return fechaRow >= fechaInicioObj && fechaRow < fechaFinObj;
            } else if (inicio) {
                return fechaRow >= fechaInicioObj;
            } else if (fin) {
                return fechaRow < fechaFinObj;
            }
            return true;
        }
    );
    
    table.draw();
}
        // Filtro por Gerencia
        $('#filtroGerencia').on('change', function() {
            table.column(1).search(this.value).draw();
        });

        // Filtro por Tipo de Atención
        $('#filtroAtencion').on('change', function() {
            table.column(2).search(this.value).draw();
        });

        // Exportar a Excel
        $('#exportarExcel').on('click', function() {
            const filteredData = table.rows({ search: 'applied' }).data();
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet('Atención a Clientes');
            
            // Encabezados
            const headers = [
                'Nro', 'Gerencia', 'Atención', 'Incidencia', 
                'Atendido', 'Observación', 'Fecha', 'Hora'
            ];
            worksheet.addRow(headers);
            
            // Datos
            filteredData.each(function(row) {
                let fecha = row[6];
                if (typeof fecha === 'object' && fecha.display) {
                    fecha = fecha.display;
                }
                
                const rowData = [
                    row[0], // Nro
                    row[1], // Gerencia
                    row[2], // Atención
                    row[3], // Incidencia
                    row[4], // Atendido
                    row[5], // Observación
                    fecha,  // Fecha
                    row[7]  // Hora
                ];
                worksheet.addRow(rowData);
            });
            
            // Estilo encabezados
            worksheet.getRow(1).eachCell(function(cell) {
                cell.font = { bold: true };
                cell.fill = {
                    type: 'pattern',
                    pattern: 'solid',
                    fgColor: { argb: 'FF4472C4' }
                };
                cell.font.color = { argb: 'FFFFFFFF' };
                cell.alignment = { vertical: 'middle', horizontal: 'center' };
            });
            
            // Autoajustar columnas
            worksheet.columns.forEach(function(column) {
                let maxLength = 0;
                column.eachCell({ includeEmpty: true }, function(cell) {
                    const columnLength = cell.value ? cell.value.toString().length : 0;
                    if (columnLength > maxLength) {
                        maxLength = columnLength;
                    }
                });
                column.width = maxLength < 10 ? 10 : maxLength + 2;
            });
            
            // Generar archivo
            workbook.xlsx.writeBuffer().then(function(buffer) {
                const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                saveAs(blob, 'Desarrollo_' + new Date().toISOString().slice(0, 10) + '.xlsx');
            });
        });

        // Exportar a PDF
        $('#exportarPdf').on('click', function() {
            const table = $('#clientesTable').DataTable();
            const filteredData = table.rows({ search: 'applied' }).data();
            
            const doc = new jsPDF({
                orientation: 'landscape',
                unit: 'mm'
            });
            
            // Título y fecha
            doc.setFontSize(16);
            doc.text("Registros de Atención a Clientes", 140, 15, { align: 'center' });
            doc.setFontSize(10);
            doc.text("Generado el: " + new Date().toLocaleDateString('es-ES'), 140, 20, { align: 'center' });
            
            // Encabezados de la tabla
            const headers = [
                {title: 'Nro', dataKey: 'nro'},
                {title: 'Gerencia', dataKey: 'gerencia'},
                {title: 'Atención', dataKey: 'atencion'},
                {title: 'Incidencia', dataKey: 'incidencia'},
                {title: 'Atendido', dataKey: 'atendido'},
                {title: 'Observación', dataKey: 'observacion'},
                {title: 'Fecha', dataKey: 'fecha'},
                {title: 'Hora', dataKey: 'hora'}
            ];
            
            // Procesar datos
            const data = [];
            filteredData.each(function(row) {
                let fecha = row[6];
                if (typeof fecha === 'object' && fecha.display) {
                    fecha = fecha.display;
                }
                
                data.push({
                    nro: row[0],
                    gerencia: row[1],
                    atencion: row[2],
                    incidencia: row[3],
                    atendido: row[4],
                    observacion: row[5],
                    fecha: fecha,
                    hora: row[7]
                });
            });
            
            // Configurar tabla en PDF
            doc.autoTable({
                columns: headers,
                body: data,
                startY: 25,
                styles: {
                    fontSize: 8,
                    cellPadding: 3,
                    overflow: 'linebreak',
                    valign: 'middle',
                    halign: 'center',
                    lineWidth: 0.2,
                    lineColor: [220, 220, 220]
                },
                columnStyles: {
                    nro: { cellWidth: 10 },
                    gerencia: { cellWidth: 30 },
                    atencion: { cellWidth: 25 },
                    incidencia: { cellWidth: 40 },
                    atendido: { cellWidth: 20 },
                    observacion: { cellWidth: 40 },
                    fecha: { cellWidth: 15 },
                    hora: { cellWidth: 15 }
                },
                headerStyles: {
                    fillColor: [51, 102, 153],
                    textColor: [255, 255, 255],
                    fontStyle: 'bold',
                    halign: 'center',
                    valign: 'middle'
                },
            });
            
            // Guardar PDF
            doc.save('Atencion_Clientes_' + new Date().toISOString().slice(0, 10) + '.pdf');
        });
    });
</script>
@stop