<?php
require_once 'class/c_login.php';
$user = Login::get_user();


$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_id], single: false);
                    // repliaction of the query in the database with database class
                    $nivel = $user->periodo_id ? $db->where('id', $user->periodo_id)->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>

</html>