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}` : '../evaluadores/acciones_evaluador/fotos_empleados/sin-foto.jpg';
                    const estadoActivo = evaluador.activo; // Convertir a booleano
                    const estadoClase = estadoActivo==1 ? 'borde-verde' : 'borde-rojo'; 
                    const estadoTexto = estadoActivo==1 ? 'Activo' : 'Inactivo';

const evaluadorHTML = `
    <div class="col-2 col-md-3 p-0 text-center ${estadoClase} evaluador-item" onclick="verDetallesEmpleado(${evaluador.id})" style="cursor: pointer;">
        <img class="img-fluid rounded-circle" src="${avatarURL}" alt="User Image" style="width: 92px; height: 92px;">
        <div class="fw-bold fs-6 text-secondary text-truncate w-100 p-0 mt-2">
            ${evaluador.nombre}
        </div>
        <div class="fs-7 mt-1">
            <span class="badge ${estadoActivo == 1 ? 'bg-success' : 'bg-danger'} text-white">${estadoTexto}</span>
        </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");
    }
}

async function cargarEvaluadoresLogin() {
    console.log("Cargando Login del evaluador....");

    try {
        // Usamos el ID del evaluador que pasamos desde PHP
        const evaluador_id = evaluadorId; // Usamos la variable que inyectamos en el frontend

        if (evaluador_id === null) {
            console.error("No se encontró el ID del evaluador.");
            return;
        }

        // Pasamos el id en la URL
        const response = await axios.get(`../evaluadores/acciones_evaluador/detallesLoginEvaluadores.php?id=${evaluador_id}`);

        if (response.status === 200) {
            const evaluador = response.data; // Se recibe el evaluador específico

            const evaluadoresLogin = document.querySelector('#evaluadoresLogin');
            evaluadoresLogin.innerHTML = ''; 

            const avatarURL = evaluador.avatar ? `../evaluadores/acciones_evaluador/fotos_empleados/${evaluador.avatar}` : '../evaluadores/acciones_evaluador/fotos_empleados/sin-foto.jpg';
            const estadoActivo = evaluador.activo;
            const estadoClase = estadoActivo == 1 ? 'borde-verde' : 'borde-rojo'; 

            const evaluadorHTML = `
    <div class="col-2 col-md-3 p-0" onclick="verDetallesEmpleado(${evaluador.id})" >
        <div class="d-flex align-items-center justify-content-start">
            <img class="img-fluid rounded-circle" src="${avatarURL}" alt="User Image" style="width: 60px; height: 40px; border: 2px solid ${estadoActivo == 1 ? '#28a745' : '#dc3545'};">
            <div class="fs-6 text-secondary ms-2">
                ${evaluador.nombre}
            </div>
        </div>
    </div>
`;


            evaluadoresLogin.innerHTML += evaluadorHTML;
        } 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");
    }
}




