Alejandro Rosales 2 éve
szülő
commit
26fdd42e10
1 módosított fájl, 1397 hozzáadás és 1397 törlés
  1. 1397 1397
      consultar_horario.php

+ 1397 - 1397
consultar_horario.php

@@ -1,1608 +1,1608 @@
+<?php
+require_once 'class/c_login.php';
+if (!isset($_SESSION['user']))
+    die(header('Location: index.php'));
+
+$user = unserialize($_SESSION['user']);
+$user->access();
+if (!$user->admin && in_array($user->acceso, ['n']))
+    die(header('Location: main.php?error=1'));
+
+$user->print_to_log('Consultar horario');
+
+$write = $user->admin || in_array($user->acceso, ['w']);
+// var_dump($user);
+?>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Consultar horario | <?= $user->facultad['facultad'] ?? 'General' ?></title>
+    <meta charset="utf-8">
+    <meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <?php include_once "import/html_css_files.php"; ?>
+</head>
+<!--  -->
+
+<body style="display: block;">
     <?php
-    require_once 'class/c_login.php';
-    if (!isset($_SESSION['user']))
-        die(header('Location: index.php'));
-
-    $user = unserialize($_SESSION['user']);
-    $user->access();
-    if (!$user->admin && in_array($user->acceso, ['n']))
-        die(header('Location: main.php?error=1'));
-
-    $user->print_to_log('Consultar horario');
-
-    $write = $user->admin || in_array($user->acceso, ['w']);
-    // var_dump($user);
+    include('include/constantes.php');
+    include("import/html_header.php");
+    html_header("Consultar horario", "Sistema de gestión de checador");
     ?>
-    <!DOCTYPE html>
-    <html lang="en">
-
-    <head>
-        <title>Consultar horario | <?= $user->facultad['facultad'] ?? 'General' ?></title>
-        <meta charset="utf-8">
-        <meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <?php include_once "import/html_css_files.php"; ?>
-    </head>
-    <!--  -->
-
-    <body style="display: block;">
-        <?php
-        include('include/constantes.php');
-        include("import/html_header.php");
-        html_header("Consultar horario", "Sistema de gestión de checador");
-        ?>
-        <?= "<!-- $user -->" ?>
-        <main class="container content marco content-margin" id="local-app">
-            <section id="message"></section>
-            <?php require('import/periodo.php') ?>
-
-            <!-- Nuevo horario -->
-            <form>
-                <div class="form-group">
-                    <div class="form-box">
-                        <?php
-                        #$carreras = query("SELECT * FROM FS_CARRERA WHERE FACULTAD = :fac AND PERIODO = COALESCE(:per, PERIODO) ORDER BY CARRERA", [":fac" => $user->facultad['facultad_id'], ":per" => $user->periodo], single: false);
-                        // repliaction of the query in the database with database class
-                        $nivel = $db->where('id', $user->periodo)->getOne('fs_periodo');
-                        $carreras = $db
-                            ->orderBy('carrera')
-                            ->where('facultad', $nivel['facultad_id'])
-                            ->where('nivel', $nivel['nivel_id'])
-                            ->get('fs_carrera', 100, 'id, carrera');
-
-                        ?>
-                        <div class="form-group row">
-                            <label for="filter_carrera" class="col-4 col-form-label">Carrera</label>
-                            <div class="col-6 ">
-                                <div id="dlcarrera" class="datalist datalist-select mb-1 w-100">
-                                    <div class="datalist-input">Seleccionar carrera</div>
-                                    <span class="ing-buscar icono"></span>
-                                    <ul style="display:none">
-                                        <?php
-                                        foreach ($carreras as $carrera) {
-                                        ?>
-                                            <li data-id="<?= $carrera['id'] ?>">
-                                                <?= $carrera['carrera'] ?>
-                                            </li>
-                                        <?php
-                                        }
-                                        ?>
-                                    </ul>
-                                    <input type="hidden" id="filter_carrera" name="carrera" value="">
-                                </div>
+    <?= "<!-- $user -->" ?>
+    <main class="container content marco content-margin" id="local-app">
+        <section id="message"></section>
+        <?php require('import/periodo.php') ?>
+
+        <!-- Nuevo horario -->
+        <form>
+            <div class="form-group">
+                <div class="form-box">
+                    <?php
+                    #$carreras = query("SELECT * FROM FS_CARRERA WHERE FACULTAD = :fac AND PERIODO = COALESCE(:per, PERIODO) ORDER BY CARRERA", [":fac" => $user->facultad['facultad_id'], ":per" => $user->periodo], single: false);
+                    // repliaction of the query in the database with database class
+                    $nivel = $db->where('id', $user->periodo)->getOne('fs_periodo');
+                    $carreras = $db
+                        ->orderBy('carrera')
+                        ->where('facultad', $nivel['facultad_id'])
+                        ->where('nivel', $nivel['nivel_id'])
+                        ->get('fs_carrera', 100, 'id, carrera');
+
+                    ?>
+                    <div class="form-group row">
+                        <label for="filter_carrera" class="col-4 col-form-label">Carrera</label>
+                        <div class="col-6 ">
+                            <div id="dlcarrera" class="datalist datalist-select mb-1 w-100">
+                                <div class="datalist-input">Seleccionar carrera</div>
+                                <span class="ing-buscar icono"></span>
+                                <ul style="display:none">
+                                    <?php
+                                    foreach ($carreras as $carrera) {
+                                    ?>
+                                        <li data-id="<?= $carrera['id'] ?>">
+                                            <?= $carrera['carrera'] ?>
+                                        </li>
+                                    <?php
+                                    }
+                                    ?>
+                                </ul>
+                                <input type="hidden" id="filter_carrera" name="carrera" value="">
                             </div>
                         </div>
+                    </div>
 
-                        <!-- Grupo -->
-
-                        <div class="form-group row">
-                            <label for="filter_grupo" class="col-4 col-form-label">Grupo</label>
-                            <div class="col-6 ">
-                                <div id="dlgrupo" class="datalist datalist-select mb-1 w-100">
-                                    <div class="datalist-input">Seleccionar grupo</div>
-                                    <span class="ing-buscar icono"></span>
-                                    <ul style="display:none">
-                                    </ul>
-                                    <input type="hidden" id="filter_grupo" name="grupo" value="">
-                                </div>
+                    <!-- Grupo -->
+
+                    <div class="form-group row">
+                        <label for="filter_grupo" class="col-4 col-form-label">Grupo</label>
+                        <div class="col-6 ">
+                            <div id="dlgrupo" class="datalist datalist-select mb-1 w-100">
+                                <div class="datalist-input">Seleccionar grupo</div>
+                                <span class="ing-buscar icono"></span>
+                                <ul style="display:none">
+                                </ul>
+                                <input type="hidden" id="filter_grupo" name="grupo" value="">
                             </div>
                         </div>
+                    </div>
 
-                        <div class="form-group mt-4 row justify-content-center">
-                            <?php if ($write) { ?>
-                                <button type="button" id="nuevo" class="btn btn-outline-primary ml-4 d-none" title="Nuevo horario" data-toggle="modal" data-target="#modal-editar">
-                                    <span class="ing-mas ing-fw"></span> Nuevo
-                                </button>
-                            <?php } ?>
-                        </div>
+                    <div class="form-group mt-4 row justify-content-center">
+                        <?php if ($write) { ?>
+                            <button type="button" id="nuevo" class="btn btn-outline-primary ml-4 d-none" title="Nuevo horario" data-toggle="modal" data-target="#modal-editar">
+                                <span class="ing-mas ing-fw"></span> Nuevo
+                            </button>
+                        <?php } ?>
                     </div>
                 </div>
-
-            </form>
-            <!-- Horario is a (table with one a cell) within a table 
-            7:15 - 8:45, 8:45 - 10:15, 10:30 - 12:00, 12:00 - 13:30
-            de lunes a viernes, a excepción de que tenga sábado
-        -->
-            <div id="btn-excel-horario" class="mb-2 float-right hidden">
-                <button class="btn btn-outline-secondary " title="Exportar a Excel">
-                    <span class="ing-descarga ing-fw"></span> Exportar a Excel
-                </button>
-            </div>
-            <!-- Table responsive -->
-            <div class="table-responsive">
-                <table class="table table-bordered table-sm table-responsive-sm" id="table-horario">
-                    <thead class="thead-dark">
-                        <tr id="headers">
-                            <th scope="col" class="text-center">Hora</th>
-                            <th scope="col" class="text-center">Lunes</th>
-                            <th scope="col" class="text-center">Martes</th>
-                            <th scope="col" class="text-center">Miércoles</th>
-                            <th scope="col" class="text-center">Jueves</th>
-                            <th scope="col" class="text-center">Viernes</th>
-                            <th scope="col" class="text-center">Sábado</th>
-                        </tr>
-                    </thead>
-                    <tbody id="horario"></tbody>
-                </table>
             </div>
 
-            <div class="modal fade" id="modal-editar" tabindex="-1" aria-labelledby="modal-editar" aria-hidden="true" data-backdrop="static" data-keyboard="false">
-                <div class="modal-dialog modal-dialog-centered modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="col-12 modal-title text-center">Horario
-                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </h5>
-                        </div>
-                        <div class="modal-body">
-                            <section id="message_editar"></section>
-
-                            <!-- Hora inicio CLOCKPICKER -->
-                            <div class="form-box">
-                                <div class="form-group row">
-                                    <label for="dli-grupo" class="col-4 col-form-label">Grupo</label>
-                                    <div class="col-6">
-                                        <div id="grupoModal" class="datalist datalist-select mb-1 w-100">
-                                            <div class="datalist-input text-center"></div>
-                                            <span class="ing-buscar icono"></span>
-                                            <ul style="display:none">
-                                                <li data-id="" class="text-center">Nuevo grupo</li>
-                                            </ul>
-                                            <input type="hidden" name="dli-grupo" id="dli-grupo" value="" />
-                                        </div>
+        </form>
+        <!-- Horario is a (table with one a cell) within a table 
+        7:15 - 8:45, 8:45 - 10:15, 10:30 - 12:00, 12:00 - 13:30
+        de lunes a viernes, a excepción de que tenga sábado
+    -->
+        <div id="btn-excel-horario" class="mb-2 float-right hidden">
+            <button class="btn btn-outline-secondary " title="Exportar a Excel">
+                <span class="ing-descarga ing-fw"></span> Exportar a Excel
+            </button>
+        </div>
+        <!-- Table responsive -->
+        <div class="table-responsive">
+            <table class="table table-bordered table-sm table-responsive-sm" id="table-horario">
+                <thead class="thead-dark">
+                    <tr id="headers">
+                        <th scope="col" class="text-center">Hora</th>
+                        <th scope="col" class="text-center">Lunes</th>
+                        <th scope="col" class="text-center">Martes</th>
+                        <th scope="col" class="text-center">Miércoles</th>
+                        <th scope="col" class="text-center">Jueves</th>
+                        <th scope="col" class="text-center">Viernes</th>
+                        <th scope="col" class="text-center">Sábado</th>
+                    </tr>
+                </thead>
+                <tbody id="horario"></tbody>
+            </table>
+        </div>
+
+        <div class="modal fade" id="modal-editar" tabindex="-1" aria-labelledby="modal-editar" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="col-12 modal-title text-center">Horario
+                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </h5>
+                    </div>
+                    <div class="modal-body">
+                        <section id="message_editar"></section>
+
+                        <!-- Hora inicio CLOCKPICKER -->
+                        <div class="form-box">
+                            <div class="form-group row">
+                                <label for="dli-grupo" class="col-4 col-form-label">Grupo</label>
+                                <div class="col-6">
+                                    <div id="grupoModal" class="datalist datalist-select mb-1 w-100">
+                                        <div class="datalist-input text-center"></div>
+                                        <span class="ing-buscar icono"></span>
+                                        <ul style="display:none">
+                                            <li data-id="" class="text-center">Nuevo grupo</li>
+                                        </ul>
+                                        <input type="hidden" name="dli-grupo" id="dli-grupo" value="" />
                                     </div>
                                 </div>
-                                <div class="form-grupo row mb-3">
-                                    <div class="col-4"></div>
-                                    <div class="col-6">
-                                        <input type="text" id="grupo" name="grupo" value="" class="form-control" placeholder="Grupo" required="required" hidden>
-                                        <div class="invalid-feedback">
-                                            Por favor, ingrese un grupo.
-                                        </div>
+                            </div>
+                            <div class="form-grupo row mb-3">
+                                <div class="col-4"></div>
+                                <div class="col-6">
+                                    <input type="text" id="grupo" name="grupo" value="" class="form-control" placeholder="Grupo" required="required" hidden>
+                                    <div class="invalid-feedback">
+                                        Por favor, ingrese un grupo.
                                     </div>
                                 </div>
-                                <div class="form-group row">
-                                    <label for="materia" class="col-4 col-form-label">Materia</label>
-                                    <div class="col-6">
-                                        <input list="lista_materias" name="dlMateria" id="dlMateria" class="form-control text-center" placeholder="Materia" required="required">
-                                        <datalist id="lista_materias"></datalist>
-                                        <input type="hidden" id="materia" name="materia" value="">
-                                        <div class="invalid-feedback">
-                                            Por favor, seleccione una materia.
-                                        </div>
+                            </div>
+                            <div class="form-group row">
+                                <label for="materia" class="col-4 col-form-label">Materia</label>
+                                <div class="col-6">
+                                    <input list="lista_materias" name="dlMateria" id="dlMateria" class="form-control text-center" placeholder="Materia" required="required">
+                                    <datalist id="lista_materias"></datalist>
+                                    <input type="hidden" id="materia" name="materia" value="">
+                                    <div class="invalid-feedback">
+                                        Por favor, seleccione una materia.
                                     </div>
                                 </div>
+                            </div>
 
