PAAD
/
paad


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613
							<?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 = $user->periodo ? $db->where('id', $user->periodo)->getOne('fs_periodo') : false;

                    $carreras = $nivel ? $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->get("profesor");
                                        foreach ($profesores as $profesor) {
                                        ?>
                                            <option data-clave="<?= $profesor['profesor_clave'] ?>" data-profesor="<?= $profesor['profesor_nombre'] ?>" data-id="<?= $id; ?>" value="<?= "{$profesor['profesor_clave']} | {$profesor['profesor_grado']} {$profesor['profesor_nombre']}" ?>"></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="100" 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>