async function verDetallesEmpleado(idEvaluador) {
    try {
        // Realiza la primera llamada para obtener detalles del empleado
        const responseEmpleado = await axios.get(`../evaluadores/acciones_evaluador/detallesEmpleado.php?id=${idEvaluador}`);

        if (responseEmpleado.status === 200) {
            const empleado = responseEmpleado.data;
            console.log("Detalles del empleado:", empleado);

            // Contenedor del modal
            const modalContenido = document.getElementById('modalContenido');

            // Determina el estado del empleado
            const estadoActivo = empleado.activo == 1 || empleado.activo === true;
            const estadoTexto = estadoActivo ? 'Activo' : 'Inactivo';
            const estadoBadgeClase = estadoActivo ? 'bg-success' : 'bg-danger';
            const bordeColor = estadoActivo ? 'green' : 'red';

            // Llama a la función para obtener trabajos asignados
            const trabajosHTML = await cargarTrabajosAsignadosHTML(idEvaluador);

            // Llamada para obtener los resúmenes asignados
            const resResumenes = await obtenerResumenesAsignados(idEvaluador);


//Genera el contenido del modal -->
modalContenido.innerHTML = `
<div class="card shadow-lg border-0">
    <div class="card-body">
        <!-- Sección superior: Avatar y Nombre -->
        <div class="text-center mb-4">
            <img src="../evaluadores/acciones_evaluador/fotos_empleados/${empleado.avatar || '../evaluadores/acciones_evaluador/fotos_empleados/sin-foto.jpg'}" 
                 alt="Avatar del empleado" 
                 class="rounded-circle shadow" 
                 style="width: 100px; height: 100px; object-fit: cover; border: 3px solid ${bordeColor};">
            <h5 class="mt-3 mb-0 fw-bold text-primary">${empleado.nombre || 'Nombre no disponible'}</h5>
            <p class="mt-1 mb-0 text-black-50 small">${empleado.correo || 'Correo no disponible'}</p>
        </div>
        <hr>
        
        <!-- Campo "Cargo" centrado con fuente cursiva y diseño elegante -->
        <div class="text-center mb-3">
            <p class="fw-light text-muted" style="font-size: 1rem; font-style: italic;">${empleado.cargo || 'Cargo no disponible'}</p>
        </div>
        
        <!-- Sección de información personal -->
        <div>
            <h6 class="fw-bold text-secondary">Información Personal</h6>
            <div class="row">
                <!-- Columna 1 -->
                <div class="col-md-6">
                    <p class="mb-2"><i class="bi bi-calendar"></i> <strong>Edad:</strong> ${empleado.edad || 'No disponible'}</p>
                    <p class="mb-2"><i class="bi bi-gender-ambiguous"></i> <strong>Sexo:</strong> ${empleado.sexo || 'No disponible'}</p>
                </div>
                <!-- Columna 2 -->
                <div class="col-md-6">
                    <p class="mb-2"><i class="bi bi-telephone"></i> <strong>Teléfono:</strong> ${empleado.telefono || 'No disponible'}</p>
                    <p class="mb-2"><i class="bi bi-translate"></i> <strong>Idioma:</strong> ${empleado.Idioma || 'No disponible'}</p>
                </div>
            </div>
        </div>
        <hr>

        <!-- Sección de información de usuario -->
        <div>
            <h6 class="fw-bold text-secondary">Información de Usuario</h6>
            <div class="row">
                <!-- Columna única -->
                <div class="col-12">
                    <p class="mb-2 text-danger"><i class="bi bi-person-circle"></i> <strong>Usuario:</strong> ${empleado.usuario || 'No disponible'}</p>
                  
                </div>
            </div>
        </div>
    </div>
    
    <div class="card-footer bg-light">
        <!-- Estado centrado con fuente pequeña -->
        <div class="text-center mb-3">
            <h6 class="small">Estado</h6>
            <p class="badge ${estadoBadgeClase} text-white small" style="font-size: 0.8rem;">${estadoTexto}</p>
        </div>

        <!-- Trabajos Asignados -->
        <h6 class="text-secondary fw-bold small">
            Trabajos Asignados 
            <span class="badge bg-primary text-white" style="font-size: 0.8rem; font-weight: normal;">(${resResumenes})</span>
        </h6>

        <div id="trabajosAsignados" class="row g-3">
            ${trabajosHTML || '<p class="text-muted text-center">No hay trabajos asignados.</p>'}
        </div>
    </div>
</div>
`;



            // Mostrar 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.");
    }
}



// Función para cargar trabajos asignados y devolver el HTML generado
async function cargarTrabajosAsignadosHTML(idEvaluador) {
    try {
        const response = await fetch('../evaluadores/trabajosAsignados.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ idEvaluador })
        });

        const responseText = await response.text();
        console.log("Response Text (Trabajos):", responseText);

        const data = JSON.parse(responseText);

        if (data.success && Array.isArray(data.trabajos)) {
            return data.trabajos.map(trabajo => `
                <div class="col-3 mb-2">
                    <span class="badge text-bg-${
                       (trabajo.calificacion1_fecha && trabajo.evaluador1 == idEvaluador) || 
                       (trabajo.calificacion2_fecha && trabajo.evaluador2 == idEvaluador) || 
                       (trabajo.calificacion3_fecha && trabajo.evaluador3 == idEvaluador) 
                       ? 'secondary' : 'primary'}" 
                       style="width: 100%; text-align: center; font-size: 0.65rem; border-radius: 8px; padding: 8px;">
                        <a href="#" onclick="verDetallesResumen('${trabajo.id}','${trabajo.calificacion1_fecha}','${trabajo.calificacion2_fecha}','${trabajo.calificacion3_fecha}')" 
                           title="Ver detalles del resumen" style="text-decoration: none; color: white;">
                            ${trabajo.codigo}
                        </a>
                    </span>
                </div>
            `).join('');
        } else {
            console.error("Error en la respuesta JSON o 'trabajos' no es un array:", data);
            return `<p>No se encontraron trabajos asignados.</p>`;
        }
    } catch (error) {
        console.error("Error al cargar trabajos asignados:", error);
        return `<p>Error al cargar los trabajos asignados.</p>`;
    }
}


/**
 * Función para obtener la cantidad total de resúmenes asignados al empleado
 */
async function obtenerResumenesAsignados(idEmpleado) {
  try {
    const response = await axios.get(`acciones/resumenesAsignados.php?id=${idEmpleado}`);
    console.log("Respuesta completa del servidor:", response.data);  // Log completo

    if (response.status === 200 && response.data && typeof response.data.cantidad_resumenes === 'number') {
      console.log("Cantidad de trabajos asignados recibida:", response.data.cantidad_resumenes);
      return response.data.cantidad_resumenes;
    } else {
      throw new Error("No se recibieron datos válidos para la cantidad de trabajos asignados.");
    }
  } catch (error) {
    console.error("Error al obtener la cantidad de trabajos asignados:", error);
    return 0; // Retorna 0 si hay error o el valor no es válido
  }
}

// Llama a la función para cargar los evaluadores al cargar la página
window.onload = function() {
    cargarEvaluadores();
    cargarEvaluadoresLogin();
};

