<?php

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

$user->access();
if (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']);

$en_fecha = $db->querySingle("SELECT ESTA_EN_PERIODO(NOW()::DATE, :periodo_id)", [':periodo_id' => $user->periodo_id])['esta_en_periodo'];
$periodo_fin = $db->querySingle("SELECT periodo_fecha_fin FROM periodo WHERE periodo_id = :periodo_id", [':periodo_id' => $user->periodo_id])['periodo_fecha_fin'];
?>
<!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"; ?>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/richtext.css" type="text/css">
    <link rel="stylesheet" href="css/clockpicker.css">
    <link rel="stylesheet" href="css/calendar.css">
    <link rel="stylesheet" href="css/fa_all.css" type="text/css">

    <script src="js/scrollables.js" defer></script>
    <script>
        const write = <?= $write ? 'true' : 'false' ?>;
    </script>
    <script src="js/moment.js" defer></script>

</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') ?>

        <!-- Botón para abrir el modal -->
        <span class="d-inline-block" tabindex="0" data-toggle="tooltip" <?php if (!$en_fecha) : ?> title="No se puede crear una reposición fuera de la fecha de reposición" <?php endif; ?>>
            <button type="button" class="btn btn-primary" data-toggle="modal" <?php if ($en_fecha) : ?>data-target="#crearReposición" <?php else : ?>disabled style="pointer-events: none;" <?php endif; ?>>
                Crear Reposición
            </button>
        </span>


        <!-- Modal del formulario -->
        <div class="modal fade" id="crearReposición" tabindex="-1" role="dialog" aria-labelledby="crearReposiciónLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="crearReposiciónLabel">Crear Reposición</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form" class="form-horizontal">
                            <div class="form-group step" id="step-1">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="clave_profesor" class="col-4 col-form-label">Profesor</label>
                                        <div class="col-8">
                                            <input list="lista_profesores" name="clave_profesor" id="clave_profesor" 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->query('SELECT * FROM fs_profesor A WHERE facultad_id = :facultad_id AND EXISTS (
                                                    SELECT * FROM horario join HORARIO_PROFESOR ON horario.HORARIO_ID = HORARIO_PROFESOR.horario_id WHERE HORARIO_PROFESOR.profesor_id = A.id AND HORARIO.periodo_id = :periodo_id
                                                ) ORDER BY grado, nombre', [':facultad_id' => $user->facultad['facultad_id'], ':periodo_id' => $user->periodo_id]);

                                                foreach ($profesores as $profesor) {
                                                    extract($profesor);
                                                ?>
                                                    <option data-grado="<?= $grado ?>" data-clave="<?= $clave ?>" data-profesor="<?= $profesor ?>" data-id="<?= $id; ?>" value="<?= "$clave | $grado $profesor" ?>"></option>
                                                <?php
                                                }
                                                ?>
                                            </datalist>
                                            <ul class="list-group" id="profesores"></ul>
                                            <input type="hidden" id="periodo_id" name="periodo_id" value="<?= $user->periodo_id ?>">
                                            <input type="hidden" id="profesor_id" name="profesor_id" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-2">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="horario_reponer" class="col-4 col-form-label">Horario a reponer</label>
                                        <div class="col-8">
                                            <select name="horario_reponer" id="horario_reponer" class="form-control" required="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="horario_id" id="horario_id">
                            </div>
                            <div class="form-group step" id="step-3">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="fechas_clase" class="col-4 col-form-label">Fecha de clase</label>
                                        <div class="col-8">
                                            <select name="fechas_clase" id="fechas_clase" class="form-control" required="required">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-4">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="fecha_reponer" class="col-4 col-form-label">Fecha de reposición</label>
                                        <div class="col-6">
                                            <input type="text" placeholder="dd/mm/aaaa" name="fecha_reponer" id="fecha_reponer" class="form-control date-picker" required="required">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hora" class="col-4 col-form-label">Hora</label>
                                        <div class="col-3">
                                            <div id="hora" class="datalist datalist-select mb-1">
                                                <div class="datalist-input text-center">hh</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="hora_reponer" name="horas" value="">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div id="minutos" class="datalist datalist-select mb-1">
                                                <div class="datalist-input text-center">mm</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="minutos_reponer" name="minutos" value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group step" id="step-5">
                                <div class="form-box">
                                    <div class="form-group row">
                                        <label for="descripcion_reposicion" class="col-4 col-form-label">Comentarios</label>
                                        <div class="col-6">
                                            <textarea name="descripcion_reposicion" id="descripcion_reposicion" rows="4" required="required" placeholder="Se requiere proyector, etc." maxlength="255" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center">
                                        <label class="col-4 col-form-label" for="sala">¿En sala de cómputo?</label>
                                        <div class="col-6">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="sala">
                                                <label class="custom-control-label" for="sala"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button class="btn btn-secondary" type="button" id="prev-button">Anterior</button>
                        <button class="btn btn-secondary" type="button" id="next-button" disabled data-toggle="modal" data-target="#confirmationModal">Proponer reposición</button>
                    </div>

                    <!-- Modal confirmación -->
                    <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="confirmationModalLabel">Confirmación</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>¿Estás seguro de que deseas proponer la reposición?</p>
                                    <small>Recuerda que la aprobará tu jefe de carrera.</small>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-info" onclick="$('#confirmationModal').modal('hide');">Cancelar</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/richtext.js"></script>
<script src="js/clockpicker.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/datepicker-es.js"></script>
<script>
    $(document).ready(function() {
        $('.richtext').richText({
            fontList: ['indivisa-text', 'Arial'],
            imageUpload: true,
            placeholder: 'Escribe aquí la información de la reposición: necesito un proyector, etc.',
        });
    });
    $(".date-picker").datepicker($.datepicker.regional.es);
    $(".date-picker").datepicker({
        dateFormat: "dd/mm/yyyy",
        changeMonth: true,
        beforeShowDay: function(date) {
            // Disable Sundays (0 represents Sunday)
            return [date.getDay() != 0, ''];
            // Disable 2020-05-01
        }
    });
    // the minimum is today + 3 laboral days
    function getNextWorkingDay(date) {
        const day = date.getDay(); // Get the day of the week (0-6, where 0 is Sunday)

        // Check if it's Saturday (6), if so, add 2 days
        if (day === 6) {
            date.setDate(date.getDate() + 2);
        }
        // Add 1 day to skip to the next day
        date.setDate(date.getDate() + 1);

        // Check if it's a Sunday (0), if so, add 1 day
        if (date.getDay() === 0) {
            date.setDate(date.getDate() + 1);
        }

        // Add laboral days
        let laboralDaysCount = 1; // Start with 1 to account for the current day
        while (laboralDaysCount < 3) {
            date.setDate(date.getDate() + 1); // Add a day
            if (date.getDay() !== 6) { // Skip Saturdays
                laboralDaysCount++;
            }
        }

        return date;
    }
    $(".date-picker").datepicker("option", "minDate", getNextWorkingDay(new Date()));
    // the maximum is periodo_fin
    $(".date-picker").datepicker("option", "maxDate", new Date("<?= $periodo_fin ?>T03:24:00"));

    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
<script src="js/messages.js"></script>
<script type="module" src="js/reposiciones.js"></script>

</html>