File "gestion.php"

Full Path: C:/wamp64/www/Seleccion/views/candidato/gestion.php
File size: 42.15 KB
MIME-type: text/html
Charset: utf-8

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Selección - Sanmarino</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/gestion.css">
	
    <style>
        
    </style>
</head>
<body>
    <div class="navbar">
        <h1>👥 SANMARINO - Gestión de Selección</h1>
        <div>
            <a href="index.php?controller=requisicion&action=panel">📋 Requisiciones</a>
            <a href="index.php?controller=requisicion&action=formulario">➕ Nueva Requisición</a>
        </div>
    </div>

    <div class="main-container">
        <div class="tabs">
            <div class="tab active" onclick="cambiarFase('busqueda', event)">🔍 Búsqueda de Candidatos</div>
            <div class="tab" onclick="cambiarFase('fase1', event)">📝 FASE 1: Registro Inicial</div>
            <div class="tab" onclick="cambiarFase('fase2', event)">🗣️ FASE 2: Entrevistas</div>
            <div class="tab" onclick="cambiarFase('fase3', event)">📋 FASE 3: Exámenes</div>
        </div>

        <div class="tab-content">
            <!-- ✅ NUEVA SECCIÓN: BÚSQUEDA DE CANDIDATOS -->
            <div id="busqueda" class="phase-section active">
                <div class="card-section search-card">
                    <h3>🔍 Buscar Historial de Candidatos</h3>
                    <p style="margin-bottom: 20px; color: #1565c0;">
                        Ingresa hasta 10 cédulas (una por línea) para verificar si han participado en procesos anteriores:
                    </p>
                    
                    <textarea 
                        id="cedulasBusqueda" 
                        class="cedula-input-area" 
                        placeholder="Ejemplo:&#10;1234567890&#10;0987654321&#10;1122334455"
                    ></textarea>
                    
                    <div class="search-info">
                        💡 <strong>Tip:</strong> Puedes pegar múltiples cédulas desde Excel o cualquier lista. El sistema buscará automáticamente si estos candidatos han estado en procesos anteriores.
                    </div>
                    
                    <div class="btn-container" style="margin-top: 20px;">
                        <button class="btn" onclick="limpiarBusqueda()" style="background: #6c757d; color: white;">
                            🗑️ Limpiar
                        </button>
                        <button class="btn-primary" onclick="buscarCandidatos()">
                            🔍 Buscar Candidatos
                        </button>
                    </div>
                </div>
                
                <div id="resultadosBusqueda"></div>
            </div>

            <!-- FASE 1: REGISTRO INICIAL -->
            <div id="fase1" class="phase-section">
                <h2>📝 FASE 1: Registro Inicial de Candidatos</h2>
                
                <!-- Formulario de Registro de Nuevo Candidato -->
                <div class="card-section">
                    <h3>➕ Agregar Nuevo Candidato</h3>
                    <form id="formNuevoCandidato" onsubmit="registrarNuevoCandidato(event)">
                        <div class="form-grid">
                            <div class="form-group">
                                <label>Requisición (Código) *</label>
                                <select name="requisicion_id" id="selectRequisicion" required>
                                    <option value="">Seleccione una requisición...</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Cédula *</label>
                                <input type="text" name="cedula" id="inputCedula" required 
                                       onblur="verificarCandidatoExistente(this.value)"
                                       placeholder="Número de cédula">
                            </div>
                            <div class="form-group">
                                <label>Nombres y Apellidos *</label>
                                <input type="text" name="nombres_apellidos" required 
                                       placeholder="Nombre completo del candidato">
                            </div>
                        </div>
                        
                        <div class="form-grid">
                            <div class="form-group">
                                <label>Antecedentes</label>
                                <select name="antecedentes">
                                    <option value="Pendiente">Pendiente</option>
                                    <option value="Aprobado">Aprobado</option>
                                    <option value="Rechazado">Rechazado</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Celular *</label>
                                <input type="tel" name="celular" required 
                                       placeholder="Número de celular">
                            </div>
                        </div>
                        
                        <!-- Alerta si el candidato ya existe -->
                        <div id="alertaCandidatoExistente"></div>
                        
                        <div class="btn-container">
                            <button type="reset" class="btn" style="background:#6c757d; color:white;">
                                🗑️ Limpiar
                            </button>
                            <button type="submit" class="btn-primary">
                                ✅ Registrar Candidato
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- Lista de Candidatos en Fase 1 -->
                <div style="margin-top: 30px;">
                    <h3 style="color: var(--accent-1); margin-bottom: 20px;">
                        📋 Candidatos Registrados en Fase 1
                    </h3>
                    <div id="candidatosFase1"></div>
                </div>
            </div>

            <!-- FASE 2: ENTREVISTAS -->
            <div id="fase2" class="phase-section">
                <h2>🗣️ FASE 2: Gestión de Entrevistas</h2>
                <div id="candidatosFase2"></div>
            </div>

            <!-- FASE 3: EXÁMENES -->
            <div id="fase3" class="phase-section">
                <h2>📋 FASE 3: Exámenes y Contratación</h2>
                <div id="candidatosFase3"></div>
            </div>
        </div>
    </div>

    <!-- ✅ MODAL ENTREVISTA (CORREGIDO) -->
    <div id="modalEntrevista" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>🗣️ Registrar Entrevista</h2>
                <button class="modal-close" onclick="cerrarModalEntrevista()">&times;</button>
            </div>
            <div class="modal-body">
                <div id="infoCandidatoEntrevista" class="candidato-info"></div>
                
                <form id="formEntrevista" onsubmit="guardarEntrevista(event)">
                    <input type="hidden" name="candidato_id" id="candidato_id_entrevista">
                    
                    <div class="card-section">
                        <h3>👤 Datos de Referencia</h3>
                        <div class="form-grid">
                            <div class="form-group">
                                <label>Quien Refiere - Nombre Completo</label>
                                <input type="text" name="referidor_nombre">
                            </div>
                            <div class="form-group">
                                <label>Cédula del Referidor</label>
                                <input type="text" name="referidor_cedula">
                            </div>
                            <div class="form-group">
                                <label>Área del Referidor</label>
                                <input type="text" name="referidor_area">
                            </div>
                        </div>
                    </div>

                    <div class="card-section">
                        <h3>🔧 Datos de la Entrevista</h3>
                        <div class="form-grid">
                            <div class="form-group">
                                <label>Centro de Costos</label>
                                <input type="text" name="centro_costos">
                            </div>
                            <div class="form-group">
                                <label>Área</label>
                                <input type="text" name="area">
                            </div>
                            <div class="form-group">
                                <label>Cargo</label>
                                <input type="text" name="cargo">
                            </div>
                            <div class="form-group">
                                <label>Ciudad Vacante</label>
                                <input type="text" name="ciudad_vacante">
                            </div>
                            <div class="form-group">
                                <label>Entidad Reclutadora</label>
                                <input type="text" name="entidad_reclutadora">
                            </div>
                            <div class="form-group">
                                <label>Fecha Entrevista</label>
                                <input type="date" name="fecha_entrevista">
                            </div>
                            <div class="form-group">
                                <label>Supervisor/Jefe</label>
                                <input type="text" name="supervisor_entrevista">
                            </div>
                            <div class="form-group">
                                <label>Resultado</label>
                                <select name="resultado_entrevista">
                                    <option value="Pendiente">Pendiente</option>
                                    <option value="Aprobado">Aprobado</option>
                                    <option value="Rechazado">Rechazado</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Concepto Entrevista</label>
                            <textarea name="concepto_entrevista" rows="4"></textarea>
                        </div>
                    </div>

                    <div class="btn-container">
                        <button type="button" class="btn" onclick="cerrarModalEntrevista()" style="background:#6c757d; color:white;">Cancelar</button>
                        <button type="submit" class="btn-primary">Guardar Entrevista</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ✅ MODAL EXAMEN (CORREGIDO) -->
    <div id="modalExamen" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>📋 Registrar Exámenes</h2>
                <button class="modal-close" onclick="cerrarModalExamen()">&times;</button>
            </div>
            <div class="modal-body">
                <div id="infoCandidatoExamen" class="candidato-info"></div>
                
                <form id="formExamen" onsubmit="guardarExamen(event)">
                    <input type="hidden" name="candidato_id" id="candidato_id_examen">
                    
                    <div class="card-section">
                        <h3>📋 Resultados de Exámenes</h3>
                        <div class="form-grid">
                            <div class="form-group">
                                <label>Exámenes Médicos</label>
                                <select name="examenes_medicos" onchange="verificarExamenRechazada(this.value)">
                                    <option value="Pendiente">Pendiente</option>
                                    <option value="Aprobado">Aprobado</option>
                                    <option value="Rechazado">Rechazado</option>
                                </select>
                            </div>
							<!-- ✅ NUEVO: Campo condicional para observación de Rechazado -->
							<div id="campo_observacion_rechazada">
								<label>⚠️ Motivo del Rechazado *</label>
								<textarea 
									id="observacion_rechazada" 
									name="observacion_rechazada" 
									placeholder="Describe el motivo por el cual se rechaza los examenes..."
								></textarea>
							</div>
                            <div class="form-group">
                                <label>Polígrafo</label>
                                <select name="poligrafo">
                                    <option value="Pendiente">Pendiente</option>
                                    <option value="Aprobado">Aprobado</option>
                                    <option value="Rechazado">Rechazado</option>
                                    <option value="No Aplica">No Aplica</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Contratado</label>
                                <select name="contratado" onchange="toggleFechaContratacion(this)">
                                    <option value="No">No</option>
                                    <option value="Si">Si</option>
                                </select>
                            </div>
                            <div class="form-group" id="grupoFechaContratacion" style="display:none;">
                                <label>Fecha de Contratación</label>
                                <input type="date" name="fecha_contratacion">
                            </div>
                        </div>

                        <div class="form-group">
                            <label>Observaciones</label>
                            <textarea name="observaciones" rows="4"></textarea>
                        </div>
                    </div>

                    <div class="btn-container">
                        <button type="button" class="btn" onclick="cerrarModalExamen()" style="background:#6c757d; color:white;">Cancelar</button>
                        <button type="submit" class="btn-primary">Guardar Exámenes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // ============================================
        // FUNCIONES DE BÚSQUEDA DE CANDIDATOS
        // ============================================
        
        async function buscarCandidatos() {
            const textarea = document.getElementById('cedulasBusqueda');
            const cedulasTexto = textarea.value.trim();
            
            if (!cedulasTexto) {
                alert('⚠️ Por favor ingresa al menos una cédula');
                return;
            }
            
            const cedulas = cedulasTexto
                .split('\n')
                .map(c => c.trim())
                .filter(c => c !== '')
                .slice(0, 10);
            
            if (cedulas.length === 0) {
                alert('⚠️ No se encontraron cédulas válidas');
                return;
            }
            
            document.getElementById('resultadosBusqueda').innerHTML = `
                <div style="text-align: center; padding: 40px; color: #666;">
                    <div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
                    <p>Buscando ${cedulas.length} candidato(s)...</p>
                </div>
            `;
            
            try {
                const response = await fetch('index.php?controller=candidato&action=buscarPorCedulas', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ cedulas: cedulas })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    mostrarResultados(result.data, cedulas);
                } else {
                    alert('❌ Error: ' + result.message);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('❌ Error al buscar candidatos');
            }
        }

        function mostrarResultados(resultados, cedulasBuscadas) {
            const container = document.getElementById('resultadosBusqueda');
            let html = `
                <h3 style="color: #1976d2; margin-top: 30px; margin-bottom: 20px;">
                    📊 Resultados de la Búsqueda (${cedulasBuscadas.length} cédula(s))
                </h3>
            `;
            
            cedulasBuscadas.forEach(cedula => {
                const historial = resultados[cedula] || [];
                
                if (historial.length === 0) {
                    html += `
                        <div class="result-card no-encontrado">
                            <div class="result-header">
                                <span class="cedula-badge" style="background: #dc3545;">
                                    CC ${cedula}
                                </span>
                                <span class="badge badge-danger">No Encontrado</span>
                            </div>
                            <p style="color: #666; margin: 0;">
                                ✅ Este candidato NO ha participado en procesos anteriores.
                            </p>
                        </div>
                    `;
                } else {
                    html += `
                        <div class="result-card">
                            <div class="result-header">
                                <div>
                                    <span class="cedula-badge">CC ${cedula}</span>
                                    <div style="margin-top: 8px; font-size: 18px; font-weight: 600; color: #333;">
                                        ${historial[0].nombres_apellidos}
                                    </div>
                                </div>
                                <span class="proceso-count">
                                    ${historial.length} proceso(s) anterior(es)
                                </span>
                            </div>
                            
                            <div style="margin-top: 15px;">
                                <strong style="color: #1976d2;">📋 Historial de Procesos:</strong>
                                ${historial.map((proc, index) => `
                                    <div class="history-item">
                                        <div style="display: flex; justify-content: space-between; align-items: start;">
                                            <div style="flex: 1;">
                                                <strong>Proceso #${index + 1}</strong> - ${proc.fecha_registro}
                                                <br>
                                                📍 Requisición: ${proc.requisicion_codigo || 'N/A'}
                                                <br>
                                                💼 Cargo: ${proc.nombre_cargo || 'N/A'}
                                                <br>
                                                🏢 Área: ${proc.area || 'N/A'}
                                                <br>
                                                📊 Estado: ${proc.estado} - Fase: ${proc.fase_actual}
                                                <br>
                                                📱 Celular: ${proc.celular || 'N/A'}
                                            </div>
                                            <span class="badge ${proc.estado === 'Contratado' ? 'badge-success' : 'badge-warning'}">
                                                ${proc.estado}
                                            </span>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `;
                }
            });
            
            container.innerHTML = html;
        }

        function limpiarBusqueda() {
            document.getElementById('cedulasBusqueda').value = '';
            document.getElementById('resultadosBusqueda').innerHTML = '';
        }

        // ============================================
        // FUNCIONES DE NAVEGACIÓN Y CARGA
        // ============================================
        
        function cambiarFase(fase, event) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.phase-section').forEach(section => section.classList.remove('active'));
            
            event.target.classList.add('active');
            document.getElementById(fase).classList.add('active');
            
            if (fase === 'fase1') {
                // Cargar requisiciones si aún no están cargadas
                const select = document.getElementById('selectRequisicion');
                if (select && select.options.length <= 1) {
                    console.log('🔄 Cargando requisiciones en cambio de fase...');
                    cargarRequisiciones();
                }
                cargarCandidatosFase1();
            } else if (fase === 'fase2') {
                cargarCandidatosFase2();
            } else if (fase === 'fase3') {
                cargarCandidatosFase3();
            }
        }

        async function cargarRequisiciones() {
            try {
                console.log('🔄 Iniciando carga de requisiciones...');
                
                const response = await fetch('index.php?controller=requisicion&action=listar');
                
                console.log('📥 Response status:', response.status);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const result = await response.json();
                console.log('📦 Resultado:', result);
                
                if (result.success && result.data) {
                    const select = document.getElementById('selectRequisicion');
                    
                    if (!select) {
                        console.error('❌ No se encontró el elemento selectRequisicion');
                        return;
                    }
                    
                    console.log(`📊 Total de requisiciones: ${result.data.length}`);
                    
                    let html = '<option value="">Seleccione una requisición...</option>';
                    
                    // Filtrar requisiciones disponibles
                    const requisicionesDisponibles = result.data.filter(req => {
                        const estado = req.estado ? req.estado.toLowerCase() : '';
                        return estado === 'aprobada' || 
                               estado === 'activa' || 
                               estado === 'pendiente' ||
                               estado === 'en proceso';
                    });
                    
                    console.log(`✅ Requisiciones disponibles: ${requisicionesDisponibles.length}`);
                    
                    if (requisicionesDisponibles.length === 0) {
                        html += '<option value="" disabled>No hay requisiciones disponibles</option>';
                    } else {
                        requisicionesDisponibles.forEach(req => {
                            html += `<option value="${req.id}">${req.codigo} - ${req.nombre_cargo}</option>`;
                        });
                    }
                    
                    select.innerHTML = html;
                    console.log(`✅ ${requisicionesDisponibles.length} requisiciones cargadas`);
                    
                } else {
                    console.error('❌ Error en respuesta:', result);
                }
            } catch (error) {
                console.error('❌ Error:', error);
                alert('Error al cargar requisiciones. Ver consola (F12) para detalles.');
            }
        }

        async function verificarCandidatoExistente(cedula) {
            if (!cedula || cedula.trim() === '') {
                document.getElementById('alertaCandidatoExistente').innerHTML = '';
                return;
            }
            
            try {
                const response = await fetch(`index.php?controller=candidato&action=obtenerAlertas&cedula=${cedula}`);
                const result = await response.json();
                
                const alertaDiv = document.getElementById('alertaCandidatoExistente');
                
                if (result.success && result.total > 0) {
                    alertaDiv.innerHTML = `
                        <div class="alert alert-warning" style="margin-top: 15px;">
                            <strong>⚠️ ALERTA:</strong> Este candidato ya ha estado en proceso <strong>${result.total}</strong> vez(es).
                            <ul style="margin-top: 10px; margin-left: 20px; margin-bottom: 0;">
                                ${result.data.map(a => `
                                    <li>
                                        <strong>${a.codigo}</strong> - ${a.nombre_cargo} 
                                        <small>(${a.fecha_alerta})</small>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                    `;
                } else {
                    alertaDiv.innerHTML = '';
                }
            } catch (error) {
                console.error('Error al verificar candidato:', error);
            }
        }

        async function registrarNuevoCandidato(event) {
            event.preventDefault();
            
            const formData = new FormData(event.target);
            
            try {
                const response = await fetch('index.php?controller=candidato&action=crearFase1', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    let mensaje = '✅ ' + result.message;
                    
                    if (result.alerta) {
                        mensaje += '\n\n⚠️ ' + result.alerta;
                    }
                    
                    if (result.veces_proceso > 1) {
                        mensaje += `\n\n📊 Este candidato ha estado en proceso ${result.veces_proceso} veces`;
                    }
                    
                    alert(mensaje);
                    
                    event.target.reset();
                    document.getElementById('alertaCandidatoExistente').innerHTML = '';
                    
                    cargarCandidatosFase1();
                } else {
                    alert('❌ Error: ' + result.message);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('❌ Error al registrar candidato');
            }
        }

        async function cargarCandidatosFase1() {
            try {
                const response = await fetch('index.php?controller=candidato&action=listarPorFase&fase=fase1');
                const result = await response.json();
                
                if (result.success) {
                    mostrarCandidatosFase1(result.data);
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

        function mostrarCandidatosFase1(candidatos) {
            const container = document.getElementById('candidatosFase1');
            
            if (candidatos.length === 0) {
                container.innerHTML = '<p>No hay candidatos en Fase 1</p>';
                return;
            }
            
            let html = `
                <table>
                    <thead>
                        <tr>
                            <th>Cédula</th>
                            <th>Nombre</th>
                            <th>Requisición</th>
                            <th>Cargo</th>
                            <th>Antecedentes</th>
                            <th>Fecha Registro</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            candidatos.forEach(candidato => {
                html += `
                    <tr>
                        <td>${candidato.cedula}</td>
                        <td>${candidato.nombres_apellidos}</td>
                        <td>${candidato.requisicion_codigo}</td>
                        <td>${candidato.nombre_cargo}</td>
                        <td><span class="badge badge-${candidato.antecedentes === 'Aprobado' ? 'success' : 'warning'}">${candidato.antecedentes}</span></td>
                        <td>${candidato.fecha_registro}</td>
                        <td>
                            <button class="btn-primary" onclick="abrirModalEntrevista(${candidato.id}, '${candidato.cedula}', '${candidato.nombres_apellidos}')">
                                🗣️ Entrevistar
                            </button>
                        </td>
                    </tr>
                `;
            });
            
            html += `
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }

        async function cargarCandidatosFase2() {
            try {
                const response = await fetch('index.php?controller=candidato&action=listarPorFase&fase=fase2');
                const result = await response.json();
                
                if (result.success) {
                    mostrarCandidatosFase2(result.data);
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

        function mostrarCandidatosFase2(candidatos) {
            const container = document.getElementById('candidatosFase2');
            
            if (candidatos.length === 0) {
                container.innerHTML = '<p>No hay candidatos en Fase 2</p>';
                return;
            }
            
            let html = `
                <table>
                    <thead>
                        <tr>
                            <th>Cédula</th>
                            <th>Nombre</th>
                            <th>Requisición</th>
                            <th>Cargo</th>
                            <th>Fecha Registro</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            candidatos.forEach(candidato => {
                html += `
                    <tr>
                        <td>${candidato.cedula}</td>
                        <td>${candidato.nombres_apellidos}</td>
                        <td>${candidato.requisicion_codigo}</td>
                        <td>${candidato.nombre_cargo}</td>
                        <td>${candidato.fecha_registro}</td>
                        <td>
                            <button class="btn-primary" onclick="abrirModalExamen(${candidato.id}, '${candidato.cedula}', '${candidato.nombres_apellidos}')">
                                📋 Exámenes
                            </button>
                            <a href="index.php?controller=candidato&action=detalleCandidato&id=${candidato.id}"
                               style="display:inline-block; margin-left:6px; padding:7px 14px; background:linear-gradient(135deg,#6f42c1,#4a28a0); color:white; border-radius:8px; font-weight:600; font-size:13px; text-decoration:none;">
                                🔍 Ver Detalle
                            </a>
                        </td>
                    </tr>
                `;
            });
            
            html += `
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }

        async function cargarCandidatosFase3() {
            try {
                const response = await fetch('index.php?controller=candidato&action=listarPorFase&fase=fase3');
                const result = await response.json();
                
                if (result.success) {
                    mostrarCandidatosFase3(result.data);
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

        function mostrarCandidatosFase3(candidatos) {
            const container = document.getElementById('candidatosFase3');
            
            if (candidatos.length === 0) {
                container.innerHTML = '<p>No hay candidatos en Fase 3</p>';
                return;
            }
            
            let html = `
                <table>
                    <thead>
                        <tr>
                            <th>Cédula</th>
                            <th>Nombre</th>
                            <th>Requisición</th>
                            <th>Cargo</th>
                            <th>Estado</th>
                            <th>Fecha Registro</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            candidatos.forEach(candidato => {
                html += `
                    <tr>
                        <td>${candidato.cedula}</td>
                        <td>${candidato.nombres_apellidos}</td>
                        <td>${candidato.requisicion_codigo}</td>
                        <td>${candidato.nombre_cargo}</td>
                        <td><span class="badge badge-${candidato.estado === 'Contratado' ? 'success' : 'warning'}">${candidato.estado}</span></td>
                        <td>${candidato.fecha_registro}</td>
                        <td>
                            <a href="index.php?controller=candidato&action=detalleCandidato&id=${candidato.id}"
                               style="display:inline-block; padding:7px 14px; background:linear-gradient(135deg,#6f42c1,#4a28a0); color:white; border-radius:8px; font-weight:600; font-size:13px; text-decoration:none;">
                                🔍 Ver Detalle
                            </a>
                        </td>
                    </tr>
                `;
            });
            
            html += `
                    </tbody>
                </table>
            `;
            
            container.innerHTML = html;
        }

        // ============================================
        // FUNCIONES DE MODAL ENTREVISTA
        // ============================================
        
        function abrirModalEntrevista(candidatoId, cedula, nombre) {
            document.getElementById('candidato_id_entrevista').value = candidatoId;
            
            document.getElementById('infoCandidatoEntrevista').innerHTML = `
                <h4>👤 Información del Candidato</h4>
                <p><strong>Cédula:</strong> ${cedula}</p>
                <p><strong>Nombre:</strong> ${nombre}</p>
            `;
            
            document.getElementById('formEntrevista').reset();
            document.getElementById('modalEntrevista').classList.add('active');
        }

        function cerrarModalEntrevista() {
            document.getElementById('modalEntrevista').classList.remove('active');
        }

        async function guardarEntrevista(event) {
            event.preventDefault();
            
            const formData = new FormData(event.target);
            
            try {
                const response = await fetch('index.php?controller=candidato&action=crearFase2', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('✅ Entrevista registrada exitosamente');
                    cerrarModalEntrevista();
                    cargarCandidatosFase1();
                    cargarCandidatosFase2();
                } else {
                    alert('❌ Error: ' + result.message);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('❌ Error al guardar entrevista');
            }
        }

        // ============================================
        // FUNCIONES DE MODAL EXAMEN
        // ============================================
        
        function abrirModalExamen(candidatoId, cedula, nombre) {
            document.getElementById('candidato_id_examen').value = candidatoId;
            
            document.getElementById('infoCandidatoExamen').innerHTML = `
                <h4>👤 Información del Candidato</h4>
                <p><strong>Cédula:</strong> ${cedula}</p>
                <p><strong>Nombre:</strong> ${nombre}</p>
            `;
            
            document.getElementById('formExamen').reset();
            document.getElementById('modalExamen').classList.add('active');
        }
		
		// functiones de Examen medico Rechazado
		function cambiarExamen(id, examenActual) {
            document.getElementById('examId').value = id;
            document.getElementById('nuevoEstado').value = examenActual;
            document.getElementById('modalExamen').style.display = 'flex';
            
            // ✅ Verificar si debe mostrar el campo de observación
            verificarExamenRechazada(examenActual);
        }

        function cerrarModal() {
            document.getElementById('modalExamen').style.display = 'none';
            // Limpiar el campo de observación
            document.getElementById('observacion_rechazada').value = '';
            document.getElementById('campo_observacion_rechazada').classList.remove('mostrar');
        }

        function cerrarModalExamen() {
            document.getElementById('modalExamen').classList.remove('active');
            // Limpiar campo condicional al cerrar
            verificarExamenRechazada('Pendiente');
            const selectExamen = document.querySelector('#formExamen select[name="examenes_medicos"]');
            if (selectExamen) selectExamen.value = 'Pendiente';
        }


        async function guardarExamen(event) {
            event.preventDefault();
            
            const formData = new FormData(event.target);
            
            try {
                const response = await fetch('index.php?controller=candidato&action=crearFase3', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    alert('✅ Exámenes registrados exitosamente');
                    cerrarModalExamen();
                    cargarCandidatosFase2();
                    cargarCandidatosFase3();
                } else {
                    alert('❌ Error: ' + result.message);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('❌ Error al guardar exámenes');
            }
        }

        function toggleFechaContratacion(select) {
            const grupo = document.getElementById('grupoFechaContratacion');
            if (select.value === 'Si') {
                grupo.style.display = 'block';
            } else {
                grupo.style.display = 'none';
            }
        }
		
		// ✅ Muestra u oculta el campo de motivo según el valor del select
        function verificarExamenRechazada(valor) {
            const campo = document.getElementById('campo_observacion_rechazada');
            const textarea = document.getElementById('observacion_rechazada');
            if (valor === 'Rechazado') {
                campo.classList.add('mostrar');
                textarea.required = true;
            } else {
                campo.classList.remove('mostrar');
                textarea.required = false;
                textarea.value = '';
            }
        }

        // ============================================
        // CERRAR MODALES AL HACER CLIC FUERA
        // ============================================
        
        window.onclick = function(event) {
            if (event.target.classList.contains('modal')) {
                event.target.classList.remove('active');
            }
        }

        // ============================================
        // INICIALIZACIÓN
        // ============================================
        
        document.addEventListener('DOMContentLoaded', function() {
            console.log('✅ Sistema de Gestión de Selección cargado');
            console.log('🔄 Intentando cargar requisiciones...');
            
            // Verificar que el select existe
            const select = document.getElementById('selectRequisicion');
            if (select) {
                console.log('✅ Select encontrado, cargando requisiciones...');
                cargarRequisiciones();
            } else {
                console.error('❌ Select NO encontrado en el DOM');
                // Intentar de nuevo después de un pequeño delay
                setTimeout(function() {
                    const selectRetry = document.getElementById('selectRequisicion');
                    if (selectRetry) {
                        console.log('✅ Select encontrado en segundo intento');
                        cargarRequisiciones();
                    } else {
                        console.error('❌ Select sigue sin encontrarse');
                    }
                }, 500);
            }
        });
    </script>
</body>
</html>