<?php 
// Start session at the beginning of the file
session_start();
error_reporting(E_ALL & ~E_NOTICE); 
include_once "utils_database.php";
include_once "utils.php";
require_once "session_check.php";
// Extract request variables with prefix
$prefix = "P";
foreach ($_REQUEST as $key => $value) {
    $varname = $prefix . '_' . $key;
    $$varname = $value;
}

// Get user information if logged in
$vAreasUsuario = isset($_SESSION['usr']) ? getDatUser($_SESSION['usr'], 9) : '';
$vTipo = isset($_SESSION['usr']) ? getDatUser($_SESSION['usr'], 2) : '';
$vIdUsr = isset($_SESSION['usr']) ? getDatUser($_SESSION['usr'], 1) : '';


// Verificar si el usuario está logueado
if (!isset($_SESSION['usr'])) {
    // Usuario no logueado, redirigir a la página de login
    header("Location: login.php");
    exit(); // Importante: detener la ejecución después de la redirección
}
?>
<?php

// Función para generar la plantilla de Excel
function generarPlantilla() {
    // Comprobar si está instalada la librería PhpSpreadsheet
    if (!file_exists('vendor/autoload.php')) {
        die("La librería PhpSpreadsheet no está instalada. No se puede generar la plantilla Excel.");
    }
    
    // Generar con PhpSpreadsheet
    require 'vendor/autoload.php';
    
    try {
        $spreadsheet = new \PhpOffice\PhpSpreadsheet\Spreadsheet();
        $sheet = $spreadsheet->getActiveSheet();
        
        // Definir los encabezados - Agregado cod_ciudad
        $headers = ['tipousuario', 'usuario', 'contrasena', 'nombre', 'telefono', 'correo', 'Idioma', 'areas', 'edad', 'cedula', 'sexo', 'cargo', 'cod_ciudad', 'activo'];
        
        // Agregar encabezados y dar formato
        foreach ($headers as $index => $header) {
            $column = \PhpOffice\PhpSpreadsheet\Cell\Coordinate::stringFromColumnIndex($index);
            $sheet->setCellValue($column . '1', $header);
            
            // Dar formato al encabezado
            $sheet->getStyle($column . '1')->getFont()->setBold(true);
            $sheet->getStyle($column . '1')->getFill()->setFillType(\PhpOffice\PhpSpreadsheet\Style\Fill::FILL_SOLID)
                ->getStartColor()->setARGB('FFCCCCCC');
        }
        
        // Agregar datos de ejemplo y validación en las primeras dos filas
        $exampleData = [
            ['E', 'evaluador1', '', 'Juan Pérez', '3124567890', 'juan.perez@ejemplo.com', 'es', 'SLA,SLB,SLC', '35', '1098765432', 'M', 'Ingeniero', 'CO', '1'],
            ['A', 'admin1', '', 'María López', '3209876543', 'maria.lopez@ejemplo.com', 'es', 'PLG,PLF,PLC', '28', '1087654321', 'F', 'Psicóloga', 'BR', '1'],
            ['S', 'supervisor1', '', 'Carlos Gómez', '3107654321', 'carlos.gomez@ejemplo.com', 'en', 'SOA,SOB', '42', '8765432109', 'M', 'Coordinador', 'EC', '1']
        ];
        
        // Añadir filas de ejemplo
        foreach ($exampleData as $rowIndex => $rowData) {
            $rowNum = $rowIndex + 2; // Empezar en la fila 2
            foreach ($rowData as $colIndex => $cellValue) {
                $colLetter = \PhpOffice\PhpSpreadsheet\Cell\Coordinate::stringFromColumnIndex($colIndex);
                $sheet->setCellValue($colLetter . $rowNum, $cellValue);
            }
        }
        
        // Añadir información de ayuda en la fila 6
        $sheet->setCellValue('A6', 'Valores aceptados:');
        $sheet->getStyle('A6')->getFont()->setBold(true);
        
        $sheet->setCellValue('A7', 'tipousuario:');
        $sheet->setCellValue('B7', 'E = Evaluador, A = Administrador, S = Supervisor');
        
        $sheet->setCellValue('A8', 'Idioma:');
        $sheet->setCellValue('B8', 'es = Español, en = Inglés');
        
        $sheet->setCellValue('A9', 'sexo:');
        $sheet->setCellValue('B9', 'M = Masculino, F = Femenino');
        
        $sheet->setCellValue('A10', 'cod_ciudad:');
        $sheet->setCellValue('B10', 'CO = Colombia, BR = Brasil, EC = Ecuador, PE = Perú, etc.');
        
        $sheet->setCellValue('A11', 'activo:');
        $sheet->setCellValue('B11', '1 = Activo, 0 = Inactivo');
        
        // Agregar mensaje informativo
        $sheet->setCellValue('A13', 'IMPORTANTE: Los usuarios existentes no serán modificados. Complete solo los campos que desee para nuevos usuarios.');
        $sheet->getStyle('A13')->getFont()->setBold(true);
        $sheet->mergeCells('A13:N13');
        $sheet->getStyle('A13')->getAlignment()->setHorizontal(\PhpOffice\PhpSpreadsheet\Style\Alignment::HORIZONTAL_CENTER);
        
        // Auto-ajustar ancho de columnas
        foreach ($headers as $index => $header) {
            $column = \PhpOffice\PhpSpreadsheet\Cell\Coordinate::stringFromColumnIndex($index);
            $sheet->getColumnDimension($column)->setAutoSize(true);
        }
        
        // Dar formato a la tabla de ejemplos
        $styleArray = [
            'borders' => [
                'allBorders' => [
                    'borderStyle' => \PhpOffice\PhpSpreadsheet\Style\Border::BORDER_THIN,
                ],
            ],
            'fill' => [
                'fillType' => \PhpOffice\PhpSpreadsheet\Style\Fill::FILL_SOLID,
                'startColor' => [
                    'argb' => 'FFEBF1DE',
                ],
            ],
        ];
        $sheet->getStyle('A1:N4')->applyFromArray($styleArray);
        
        // Crear archivo Excel
        $writer = new \PhpOffice\PhpSpreadsheet\Writer\Xlsx($spreadsheet);
        
        // Configurar encabezados para la descarga
        header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
        header('Content-Disposition: attachment;filename="plantilla_evaluadores.xlsx"');
        header('Cache-Control: max-age=0');
        
        // Guardar archivo en output
        $writer->save('php://output');
        exit;
    } catch (Exception $e) {
        die("Error al generar la plantilla Excel: " . $e->getMessage());
    }
}

