pruebas y arreglos en general

assets/js/main.js

@@ -362,10 +362,10 @@ function loadProfessorCourses(container) {
           <form id="courseForm">
             <label>Nombre del Curso *</label>
             <input type="text" name="nombre" required>
-            
+
             <label>Descripción</label>
             <textarea name="descripcion" maxlength="250" rows="4" style="width: 100%; padding: 0.75rem; margin: 0.5rem 0 1rem 0; border: 1px solid #e2e8f0; border-radius: 6px; font-family: 'Inter', sans-serif;"></textarea>
-            
+
             <label>Tipo de Curso *</label>
             <select id="courseType" name="tipo" required>
               <option value="inyeccion">Inyección</option>
@@ -377,13 +377,13 @@ function loadProfessorCourses(container) {
               <label>Competencias Asociadas *</label>
               <input type="text" name="competencias" placeholder="Ej. Análisis de datos, Comunicación efectiva">
             </div>
-            
+
             <label>Estado</label>
             <select name="estado">
               <option value="activo">Activo</option>
               <option value="archivado">Archivado</option>
             </select>
-            
+
             <div class="form-actions">
               <button type="submit" class="btn">
                 <span id="submitCourseText">Guardar</span>
@@ -393,12 +393,24 @@ function loadProfessorCourses(container) {
                 Cancelar
               </button>
             </div>
-
           </form>
         </div>
+
         <div class="card">
-          <h2>Lista de Cursos</h2>
+          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
-          <div class="table-container">
+            <h2 style="margin: 0;">Lista de Cursos</h2>
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <label for="courseFilter"><strong>Mostrar:</strong></label>
+              <select id="courseFilter" class="form-control" style="padding: 0.3rem 0.6rem; border-radius: 6px;">
+                <option value="todos">Todos</option>
+                <option value="activo">Activos</option>
+                <option value="completado">Completados</option>
+                <option value="archivado">Archivados</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="table-container" style="margin-top: 1rem;">
             <table class="courses-table">
               <thead>
                 <tr>
@@ -446,29 +458,56 @@ function loadProfessorCourses(container) {
                   .join("")}
               </tbody>
             </table>
+            <div id="emptyCourseMessage" style="display: none; padding: 1rem; text-align: center; color: #64748b;">
+              Cuando haya cursos en esta categoría, se mostrarán aquí.
+            </div>
           </div>
         </div>`;
 
-      // Evaluar si se debe mostrar "Leer más" en cada descripción
+      // Leer más si descripción es larga
       setTimeout(() => {
         courses.forEach(course => {
           const span = document.getElementById(`desc-${course.id}`);
           const leerMas = document.getElementById(`readmore-${course.id}`);
-
           if (span && leerMas && span.scrollWidth > span.clientWidth) {
             const safeDesc = (course.descripcion || "")
               .replace(/'/g, "\\'")
               .replace(/"/g, "&quot;")
               .replace(/\n/g, "\\n");
-
             leerMas.innerHTML = `
-              <a href="#" class="read-more" onclick="showFullDescription('${safeDesc}'); return false;">
+              <a href="#" class="read-more" onclick="showFullDescription('${safeDesc}'); return false;">Leer más</a>`;
-                Leer más
-              </a>`;
           }
         });
       }, 0);
 
+      // Filtro con mensaje si no hay visibles
+      const filtro = document.getElementById("courseFilter");
+      if (filtro) {
+        filtro.addEventListener("change", function () {
+          const estadoSeleccionado = this.value;
+          const filas = document.querySelectorAll(".courses-table tbody tr");
+          let visibles = 0;
+
+          filas.forEach(fila => {
+            const badgeEstado = fila.querySelector("td:nth-child(4) .badge");
+            const estado = badgeEstado?.textContent.toLowerCase() || "";
+            if (estadoSeleccionado === "todos" || estado === estadoSeleccionado) {
+              fila.style.display = "";
+              visibles++;
+            } else {
+              fila.style.display = "none";
+            }
+          });
+
+          const mensajeVacio = document.getElementById("emptyCourseMessage");
+          if (mensajeVacio) {
+            mensajeVacio.style.display = visibles === 0 ? "block" : "none";
+          }
+        });
+
+        filtro.dispatchEvent(new Event("change"));
+      }
+
       setupCourseForm();
     })
     .catch((err) => {