-                                <div class="form-group row">
-                                    <label for="editor_hora" class="col-4 col-form-label">Hora</label>
-                                    <div class="col-3">
-                                        <div id="dlhora" class="datalist datalist-select mb-1">
-                                            <div class="datalist-input text-center"></div>
-                                            <span class="ing-buscar icono"></span>
-                                            <ul style="display:none">
-                                                <?php foreach (range(7, 21) as $hora) { ?>
-                                                    <li data-id='<?= $hora ?>'><?= str_pad($hora, 2, "0", STR_PAD_LEFT) ?></li>
-                                                <?php } ?>
-                                            </ul>
-                                            <input type="hidden" id="selector_horas" name="horas" value="">
-                                        </div>
-                                    </div>
-                                    <div class="col-3">
-                                        <div id="dlminuto" class="datalist datalist-select mb-1">
-                                            <div class="datalist-input text-center"></div>
-                                            <span class="ing-buscar icono"></span>
-                                            <ul style="display:none">
-                                                <?php foreach (range(0, 45, 15) as $minuto) { ?>
-                                                    <li data-id='<?= $minuto ?>'><?= str_pad($minuto, 2, "0", STR_PAD_LEFT) ?></li>
-                                                <?php } ?>
-                                            </ul>
-                                            <input type="hidden" id="selector_minutos" name="minutos" value="">
-                                        </div>
+                            <div class="form-group row">
+                                <label for="editor_hora" class="col-4 col-form-label">Hora</label>
+                                <div class="col-3">
+                                    <div id="dlhora" class="datalist datalist-select mb-1">
+                                        <div class="datalist-input text-center"></div>
+                                        <span class="ing-buscar icono"></span>
+                                        <ul style="display:none">
+                                            <?php foreach (range(7, 21) as $hora) { ?>
+                                                <li data-id='<?= $hora ?>'><?= str_pad($hora, 2, "0", STR_PAD_LEFT) ?></li>
+                                            <?php } ?>
+                                        </ul>
+                                        <input type="hidden" id="selector_horas" name="horas" value="">
                                     </div>
                                 </div>
-
-                                <!-- Día -->
-                                <div class="form-group row">
-                                    <label for="editor_dia" class="col-4 col-form-label">Día</label>
-                                    <div class="col-6 ">
-                                        <div id="dldia" class="datalist datalist-select mb-1 w-100">
-                                            <div class="datalist-input">Seleccionar día</div>
-                                            <span class="ing-buscar icono"></span>
-                                            <ul style="display:none">
-                                                <li data-id="1">Lunes</li>
-                                                <li data-id="2">Martes</li>
-                                                <li data-id="3">Miércoles</li>
-                                                <li data-id="4">Jueves</li>
-                                                <li data-id="5">Viernes</li>
-                                                <li data-id="6">Sábado</li>
-                                            </ul>
-                                            <input type="hidden" id="editor_dia" name="dia" value="">
-                                        </div>
+                                <div class="col-3">
+                                    <div id="dlminuto" class="datalist datalist-select mb-1">
+                                        <div class="datalist-input text-center"></div>
+                                        <span class="ing-buscar icono"></span>
+                                        <ul style="display:none">
+                                            <?php foreach (range(0, 45, 15) as $minuto) { ?>
+                                                <li data-id='<?= $minuto ?>'><?= str_pad($minuto, 2, "0", STR_PAD_LEFT) ?></li>
+                                            <?php } ?>
+                                        </ul>
+                                        <input type="hidden" id="selector_minutos" name="minutos" value="">
                                     </div>
                                 </div>
+                            </div>
 
-                                <!-- Duración -->
-                                <div class="form-group row">
-                                    <label for="editor_duración" class="col-4 col-form-label">Duración</label>
-                                    <div class="col-6 ">
-                                        <div id="dlduración" class="datalist datalist-select mb-1 w-100">
-                                            <div class="datalist-input">Seleccionar duración</div>
-                                            <span class="ing-buscar icono"></span>
-                                            <ul style="display:none">
-                                                <?php
-                                                $duraciones = $db->orderBy('duracion_bloques')->get("duracion");
-                                                foreach ($duraciones as $duración) {
-                                                    $nombre = $duración['duracion_nombre'];
-                                                    $id = $duración['duracion_id'];
-                                                    $bloques = $duración['duracion_bloques'];
-                                                ?>
-                                                    <li data-id="<?= $id; ?>" data-bloques="<?= $bloques; ?>"><?= $nombre; ?></li>
-                                                <?php
-                                                }
-                                                ?>
-                                            </ul>
-                                            <input type="hidden" id="editor_duración" name="duración" value="">
-                                        </div>
-                                        <div class="invalid-feedback">
-                                            La duración supera el límite (22:00).
-                                        </div>
+                            <!-- Día -->
+                            <div class="form-group row">
+                                <label for="editor_dia" class="col-4 col-form-label">Día</label>
+                                <div class="col-6 ">
+                                    <div id="dldia" class="datalist datalist-select mb-1 w-100">
+                                        <div class="datalist-input">Seleccionar día</div>
+                                        <span class="ing-buscar icono"></span>
+                                        <ul style="display:none">
+                                            <li data-id="1">Lunes</li>
+                                            <li data-id="2">Martes</li>
+                                            <li data-id="3">Miércoles</li>
+                                            <li data-id="4">Jueves</li>
+                                            <li data-id="5">Viernes</li>
+                                            <li data-id="6">Sábado</li>
+                                        </ul>
+                                        <input type="hidden" id="editor_dia" name="dia" value="">
                                     </div>
                                 </div>
+                            </div>
 
-                                <!-- Profesor -->
-                                <div class="form-group row">
-                                    <label for="editor_profesor" class="col-4 col-form-label">Profesor</label>
-                                    <div class="col-6">
-                                        <input list="lista_profesores" name="dlProfesor" id="dlProfesor" class="form-control" placeholder="Profesor" required="required">
-                                        <div class="valid-feedback">
-                                            Profesor encontrado
-                                        </div>
-                                        <div class="invalid-feedback">
-                                            Profesor no encontrado
-                                        </div>
-                                        <datalist id="lista_profesores">
+                            <!-- Duración -->
+                            <div class="form-group row">
+                                <label for="editor_duración" class="col-4 col-form-label">Duración</label>
+                                <div class="col-6 ">
+                                    <div id="dlduración" class="datalist datalist-select mb-1 w-100">
+                                        <div class="datalist-input">Seleccionar duración</div>
+                                        <span class="ing-buscar icono"></span>
+                                        <ul style="display:none">
                                             <?php
