@extends('adminlte::page')

@section('content_header')
<h1><b>Departamento de Organizacion y Sistemas</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">Listado de Organizaciones</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: 150px">
                            <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="filtroTipo" class="mr-2 mb-0">Tipo:</label>
                        <select id="filtroTipo" class="form-control form-control-sm" style="width: 200px">
                            <option value="">Todos</option>
                            <option value="Diagnósticos de Sistemas de información">Diagnósticos de Sistemas de información</option>
<option value="Estrutura de cargos">Estrutura de cargos</option>
<option value="Manual Descriptor de Cargos (elaboracion y actualización)">Manual Descriptor de Cargos (elaboracion y actualización)</option>
<option value="Manual de Funciones (elaboración y actualización)">Manual de Funciones (elaboración y actualización)</option>
<option value="Manual de Normas y Procedimientos (elaboracion y actualización)">Manual de Normas y Procedimientos (elaboracion y actualización)</option>
<option value="Otros">Otros</option>
<option value="Otros documentos organizacional">Otros documentos organizacional</option>
<option value="Sellos">Sellos</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>
    <!-- /.card-header -->
     <!-- /.card-header -->
     <div class="card-body p-2">
        <div class="mb-2 text-right">
            <div class="d-flex justify-content-end">
                <a href="{{ url('/admin/organizacions/create') }}" class="btn btn-primary btn-sm mr-2">
                    <i class="fas fa-plus"></i> Crear nuevo
                </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>
            </div>
        </div>
        <div class="table-responsive">
            <table id="organizacionesTable" 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">Tipo</th>
                        <th style="min-width: 100px">Acuerdo</th>
                        <th style="width: 90px">Atendido</th>
                        <th style="min-width: 10px">Departamento</th>
                        <th style="min-width: 20px">Persona</th>
                        <th style="width: 100px">Estado</th>
                        <th style="width: 90px" data-order-data="9">Fecha</th>
                        <th style="width: 90px">Hora</th>
                        <th style="width: 120px">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @php $contador = 1; @endphp
                    @foreach ($organizacions as $organizacion)
                        <tr>
                            <td style="text-align: center">{{ $contador++ }}</td>
                            <td>{{ $organizacion->gerencia ?? 'N/A' }}</td>
                            <td>{{ $organizacion->tipo ?? 'N/A' }}</td>
                            <td>{{ $organizacion->acuerdo ?? 'N/A' }}</td>
                            <td>{{ $organizacion->atendido ?? 'N/A' }}</td>
                            <td>{{ $organizacion->departamento ?? 'N/A' }}</td>
                            <td>{{ $organizacion->Persona ?? 'N/A' }}</td>
                            <td class="text-center">
                                <span class="badge badge-{{ $organizacion->estado == 'Completado' ? 'success' : 'warning' }}">
                                    {{ $organizacion->estado ?? 'Pendiente' }}
                                </span>
                            </td>
                            <td class="text-center" data-order="{{ $organizacion->fecha ?? '' }}">
                                {{ $organizacion->fecha ? \Carbon\Carbon::parse($organizacion->fecha)->format('d/m/Y') : 'N/A' }}
                            </td>
                            <td class="text-center">{{ $organizacion->created_at ? $organizacion->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/organizacions', $organizacion->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/organizacions/' . $organizacion->id . '/edit') }}" class="btn btn-success btn-sm">
                                        <i class="fas fa-pencil-alt"></i>
                                    </a>
                                    <form action="{{ url('/admin/organizacions', $organizacion->id) }}" method="post" onclick="preguntar{{ $organizacion->id }}(event)" id="miFormulario{{ $organizacion->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{{ $organizacion->id }}(event) {
                                            event.preventDefault(); // Evitar el envío inmediato del formulario
                                            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{{ $organizacion->id }}');
                                                    form.submit();
                                                }
                                            });
                                        }
                                    </script>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <div class="mt-3">
            <a href="{{ url('/admin4') }}" class="btn btn-primary">Gráfica</a>
            <a href="{{ url('/admin7') }}" class="btn btn-secondary">Consulta de gerencia</a>
        </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;
    }
    .badge {
        font-size: 90%;
        padding: 0.35em 0.5em;
    }
    .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;
    }
    #exportarExcel {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    @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 los campos de fecha
        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 = $('#organizacionesTable').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": 8 }, // Para ordenamiento correcto de fechas
                { "targets": [10], "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[8]; // Columna de fecha
                    if (!fechaCell || fechaCell === 'N/A') return false;
                    
                    // Convertir fecha de la tabla a objeto Date (formato YYYY-MM-DD)
                    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();
        }

        // Asignar eventos
        $('#filtroFechaInicio, #filtroFechaFin').on('change', aplicarFiltroFecha);
        $('#filtroGerencia, #filtroTipo').on('change', function() {
            const colIdx = $(this).attr('id') === 'filtroGerencia' ? 1 : 2;
            table.column(colIdx).search(this.value).draw();
        });
        // Filtro por Gerencia (columna 1)
        $('#filtroGerencia').on('change', function() {
            table.column(1).search(this.value).draw();
        });

        // Filtro por Tipo (columna 2)
        $('#filtroTipo').on('change', function() {
            table.column(2).search(this.value).draw();
        });

        // Exportar a Excel
        $('#exportarExcel').on('click', function() {
    // Obtener los datos filtrados
    const filteredData = table.rows({ search: 'applied' }).data();
    
    // Crear libro de Excel
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Organizaciones');
    
    // Añadir encabezados
    const headers = [
        'Nro', 'Gerencia', 'Tipo', 'Acuerdo', 'Atendido', 
        'Departamento', 'Persona', 'Estado', 'Fecha', 'Hora'
    ];
    worksheet.addRow(headers);
    
    // Añadir datos
    filteredData.each(function(row) {
        // Extraer solo el texto de la fecha (ignorar el objeto data-order)
        let fecha = row[8];
        if (typeof fecha === 'object' && fecha.display) {
            fecha = fecha.display; // Tomar solo la parte de visualización
        }
        
        // Extraer el estado correctamente
        let estado = row[7];
        if (typeof estado === 'string') {
            estado = estado.toLowerCase()
                          .replace(/culm\s*inado/g, 'culminado')
                          .replace(/en\s+proceso/g, 'en proceso')
                          .trim();
            // Si es string, puede contener el HTML completo del badge
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = estado;
            const badgeElement = tempDiv.querySelector('.badge');
            estado = badgeElement ? badgeElement.textContent : estado;
        } else if (estado instanceof $) {
            // Si es objeto jQuery (poco probable en DataTables)
            estado = estado.find('.badge').text();
        } else if (estado && estado.textContent) {
            // Si es un elemento DOM directo
            estado = estado.textContent;
        }
        
        const rowData = [
            row[0], // Nro
            row[1], // Gerencia
            row[2], // Tipo
            row[3], // Acuerdo
            row[4], // Atendido
            row[5], // Departamento
            row[6], // Persona
            estado || 'Pendiente', // Estado (con valor por defecto)
            fecha, // Fecha (solo el texto formateado)
            row[9]  // Hora
        ];
        worksheet.addRow(rowData);
    });
    
    // Estilo para 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;
    });
    
    // Generar archivo
    workbook.xlsx.writeBuffer().then(function(buffer) {
        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, 'Organizaciones_' + new Date().toISOString().slice(0, 10) + '.xlsx');
    });
});
    });

    $('#exportarPdf').on('click', function() {
    // Obtener la tabla con los filtros aplicados
    const table = $('#organizacionesTable').DataTable();
    const filteredData = table.rows({ search: 'applied' }).data();
    
    // Configuración del PDF
    const doc = new jsPDF({
        orientation: 'landscape',
        unit: 'mm'
    });
    
    // Título y fecha
    doc.setFontSize(16);
    doc.text("Listado de Organizaciones", 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: 'Tipo', dataKey: 'tipo'},
        {title: 'Acuerdo', dataKey: 'acuerdo'},
        {title: 'Atendido', dataKey: 'atendido'},
        {title: 'Departamento', dataKey: 'departamento'},
        {title: 'Persona', dataKey: 'persona'},
        {title: 'Estado', dataKey: 'estado'},
        {title: 'Fecha', dataKey: 'fecha'},
        {title: 'Hora', dataKey: 'hora'}
    ];
    
    // Procesar los datos filtrados con manejo especial para el estado
    const data = [];
    filteredData.each(function(row) {
        // Procesamiento especial para el estado
        let estado = row[7];
        if (typeof estado === 'string') {
            // Normalizar el texto del estado
            estado = estado.toLowerCase()
                          .replace(/culm\s*inado/g, 'culminado')  // Corrige "culm inado"
                          .replace(/en\s+proceso/g, 'en proceso') // Unifica "en proceso"
                          .replace(/\s+/g, ' ')                    // Elimina espacios múltiples
                          .trim();
            
            // Extraer texto del badge si existe
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = estado;
            const badgeElement = tempDiv.querySelector('.badge');
            estado = badgeElement ? badgeElement.textContent.trim() : estado;
            
            // Capitalizar primera letra
            estado = estado.charAt(0).toUpperCase() + estado.slice(1);
        }
        
        // Procesamiento de la fecha
        let fecha = row[8];
        if (typeof fecha === 'object' && fecha.display) {
            fecha = fecha.display;
        }
        
        // Agregar fila a los datos
        data.push({
            nro: row[0],
            gerencia: row[1],
            tipo: row[2],
            acuerdo: row[3],
            atendido: row[4],
            departamento: row[5],
            persona: row[6],
            estado: estado || 'Pendiente', // Valor por defecto
            fecha: fecha,
            hora: row[9]
        });
    });
    
    // Configurar la tabla en el PDF
    doc.autoTable({
        columns: headers,
        body: data,
        startY: 25,
        styles: {
            fontSize: 8,
            cellPadding: 3,
            overflow: 'linebreak',
            valign: 'middle',    // Centrado vertical
            halign: 'center',    // Centrado horizontal
            lineWidth: 0.2,      // Grosor del borde
            lineColor: [220, 220, 220] // Color del borde (gris claro)
        },
        columnStyles: {
            nro: { cellWidth: 10 },
            gerencia: { cellWidth: 30 },
            tipo: { cellWidth: 30 },
            acuerdo: { cellWidth: 25 },
            atendido: { cellWidth: 20 },
            departamento: { cellWidth: 25 },
            persona: { cellWidth: 25 },
            estado: { 
                cellWidth: 25,
                cellPadding: 4,
                halign: 'center',
                valign: 'middle',
                fontStyle: 'bold',
                fillColor: [245, 245, 245] // Fondo gris muy claro
            },
            fecha: { cellWidth: 15 },
            hora: { cellWidth: 15 }
        },
        headerStyles: {
            fillColor: [51, 102, 153], // Color azul para encabezados
            textColor: [255, 255, 255], // Texto blanco
            fontStyle: 'bold',
            halign: 'center',
            valign: 'middle'
        },
        
    });
    
    // Guardar el PDF
    doc.save('Organizaciones_' + new Date().toISOString().slice(0, 10) + '.pdf');
});
</script>
@stop