async function cargarEvaluadores() {
    console.log("Cargando evaluadores...");

    try {
        const response = await axios.get('evaluadores/acciones_evaluador/detallesEvaluadores.php');
        if (response.status === 200) {
            const evaluadores = response.data;
            const evaluadoresList = document.querySelector('#evaluadoresList');
            evaluadoresList.innerHTML = ''; 

            let mostrandoTodos = false; 

            const mostrarEvaluadores = (mostrarTodos) => {
                evaluadoresList.innerHTML = ''; 

                const evaluadoresParaMostrar = mostrarTodos ? evaluadores : evaluadores.slice(0, 12);

                evaluadoresParaMostrar.forEach(evaluador => {
                    const avatarURL = evaluador.avatar ? `evaluadores/acciones_evaluador/fotos_empleados/${evaluador.avatar}` : 'sin-foto.jpg';
                    const estadoActivo = !!evaluador.activo; // Convertir a booleano
                    const estadoClase = estadoActivo ? 'borde-verde' : 'borde-rojo'; 
                    const estadoTexto = estadoActivo ? 'Activo' : 'Inactivo';

                    const evaluadorHTML = `
                        <div class="col-2 col-md-3 p-0 text-center ${estadoClase}">
                            <img class="img-fluid rounded-circle" src="${avatarURL}" alt="User Image" style="width: 100px; height: 100px;">
                            <a href="#" onclick="verDetallesEmpleado(${evaluador.id})" class="btn fw-bold fs-6 text-secondary text-truncate w-100 p-0 mt-2">
                                ${evaluador.nombre}
                            </a>
                            <div class="fs-7 mt-1">${estadoTexto}</div>
                        </div>
                    `;
                    evaluadoresList.innerHTML += evaluadorHTML;
                });

                const buttonHTML = `
                    <div class="col-12 text-center mt-3">
                        <button class="btn btn-secondary" id="toggleButton">${mostrarTodos ? 'Ver menos' : 'Ver todos'}</button>
                    </div>
                `;
                evaluadoresList.innerHTML += buttonHTML;

                const toggleButton = document.querySelector('#toggleButton');
                toggleButton.addEventListener('click', () => {
                    mostrandoTodos = !mostrandoTodos;
                    mostrarEvaluadores(mostrandoTodos);
                });
            };

            mostrarEvaluadores(false);
        } else {
            console.error("Error al cargar los evaluadores");
        }
    } catch (error) {
        console.error("Error al cargar los evaluadores:", error);
        alert("Hubo un problema al cargar los evaluadores");
    }
}
// Función para mostrar los detalles del empleado en el modal
async function verDetallesEmpleado(id) {
    try {
        const response = await axios.get(`evaluadores/acciones_evaluador/detallesEmpleado.php?id=${id}`);
        
        if (response.status === 200) {
            const empleado = response.data;
            console.log("Detalles del empleado:", empleado);

            // Accede al contenedor donde se cargará la información
            const modalContenido = document.getElementById('modalContenido');
            
            // Definir el estado del empleado
            const estadoActivo = empleado.activo == 1 || empleado.activo === true; // Convertir a booleano
            const estadoTexto = estadoActivo ? 'Activo' : 'Inactivo';
            const estadoBadgeClase = estadoActivo ? 'bg-success' : 'bg-danger'; // Para el badge
            const bordeColor = estadoActivo ? 'green' : 'red'; // Color del borde de la imagen

            modalContenido.innerHTML = `
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <!-- Imagen de perfil con borde en línea -->
                        <img src="evaluadores/acciones_evaluador/fotos_empleados/${empleado.avatar || 'sin-foto.jpg'}" alt="Avatar" 
                             class="rounded-circle" 
                             style="width: 120px; height: 120px; border: 3px solid ${bordeColor};">
                        <h4 class="mt-3">${empleado.nombre || 'Nombre no disponible'}</h4>
                        <p class="text-muted">${empleado.titulo || 'Título no disponible'}</p>
                        <ul class="list-unstyled mt-3">
                            <li><strong>Nombre:</strong> ${empleado.nombre || 'No disponible'}</li>
                            <li><strong>Título:</strong> ${empleado.titulo || 'No disponible'}</li>
                            <li><strong>Correo:</strong> ${empleado.correo || 'No disponible'}</li>
                            <li><strong>Teléfono:</strong> ${empleado.telefono || 'No disponible'}</li>
                            <li><strong>Fecha de Ingreso:</strong> ${new Date(empleado.created_at).toLocaleDateString() || 'No disponible'}</li>
                        </ul>
                        <h6 class="mt-4">Habilidades</h6>
                        <ul class="list-unstyled">
                            <li><i class="bi bi-check-circle"></i> Investigación científica</li>
                            <li><i class="bi bi-check-circle"></i> Gestión de proyectos</li>
                            <li><i class="bi bi-check-circle"></i> Análisis de datos</li>
                        </ul>
                        <h6 class="mt-4">Estado</h6>
                        <p class="badge ${estadoBadgeClase} text-white">${estadoTexto}</p>
                    </div>
                </div>
            `;

            // Muestra el modal
            const detalleEmpleadoModal = new bootstrap.Modal(document.getElementById('detalleEmpleadoModal'));
            detalleEmpleadoModal.show();
        } else {
            console.error("No se pudo obtener los detalles del evaluador");
        }
    } catch (error) {
        console.error("Error al obtener los detalles del evaluador:", error);
        alert("Hubo un problema al cargar los detalles del evaluador.");
    }
}


// Llama a la función para cargar los evaluadores al cargar la página
window.onload = cargarEvaluadores;

