Regreso de las competencias

api/cursos.php

@@ -35,13 +35,15 @@ switch ($method) {
         
         try {
             $stmt = $pdo->prepare("
-                INSERT INTO cursos (nombre, descripcion, tipo, estado, profesor_id) 
+                INSERT INTO cursos (nombre, descripcion, tipo, competencias, estado, profesor_id) 
-                VALUES (?, ?, ?, 'activo', ?)
+                VALUES (?, ?, ?, ?, ?, ?)
             ");
             $stmt->execute([
                 $data['nombre'],
                 $data['descripcion'] ?? null,
                 $data['tipo'],
+                $data['competencias'] ?? null,
+                $data['estado'],
                 $profesorId
             ]);
             
@@ -77,6 +79,7 @@ switch ($method) {
                 nombre = ?, 
                 descripcion = ?, 
                 tipo = ?, 
+                competencias = ?,
                 estado = ?
                 WHERE id = ?
             ");
@@ -84,7 +87,8 @@ switch ($method) {
                 $data['nombre'],
                 $data['descripcion'] ?? null,
                 $data['tipo'],
-                $data['estado'] ?? 'activo',
+                $data['competencias'] ?? null,
+                $data['estado'],
                 $data['id']
             ]);
             

assets/css/styles.css

@@ -579,8 +579,13 @@ header h1 {
   color: white;
 }
 
-.badge.inactive {
+.badge.completed {
-  background-color: #f44336;
+  background-color: #2196f3;
+  color: white;
+}
+
+.badge.archived {
+  background-color: #9e9e9e;
   color: white;
 }
 

assets/js/main.js

@@ -336,27 +336,36 @@ function loadProfessorCourses(container) {
         <div class="card">
           <h2>Mis Cursos</h2>
           <form id="courseForm">
-            <label>Nombre del Curso*</label>
+            <label>Nombre del Curso *</label>
             <input type="text" name="nombre" required>
             
             <label>Descripción</label>
-            <textarea name="descripcion" 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>
+            <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>
+            <label>Tipo de Curso *</label>
-            <select name="tipo" required>
+            <select id="courseType" name="tipo" required>
               <option value="inyeccion">Inyección</option>
               <option value="pildora">Píldora</option>
               <option value="tratamiento">Tratamiento</option>
             </select>
+
+            <div id="competencesField" name="competencias" class="oculto">
+              <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="inactivo">Inactivo</option>
+              <option value="completado">Completado</option>
+              <option value="archivado">Archivado</option>
             </select>
             
             <div class="action-buttons">
               <button class="btn btn-success" type="submit">Guardar</button>
+              <button class="btn btn-outline" type="button" id="cancelCourseBtn" style="display:none; margin-left:8px; background-color: #f44336;">
+                Cancelar
+              </button>
             </div>
           </form>
         </div>
@@ -385,9 +394,17 @@ function loadProfessorCourses(container) {
                     <td><span class="badge ${getCourseTypeClass(
                       course.tipo
                     )}">${course.tipo}</span></td>
-                    <td><span class="badge ${
+                    <td>
-                      course.estado === "activo" ? "active" : "inactive"
+                      <span class="badge ${
-                    }">${course.estado}</span></td>
+                        course.estado === "activo"
+                          ? "active"
+                          : course.estado === "completado"
+                          ? "completed"
+                          : course.estado === "archivado"
+                          ? "archived"
+                          : "inactive"
+                      }">${course.estado}</span>
+                    </td>
                     <td>
                       <div class="action-buttons">
                         <button class="btn btn-sm" onclick="editCourse(${
@@ -411,17 +428,61 @@ function loadProfessorCourses(container) {
     });
 }
 
+function formatCourseType(type) {
+  const types = {
+    'pildora': 'Píldora',
+    'inyeccion': 'Inyección',
+    'tratamiento': 'Tratamiento'
+  };
+  return types[type] || type;
+}
+
 function setupCourseForm() {
+  const courseTypeSelect = document.getElementById('courseType');
+  const competencesField = document.getElementById('competencesField');
+  const competenciasInput = competencesField
+    ? competencesField.querySelector('input[name="competencias"]')
+    : null;
+
+  if (courseTypeSelect && competenciasInput) {
+    courseTypeSelect.addEventListener('change', function() {
+      const isTratamiento = this.value === 'tratamiento';
+      competencesField.classList.toggle('oculto', !isTratamiento);
+      competenciasInput.required = isTratamiento;
+      if (!isTratamiento) {
+        competenciasInput.value = '';
+      }
+    });
+
+    const isTratamiento = courseTypeSelect.value === 'tratamiento';
+    competencesField.classList.toggle('oculto', !isTratamiento);
+    competenciasInput.required = isTratamiento;
+  }
+  
   const form = document.getElementById("courseForm");
   if (!form) return;
 
+  const cancelBtn = document.getElementById("cancelCourseBtn");
+  if (cancelBtn) {
+    cancelBtn.addEventListener("click", function () {
+      form.reset();
+      competencesField.classList.add("oculto");
+      form.dataset.editing = "false";
+      delete form.dataset.courseId;
+      form.querySelector("button[type='submit']").textContent = "Guardar";
+      cancelBtn.style.display = "none";
+    });
+  }
+
   form.addEventListener("submit", function (e) {
     e.preventDefault();
     const formData = new FormData(this);
     const jsonData = {
       nombre: formData.get("nombre"),
       descripcion: formData.get("descripcion"),
+      competencias: formData.get("competencias"),
       tipo: formData.get("tipo"),
+      estado: formData.get("estado"),      
       profesor_id: getProfesorId(),
     };
 
@@ -479,10 +540,24 @@ window.editCourse = function (id) {
       form.nombre.value = course.nombre;
       form.descripcion.value = course.descripcion || "";
       form.tipo.value = course.tipo;
+      form.estado.value = course.estado || "activo";
+
+      const competencesField = document.getElementById("competencesField");
+      const competenciasInput = competencesField.querySelector('input[name="competencias"]');
+      if (course.tipo === "tratamiento") {
+        competencesField.classList.remove("oculto");
+        competenciasInput.value = course.competencias || "";
+        competenciasInput.required = true;
+      } else {
+        competencesField.classList.add("oculto");
+        competenciasInput.value = "";
+        competenciasInput.required = false;
+      }
 
       form.dataset.editing = "true";
       form.dataset.courseId = id;
-      form.querySelector("button").textContent = "Actualizar Curso";
+      form.querySelector("button[type='submit']").textContent = "Actualizar Curso";
+      document.getElementById("cancelCourseBtn").style.display = "inline-block";
       form.scrollIntoView({ behavior: "smooth" });
     });
 };

hash.php

@@ -1,5 +1,5 @@
 <?php
-$contraseña = "1234";
+$contraseña = "ascii";
 $hash = password_hash($contraseña, PASSWORD_DEFAULT);
 
 echo "Contraseña original: " . $contraseña . "<br>";