-                                            $profesores = $db->where('facultad_id', $user->facultad['facultad_id'])->get("fs_profesor");
-                                            foreach ($profesores as $profesor) {
-                                                extract($profesor);
+                                            $duraciones = $db->orderBy('duracion_bloques')->get("duracion");
+                                            foreach ($duraciones as $duración) {
+                                                $nombre = $duración['duracion_nombre'];
+                                                $id = $duración['duracion_id'];
+                                                $bloques = $duración['duracion_bloques'];
                                             ?>
-                                                <option data-grado="<?= $grado ?>" data-clave="<?= $clave ?>" data-profesor="<?= $profesor ?>" data-id="<?= $id; ?>" value="<?= "$clave | $grado $profesor" ?>"></option>
+                                                <li data-id="<?= $id; ?>" data-bloques="<?= $bloques; ?>"><?= $nombre; ?></li>
                                             <?php
                                             }
                                             ?>
-                                        </datalist>
-                                        <ul class="list-group" id="profesores"></ul>
-                                        <input type="hidden" id="editor_profesor" name="profesor" value="">
+                                        </ul>
+                                        <input type="hidden" id="editor_duración" name="duración" value="">
+                                    </div>
+                                    <div class="invalid-feedback">
+                                        La duración supera el límite (22:00).
                                     </div>
                                 </div>
+                            </div>
 
-                                <!-- Salón -->
-                                <div class="form-group row">
-                                    <label for="editor_salón" class="col-4 col-form-label">Salón</label>
-                                    <div class="col-6">
-                                        <input type="text" class="form-control" id="editor_salón" name="salón" placeholder="Salón" maxlength="10" required="required">
-                                        <div class="invalid-feedback">
-                                            El salón no puede estar vacío.
-                                        </div>
+                            <!-- Profesor -->
+                            <div class="form-group row">
+                                <label for="editor_profesor" class="col-4 col-form-label">Profesor</label>
+                                <div class="col-6">
+                                    <input list="lista_profesores" name="dlProfesor" id="dlProfesor" class="form-control" placeholder="Profesor" required="required">
+                                    <div class="valid-feedback">
+                                        Profesor encontrado
+                                    </div>
+                                    <div class="invalid-feedback">
+                                        Profesor no encontrado
+                                    </div>
+                                    <datalist id="lista_profesores">
+                                        <?php
+                                        $profesores = $db->where('facultad_id', $user->facultad['facultad_id'])->get("fs_profesor");
+                                        foreach ($profesores as $profesor) {
+                                            extract($profesor);
+                                        ?>
+                                            <option data-grado="<?= $grado ?>" data-clave="<?= $clave ?>" data-profesor="<?= $profesor ?>" data-id="<?= $id; ?>" value="<?= "$clave | $grado $profesor" ?>"></option>
+                                        <?php
+                                        }
+                                        ?>
+                                    </datalist>
+                                    <ul class="list-group" id="profesores"></ul>
+                                    <input type="hidden" id="editor_profesor" name="profesor" value="">
+                                </div>
+                            </div>
+
+                            <!-- Salón -->
+                            <div class="form-group row">
+                                <label for="editor_salón" class="col-4 col-form-label">Salón</label>
+                                <div class="col-6">
+                                    <input type="text" class="form-control" id="editor_salón" name="salón" placeholder="Salón" maxlength="10" required="required">
+                                    <div class="invalid-feedback">
+                                        El salón no puede estar vacío.
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="modal-footer">
-                            <button data-id="" type="button" class="btn btn-primary" id="btn-guardar"><i class="ing-guardar ing"></i> Guardar</button>
-                            <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancelar</button>
-                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button data-id="" type="button" class="btn btn-primary" id="btn-guardar"><i class="ing-guardar ing"></i> Guardar</button>
+                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancelar</button>
                     </div>
                 </div>
             </div>
-            <div class="modal" id="modal-borrar" tabindex="-1" aria-labelledby="modal-borrar" aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="col-12 modal-title text-center">Horario
-                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </h5>
-                        </div>
-                        <div class="modal-body text-center">
-                            <h5>¿Está seguro de eliminar el horario?</h5>
-
-                            <div class="form-group mt-4 row justify-content-center" style="gap: 1rem;">
-                                <button id="btn-borrar" type="button" class="btn btn-danger">
-                                    <i class="ing-borrar ing"></i>
-                                    Borrar
-                                </button>
+        </div>
+        <div class="modal" id="modal-borrar" tabindex="-1" aria-labelledby="modal-borrar" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="col-12 modal-title text-center">Horario
+                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </h5>
+                    </div>
+                    <div class="modal-body text-center">
+                        <h5>¿Está seguro de eliminar el horario?</h5>
 
-                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
-                            </div>
+                        <div class="form-group mt-4 row justify-content-center" style="gap: 1rem;">
+                            <button id="btn-borrar" type="button" class="btn btn-danger">
+                                <i class="ing-borrar ing"></i>
+                                Borrar
+                            </button>
 
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                         </div>
+
                     </div>
                 </div>
             </div>
-            <div class="modal fade" id="modal-choose" tabindex="-1" aria-labelledby="modal-choose" aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered modal-lg">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="col-12 modal-title text-center">Seleccionar horarios en conflicto
-                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </h5>
-                        </div>
-                        <div class="modal-body">
-                            <div class="row">
-                                <div class="col-12">
-                                    <div class="alert alert-danger" role="alert">
-                                        <h4 class="alert-heading">
-                                            <i class="ing-importante ing"></i>
-                                            ¡Atención!
-                                        </h4>
-                                        <p>Los siguientes horarios tienen conflicto con el horario que intenta guardar.</p>
-                                    </div>
+        </div>
+        <div class="modal fade" id="modal-choose" tabindex="-1" aria-labelledby="modal-choose" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="col-12 modal-title text-center">Seleccionar horarios en conflicto
+                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </h5>
+                    </div>
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="alert alert-danger" role="alert">
+                                    <h4 class="alert-heading">
+                                        <i class="ing-importante ing"></i>
+                                        ¡Atención!
+                                    </h4>
+                                    <p>Los siguientes horarios tienen conflicto con el horario que intenta guardar.</p>
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col-12">
-                                    <div class="table-responsive">
-                                        <table class="table table-striped table-hover">
-                                            <thead>
-                                                <tr>
-                                                    <th scope="col">Hora</th>
-                                                    <th scope="col">Materia</th>
-                                                    <th scope="col">Profesores</th>
-                                                    <th scope="col">Salón</th>
-
-                                                    <?php if ($write == "true") { ?>
-                                                        <th class="text-center" scope="col">Editar</th>
-                                                        <th class="text-center" scope="col">Borrar</th>
-                                                    <?php } ?>
-
-                                                </tr>
-                                            </thead>
-                                            <tbody id="conflictos">
-                                            </tbody>
-                                        </table>
-                                    </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="table-responsive">
+                                    <table class="table table-striped table-hover">
+                                        <thead>
+                                            <tr>
+                                                <th scope="col">Hora</th>
+                                                <th scope="col">Materia</th>
+                                                <th scope="col">Profesores</th>
+                                                <th scope="col">Salón</th>
+
+                                                <?php if ($write == "true") { ?>
+                                                    <th class="text-center" scope="col">Editar</th>
+                                                    <th class="text-center" scope="col">Borrar</th>
+                                                <?php } ?>
+
+                                            </tr>
+                                        </thead>
+                                        <tbody id="conflictos">
+                                        </tbody>
+                                    </table>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </main>
-    </body>
-    <?php
-    require_once("import/html_footer.php");
-    ?>
-    <script src="js/scrollables.js"></script>
-
-    <script src="js/bootstrap/bootstrap.min.js"></script>
-    <!-- use the latest version -->
-    <script src="js/moment.js"></script>
-    <!-- <script src="js/datalist.js"></script> -->
-    <script type="module">
-        import {
-            triggerMessage
-        } from './module/messages.js';
-        var gHorarios = [];
-        var datalists = {
-            día: [document.querySelector('#dldia div'), document.querySelector('#dldia div').innerText],
-            duración: [document.querySelector('#dlduración div'), document.querySelector('#dlduración div').innerText],
+        </div>
+    </main>
+</body>
+<?php
+require_once("import/html_footer.php");
+?>
+<script src="js/scrollables.js"></script>
+
+<script src="js/bootstrap/bootstrap.min.js"></script>
+<!-- use the latest version -->
+<script src="js/moment.js"></script>
+<!-- <script src="js/datalist.js"></script> -->
+<script type="module">
+    import {
+        triggerMessage
+    } from './module/messages.js';
+    var gHorarios = [];
+    var datalists = {
+        día: [document.querySelector('#dldia div'), document.querySelector('#dldia div').innerText],
+        duración: [document.querySelector('#dlduración div'), document.querySelector('#dlduración div').innerText],
+    }
+
+    /**@Auxiliary functions */
+    function listProfesor({
+        id,
+        grado,
+        profesor,
+        clave
+    }) {
+        const lista = document.getElementById("dlProfesor");
+        lista.innerHTML = "";
+        lista.classList.remove("is-invalid");
+        const li = document.createElement('li');
+        li.setAttribute('data-id', id);
+        li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
+        li.innerHTML = `${clave} | ${grado ?? ''} ${profesor}`
+
+        const btn = document.createElement('button');
+        btn.setAttribute('type', 'button');
+        btn.classList.add('badge', 'badge-danger', 'badge-pill', 'border-0');
+        btn.onclick = _ => li.remove();
+
+        const i = document.createElement('i');
+        i.classList.add('ing-cancelar');
+        btn.appendChild(i);
+        li.appendChild(btn);
+
+        document.getElementById("profesores").appendChild(li);
+    }
+
+    function compareHours(hora1, hora2) {
+        // parseInt each hour and minute
+        const [h1, m1, ] = hora1.split(":").map(x => parseInt(x));
+        const [h2, m2, ] = hora2.split(":").map(x => parseInt(x));
+
+        if (h1 > h2)
+            return 1;
+        else if (h1 < h2)
+            return -1;
+        else if (m1 > m2)
+            return 1;
+        else if (m1 < m2)
+            return -1;
+        else
+            return 0;
+    }
+    async function buscarGrupo() {
+        const carrera = document.querySelector("#filter_carrera").value;
+        const grupo = document.querySelector("#filter_grupo").value;
+
+        if (carrera == "" || grupo == "") {
+            triggerMessage("El nombre del grupo y la carrera son requeridos", "Faltan campos");
+            return;
         }
+        const formData = new FormData();
 
-        /**@Auxiliary functions */
-        function listProfesor({
-            id,
-            grado,
-            profesor,
-            clave
-        }) {
-            const lista = document.getElementById("dlProfesor");
-            lista.innerHTML = "";
-            lista.classList.remove("is-invalid");
-            const li = document.createElement('li');
-            li.setAttribute('data-id', id);
-            li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
-            li.innerHTML = `${clave} | ${grado ?? ''} ${profesor}`
-
-            const btn = document.createElement('button');
-            btn.setAttribute('type', 'button');
-            btn.classList.add('badge', 'badge-danger', 'badge-pill', 'border-0');
-            btn.onclick = _ => li.remove();
-
-            const i = document.createElement('i');
-            i.classList.add('ing-cancelar');
-            btn.appendChild(i);
-            li.appendChild(btn);
-
-            document.getElementById("profesores").appendChild(li);
-        }
+        formData.append("carrera", carrera);
+        formData.append("grupo", grupo);
+        formData.append("periodo", document.querySelector("#periodo").value);
+        formData.append('facultad', '<?= $user->facultad['facultad_id'] ?>');
 
-        function compareHours(hora1, hora2) {
-            // parseInt each hour and minute
-            const [h1, m1, ] = hora1.split(":").map(x => parseInt(x));
-            const [h2, m2, ] = hora2.split(":").map(x => parseInt(x));
-
-            if (h1 > h2)
-                return 1;
-            else if (h1 < h2)
-                return -1;
-            else if (m1 > m2)
-                return 1;
-            else if (m1 < m2)
-                return -1;
-            else
-                return 0;
-        }
-        async function buscarGrupo() {
-            const carrera = document.querySelector("#filter_carrera").value;
-            const grupo = document.querySelector("#filter_grupo").value;
+        try {
+            gHorarios = [];
+            const {
+                status,
+                horario: horarios,
+            } = await fetch("action/action_horario.php", {
+                method: "POST",
+                body: formData
+            }).then(res => res.json());
 
-            if (carrera == "" || grupo == "") {
-                triggerMessage("El nombre del grupo y la carrera son requeridos", "Faltan campos");
+            if (status != "success") {
+                triggerMessage(response.message, "Error");
+            }
+            // show the table
+            table.style.display = "table";
+            document.querySelectorAll('.hidden').forEach(element => element.style.display = "block");
+            // clear the table
+            table.innerHTML = empty_table;
+
+            if (horarios.length == 0) {
+                window.location.reload();
                 return;
             }
-            const formData = new FormData();
-
-            formData.append("carrera", carrera);
-            formData.append("grupo", grupo);
-            formData.append("periodo", document.querySelector("#periodo").value);
-            formData.append('facultad', '<?= $user->facultad['facultad_id'] ?>');
+            // fill the table
+            gHorarios = horarios;
 
-            try {
-                gHorarios = [];
+            function conflicts(horario1, horario2) {
                 const {
-                    status,
-                    horario: horarios,
-                } = await fetch("action/action_horario.php", {
-                    method: "POST",
-                    body: formData
-                }).then(res => res.json());
+                    hora: hora_inicio1,
+                    hora_final: hora_final1,
+                    dia: dia1,
+                } = horario1;
 
-                if (status != "success") {
-                    triggerMessage(response.message, "Error");
-                }
-                // show the table
-                table.style.display = "table";
-                document.querySelectorAll('.hidden').forEach(element => element.style.display = "block");
-                // clear the table
-                table.innerHTML = empty_table;
-
-                if (horarios.length == 0) {
-                    window.location.reload();
-                    return;
-                }
-                // fill the table
-                gHorarios = horarios;
-
-                function conflicts(horario1, horario2) {
-                    const {
-                        hora: hora_inicio1,
-                        hora_final: hora_final1,
-                        dia: dia1,
-                    } = horario1;
-
-                    const {
-                        hora: hora_inicio2,
-                        hora_final: hora_final2,
-                        dia: dia2,
-                    } = horario2;
-
-
-                    // if the days are different, there is no conflict
-                    if (dia1 != dia2) {
-                        return false;
-                    }
-
-                    const compareInicios = compareHours(hora_inicio1, hora_inicio2);
-                    const compareFinales = compareHours(hora_final1, hora_final2);
-                    const compareInicioFinal = compareHours(hora_inicio1, hora_final2);
-                    const compareFinalInicio = compareHours(hora_final1, hora_inicio2);
-
-                    // if the horario is inside the other
-                    if (compareInicios === 0 || compareFinales === 0)
-                        return true
-                    if (compareInicios === 1 && compareInicioFinal === -1)
-                        return true
-                    if (compareFinales === -1 && compareFinalInicio === 1)
-                        return true
+                const {
+                    hora: hora_inicio2,
+                    hora_final: hora_final2,
+                    dia: dia2,
+                } = horario2;
 
-                    // if the horario is outside the other
-                    if (compareInicios === -1 && compareFinales === 1)
-                        return true
 
+                // if the days are different, there is no conflict
+                if (dia1 != dia2) {
                     return false;
                 }
-                // remove the next 5 cells
-                function removeNextCells(horas, minutos, dia, cells = 5) {
-                    [...Array(cells).keys()].map(i => i + 1).forEach(i => {
-                        const minute = (minutos + i * 15)
-                        const next_minute = (minute % 60).toString().padStart(2, "0");
-                        const next_hour = (horas + Math.floor(minute / 60))
-
-                        document.getElementById(`hora-${next_hour}:${next_minute}-${dia}`).remove()
-                    });
-                }
 
-                function newBlock(horario, edit = false) {
-                    function move(horario, cells) {
-                        const {
-                            hora: hora_inicio,
-                            dia,
-                        } = horario;
+                const compareInicios = compareHours(hora_inicio1, hora_inicio2);
+                const compareFinales = compareHours(hora_final1, hora_final2);
+                const compareInicioFinal = compareHours(hora_inicio1, hora_final2);
+                const compareFinalInicio = compareHours(hora_final1, hora_inicio2);
 
-                        const [horas, minutos] = hora_inicio.split(":").map(x => parseInt(x));
-
-                        const cell = document.getElementById(`hora-${horas}:${minutos.toString().padStart(2, "0")}-${dia}`);
-
-                        const {
-                            top,
-                            left
-                        } = cell.getBoundingClientRect();
+                // if the horario is inside the other
+                if (compareInicios === 0 || compareFinales === 0)
+                    return true
+                if (compareInicios === 1 && compareInicioFinal === -1)
+                    return true
+                if (compareFinales === -1 && compareFinalInicio === 1)
+                    return true
 
-                        const block = document.getElementById(`block-${horario.id}`);
+                // if the horario is outside the other
+                if (compareInicios === -1 && compareFinales === 1)
+                    return true
 
-                        block.style.top = `${top}px`;
-                        block.style.left = `${left}px`;
+                return false;
+            }
+            // remove the next 5 cells
+            function removeNextCells(horas, minutos, dia, cells = 5) {
+                [...Array(cells).keys()].map(i => i + 1).forEach(i => {
+                    const minute = (minutos + i * 15)
+                    const next_minute = (minute % 60).toString().padStart(2, "0");
+                    const next_hour = (horas + Math.floor(minute / 60))
+
+                    document.getElementById(`hora-${next_hour}:${next_minute}-${dia}`).remove()
+                });
+            }
 
-                        removeNextCells(horas, minutos, dia, cells);
-                    }
+            function newBlock(horario, edit = false) {
+                function move(horario, cells) {
                     const {
-                        id,
-                        materia,
-                        salon,
-                        profesores,
                         hora: hora_inicio,
                         dia,
-                        bloques
                     } = horario;
 
                     const [horas, minutos] = hora_inicio.split(":").map(x => parseInt(x));
-                    const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
-                    horario.hora = hora;
 
-                    const cell = document.getElementById(`hora-${hora}-${dia}`);
+                    const cell = document.getElementById(`hora-${horas}:${minutos.toString().padStart(2, "0")}-${dia}`);
 
+                    const {
+                        top,
+                        left
+                    } = cell.getBoundingClientRect();
 
-                    cell.dataset.ids = id;
+                    const block = document.getElementById(`block-${horario.id}`);
 
-                    const float_menu = /*html*/
-                        `<div class="menu-flotante p-2" style="opacity: .7;" >
-                            <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-editar">
-                                <i class="ing-editar ing"></i>
-                            </a>
-                            <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-borrar">
-                                <i class="ing-basura ing" > </i>
-                            </a>
-                        </div>
-                        `
-
-                    cell.innerHTML = /*html*/ `
-                    <div style="overflow-y: auto; overflow-x: hidden; height: 100%;" id="block-${id}" class="position-absolute w-100 h-100">
-                        <small class="text-gray">${hora}</small> 
-                        <b class="title">${materia}</b> <br>
-                        <br><span>Salón: </span>${salon} <br>
-                        <small class="my-2">
-                            ${profesores.map(({grado, profesor}) => /*html*/ ` <span class="ing ing-formacion mx-1"></span>${grado ?? ''} ${profesor}`).join("<br>")}
-                        </small>
-                    </div>
-                    ${edit && float_menu}`
-                        
-                    cell.classList.add("bloque-clase", "position-relative");
-                    cell.rowSpan = bloques;
-                    // draggable
-                    cell.draggable = <?= $write ? "true" : "false" ?>;
-
-                    bloques > 0 ? removeNextCells(horas, minutos, dia, bloques - 1) : null;
+                    block.style.top = `${top}px`;
+                    block.style.left = `${left}px`;
+
+                    removeNextCells(horas, minutos, dia, cells);
                 }
+                const {
+                    id,
+                    materia,
+                    salon,
+                    profesores,
+                    hora: hora_inicio,
+                    dia,
+                    bloques
+                } = horario;
 
-                function newConflictBlock(horarios, edit = false) {
-                    const first_horario = horarios[0];
-                    const [horas, minutos] = first_horario.hora.split(":").map(x => parseInt(x));
-                    const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
-                    const ids = horarios.map(horario => horario.id);
-                    const cell = document.getElementById(`hora-${hora}-${first_horario.dia}`);
-                    if (cell == null) {
-                        console.error(`Error: No se encontró la celda: hora-${hora}-${first_horario.dia}`);
-                        return;
-                    }
-                    cell.dataset.ids = ids.join(",");
+                const [horas, minutos] = hora_inicio.split(":").map(x => parseInt(x));
+                const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
+                horario.hora = hora;
 
-                    // replace the content of the cell
-                    cell.innerHTML = /* HTML */ `
-                    <small class='text-danger'>
-                        ${hora}
+                const cell = document.getElementById(`hora-${hora}-${dia}`);
+
+
+                cell.dataset.ids = id;
+
+                const float_menu = /*html*/
+                    `<div class="menu-flotante p-2" style="opacity: .7;" >
+                        <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-editar">
+                            <i class="ing-editar ing"></i>
+                        </a>
+                        <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-borrar">
+                            <i class="ing-basura ing" > </i>
+                        </a>
+                    </div>
+                    `
+
+                cell.innerHTML = /*html*/ `
+                <div style="overflow-y: auto; overflow-x: hidden; height: 100%;" id="block-${id}" class="position-absolute w-100 h-100">
+                    <small class="text-gray">${hora}</small> 
+                    <b class="title">${materia}</b> <br>
+                    <br><span>Salón: </span>${salon} <br>
+                    <small class="my-2">
+                        ${profesores.map(({grado, profesor}) => /*html*/ ` <span class="ing ing-formacion mx-1"></span>${grado ?? ''} ${profesor}`).join("<br>")}
                     </small>
-                    <div class="d-flex justify-content-center align-items-center mt-4">
-                        <div class="d-flex flex-column justify-content-center align-items-center">
-                            <span class="ing ing-importante text-danger" style="font-size: 2rem;"></span>
-                            <b class='text-danger'>
-                                Empalme de ${ids.length} horarios
-                            </b>
-                            <hr>
-                            <i class="text-danger"> Ver horarios &#8230;</i>
-                        </div>
+                </div>
+                ${edit && float_menu}`
+                    
+                cell.classList.add("bloque-clase", "position-relative");
+                cell.rowSpan = bloques;
+                // draggable
+                cell.draggable = <?= $write ? "true" : "false" ?>;
+
+                bloques > 0 ? removeNextCells(horas, minutos, dia, bloques - 1) : null;
+            }
+
+            function newConflictBlock(horarios, edit = false) {
+                const first_horario = horarios[0];
+                const [horas, minutos] = first_horario.hora.split(":").map(x => parseInt(x));
+                const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
+                const ids = horarios.map(horario => horario.id);
+                const cell = document.getElementById(`hora-${hora}-${first_horario.dia}`);
+                if (cell == null) {
+                    console.error(`Error: No se encontró la celda: hora-${hora}-${first_horario.dia}`);
+                    return;
+                }
+                cell.dataset.ids = ids.join(",");
+
+                // replace the content of the cell
+                cell.innerHTML = /* HTML */ `
+                <small class='text-danger'>
+                    ${hora}
+                </small>
+                <div class="d-flex justify-content-center align-items-center mt-4">
+                    <div class="d-flex flex-column justify-content-center align-items-center">
+                        <span class="ing ing-importante text-danger" style="font-size: 2rem;"></span>
+                        <b class='text-danger'>
+                            Empalme de ${ids.length} horarios
+                        </b>
+                        <hr>
+                        <i class="text-danger"> Ver horarios &#8230;</i>
                     </div>
-                    `;
-
-                    // the text must be centered
-                    // cell.style.backgroundColor = "#f6cfd6";
-                    cell.classList.add("conflict", "bloque-clase");
-                    // add cursor clickable role = "button"
-                    cell.setAttribute("role", "button");
-
-                    // add the event listener for the cell
-                    cell.addEventListener("click", () => {
-                        $("#modal-choose").modal("show");
-                        const ids = cell.getAttribute("data-ids").split(",").map(x => parseInt(x));
-                        const horarios = gHorarios.filter(horario => ids.includes(horario.id));
-                        const tbody = document.querySelector("#modal-choose tbody");
-                        tbody.innerHTML = "";
-                        horarios.sort((a, b) => compareHours(a.hora, b.hora)).forEach(horario => {
-                            const {
-                                materia,
-                                dia,
-                                hora,
-                                hora_final,
-                                profesores,
-                                salon,
-                                id,
-                            } = horario;
-
-                            // remove the last 00 of the hour
-                            const [horaFmt, hora_finalFmt] = [hora, hora_final].map(hora => hora.slice(0, -3))
-                            const buttons = /* HTML */ `
-                                    <td class="text-center">
-                                        <button class="btn btn-sm btn-primary dismiss-editar" data-toggle="modal" data-target="#modal-editar">
-                                            <i class="ing-editar ing"></i>
-                                        </button>
-                                    </td>
-                                    <td class="text-center">
-                                        <button class="btn btn-sm btn-danger dismiss-editar" data-toggle="modal" data-target="#modal-borrar">
-                                            <i class="ing-basura ing"></i>
-                                        </button>
-                                    </td>`
-
-                            tbody.innerHTML += /* HTML */ `
-                                <tr data-ids="${id}">
-                                    <td><small>${horaFmt}-${hora_finalFmt}</small></td>
-                                    <td>${materia}</td>
-                                    <td>
-                                        ${profesores.map(({ grado, profesor }) => `${grado ?? ''} ${profesor}`).join(", ")}
-                                    </td>
-                                    <td>${salon}</td>
-                                    ${edit ? buttons : ""}
-                                </tr>`;
-                        });
-
-                        document.querySelectorAll(".dismiss-editar").forEach(btn => {
-                            btn.addEventListener("click", () => $("#modal-choose").modal("hide"));
-                        });
+                </div>
+                `;
+
+                // the text must be centered
+                // cell.style.backgroundColor = "#f6cfd6";
+                cell.classList.add("conflict", "bloque-clase");
+                // add cursor clickable role = "button"
+                cell.setAttribute("role", "button");
+
+                // add the event listener for the cell
+                cell.addEventListener("click", () => {
+                    $("#modal-choose").modal("show");
+                    const ids = cell.getAttribute("data-ids").split(",").map(x => parseInt(x));
+                    const horarios = gHorarios.filter(horario => ids.includes(horario.id));
+                    const tbody = document.querySelector("#modal-choose tbody");
+                    tbody.innerHTML = "";
+                    horarios.sort((a, b) => compareHours(a.hora, b.hora)).forEach(horario => {
+                        const {
+                            materia,
+                            dia,
+                            hora,
+                            hora_final,
+                            profesores,
+                            salon,
+                            id,
+                        } = horario;
 
+                        // remove the last 00 of the hour
+                        const [horaFmt, hora_finalFmt] = [hora, hora_final].map(hora => hora.slice(0, -3))
+                        const buttons = /* HTML */ `
+                                <td class="text-center">
+                                    <button class="btn btn-sm btn-primary dismiss-editar" data-toggle="modal" data-target="#modal-editar">
+                                        <i class="ing-editar ing"></i>
+                                    </button>
+                                </td>
+                                <td class="text-center">
+                                    <button class="btn btn-sm btn-danger dismiss-editar" data-toggle="modal" data-target="#modal-borrar">
+                                        <i class="ing-basura ing"></i>
+                                    </button>
+                                </td>`
+
+                        tbody.innerHTML += /* HTML */ `
+                            <tr data-ids="${id}">
+                                <td><small>${horaFmt}-${hora_finalFmt}</small></td>
+                                <td>${materia}</td>
+                                <td>
+                                    ${profesores.map(({ grado, profesor }) => `${grado ?? ''} ${profesor}`).join(", ")}
+                                </td>
+                                <td>${salon}</td>
+                                ${edit ? buttons : ""}
+                            </tr>`;
                     });
 
-                    // blocks is (firsthour - lasthour) / 15 minutes
-                    // sum the duracion_bloques of each horario
-                    function getDuration(hora_i, hora_f) {
-                        const [horas_i, minutos_i] = hora_i.split(":").map(x => parseInt(x));
-                        const [horas_f, minutos_f] = hora_f.split(":").map(x => parseInt(x));
-                        const date_i = new Date(0, 0, 0, horas_i, minutos_i);
-                        const date_f = new Date(0, 0, 0, horas_f, minutos_f);
-                        const diff = date_f - date_i;
-                        return diff / (1000 * 60 * 15);
-                    }
+                    document.querySelectorAll(".dismiss-editar").forEach(btn => {
+                        btn.addEventListener("click", () => $("#modal-choose").modal("hide"));
+                    });
+
+                });
 
-                    const lastHorario = horarios[horarios.length - 1];
-                    // remove the next cells
-                    // get the max hora_final
-                    const maxHoraFinal = horarios.reduce((max, horario) => {
-                        const [horas, minutos] = horario.hora_final.split(":").map(x => parseInt(x));
-                        const date = new Date(0, 0, 0, horas, minutos);
-                        return date > max ? date : max;
-                    }, new Date(0, 0, 0, 0, 0));
-
-                    const blocks = getDuration(first_horario.hora, `${maxHoraFinal.getHours()}:${maxHoraFinal.getMinutes()}`);
-                    cell.rowSpan = blocks
-                    removeNextCells(horas, minutos, first_horario.dia, blocks - 1);
+                // blocks is (firsthour - lasthour) / 15 minutes
+                // sum the duracion_bloques of each horario
+                function getDuration(hora_i, hora_f) {
+                    const [horas_i, minutos_i] = hora_i.split(":").map(x => parseInt(x));
+                    const [horas_f, minutos_f] = hora_f.split(":").map(x => parseInt(x));
+                    const date_i = new Date(0, 0, 0, horas_i, minutos_i);
+                    const date_f = new Date(0, 0, 0, horas_f, minutos_f);
+                    const diff = date_f - date_i;
+                    return diff / (1000 * 60 * 15);
                 }
 
-                const conflictBlocks = horarios.filter((horario, index, arrayHorario) =>
-                        arrayHorario.filter((_, i) => i != index).some(horario2 =>
-                            conflicts(horario, horario2)))
-                    .sort((a, b) => compareHours(a.hora, b.hora));
+                const lastHorario = horarios[horarios.length - 1];
+                // remove the next cells
+                // get the max hora_final
+                const maxHoraFinal = horarios.reduce((max, horario) => {
+                    const [horas, minutos] = horario.hora_final.split(":").map(x => parseInt(x));
+                    const date = new Date(0, 0, 0, horas, minutos);
+                    return date > max ? date : max;
+                }, new Date(0, 0, 0, 0, 0));
+
+                const blocks = getDuration(first_horario.hora, `${maxHoraFinal.getHours()}:${maxHoraFinal.getMinutes()}`);
+                cell.rowSpan = blocks
+                removeNextCells(horas, minutos, first_horario.dia, blocks - 1);
+            }
 
-                const classes = horarios.filter(horario => !conflictBlocks.includes(horario));
+            const conflictBlocks = horarios.filter((horario, index, arrayHorario) =>
+                    arrayHorario.filter((_, i) => i != index).some(horario2 =>
+                        conflicts(horario, horario2)))
+                .sort((a, b) => compareHours(a.hora, b.hora));
 
-                const conflictBlocksPacked = []; // array of sets
-                conflictBlocks.forEach(horario => {
-                    const setIndex = conflictBlocksPacked.findIndex(set => set.some(horario2 => conflicts(horario, horario2)));
-                    if (setIndex === -1) {
-                        conflictBlocksPacked.push([horario]);
-                    } else {
-                        conflictBlocksPacked[setIndex].push(horario);
-                    }
-                })
-
-                classes.forEach(horario =>
-                    newBlock(horario, <?= $write ?>)
-                )
-
-                conflictBlocksPacked.forEach(horarios =>
-                    newConflictBlock(horarios, <?= $write ?>)
-                )
-
-                // remove the elements that are not in the limits
-                let max_hour = Math.max(...horarios.map(horario => {
-                    const lastMoment = moment(horario.hora, "HH:mm").add(horario.bloques * 15, "minutes");
-                    const lastHour = moment(`${lastMoment.hours()}:00`, "HH:mm");
-                    const hourInt = parseInt(lastMoment.format("HH"));
-
-                    return lastMoment.isSame(lastHour) ? hourInt - 1 : hourInt;
-                }));
-
-                let min_hour = Math.min(...horarios.map(horario => parseInt(horario.hora.split(":")[0])));
-
-                document.querySelectorAll("tbody#horario tr").forEach(hora => {
-                    const hora_id = parseInt(hora.id.split("-")[1].split(":")[0]);
-                    (hora_id < min_hour || hora_id > max_hour) ? hora.remove(): null;
-                })
-
-                // if there is no sábado, remove the column
-                if (!horarios.some(horario => horario.dia == "sábado")) {
-                    document.querySelectorAll("tbody#horario td").forEach(td => {
-                        if (td.id.split("-")[2] == "sábado") {
-                            td.remove();
-                        }
-                    });
+            const classes = horarios.filter(horario => !conflictBlocks.includes(horario));
 
-                    // remove the header (the last)
-                    document.querySelector("#headers").lastElementChild.remove();
+            const conflictBlocksPacked = []; // array of sets
+            conflictBlocks.forEach(horario => {
+                const setIndex = conflictBlocksPacked.findIndex(set => set.some(horario2 => conflicts(horario, horario2)));
+                if (setIndex === -1) {
+                    conflictBlocksPacked.push([horario]);
+                } else {
+                    conflictBlocksPacked[setIndex].push(horario);
                 }
-                // adjust width
-                const ths = document.querySelectorAll("tr#headers th");
-                ths.forEach((th, key) =>
-                    th.style.width = (key == 0) ? "5%" : `${95 / (ths.length - 1)}%`
-                );
+            })
 
-                // search item animation
-                const menúFlontantes = document.querySelectorAll(".menu-flotante");
-                menúFlontantes.forEach((element) => {
-                    element.classList.add("d-none");
-                    element.parentElement.addEventListener("mouseover", () =>
-                        element.classList.remove("d-none")
-                    );
-                    element.parentElement.addEventListener("mouseout", (e) =>
-                        element.classList.add("d-none")
-                    );
-                });
+            classes.forEach(horario =>
+                newBlock(horario, <?= $write ?>)
+            )
 
-            } catch (error) {
-                triggerMessage("Error al cargar el horario", "Error");
-                triggerMessage(error, "Error");
-            }
+            conflictBlocksPacked.forEach(horarios =>
+                newConflictBlock(horarios, <?= $write ?>)
+            )
 
-            // droppables
-            // forall the .bloque-elements add the event listeners for drag and drop
-            <?php if ($write) : ?>
-                document.querySelectorAll(".bloque-clase").forEach(element => {
-                    function dragStart() {
-                        this.classList.add("dragging");
-                    }
+            // remove the elements that are not in the limits
+            let max_hour = Math.max(...horarios.map(horario => {
+                const lastMoment = moment(horario.hora, "HH:mm").add(horario.bloques * 15, "minutes");
+                const lastHour = moment(`${lastMoment.hours()}:00`, "HH:mm");
+                const hourInt = parseInt(lastMoment.format("HH"));
 
-                    function dragEnd() {
-                        this.classList.remove("dragging");
-                    }
+                return lastMoment.isSame(lastHour) ? hourInt - 1 : hourInt;
+            }));
 
-                    element.addEventListener("dragstart", dragStart);
-                    element.addEventListener("dragend", dragEnd);
-                });
+            let min_hour = Math.min(...horarios.map(horario => parseInt(horario.hora.split(":")[0])));
 
-                // forall the cells that are not .bloque-clase add the event listeners for drag and drop
-                document.querySelectorAll("td:not(.bloque-clase)").forEach(element => {
-                    function dragOver(e) {
-                        e.preventDefault();
-                        this.classList.add("dragging-over");
-                    }
+            document.querySelectorAll("tbody#horario tr").forEach(hora => {
+                const hora_id = parseInt(hora.id.split("-")[1].split(":")[0]);
+                (hora_id < min_hour || hora_id > max_hour) ? hora.remove(): null;
+            })
 
-                    function dragLeave() {
-                        this.classList.remove("dragging-over");
+            // if there is no sábado, remove the column
+            if (!horarios.some(horario => horario.dia == "sábado")) {
+                document.querySelectorAll("tbody#horario td").forEach(td => {
+                    if (td.id.split("-")[2] == "sábado") {
+                        td.remove();
                     }
+                });
 
-                    function drop() {
-                        this.classList.remove("dragging-over");
-                        const dragging = document.querySelector(".dragging");
-
-                        const id = /* for data-ids */ dragging.getAttribute("data-ids");
-                        const hora = /* for data-hora */ this.id.split("-")[1];
-                        const días = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
-                        let día = /* for data-dia */ this.id.split("-")[2];
-                        día = días.indexOf(día) + 1;
-
-                        //  rowspan
-                        const bloques = parseInt(dragging.getAttribute("rowspan"));
-                        const horaMoment = moment(hora, "HH:mm");
-                        const horaFin = horaMoment.add(bloques * 15, "minutes");
-
-                        const limit = moment('22:00', 'HH:mm');
-
-                        if (horaFin.isAfter(limit)) {
-                            triggerMessage("No se puede mover el bloque a esa hora", "Error");
-
-                            // scroll to the top
-                            window.scrollTo(0, 0);
-                            return;
-                        }
-
-                        // get the horario
-                        // remove the horario
-                        const bloque = document.querySelector(`.bloque-clase[data-ids="${id}"]`);
-
-                        // remove all children
-                        while (bloque.firstChild) {
-                            bloque.removeChild(bloque.firstChild);
-                        }
-
-                        // prepend a loading child
-                        const loading = `<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
-                                            <span class="sr-only">Loading...</span>
-                                        </div>`;
-                        bloque.insertAdjacentHTML("afterbegin", loading);
-                        // add style vertical-align: middle
-                        bloque.style.verticalAlign = "middle";
-                        bloque.classList.add("text-center");
-                        // remove draggable
-                        bloque.removeAttribute("draggable");
-
-                        moveHorario(id, día, hora);
-                    }
+                // remove the header (the last)
+                document.querySelector("#headers").lastElementChild.remove();
+            }
+            // adjust width
+            const ths = document.querySelectorAll("tr#headers th");
+            ths.forEach((th, key) =>
+                th.style.width = (key == 0) ? "5%" : `${95 / (ths.length - 1)}%`
+            );
 
-                    element.addEventListener("dragover", dragOver);
-                    element.addEventListener("dragleave", dragLeave);
-                    element.addEventListener("drop", drop);
-                });
-            <?php endif; ?>
+            // search item animation
+            const menúFlontantes = document.querySelectorAll(".menu-flotante");
+            menúFlontantes.forEach((element) => {
+                element.classList.add("d-none");
+                element.parentElement.addEventListener("mouseover", () =>
+                    element.classList.remove("d-none")
+                );
+                element.parentElement.addEventListener("mouseout", (e) =>
+                    element.classList.add("d-none")
+                );
+            });
+
+        } catch (error) {
+            triggerMessage("Error al cargar el horario", "Error");
+            triggerMessage(error, "Error");
         }
-        async function guardar(id) {
-            const btn = document.querySelector("#btn-guardar");
-            const clone = btn.cloneNode(true);
-
-            const data = {
-                dia: document.querySelector("#editor_dia"),
-                salon: document.querySelector("#editor_salón"),
-                //vprofesor: document.querySelector("#editor_profesor"),
-                duración: document.querySelector("#editor_duración")
-            };
 
-            const dia = data.dia.value;
-            const salon = data.salon.value;
+        // droppables
+        // forall the .bloque-elements add the event listeners for drag and drop
+        <?php if ($write) : ?>
+            document.querySelectorAll(".bloque-clase").forEach(element => {
+                function dragStart() {
+                    this.classList.add("dragging");
+                }
 
-            if (salon == "") {
-                return;
-            }
+                function dragEnd() {
+                    this.classList.remove("dragging");
+                }
 
-            const hora = document.querySelector("#selector_horas").value;
-            const minutos = document.querySelector("#selector_minutos").value;
-            const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
+                element.addEventListener("dragstart", dragStart);
+                element.addEventListener("dragend", dragEnd);
+            });
 
-            if (bloques == null) {
-                document.querySelector("#dlduración").classList.add("is-invalid");
-                return;
-            }
+            // forall the cells that are not .bloque-clase add the event listeners for drag and drop
+            document.querySelectorAll("td:not(.bloque-clase)").forEach(element => {
+                function dragOver(e) {
+                    e.preventDefault();
+                    this.classList.add("dragging-over");
+                }
 
-            const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
-            const end = moment("22:00", "HH:mm");
+                function dragLeave() {
+                    this.classList.remove("dragging-over");
+                }
 
-            if (start.isAfter(end)) {
-                document.querySelector("#dlduración").classList.add("is-invalid");
-                return;
-            }
+                function drop() {
+                    this.classList.remove("dragging-over");
+                    const dragging = document.querySelector(".dragging");
 
-            const profesoresList = [...document.querySelectorAll("#profesores li")];
+                    const id = /* for data-ids */ dragging.getAttribute("data-ids");
+                    const hora = /* for data-hora */ this.id.split("-")[1];
+                    const días = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
+                    let día = /* for data-dia */ this.id.split("-")[2];
+                    día = días.indexOf(día) + 1;
 
-            if (profesoresList.length == 0) {
-                return;
-            }
+                    //  rowspan
+                    const bloques = parseInt(dragging.getAttribute("rowspan"));
+                    const horaMoment = moment(hora, "HH:mm");
+                    const horaFin = horaMoment.add(bloques * 15, "minutes");
 
-            const formData = new FormData();
-            // const id = btn.getAttribute("data-id");
-            formData.append("id", id);
-            formData.append("hora", `${hora}:${minutos}`);
-            formData.append("día", dia);
-            formData.append("salón", salon);
-            const profesores = profesoresList.map(li => li.getAttribute("data-id"));
-            formData.append("duración", data.duración.value);
-            formData.append("profesores", profesores.join(","));
-
-            // loading btn
-            btn.innerHTML = 'Guardando...';
-            // disable btn
-            btn.disabled = true;
-
-            const response = await fetch("action/action_horario_update.php", {
-                method: "POST",
-                body: formData
-            }).then(res => res.json());
+                    const limit = moment('22:00', 'HH:mm');
 
-            if (response.status == "success") {
-                triggerMessage("Horario actualizado", "Éxito", "success");
-                btn.innerHTML = '<i class="ing-aceptar ing"></i> Guardado';
-                btn.classList.add("btn-success");
-                btn.classList.remove("btn-primary");
+                    if (horaFin.isAfter(limit)) {
+                        triggerMessage("No se puede mover el bloque a esa hora", "Error");
 
-                // return to the initial state
-                setTimeout(() => {
-                    buscarGrupo();
-                    btn.replaceWith(clone);
-                    $("#modal-editar").modal("hide");
-                }, 100);
-            } else {
-                triggerMessage(response.message, "Error");
-                btn.replaceWith(clone);
+                        // scroll to the top
+                        window.scrollTo(0, 0);
+                        return;
+                    }
 
-                $("#modal-editar").modal("hide");
-            }
+                    // get the horario
+                    // remove the horario
+                    const bloque = document.querySelector(`.bloque-clase[data-ids="${id}"]`);
 
-        }
-        async function borrarHorario(id) {
-            const btn = document.querySelector("#btn-borrar");
-            const clone = btn.cloneNode(true);
+                    // remove all children
+                    while (bloque.firstChild) {
+                        bloque.removeChild(bloque.firstChild);
+                    }
 
-            const formData = new FormData();
-            formData.append("id", id);
+                    // prepend a loading child
+                    const loading = `<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                                        <span class="sr-only">Loading...</span>
+                                    </div>`;
+                    bloque.insertAdjacentHTML("afterbegin", loading);
+                    // add style vertical-align: middle
+                    bloque.style.verticalAlign = "middle";
+                    bloque.classList.add("text-center");
+                    // remove draggable
+                    bloque.removeAttribute("draggable");
+
+                    moveHorario(id, día, hora);
+                }
 
-            const response = await fetch("action/action_horario_delete.php", {
-                method: "POST",
-                body: formData
-            }).then(res => res.json());
+                element.addEventListener("dragover", dragOver);
+                element.addEventListener("dragleave", dragLeave);
+                element.addEventListener("drop", drop);
+            });
+        <?php endif; ?>
+    }
+    async function guardar(id) {
+        const btn = document.querySelector("#btn-guardar");
+        const clone = btn.cloneNode(true);
+
+        const data = {
+            dia: document.querySelector("#editor_dia"),
+            salon: document.querySelector("#editor_salón"),
+            //vprofesor: document.querySelector("#editor_profesor"),
+            duración: document.querySelector("#editor_duración")
+        };
+
+        const dia = data.dia.value;
+        const salon = data.salon.value;
+
+        if (salon == "") {
+            return;
+        }
 
-            if (response.status == "success") {
-                triggerMessage('Horario borrado', "Éxito", "success");
-                btn.innerHTML = '<i class="ing-aceptar ing"></i> Borrado';
-                btn.classList.add("btn-success");
-                btn.classList.remove("btn-danger");
+        const hora = document.querySelector("#selector_horas").value;
+        const minutos = document.querySelector("#selector_minutos").value;
+        const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
 
-                // return to the initial state
-                setTimeout(() => {
-                    buscarGrupo();
-                    btn.replaceWith(clone);
-                    $("#modal-borrar").modal("hide");
-                }, 1000);
-            } else {
-                triggerMessage(response.message, "Error");
-                btn.replaceWith(clone);
+        if (bloques == null) {
+            document.querySelector("#dlduración").classList.add("is-invalid");
+            return;
+        }
 
-                $("#modal-borrar").modal("hide");
-            }
+        const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
+        const end = moment("22:00", "HH:mm");
 
+        if (start.isAfter(end)) {
+            document.querySelector("#dlduración").classList.add("is-invalid");
+            return;
         }
 
-        function guardarHorario() {
-            let goBack = false;
-            const data = {
-                grupo: document.querySelector("#grupo"),
-                dia: document.querySelector("#editor_dia"),
-                salon: document.querySelector("#editor_salón"),
-                profesor: document.querySelector("#new_profesor"),
-                duración: document.querySelector("#editor_duración"),
-                materia: document.querySelector("#dlMateria")
-            };
+        const profesoresList = [...document.querySelectorAll("#profesores li")];
 
-            const dia = data.dia.value;
-            const salon = data.salon.value;
-            const profesor = data.profesor.value;
-            const materia = data.materia.value;
-            const duración = data.duración.value;
+        if (profesoresList.length == 0) {
+            return;
+        }
 
-            if (duración == "") {
-                invalidDatalist("#new_duración");
-                goBack = true;
-            }
+        const formData = new FormData();
+        // const id = btn.getAttribute("data-id");
+        formData.append("id", id);
+        formData.append("hora", `${hora}:${minutos}`);
+        formData.append("día", dia);
+        formData.append("salón", salon);
+        const profesores = profesoresList.map(li => li.getAttribute("data-id"));
+        formData.append("duración", data.duración.value);
+        formData.append("profesores", profesores.join(","));
+
+        // loading btn
+        btn.innerHTML = 'Guardando...';
+        // disable btn
+        btn.disabled = true;
+
+        const response = await fetch("action/action_horario_update.php", {
+            method: "POST",
+            body: formData
+        }).then(res => res.json());
+
+        if (response.status == "success") {
+            triggerMessage("Horario actualizado", "Éxito", "success");
+            btn.innerHTML = '<i class="ing-aceptar ing"></i> Guardado';
+            btn.classList.add("btn-success");
+            btn.classList.remove("btn-primary");
+
+            // return to the initial state
+            setTimeout(() => {
+                buscarGrupo();
+                btn.replaceWith(clone);
+                $("#modal-editar").modal("hide");
+            }, 100);
+        } else {
+            triggerMessage(response.message, "Error");
+            btn.replaceWith(clone);
 
-            if (profesor == "") {
-                data.profesor.classList.add("is-invalid");
-                goBack = true;
-            }
+            $("#modal-editar").modal("hide");
+        }
 
-            if (salon == "") {
-                data.salon.classList.add("is-invalid");
-                goBack = true;
-            }
+    }
+    async function borrarHorario(id) {
+        const btn = document.querySelector("#btn-borrar");
+        const clone = btn.cloneNode(true);
 
-            if (dia == "") {
-                invalidDatalist("#new_dia");
-                goBack = true;
-            }
+        const formData = new FormData();
+        formData.append("id", id);
 
-            if (materia == "") {
-                data.materia.classList.add("is-invalid");
-                goBack = true;
-            }
+        const response = await fetch("action/action_horario_delete.php", {
+            method: "POST",
+            body: formData
+        }).then(res => res.json());
 
-            const hora = document.querySelector("#new_horas").value;
-            if (hora == "") {
-                invalidDatalist("#new_horas");
-                goBack = true;
-            }
-            const minutos = document.querySelector("#new_minutos").value;
-            if (minutos == "") {
-                invalidDatalist("#new_minutos");
-                goBack = true;
-            }
+        if (response.status == "success") {
+            triggerMessage('Horario borrado', "Éxito", "success");
+            btn.innerHTML = '<i class="ing-aceptar ing"></i> Borrado';
+            btn.classList.add("btn-success");
+            btn.classList.remove("btn-danger");
 
-            const bloques = document.querySelector("#dlNewDuración li.selected")?.getAttribute("data-bloques");
-            const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
-            const end = moment("22:00", "HH:mm");
+            // return to the initial state
+            setTimeout(() => {
+                buscarGrupo();
+                btn.replaceWith(clone);
+                $("#modal-borrar").modal("hide");
+            }, 1000);
+        } else {
+            triggerMessage(response.message, "Error");
+            btn.replaceWith(clone);
 
-            if (start.isAfter(end)) {
-                document.querySelector("#dlNewDuración").classList.add("is-invalid");
-                goBack = true;
-            }
+            $("#modal-borrar").modal("hide");
+        }
 
-            if (goBack) {
-                return;
-            }
+    }
+
+    function guardarHorario() {
+        let goBack = false;
+        const data = {
+            grupo: document.querySelector("#grupo"),
+            dia: document.querySelector("#editor_dia"),
+            salon: document.querySelector("#editor_salón"),
+            profesor: document.querySelector("#new_profesor"),
+            duración: document.querySelector("#editor_duración"),
+            materia: document.querySelector("#dlMateria")
+        };
+
+        const dia = data.dia.value;
+        const salon = data.salon.value;
+        const profesor = data.profesor.value;
+        const materia = data.materia.value;
+        const duración = data.duración.value;
+
+        if (duración == "") {
+            invalidDatalist("#new_duración");
+            goBack = true;
+        }
 
-            const formData = new FormData();
-            formData.append("grupo", document.querySelector("#filter_grupo").value);
-            formData.append("hora", `${hora}:${minutos}`);
-            formData.append("día", dia);
-            formData.append("salón", salon);
-            formData.append("profesor", profesor);
-            formData.append("duración", data.duración.value);
-            formData.append("periodo", "<?= $user->periodo ?>");
-            formData.append("materia", materia);
-            formData.append("facultad", "<?= $user->facultad['facultad_id'] ?>");
-
-
-            fetch("action/action_horario_create.php", {
-                method: "POST",
-                body: formData
-            }).then(res => res.json()).then(response => {
-                const carrera = document.querySelector("#dlcarrera li.selected")
-                // call it's click event
-                carrera?.click();
-                if (response.status == "success") {
-                    triggerMessage("Horario guardado", "Éxito", "success");
-                    btn.innerHTML = /* html */ `<i class="ing-aceptar ing"></i> Guardado`;
-                    btn.classList.add("btn-success");
-                    btn.classList.remove("btn-primary");
-
-                    // return to the initial state
-                    setTimeout(() => {
-                        btn.classList.remove("btn-success");
-                        btn.classList.add("btn-primary");
-
-
-                        // this modal
-                        $("#modal-nuevo").modal("hide");
-                        const modalNuevo = document.querySelector("#modal-nuevo");
-                        modalNuevo.querySelectorAll("input").forEach(input => {
-                            input.value = "";
-                        });
-
-                        // reset the datalist
-                        modalNuevo.querySelectorAll(".datalist").forEach(datalist => {
-                            const cloneDatalist = modalNuevoClone.querySelector(`#${datalist.id}`).cloneNode(true);
-                            // log
-                            datalist.replaceWith(cloneDatalist);
-                        });
-                        // remove all is-valid and is-invalid
-                        modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => {
-                            el.classList.remove("is-valid", "is-invalid");
-                        });
-
-                    }, 100);
-                } else {
-                    triggerMessage(response.message, "Error");
-                    $("#modal-nuevo").modal("hide");
-                }
-            }).then(() => {
-                buscarGrupo();
-            }).catch(err => {
-                triggerMessage(err, "Error");
+        if (profesor == "") {
+            data.profesor.classList.add("is-invalid");
+            goBack = true;
+        }
 
-                $("#modal-nuevo").modal("hide");
-            });
+        if (salon == "") {
+            data.salon.classList.add("is-invalid");
+            goBack = true;
+        }
 
-            // buscarGrupo();
+        if (dia == "") {
+            invalidDatalist("#new_dia");
+            goBack = true;
         }
 
-        function moveHorario(id, día, hora) {
+        if (materia == "") {
+            data.materia.classList.add("is-invalid");
+            goBack = true;
+        }
 
-            const formData = new FormData();
+        const hora = document.querySelector("#new_horas").value;
+        if (hora == "") {
+            invalidDatalist("#new_horas");
+            goBack = true;
+        }
+        const minutos = document.querySelector("#new_minutos").value;
+        if (minutos == "") {
+            invalidDatalist("#new_minutos");
+            goBack = true;
+        }
 
-            formData.append("id", id);
-            formData.append("hora", hora);
-            formData.append("día", día);
+        const bloques = document.querySelector("#dlNewDuración li.selected")?.getAttribute("data-bloques");
+        const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
+        const end = moment("22:00", "HH:mm");
 
-            fetch("action/action_horario_update.php", {
-                method: "POST",
-                body: formData
-            }).then(res => res.json()).then(response => {
-                if (response.status == "success") {
-                    triggerMessage("Horario movido", "Éxito", "success");
-                } else {
-                    triggerMessage(response.message, "Error");
-                }
-            }).then(() => {
-                buscarGrupo();
-            }).catch(err => {
-                triggerMessage(err, "Error");
-            });
+        if (start.isAfter(end)) {
+            document.querySelector("#dlNewDuración").classList.add("is-invalid");
+            goBack = true;
+        }
 
+        if (goBack) {
+            return;
         }
 
-        function extractFromModal() {
-            // remove all is-valid and is-invalid
-            document.querySelectorAll(".is-valid, .is-invalid").forEach(el =>
-                el.classList.remove("is-valid", "is-invalid")
-            );
-            let goBack = false;
-            const modalNuevo = document.querySelector("#modal-nuevo");
-            const data = {
-                dia: document.querySelector("#editor_dia"),
-                salon: document.querySelector("#editor_salón"),
-                duración: document.querySelector("#editor_duración")
-            };
+        const formData = new FormData();
+        formData.append("grupo", document.querySelector("#filter_grupo").value);
+        formData.append("hora", `${hora}:${minutos}`);
+        formData.append("día", dia);
+        formData.append("salón", salon);
+        formData.append("profesor", profesor);
+        formData.append("duración", data.duración.value);
+        formData.append("periodo", "<?= $user->periodo ?>");
+        formData.append("materia", materia);
+        formData.append("facultad", "<?= $user->facultad['facultad_id'] ?>");
+
+
+        fetch("action/action_horario_create.php", {
+            method: "POST",
+            body: formData
+        }).then(res => res.json()).then(response => {
+            const carrera = document.querySelector("#dlcarrera li.selected")
+            // call it's click event
+            carrera?.click();
+            if (response.status == "success") {
+                triggerMessage("Horario guardado", "Éxito", "success");
+                btn.innerHTML = /* html */ `<i class="ing-aceptar ing"></i> Guardado`;
+                btn.classList.add("btn-success");
+                btn.classList.remove("btn-primary");
 
-            const dia = data.dia.value;
-            const salon = data.salon.value;
-            const hora = document.querySelector("#selector_horas").value;
-            const minutos = document.querySelector("#selector_minutos").value;
-            const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
-            const materia = document.querySelector("#dlMateria");
-            const grupo = document.querySelector("input#grupo");
-
-            const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
-            const end = moment("22:00", "HH:mm");
-            const profesoresList = [...document.querySelectorAll("#profesores li")];
-
-            if (data.duración.value == "") {
-                invalidDatalist("#editor_duración");
-                goBack = true;
-            }
+                // return to the initial state
+                setTimeout(() => {
+                    btn.classList.remove("btn-success");
+                    btn.classList.add("btn-primary");
 
-            if (dia == "") {
-                invalidDatalist("#editor_dia");
-                goBack = true;
-            }
 
-            if (start.isAfter(end)) {
-                document.querySelector("#dlduración").classList.add("is-invalid");
-                goBack = true;
-            }
+                    // this modal
+                    $("#modal-nuevo").modal("hide");
+                    const modalNuevo = document.querySelector("#modal-nuevo");
+                    modalNuevo.querySelectorAll("input").forEach(input => {
+                        input.value = "";
+                    });
 
-            if (salon == "") {
-                data.salon.classList.add("is-invalid");
-                goBack = true;
-            }
+                    // reset the datalist
+                    modalNuevo.querySelectorAll(".datalist").forEach(datalist => {
+                        const cloneDatalist = modalNuevoClone.querySelector(`#${datalist.id}`).cloneNode(true);
+                        // log
+                        datalist.replaceWith(cloneDatalist);
+                    });
+                    // remove all is-valid and is-invalid
+                    modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => {
+                        el.classList.remove("is-valid", "is-invalid");
+                    });
 
-            if (profesoresList.length == 0) {
-                document.querySelector("#dlProfesor").classList.add("is-invalid");
-                goBack = true;
+                }, 100);
+            } else {
+                triggerMessage(response.message, "Error");
+                $("#modal-nuevo").modal("hide");
             }
+        }).then(() => {
+            buscarGrupo();
+        }).catch(err => {
+            triggerMessage(err, "Error");
 
-            if (materia.value == "" || materia.classList.contains("is-invalid")) {
-                document.querySelector("#dlMateria").classList.add("is-invalid");
-                goBack = true;
-            }
+            $("#modal-nuevo").modal("hide");
+        });
 
-            if (grupo.value == "") {
-                grupo.classList.add("is-invalid");
-                goBack = true;
-            }
+        // buscarGrupo();
+    }
 
+    function moveHorario(id, día, hora) {
 
-            if (goBack) return null;
+        const formData = new FormData();
 
-            const materia_id = document.querySelector(`#lista_materias option[value="${materia.value}"]`).getAttribute("data-id");
+        formData.append("id", id);
+        formData.append("hora", hora);
+        formData.append("día", día);
 
-            const formData = new FormData();
-            formData.append("hora", `${hora}:${minutos}`);
-            formData.append("día", dia);
-            formData.append("salón", salon);
-            const profesores = profesoresList.map(li => li.getAttribute("data-id"));
-            formData.append("duración", data.duración.value);
-            formData.append("profesores", profesores.join(","));
-            formData.append("materia", materia_id);
-
-            return formData;
+        fetch("action/action_horario_update.php", {
+            method: "POST",
+            body: formData
+        }).then(res => res.json()).then(response => {
+            if (response.status == "success") {
+                triggerMessage("Horario movido", "Éxito", "success");
+            } else {
+                triggerMessage(response.message, "Error");
+            }
+        }).then(() => {
+            buscarGrupo();
+        }).catch(err => {
+            triggerMessage(err, "Error");
+        });
+
+    }
+
+    function extractFromModal() {
+        // remove all is-valid and is-invalid
+        document.querySelectorAll(".is-valid, .is-invalid").forEach(el =>
+            el.classList.remove("is-valid", "is-invalid")
+        );
+        let goBack = false;
+        const modalNuevo = document.querySelector("#modal-nuevo");
+        const data = {
+            dia: document.querySelector("#editor_dia"),
+            salon: document.querySelector("#editor_salón"),
+            duración: document.querySelector("#editor_duración")
+        };
+
+        const dia = data.dia.value;
+        const salon = data.salon.value;
+        const hora = document.querySelector("#selector_horas").value;
+        const minutos = document.querySelector("#selector_minutos").value;
+        const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
+        const materia = document.querySelector("#dlMateria");
+        const grupo = document.querySelector("input#grupo");
+
+        const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
+        const end = moment("22:00", "HH:mm");
+        const profesoresList = [...document.querySelectorAll("#profesores li")];
+
+        if (data.duración.value == "") {
+            invalidDatalist("#editor_duración");
+            goBack = true;
         }
 
-        function resetFormModal() {
-            const modalNuevo = document.querySelector("#modal-editar");
-            modalNuevo.querySelectorAll("input").forEach(input => input.value = "");
-
-            // remove all is-valid and is-invalid
-            modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => el.classList.remove("is-valid", "is-invalid"));
-            modalNuevo.querySelectorAll(".datalist-invalid").forEach(el => el.classList.remove("datalist-invalid"));
-            modalNuevo.querySelector("#profesores").innerHTML = "";
-
-            // reset the datalist
-            for (var key in datalists)
-                datalists[key][0].innerText = datalists[key][1];
-            // remove disabled attribute
-            modalNuevo.querySelectorAll("[disabled]").forEach(el => el.removeAttribute("disabled"));
-            // remove bg-info
-            modalNuevo.querySelectorAll(".bg-info").forEach(el => el.classList.remove("bg-info"));
+        if (dia == "") {
+            invalidDatalist("#editor_dia");
+            goBack = true;
         }
 
-        function insertHorario(horario) {
-            const fetchOptions = {
-                method: "POST",
-                body: horario
-            };
+        if (start.isAfter(end)) {
+            document.querySelector("#dlduración").classList.add("is-invalid");
+            goBack = true;
+        }
 
-            return fetch("action/action_horario_create.php", fetchOptions).then(res => res.json()).then(response => {
-                if (response.status == "success") {
-                    triggerMessage("Horario insertado", "Éxito", "success");
-                } else {
-                    triggerMessage(response.message, "Error");
-                }
-            }).then(() => {
-                // if the table isn't displayed, just show a message
-                if (table.style.display == "none") {
-                    triggerMessage("Horario insertado", "Éxito", "success");
-                    return;
-                }
+        if (salon == "") {
+            data.salon.classList.add("is-invalid");
+            goBack = true;
+        }
 
-                buscarGrupo();
-            }).catch(err => {
-                triggerMessage(err, "Error");
-            });
+        if (profesoresList.length == 0) {
+            document.querySelector("#dlProfesor").classList.add("is-invalid");
+            goBack = true;
         }
 
-        // initial state
-        {
-            // fill the table with empty cells
-            [...Array(16).keys()].map(x => x + 7).forEach(hora => {
-                // add 7 rows for each hour
-                [0, 15, 30, 45].map(minute => minute.toString().padStart(2, '0')).forEach(minute => {
-                    const tr = document.createElement("tr");
-                    tr.id = `hora-${hora}:${minute}`;
-                    tr.classList.add(hora > 13 ? "tarde" : "mañana");
-                    if (minute == 0) {
-                        const th = document.createElement("th");
-                        th.classList.add("text-center");
-                        th.scope = "row";
-                        th.rowSpan = 4;
-                        th.innerText = `${hora}:00`;
-                        th.style.verticalAlign = "middle";
-                        tr.appendChild(th);
-                    }
+        if (materia.value == "" || materia.classList.contains("is-invalid")) {
+            document.querySelector("#dlMateria").classList.add("is-invalid");
+            goBack = true;
+        }
 
-                    ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"].forEach(día => {
-                        const td = document.createElement("td");
-                        td.id = `hora-${hora}:${minute}-${día}`;
-                        tr.appendChild(td);
-                    });
-                    document.querySelector("tbody#horario").appendChild(tr);
-                });
-            })
+        if (grupo.value == "") {
+            grupo.classList.add("is-invalid");
+            goBack = true;
+        }
 
-            // add an inital height to the table cells
-            // query selector All tds and ths inside the tbody#horario
-            // previous query selector: "tbody#horario td, tbody#horario tr"
-            document.querySelectorAll("tbody#horario td, tbody#horario tr").forEach(element => element.style.height = "2.5rem");
-            document.getElementById('dlProfesor').addEventListener('input', function(e) {
-                var input = document.getElementById('dlProfesor');
-                var value = input.value;
-                var option = document.querySelector(`option[value="${value}"]`);
-
-                if (value == "") {
-                    input.classList.remove("is-invalid");
-                    return;
-                }
 
-                if (!option) {
-                    document.getElementById('editor_profesor').value = "";
-                    // remove is valid class
-                    input.classList.remove("is-valid");
-                    // add is invalid class
-                    input.classList.add("is-invalid");
-                    return
-                }
+        if (goBack) return null;
 
-                var id = option.getAttribute('data-id');
-                if (!document.querySelector(`li[data-id="${id}"]`))
-                    listProfesor({
-                        id: id,
-                        grado: option.getAttribute('data-grado'),
-                        profesor: option.getAttribute('data-profesor'),
-                        clave: option.getAttribute('data-clave')
-                    });
-                e.target.value = "";
-            });
-            document.getElementById('dlMateria').addEventListener('input', function(e) {
-                var input = document.getElementById('dlMateria');
-                var value = input.value;
-                var option = document.querySelector(`option[value="${value}"]`);
+        const materia_id = document.querySelector(`#lista_materias option[value="${materia.value}"]`).getAttribute("data-id");
 
-                if (value == "") {
-                    input.classList.remove("is-invalid");
-                    return;
-                }
+        const formData = new FormData();
+        formData.append("hora", `${hora}:${minutos}`);
+        formData.append("día", dia);
+        formData.append("salón", salon);
+        const profesores = profesoresList.map(li => li.getAttribute("data-id"));
+        formData.append("duración", data.duración.value);
+        formData.append("profesores", profesores.join(","));
+        formData.append("materia", materia_id);
 
-                if (!option) {
-                    // remove is valid class
-                    input.classList.remove("is-valid");
-                    // add is invalid class
-                    input.classList.add("is-invalid");
-                    return;
+        return formData;
+    }
+
+    function resetFormModal() {
+        const modalNuevo = document.querySelector("#modal-editar");
+        modalNuevo.querySelectorAll("input").forEach(input => input.value = "");
+
+        // remove all is-valid and is-invalid
+        modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => el.classList.remove("is-valid", "is-invalid"));
+        modalNuevo.querySelectorAll(".datalist-invalid").forEach(el => el.classList.remove("datalist-invalid"));
+        modalNuevo.querySelector("#profesores").innerHTML = "";
+
+        // reset the datalist
+        for (var key in datalists)
+            datalists[key][0].innerText = datalists[key][1];
+        // remove disabled attribute
+        modalNuevo.querySelectorAll("[disabled]").forEach(el => el.removeAttribute("disabled"));
+        // remove bg-info
+        modalNuevo.querySelectorAll(".bg-info").forEach(el => el.classList.remove("bg-info"));
+    }
+
+    function insertHorario(horario) {
+        const fetchOptions = {
+            method: "POST",
+            body: horario
+        };
+
+        return fetch("action/action_horario_create.php", fetchOptions).then(res => res.json()).then(response => {
+            if (response.status == "success") {
+                triggerMessage("Horario insertado", "Éxito", "success");
+            } else {
+                triggerMessage(response.message, "Error");
+            }
+        }).then(() => {
+            // if the table isn't displayed, just show a message
+            if (table.style.display == "none") {
+                triggerMessage("Horario insertado", "Éxito", "success");
+                return;
+            }
+
+            buscarGrupo();
+        }).catch(err => {
+            triggerMessage(err, "Error");
+        });
+    }
+
+    // initial state
+    {
+        // fill the table with empty cells
+        [...Array(16).keys()].map(x => x + 7).forEach(hora => {
+            // add 7 rows for each hour
+            [0, 15, 30, 45].map(minute => minute.toString().padStart(2, '0')).forEach(minute => {
+                const tr = document.createElement("tr");
+                tr.id = `hora-${hora}:${minute}`;
+                tr.classList.add(hora > 13 ? "tarde" : "mañana");
+                if (minute == 0) {
+                    const th = document.createElement("th");
+                    th.classList.add("text-center");
+                    th.scope = "row";
+                    th.rowSpan = 4;
+                    th.innerText = `${hora}:00`;
+                    th.style.verticalAlign = "middle";
+                    tr.appendChild(th);
                 }
 
-                input.classList.remove("is-invalid");
+                ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"].forEach(día => {
+                    const td = document.createElement("td");
+                    td.id = `hora-${hora}:${minute}-${día}`;
+                    tr.appendChild(td);
+                });
+                document.querySelector("tbody#horario").appendChild(tr);
             });
-        }
+        })
 
-        // state
-        const table = document.querySelector("table");
-        const empty_table = table.innerHTML;
-        document.querySelectorAll('.hidden').forEach(element => element.style.display = "none");
-        // hide the table
-        table.style.display = "none";
-        disableDatalist("#filter_grupo");
+        // add an inital height to the table cells
+        // query selector All tds and ths inside the tbody#horario
+        // previous query selector: "tbody#horario td, tbody#horario tr"
+        document.querySelectorAll("tbody#horario td, tbody#horario tr").forEach(element => element.style.height = "2.5rem");
+        document.getElementById('dlProfesor').addEventListener('input', function(e) {
+            var input = document.getElementById('dlProfesor');
+            var value = input.value;
+            var option = document.querySelector(`option[value="${value}"]`);
 
-        document.getElementById("btn-excel-horario").addEventListener("click", () => {
-            const formData = new FormData();
-            const grupo = document.getElementById("filter_grupo").value;
-            formData.append("grupo", grupo);
-            formData.append('sábado', gHorarios.some(horario => horario.dia == "sábado"));
-            formData.append("horarios", JSON.stringify(gHorarios));
-            // min and max hour
-            formData.append("min", gHorarios.reduce((min, horario) => {
-                const hora = horario.hora.split(":").map(x => parseInt(x))[0]
-                return Math.min(hora, min);
-            }, 24));
-            formData.append("max", gHorarios.reduce((max, horario) => {
-                const {
-                    hora,
-                    bloques
-                } = horario;
-                // after hour
-                const lastHour = moment(hora, "HH:mm").add(bloques * 15, "minutes");
-                const lastMoment = moment(`${lastHour.format("HH")}:00`, "HH:mm");
-                const intHour = parseInt(lastHour.format("HH"));
+            if (value == "") {
+                input.classList.remove("is-invalid");
+                return;
+            }
 
-                return Math.max(lastMoment.isSame(lastHour) ? intHour - 1 : intHour, max);
-            }, 0));
+            if (!option) {
+                document.getElementById('editor_profesor').value = "";
+                // remove is valid class
+                input.classList.remove("is-valid");
+                // add is invalid class
+                input.classList.add("is-invalid");
+                return
+            }
 
-            fetch("export/horario_excel.php", {
-                    method: "POST",
-                    body: formData
-                })
-                .then(response => response.blob())
-                .then(blob => {
-                    const url = window.URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.style.display = 'none';
-                    a.setAttribute('href', url);
-                    a.setAttribute('download', `horario-${grupo}.xlsx`);
-                    document.body.appendChild(a);
-                    a.click();
-                    window.URL.revokeObjectURL(url);
-                })
-                .catch(() => triggerMessage("error", "Error al exportar el horario"));
+            var id = option.getAttribute('data-id');
+            if (!document.querySelector(`li[data-id="${id}"]`))
+                listProfesor({
+                    id: id,
+                    grado: option.getAttribute('data-grado'),
+                    profesor: option.getAttribute('data-profesor'),
+                    clave: option.getAttribute('data-clave')
+                });
+            e.target.value = "";
         });
-        // on click the li element, inside datalist #dlcarera
-        document.querySelectorAll("#dlcarrera li").forEach(async li => {
-            li.addEventListener("click", async () => {
-                // get the data-id from the li element
-                const carrera = li.getAttribute("data-id");
-                const facultad = '<?= $user->facultad['facultad_id'] ?>';
-                const periodo = '<?= $user->periodo ?>';
-
-                const formData = new FormData();
-                formData.append("carrera", carrera);
-                formData.append("facultad", facultad);
-                formData.append("periodo", periodo);
-
-                const dlgrupo = document.querySelector("#dlgrupo ul");
-                const grupoModal = document.querySelector("#grupoModal ul");
-                const promptDL = document.querySelector("#dlgrupo .datalist-input");
-
-                try {
-                    const {
-                        status,
-                        grupos
-                    } = await fetch("action/action_grupo.php", {
-                        method: "POST",
-                        body: formData
-                    }).then(res => res.json());
-
-                    dlgrupo.innerHTML = "";
-
-                    if (status != "success") {
-                        throw new Error("Error al cargar los grupos");
-                    } else if (grupos.length == 0) {
-                        throw new Error("No hay grupos para esta carrera, puedes crear uno nuevo");
-                    }
+        document.getElementById('dlMateria').addEventListener('input', function(e) {
+            var input = document.getElementById('dlMateria');
+            var value = input.value;
+            var option = document.querySelector(`option[value="${value}"]`);
 
-                    document.getElementById("message").innerHTML = "";
-                    grupoModal.querySelectorAll("li:not(:first-child)").forEach(li => li.remove());
-                    document.querySelector("#grupo").setAttribute("hidden", true);
-                    grupos.forEach(grupo => {
-                        const li = document.createElement("li");
-                        // data-id is the id of the group
-                        li.setAttribute("data-id", grupo);
-                        li.textContent = grupo;
-                        dlgrupo.appendChild(li);
-                        li.addEventListener("click", async () => await setTimeout(buscarGrupo, 0))
-
-                        // remove from grupoModal all the li elements except the first one
-                        grupoModal.appendChild(li.cloneNode(true));
-                    });
+            if (value == "") {
+                input.classList.remove("is-invalid");
+                return;
+            }
 
-                    // on click the li element, inside datalist #grupoModal
-                    document.querySelectorAll("#grupoModal li").forEach(li => {
-                        li.addEventListener("click", () => {
-                            const grupo = li.getAttribute("data-id");
-                            const filter_grupo = document.querySelector("#grupo");
-                            filter_grupo.classList.remove("is-invalid");
-                            if (grupo == "")
-                                filter_grupo.removeAttribute("hidden");
-                            else
-                                filter_grupo.setAttribute("hidden", true);
-                            filter_grupo.value = grupo;
-                        });
-                    });
-                    disableDatalist("#filter_grupo", false);
-
-                } catch (error) {
-                    // remove Error: from the error message
-                    error = error.toString().replace("Error: ", "");
-                    triggerMessage(error, "Error", "warning");
-                    console.error(error);
-                    disableDatalist("#filter_grupo", true);
-                } finally {
-                    document.querySelector("#nuevo").classList.remove("d-none");
-                    // write Seleccionar grupo
-                    promptDL.textContent = "Seleccionar grupo";
-                    console.log(promptDL);
-                    // to #filter_grupo input value
-                    const filter_grupo = document.querySelector("#filter_grupo");
-                    filter_grupo.value = "";
-                    table.style.display = "none";
-                }
+            if (!option) {
+                // remove is valid class
+                input.classList.remove("is-valid");
+                // add is invalid class
+                input.classList.add("is-invalid");
+                return;
+            }
+
+            input.classList.remove("is-invalid");
+        });
+    }
+
+    // state
+    const table = document.querySelector("table");
+    const empty_table = table.innerHTML;
+    document.querySelectorAll('.hidden').forEach(element => element.style.display = "none");
+    // hide the table
+    table.style.display = "none";
+    disableDatalist("#filter_grupo");
+
+    document.getElementById("btn-excel-horario").addEventListener("click", () => {
+        const formData = new FormData();
+        const grupo = document.getElementById("filter_grupo").value;
+        formData.append("grupo", grupo);
+        formData.append('sábado', gHorarios.some(horario => horario.dia == "sábado"));
+        formData.append("horarios", JSON.stringify(gHorarios));
+        // min and max hour
+        formData.append("min", gHorarios.reduce((min, horario) => {
+            const hora = horario.hora.split(":").map(x => parseInt(x))[0]
+            return Math.min(hora, min);
+        }, 24));
+        formData.append("max", gHorarios.reduce((max, horario) => {
+            const {
+                hora,
+                bloques
+            } = horario;
+            // after hour
+            const lastHour = moment(hora, "HH:mm").add(bloques * 15, "minutes");
+            const lastMoment = moment(`${lastHour.format("HH")}:00`, "HH:mm");
+            const intHour = parseInt(lastHour.format("HH"));
+
+            return Math.max(lastMoment.isSame(lastHour) ? intHour - 1 : intHour, max);
+        }, 0));
+
+        fetch("export/horario_excel.php", {
+                method: "POST",
+                body: formData
+            })
+            .then(response => response.blob())
+            .then(blob => {
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.setAttribute('href', url);
+                a.setAttribute('download', `horario-${grupo}.xlsx`);
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+            })
+            .catch(() => triggerMessage("error", "Error al exportar el horario"));
+    });
+    // on click the li element, inside datalist #dlcarera
+    document.querySelectorAll("#dlcarrera li").forEach(async li => {
+        li.addEventListener("click", async () => {
+            // get the data-id from the li element
+            const carrera = li.getAttribute("data-id");
+            const facultad = '<?= $user->facultad['facultad_id'] ?>';
+            const periodo = '<?= $user->periodo ?>';
+
+            const formData = new FormData();
+            formData.append("carrera", carrera);
+            formData.append("facultad", facultad);
+            formData.append("periodo", periodo);
+
+            const dlgrupo = document.querySelector("#dlgrupo ul");
+            const grupoModal = document.querySelector("#grupoModal ul");
+            const promptDL = document.querySelector("#dlgrupo .datalist-input");
 
-                const datalist = document.querySelector("#materias");
-                const materias = await fetch("action/action_materias.php", {
+            try {
+                const {
+                    status,
+                    grupos
+                } = await fetch("action/action_grupo.php", {
                     method: "POST",
                     body: formData
                 }).then(res => res.json());
-            });
 
-        })
-        // on modal edit, show the data
-        $("#modal-editar").on("show.bs.modal", async function(event) {
-            document.querySelectorAll("#modal-editar .is-invalid, #modal-editar .is-valid")?.forEach(element => element.classList.remove("is-invalid", "is-valid"));
+                dlgrupo.innerHTML = "";
 
+                if (status != "success") {
+                    throw new Error("Error al cargar los grupos");
+                } else if (grupos.length == 0) {
+                    throw new Error("No hay grupos para esta carrera, puedes crear uno nuevo");
+                }
 
-            const button = event.relatedTarget;
-            const parentId = button.parentElement.parentElement.getAttribute("data-ids");
-            const grupo = document.querySelector("#filter_grupo").value;
-            setDatalist("#dli-grupo", grupo);
-            document.querySelector("#grupo").value = grupo;
-            document.querySelector("#grupo").setAttribute("hidden", true);
+                document.getElementById("message").innerHTML = "";
+                grupoModal.querySelectorAll("li:not(:first-child)").forEach(li => li.remove());
+                document.querySelector("#grupo").setAttribute("hidden", true);
+                grupos.forEach(grupo => {
+                    const li = document.createElement("li");
+                    // data-id is the id of the group
+                    li.setAttribute("data-id", grupo);
+                    li.textContent = grupo;
+                    dlgrupo.appendChild(li);
+                    li.addEventListener("click", async () => await setTimeout(buscarGrupo, 0))
+
+                    // remove from grupoModal all the li elements except the first one
+                    grupoModal.appendChild(li.cloneNode(true));
+                });
 
-            if (parentId == null) {
-                resetFormModal();
-                disableDatalist("#dli-grupo", false);
-                setDatalist("#dli-grupo", grupo);
-                document.querySelector("#grupo").value = grupo;
-                if (grupo == "")
-                    document.querySelector("#grupo").removeAttribute("hidden");
-
-                // search the data-id of the day and click it
-                setDatalistFirst("#selector_horas");
-                setDatalist("#selector_minutos", 15);
-                const input_materia = document.getElementById('dlMateria');
-                const formData = new FormData();
-                formData.append("carrera", document.querySelector("#filter_carrera").value);
-
-                try {
-                    const {
-                        status,
-                        materias,
-                    } = await fetch("action/action_materias.php", {
-                        method: "POST",
-                        body: formData
-                    }).then(res => res.json());
-
-                    if (status != "success")
-                        throw new Error("Error al cargar las materias");
-                    else if (materias.length == 0)
-                        throw new Error("No hay materias para esta carrera");
-
-                    const dlMateria = document.querySelector("#lista_materias");
-                    dlMateria.innerHTML = "";
-                    materias.forEach(materia => {
-                        const option = document.createElement("option");
-                        option.setAttribute("data-id", materia.id);
-                        option.setAttribute("value", materia.nombre);
-                        dlMateria.appendChild(option);
+                // on click the li element, inside datalist #grupoModal
+                document.querySelectorAll("#grupoModal li").forEach(li => {
+                    li.addEventListener("click", () => {
+                        const grupo = li.getAttribute("data-id");
+                        const filter_grupo = document.querySelector("#grupo");
+                        filter_grupo.classList.remove("is-invalid");
+                        if (grupo == "")
+                            filter_grupo.removeAttribute("hidden");
+                        else
+                            filter_grupo.setAttribute("hidden", true);
+                        filter_grupo.value = grupo;
                     });
+                });
+                disableDatalist("#filter_grupo", false);
 
-                } catch (error) {
-                    // remove Error: from the error message
-                    error = error.toString().replace("Error: ", "");
-                    triggerMessage(error, "Error, no se pudo cargar las materias");
-                    console.error(error);
-                }
+            } catch (error) {
+                // remove Error: from the error message
+                error = error.toString().replace("Error: ", "");
+                triggerMessage(error, "Error", "warning");
+                console.error(error);
+                disableDatalist("#filter_grupo", true);
+            } finally {
+                document.querySelector("#nuevo").classList.remove("d-none");
+                // write Seleccionar grupo
+                promptDL.textContent = "Seleccionar grupo";
+                console.log(promptDL);
+                // to #filter_grupo input value
+                const filter_grupo = document.querySelector("#filter_grupo");
+                filter_grupo.value = "";
+                table.style.display = "none";
+            }
 
-                const btnGuardar = document.getElementById('btn-guardar');
-                // btnGuardar.onclick = () => guardar(id);
+            const datalist = document.querySelector("#materias");
+            const materias = await fetch("action/action_materias.php", {
+                method: "POST",
+                body: formData
+            }).then(res => res.json());
+        });
 
+    })
+    // on modal edit, show the data
+    $("#modal-editar").on("show.bs.modal", async function(event) {
+        document.querySelectorAll("#modal-editar .is-invalid, #modal-editar .is-valid")?.forEach(element => element.classList.remove("is-invalid", "is-valid"));
 
-                btnGuardar.onclick = async () => {
-                    const formData = extractFromModal();
-                    if (formData == null)
-                        return;
-                    // check if a field is empty
-                    for (const value of formData.values())
-                        if (value == "")
-                            return triggerMessage("Todos los campos son obligatorios", "Error", "danger", "message_editar", true);
-                    formData.append("facultad", <?= $user->facultad['facultad_id'] ?>);
-                    formData.append("periodo", <?= $user->periodo ?>);
-                    formData.append("grupo", document.querySelector("input#grupo").value);
-
-                    await insertHorario(formData);
-                    resetFormModal();
-                    $("#modal-editar").modal("hide");
-                };
 
-                return;
-            }
-            const {
-                id,
-                dia,
-                hora,
-                materia,
-                salon,
-                profesores,
-                duracion
-            } = gHorarios?.find(horario => horario.id == parentId);
+        const button = event.relatedTarget;
+        const parentId = button.parentElement.parentElement.getAttribute("data-ids");
+        const grupo = document.querySelector("#filter_grupo").value;
+        setDatalist("#dli-grupo", grupo);
+        document.querySelector("#grupo").value = grupo;
+        document.querySelector("#grupo").setAttribute("hidden", true);
+
+        if (parentId == null) {
+            resetFormModal();
+            disableDatalist("#dli-grupo", false);
+            setDatalist("#dli-grupo", grupo);
+            document.querySelector("#grupo").value = grupo;
+            if (grupo == "")
+                document.querySelector("#grupo").removeAttribute("hidden");
 
             // search the data-id of the day and click it
-            const númeroDía = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'].reduce((acc, curr, key) => (curr == dia) ? key : acc);
-            document.querySelector(`#dldia li[data-id="${númeroDía}"]`)?.click();
-            document.querySelector(`#dlduración li[data-id="${duracion}"]`)?.click();
-            const horas = hora.split(":")[0];
-            const minutos = hora.split(":")[1];
-            setDatalist("#selector_horas", horas);
-            setDatalist("#selector_minutos", minutos);
-            document.getElementById('editor_salón').value = salon;
+            setDatalistFirst("#selector_horas");
+            setDatalist("#selector_minutos", 15);
             const input_materia = document.getElementById('dlMateria');
-            input_materia.value = materia;
-            // disable the input
-            input_materia.setAttribute("disabled", true);
-            input_materia.classList.add("bg-info");
+            const formData = new FormData();
+            formData.append("carrera", document.querySelector("#filter_carrera").value);
+
+            try {
+                const {
+                    status,
+                    materias,
+                } = await fetch("action/action_materias.php", {
+                    method: "POST",
+                    body: formData
+                }).then(res => res.json());
 
-            disableDatalist("#dli-grupo")
+                if (status != "success")
+                    throw new Error("Error al cargar las materias");
+                else if (materias.length == 0)
+                    throw new Error("No hay materias para esta carrera");
+
+                const dlMateria = document.querySelector("#lista_materias");
+                dlMateria.innerHTML = "";
+                materias.forEach(materia => {
+                    const option = document.createElement("option");
+                    option.setAttribute("data-id", materia.id);
+                    option.setAttribute("value", materia.nombre);
+                    dlMateria.appendChild(option);
+                });
 
-            // get the option with data-id profesor
-            document.getElementById("profesores").innerHTML = "";
-            profesores.forEach(listProfesor);
+            } catch (error) {
+                // remove Error: from the error message
+                error = error.toString().replace("Error: ", "");
+                triggerMessage(error, "Error, no se pudo cargar las materias");
+                console.error(error);
+            }
 
             const btnGuardar = document.getElementById('btn-guardar');
-            btnGuardar.onclick = () => guardar(id);
-        })
-        $("#modal-borrar").modal({
-            show: false,
-            backdrop: "static",
-            keyboard: false,
-        })
-        $("#modal-borrar").on("show.bs.modal", async function(event) {
-            const button = event.relatedTarget;
-            const id = button.parentElement.parentElement.getAttribute("data-ids");
+            // btnGuardar.onclick = () => guardar(id);
 
-            const btnBorrar = document.getElementById('btn-borrar');
-            btnBorrar.onclick = () => borrarHorario(id);
-        })
-    </script>
 
-    </html>
+            btnGuardar.onclick = async () => {
+                const formData = extractFromModal();
+                if (formData == null)
+                    return;
+                // check if a field is empty
+                for (const value of formData.values())
+                    if (value == "")
+                        return triggerMessage("Todos los campos son obligatorios", "Error", "danger", "message_editar", true);
+                formData.append("facultad", <?= $user->facultad['facultad_id'] ?>);
+                formData.append("periodo", <?= $user->periodo ?>);
+                formData.append("grupo", document.querySelector("input#grupo").value);
+
+                await insertHorario(formData);
+                resetFormModal();
+                $("#modal-editar").modal("hide");
+            };
+
+            return;
+        }
+        const {
+            id,
+            dia,
+            hora,
+            materia,
+            salon,
+            profesores,
+            duracion
+        } = gHorarios?.find(horario => horario.id == parentId);
+
+        // search the data-id of the day and click it
+        const númeroDía = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'].reduce((acc, curr, key) => (curr == dia) ? key : acc);
+        document.querySelector(`#dldia li[data-id="${númeroDía}"]`)?.click();
+        document.querySelector(`#dlduración li[data-id="${duracion}"]`)?.click();
+        const horas = hora.split(":")[0];
+        const minutos = hora.split(":")[1];
+        setDatalist("#selector_horas", horas);
+        setDatalist("#selector_minutos", minutos);
+        document.getElementById('editor_salón').value = salon;
+        const input_materia = document.getElementById('dlMateria');
+        input_materia.value = materia;
+        // disable the input
+        input_materia.setAttribute("disabled", true);
+        input_materia.classList.add("bg-info");
+
+        disableDatalist("#dli-grupo")
+
+        // get the option with data-id profesor
+        document.getElementById("profesores").innerHTML = "";
+        profesores.forEach(listProfesor);
+
+        const btnGuardar = document.getElementById('btn-guardar');
+        btnGuardar.onclick = () => guardar(id);
+    })
+    $("#modal-borrar").modal({
+        show: false,
+        backdrop: "static",
+        keyboard: false,
+    })
+    $("#modal-borrar").on("show.bs.modal", async function(event) {
+        const button = event.relatedTarget;
+        const id = button.parentElement.parentElement.getAttribute("data-ids");
+
+        const btnBorrar = document.getElementById('btn-borrar');
+        btnBorrar.onclick = () => borrarHorario(id);
+    })
+</script>
+
+</html>