PAAD
/
paad


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608
							    <?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
        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>
                            </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>
                            </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>
                </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>
                                <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>
                                <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>
                                </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>

                                <!-- 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>
                                    </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">
                                            <?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>
                        <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>
            <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>

                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            </div>

                        </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>
                            <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>
            </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();

            formData.append("carrera", carrera);
            formData.append("grupo", grupo);
            formData.append("periodo", document.querySelector("#periodo").value);
            formData.append('facultad', '<?= $user->facultad['facultad_id'] ?>');

            try {
                gHorarios = [];
                const {
                    status,
                    horario: horarios,
                } = await fetch("action/action_horario.php", {
                    method: "POST",
                    body: formData
                }).then(res => res.json());

                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

                    // if the horario is outside the other
                    if (compareInicios === -1 && compareFinales === 1)
                        return true

                    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 [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();

                        const block = document.getElementById(`block-${horario.id}`);

                        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;

                    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}`);


                    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>
                    ${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>
                    </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"));
                        });

                    });

                    // 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 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 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 classes = horarios.filter(horario => !conflictBlocks.includes(horario));

                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();
                        }
                    });

                    // 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)}%`
                );

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

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

                    function dragEnd() {
                        this.classList.remove("dragging");
                    }

                    element.addEventListener("dragstart", dragStart);
                    element.addEventListener("dragend", dragEnd);
                });

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

                    function dragLeave() {
                        this.classList.remove("dragging-over");
                    }

                    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);
                    }

                    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;
            }

            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");

            if (bloques == null) {
                document.querySelector("#dlduración").classList.add("is-invalid");
                return;
            }

            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;
            }

            const profesoresList = [...document.querySelectorAll("#profesores li")];

            if (profesoresList.length == 0) {
                return;
            }

            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);

                $("#modal-editar").modal("hide");
            }

        }
        async function borrarHorario(id) {
            const btn = document.querySelector("#btn-borrar");
            const clone = btn.cloneNode(true);

            const formData = new FormData();
            formData.append("id", id);

            const response = await fetch("action/action_horario_delete.php", {
                method: "POST",
                body: formData
            }).then(res => res.json());

            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");

                // return to the initial state
                setTimeout(() => {
                    buscarGrupo();
                    btn.replaceWith(clone);
                    $("#modal-borrar").modal("hide");
                }, 1000);
            } else {
                triggerMessage(response.message, "Error");
                btn.replaceWith(clone);

                $("#modal-borrar").modal("hide");
            }

        }

        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;
            }

            if (profesor == "") {
                data.profesor.classList.add("is-invalid");
                goBack = true;
            }

            if (salon == "") {
                data.salon.classList.add("is-invalid");
                goBack = true;
            }

            if (dia == "") {
                invalidDatalist("#new_dia");
                goBack = true;
            }

            if (materia == "") {
                data.materia.classList.add("is-invalid");
                goBack = true;
            }

            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;
            }

            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");

            if (start.isAfter(end)) {
                document.querySelector("#dlNewDuración").classList.add("is-invalid");
                goBack = true;
            }

            if (goBack) {
                return;
            }

            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");

                $("#modal-nuevo").modal("hide");
            });

            // buscarGrupo();
        }

        function moveHorario(id, día, hora) {

            const formData = new FormData();

            formData.append("id", id);
            formData.append("hora", hora);
            formData.append("día", día);

            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;
            }

            if (dia == "") {
                invalidDatalist("#editor_dia");
                goBack = true;
            }

            if (start.isAfter(end)) {
                document.querySelector("#dlduración").classList.add("is-invalid");
                goBack = true;
            }

            if (salon == "") {
                data.salon.classList.add("is-invalid");
                goBack = true;
            }

            if (profesoresList.length == 0) {
                document.querySelector("#dlProfesor").classList.add("is-invalid");
                goBack = true;
            }

            if (materia.value == "" || materia.classList.contains("is-invalid")) {
                document.querySelector("#dlMateria").classList.add("is-invalid");
                goBack = true;
            }

            if (grupo.value == "") {
                grupo.classList.add("is-invalid");
                goBack = true;
            }


            if (goBack) return null;

            const materia_id = document.querySelector(`#lista_materias option[value="${materia.value}"]`).getAttribute("data-id");

            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;
        }

        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);
                    }

                    ["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);
                });
            })

            // 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
                }

                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}"]`);

                if (value == "") {
                    input.classList.remove("is-invalid");
                    return;
                }

                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");

                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("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));
                    });

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

                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"));


            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
                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);
                    });

                } 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);


                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>