// Función alternativa para generar una plantilla CSV
function generarPlantillaCSV() {
    // Encabezados CSV - Agregado cod_ciudad
    $headers = ['tipousuario', 'usuario', 'contrasena', 'nombre', 'telefono', 'correo', 'Idioma', 
               'areas', 'edad', 'cedula', 'sexo', 'cargo', 'cod_ciudad', 'activo'];
    
    // Datos de ejemplo - Agregado cod_ciudad
    $exampleRows = [
        ['E', 'evaluador1', '', 'Juan Pérez', '3124567890', 'juan.perez@ejemplo.com', 'es',  'SLA,SLB,SLC', '35', '1098765432', 'M', 'Ingeniero', 'CO', '1'],
        ['A', 'admin1', '', 'María López', '3209876543', 'maria.lopez@ejemplo.com', 'es', 'PLG,PLF,PLC', '28', '1087654321', 'F', 'Psicóloga', 'BR', '1'],
        ['S', 'supervisor1', '', 'Carlos Gómez', '3107654321', 'carlos.gomez@ejemplo.com', 'en', 'SOA,SOB', '42', '8765432109', 'M', 'Coordinador', 'EC', '1']
    ];
    
    // Configurar encabezados HTTP para la descarga
    header('Content-Type: text/csv; charset=utf-8');
    header('Content-Disposition: attachment; filename="plantilla_evaluadores.csv"');
    
    // Crear un file pointer para output
    $output = fopen('php://output', 'w');
    
    // Incluir BOM para soporte UTF-8 en Excel
    fprintf($output, chr(0xEF).chr(0xBB).chr(0xBF));
    
    // Agregar encabezados
    fputcsv($output, $headers);
    
    // Agregar filas de ejemplo
    foreach ($exampleRows as $row) {
        fputcsv($output, $row);
    }
    
    // Agregar línea en blanco
    fputcsv($output, array_fill(0, count($headers), ''));
    
    // Agregar notas explicativas
    fputcsv($output, ['NOTAS', '', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['tipousuario', 'E = Evaluador, A = Administrador, S = Supervisor', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['Idioma', 'es = Español, en = Inglés', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['sexo', 'M = Masculino, F = Femenino', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['cod_ciudad', 'CO = Colombia, BR = Brasil, EC = Ecuador, etc.', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['activo', '1 = Activo, 0 = Inactivo', '', '', '', '', '', '', '', '', '', '', '', '']);
    fputcsv($output, ['IMPORTANTE', 'Los usuarios existentes no serán modificados ni eliminados', '', '', '', '', '', '', '', '', '', '', '', '']);
    
    // Cerrar el file pointer
    fclose($output);
    exit;
}

// Función para procesar el archivo CSV
function procesarCSV($archivo) {
    $conn = Activarmysql();
    $resultados = ['insertados' => 0, 'errores' => []];
    
    // Abrir el archivo
    $handle = fopen($archivo['tmp_name'], 'r');
    
    // Leer la primera línea (encabezados)
    $encabezados = fgetcsv($handle);
    
    // Normalizar encabezados (quitar espacios, convertir a minúsculas)
    $encabezados = array_map(function($item) {
        return trim(strtolower($item));
    }, $encabezados);
    
    // Verificar que los encabezados coincidan con los esperados - Agregado cod_ciudad
    $camposEsperados = ['tipousuario', 'usuario', 'contrasena', 'nombre', 'telefono', 'correo', 'idioma', 
                        'areas', 'edad', 'cedula', 'sexo', 'cargo', 'cod_ciudad', 'activo'];
    
    $camposFaltantes = array_diff($camposEsperados, $encabezados);
    if (!empty($camposFaltantes)) {
        return ['insertados' => 0, 'errores' => ['El archivo no contiene todos los campos necesarios. Faltantes: ' . implode(', ', $camposFaltantes)]];
    }
    
    // Procesar cada línea
    $linea = 2; // Empezamos en la línea 2 (después de los encabezados)
    while (($datos = fgetcsv($handle)) !== FALSE) {
        // Verificar que la línea tenga el número correcto de campos
        if (count($datos) != count($encabezados)) {
            $resultados['errores'][] = "Error en línea $linea: Número incorrecto de campos";
            $linea++;
            continue;
        }
        
        // Combinar encabezados con datos
        $fila = array_combine($encabezados, $datos);
        
        // Validar campos obligatorios
        if (empty($fila['usuario']) || empty($fila['nombre'])) {
            $resultados['errores'][] = "Error en línea $linea: Usuario y nombre son campos obligatorios";
            $linea++;
            continue;
        }
        
        // Verificar si el usuario ya existe
        $checkUsuario = $conn->prepare("SELECT id FROM tusuario WHERE usuario = ?");
        $checkUsuario->bind_param("s", $fila['usuario']);
        $checkUsuario->execute();
        $resultUsuario = $checkUsuario->get_result();
        
        if ($resultUsuario->num_rows > 0) {
            // Registramos que el usuario ya existe, pero seguimos con el proceso
            $resultados['errores'][] = "Aviso en línea $linea: El usuario '{$fila['usuario']}' ya existe en el sistema y se ha saltado";
            $linea++;
            continue;
        }
        
        // Si la contraseña está vacía, generar una aleatoria
        if (empty($fila['contrasena'])) {
            $fila['contrasena'] = password_hash(bin2hex(random_bytes(8)), PASSWORD_DEFAULT);
        } else {
            // Encriptar contraseña
            $fila['contrasena'] = password_hash($fila['contrasena'], PASSWORD_DEFAULT);
        }
        
        // Establecer valores predeterminados para campos opcionales
        $fila['tipousuario'] = !empty($fila['tipousuario']) ? strtoupper(substr($fila['tipousuario'], 0, 1)) : 'E';
        
        // Validar que tipousuario sea uno de los valores permitidos
        if (!in_array($fila['tipousuario'], ['E', 'A', 'S'])) {
            $fila['tipousuario'] = 'E'; // Valor por defecto si no es válido
            $resultados['errores'][] = "Aviso en línea $linea: Valor de tipousuario no válido. Se ha establecido como 'E' (Evaluador).";
        }
        
        $fila['activo'] = isset($fila['activo']) ? intval($fila['activo']) : 1;
        
        // Validar código de ciudad
        if (empty($fila['cod_ciudad'])) {
            $fila['cod_ciudad'] = null;
        }
        
        // Preparar la consulta de inserción - Agregado cod_ciudad
        $sql = "INSERT INTO tusuario (tipousuario, usuario, contrasena, nombre, telefono, correo, Idioma, 
                areas, edad, cedula, sexo, cargo, cod_ciudad, activo, created_at) 
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW())";
        
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("sssssssssssssi", 
            $fila['tipousuario'],
            $fila['usuario'],
            $fila['contrasena'],
            $fila['nombre'],
            $fila['telefono'],
            $fila['correo'],
            $fila['idioma'],
            $fila['areas'],
            $fila['edad'],
            $fila['cedula'],
            $fila['sexo'],
            $fila['cargo'],
            $fila['cod_ciudad'],
            $fila['activo']
        );
        
        if ($stmt->execute()) {
            $resultados['insertados']++;
        } else {
            $resultados['errores'][] = "Error en línea $linea: " . $stmt->error;
        }
        
        $linea++;
    }
    
    fclose($handle);
    $conn->close();
    
    return $resultados;
}

// Función para procesar archivo Excel
function procesarExcel($archivo) {
    // Requerir la librería PhpSpreadsheet
    require 'vendor/autoload.php';
    
    $inputFileType = \PhpOffice\PhpSpreadsheet\IOFactory::identify($archivo['tmp_name']);
    $reader = \PhpOffice\PhpSpreadsheet\IOFactory::createReader($inputFileType);
    $spreadsheet = $reader->load($archivo['tmp_name']);
    $worksheet = $spreadsheet->getActiveSheet();
    
    // Convertir Excel a CSV temporal
    $tempFile = tempnam(sys_get_temp_dir(), 'excel_import');
    $writer = new \PhpOffice\PhpSpreadsheet\Writer\Csv($spreadsheet);
    $writer->setDelimiter(',');
    $writer->setEnclosure('"');
    $writer->setLineEnding("\r\n");
    $writer->setSheetIndex(0);
    $writer->save($tempFile);
    
    // Procesar como CSV
    $csvFile = [
        'tmp_name' => $tempFile
    ];
    $resultado = procesarCSV($csvFile);
    
    // Eliminar archivo temporal
    unlink($tempFile);
    
    return $resultado;
}

// Verificar si se solicitó la plantilla
if (isset($_GET['descargar_plantilla'])) {
    generarPlantilla();
}

// Procesar el formulario si se envió
$resultado = null;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['archivo_usuarios'])) {
    $archivo = $_FILES['archivo_usuarios'];
    
    // Verificar que se haya cargado correctamente
    if ($archivo['error'] !== UPLOAD_ERR_OK) {
        $errores = [
            UPLOAD_ERR_INI_SIZE => 'El archivo excede el tamaño máximo permitido por PHP',
            UPLOAD_ERR_FORM_SIZE => 'El archivo excede el tamaño máximo permitido por el formulario',
            UPLOAD_ERR_PARTIAL => 'El archivo se cargó parcialmente',
            UPLOAD_ERR_NO_FILE => 'No se seleccionó ningún archivo',
            UPLOAD_ERR_NO_TMP_DIR => 'Falta la carpeta temporal del servidor',
            UPLOAD_ERR_CANT_WRITE => 'Error al escribir el archivo en el disco',
            UPLOAD_ERR_EXTENSION => 'Una extensión de PHP detuvo la carga del archivo'
        ];
        $mensaje_error = isset($errores[$archivo['error']]) ? $errores[$archivo['error']] : 'Error desconocido';
        $resultado = ['insertados' => 0, 'errores' => [$mensaje_error]];
    } else {
        // Determinar el tipo de archivo
        $extension = strtolower(pathinfo($archivo['name'], PATHINFO_EXTENSION));
        
        if ($extension === 'csv') {
            $resultado = procesarCSV($archivo);
        } elseif (in_array($extension, ['xlsx', 'xls'])) {
            $resultado = procesarExcel($archivo);
        } else {
            $resultado = ['insertados' => 0, 'errores' => ['Formato de archivo no soportado. Use CSV, XLSX o XLS']];
        }
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carga de Evaluadores</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome para iconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            transition: background-color 0.3s;
        }
        .upload-area:hover, .upload-area.dragover {
            background-color: #f8f9fa;
            border-color: #0d6efd;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            transition: transform 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .progress-bar-animated {
            height: 5px;
            margin-top: 10px;
        }
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .step {
            text-align: center;
            width: 30%;
        }
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
        }
        .step.active .step-number {
            background-color: #0d6efd;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4 text-center">
            <i class="fas fa-users me-2"></i> Carga de Evaluadores
        </h1>
        
        <div class="row justify-content-center mb-5">
            <div class="col-md-8">
                <div class="step-indicator">
                    <div class="step active">
                        <div class="step-number">1</div>
                        <div class="step-title">Descargar Plantilla</div>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-title">Llenar Datos</div>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-title">Subir Archivo</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-file-download me-2"></i> Paso 1: Descargar Plantilla
                        </h5>
                    </div>
                    <div class="card-body">
                        <p>Descargue la plantilla y llénela con la información de los evaluadores que desea cargar en el sistema. <strong>Los usuarios existentes no serán modificados ni eliminados.</strong></p>
                        <div class="d-grid gap-2 col-md-6 mx-auto">
                            <div class="btn-group">
                                <a href="?descargar_plantilla=1" class="btn btn-primary">
                                    <i class="fas fa-download me-2"></i> Descargar Plantilla
                                </a>
                                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="?descargar_plantilla=1&formato=excel">Formato Excel</a></li>
                                    <li><a class="dropdown-item" href="?descargar_plantilla=1&formato=csv">Formato CSV</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-file-upload me-2"></i> Paso 2 y 3: Cargar Archivo de Evaluadores
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="" method="post" enctype="multipart/form-data" id="uploadForm">
                            <div class="upload-area" id="dropZone">
                                <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-primary"></i>
                                <h4>Arrastre su archivo Excel o haga clic para seleccionarlo</h4>
                                <p class="text-muted">Formatos aceptados: Excel (.xlsx, .xls)</p>
                                <input type="file" name="archivo_usuarios" id="archivo_usuarios" class="form-control d-none" accept=".csv, .xlsx, .xls">
                                <button type="button" id="browseBtn" class="btn btn-outline-primary mt-3">
                                    <i class="fas fa-folder-open me-2"></i> Seleccionar Archivo Excel
                                </button>
                            </div>
                            
                            <div id="fileInfo" class="alert alert-info d-none">
                                <i class="fas fa-file-alt me-2"></i> <span id="fileName"></span>
                                <button type="button" id="removeFile" class="btn btn-sm btn-outline-danger float-end">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            
                            <div id="uploadProgress" class="d-none">
                                <div class="progress progress-bar-animated">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>
                            
                            <div class="d-grid mt-4">
                                <button type="submit" class="btn btn-success" id="submitBtn" disabled>
                                    <i class="fas fa-upload me-2"></i> Cargar Evaluadores
                                </button>
                            </div>
                        </form>
                        
                        <?php if ($resultado): ?>
                            <div class="mt-4">
                                <div class="alert <?php echo (!empty($resultado['errores'])) ? 'alert-warning' : 'alert-success'; ?>">
                                    <h5 class="alert-heading">
                                        <?php if (!empty($resultado['errores'])): ?>
                                            <i class="fas fa-exclamation-triangle me-2"></i> Carga completada con advertencias
                                        <?php else: ?>
                                            <i class="fas fa-check-circle me-2"></i> Carga completada con éxito
                                        <?php endif; ?>
                                    </h5>
                                    <p>Se han insertado <?php echo $resultado['insertados']; ?> nuevos evaluadores. Los usuarios existentes no han sido modificados.</p>
                                    
                                    <?php if (!empty($resultado['errores'])): ?>
                                        <hr>
                                        <p>Se encontraron las siguientes advertencias o errores:</p>
                                        <ul>
                                            <?php foreach ($resultado['errores'] as $error): ?>
                                                <li><?php echo htmlspecialchars($error); ?></li>
                                            <?php endforeach; ?>
                                        </ul>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <div class="card mt-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i> Información de Campos y Tipos de Datos
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Campo</th>
                                        <th>Descripción</th>
                                        <th>Tipo</th>
                                        <th>Obligatorio</th>
                                        <th>Valor Predeterminado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>tipousuario</td>
                                        <td>Tipo de usuario en el sistema</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>E</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="table-light">
                                            <small>
                                                <strong>Valores permitidos para tipousuario:</strong>
                                                <ul class="mb-0">
                                                    <li>E = Evaluador</li>
                                                    <li>A = Administrador</li>
                                                    <li>S = Supervisor</li>
                                                </ul>
                                            </small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>usuario</td>
                                        <td>Nombre de usuario para iniciar sesión</td>
                                        <td>VARCHAR</td>
                                        <td>Sí</td>
                                        <td>-</td>
                                    </tr>
                                    <tr>
                                        <td>contrasena</td>
                                        <td>Contraseña del usuario</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>Generado aleatoriamente</td>
                                    </tr>
                                    <tr>
                                        <td>nombre</td>
                                        <td>Nombre completo del evaluador</td>
                                        <td>VARCHAR</td>
                                        <td>Sí</td>
                                        <td>-</td>
                                    </tr>
                                    <tr>
                                        <td>telefono</td>
                                        <td>Número de teléfono de contacto</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>correo</td>
                                        <td>Dirección de correo electrónico</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>Idioma</td>
                                        <td>Idioma preferido (es, en)</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                
                                    <tr>
                                        <td>areas</td>
                                        <td>Áreas de especialización</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>edad</td>
                                        <td>Edad del evaluador</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>cedula</td>
                                        <td>Número de identificación</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>sexo</td>
                                        <td>Sexo (M o F)</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>cargo</td>
                                        <td>Cargo o posición</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>cod_ciudad</td>
                                        <td>Código del país (CO=Colombia, BR=Brasil, EC=Ecuador, etc.)</td>
                                        <td>VARCHAR</td>
                                        <td>No</td>
                                        <td>NULL</td>
                                    </tr>
                                    <tr>
                                        <td>activo</td>
                                        <td>Estado del usuario (1=activo, 0=inactivo)</td>
                                        <td>INT</td>
                                        <td>No</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>created_at</td>
                                        <td>Fecha y hora de creación</td>
                                        <td>DATETIME</td>
                                        <td>Auto</td>
                                        <td>NOW()</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Nueva tarjeta con información sobre códigos de país -->
                <div class="card mt-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-globe me-2"></i> Códigos de País (cod_ciudad)
                        </h5>
                    </div>
                    <div class="card-body">
                        <p>El campo <code>cod_ciudad</code> debe contener el código ISO del país correspondiente. A continuación se muestran algunos ejemplos:</p>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>Código</th>
                                        <th>País</th>
                                        <th>Código</th>
                                        <th>País</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><strong>CO</strong></td>
                                        <td>Colombia</td>
                                        <td><strong>MX</strong></td>
                                        <td>México</td>
                                    </tr>
                                    <tr>
                                        <td><strong>BR</strong></td>
                                        <td>Brasil</td>
                                        <td><strong>AR</strong></td>
                                        <td>Argentina</td>
                                    </tr>
                                    <tr>
                                        <td><strong>EC</strong></td>
                                        <td>Ecuador</td>
                                        <td><strong>PE</strong></td>
                                        <td>Perú</td>
                                    </tr>
                                    <tr>
                                        <td><strong>CL</strong></td>
                                        <td>Chile</td>
                                        <td><strong>VE</strong></td>
                                        <td>Venezuela</td>
                                    </tr>
                                    <tr>
                                        <td><strong>US</strong></td>
                                        <td>Estados Unidos</td>
                                        <td><strong>CA</strong></td>
                                        <td>Canadá</td>
                                    </tr>
                                    <tr>
                                        <td><strong>ES</strong></td>
                                        <td>España</td>
                                        <td><strong>UY</strong></td>
                                        <td>Uruguay</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle me-2"></i> <strong>Instrucciones:</strong>
                            <ul>
                                <li>Use el código de dos letras correspondiente al país del evaluador.</li>
                                <li>Escriba el código en mayúsculas (por ejemplo, CO en lugar de co).</li>
                                <li>Si no conoce el código del país, puede dejarlo en blanco o consultar la lista completa de códigos ISO 3166-1 alfa-2.</li>
                                <li><strong>Importante:</strong> Los usuarios existentes no serán modificados ni eliminados cuando se cargue el archivo.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap, jQuery y Popper -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Manejar click en el botón para seleccionar archivo
            $('#browseBtn').click(function() {
                $('#archivo_usuarios').click();
            });
            
            // Cuando se selecciona un archivo
            $('#archivo_usuarios').change(function() {
                handleFileSelect(this.files);
            });
            
            // Manejar drag & drop
            const dropZone = document.getElementById('dropZone');
            
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropZone.classList.add('dragover');
            }
            
            function unhighlight() {
                dropZone.classList.remove('dragover');
            }
            
            dropZone.addEventListener('drop', function(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                handleFileSelect(files);
            }, false);
            
            // Manejar la selección de archivos
            function handleFileSelect(files) {
                if (files.length > 0) {
                    const file = files[0];
                    // Verificar extensión
                    const extension = file.name.split('.').pop().toLowerCase();
                    if (['csv', 'xlsx', 'xls'].indexOf(extension) === -1) {
                        alert('Por favor, seleccione un archivo CSV o Excel (.xlsx, .xls)');
                        return;
                    }
                    
                    // Mostrar información del archivo
                    $('#fileName').text(file.name + ' (' + formatFileSize(file.size) + ')');
                    $('#fileInfo').removeClass('d-none');
                    $('#submitBtn').prop('disabled', false);
                }
            }
            
            // Formatear tamaño de archivo
            function formatFileSize(bytes) {
                if (bytes < 1024) return bytes + ' bytes';
                else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
                else return (bytes / 1048576).toFixed(1) + ' MB';
            }
            
            // Eliminar archivo seleccionado
            $('#removeFile').click(function() {
                $('#archivo_usuarios').val('');
                $('#fileInfo').addClass('d-none');
                $('#submitBtn').prop('disabled', true);
            });
            
            // Manejar envío del formulario
            $('#uploadForm').submit(function() {
                if ($('#archivo_usuarios').val() === '') {
                    alert('Por favor, seleccione un archivo para cargar');
                    return false;
                }
                
                // Mostrar barra de progreso
                $('#uploadProgress').removeClass('d-none');
                $('.progress-bar').css('width', '0%');
                
                // Simular progreso (en una implementación real, esto se haría con AJAX)
                let progress = 0;
                const interval = setInterval(function() {
                    progress += 5;
                    if (progress > 100) {
                        clearInterval(interval);
                    } else {
                        $('.progress-bar').css('width', progress + '%');
                    }
                }, 100);
                
                return true;
            });
        });
    </script>
</body>
</html>