<?php
require_once 'class/c_login.php';
$user = Login::get_user();
$user->access();
if (in_array($user->acceso, ['r', 'n']))
    die(header('Location: main.php?error=1'));

$user->print_to_log('Consultar: Alta de horario');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cargar horario desde Excel | <?= $user->facultad['facultad'] ?? 'General' ?></title>
    <meta 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("Cargar horario desde Excel", "Sistema de gestión de checador");
    ?>
    <main class="container content marco content-margin" id="local-app">
        <div class="row mb-3">
            <div class="col-12 text-right">
                <button class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalDescargarPlantilla">
                    <span class="ing-descarga ing-fw"></span>
                    Descargar plantilla
                </button>
            </div>
        </div>
        <section id="message"></section>
        <?php require('import/periodo.php') ?>
        <form>
            <div class="form-group">
                <div class="form-box">
                    <?php
                    $periodo = $db->where('id', $user->periodo_id)->getOne('fs_periodo');
                    $carreras = $db
                    ->where('nivel', $periodo['nivel_id'])
                    ->where('facultad', $user->facultad['facultad_id'])
                    ->orderBy('carrera')
                    ->get('fs_carrera');
                    ?>
                    <div class="form-group row" id="input-carrera">

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

                    <div class="form-group row" id="input-file">
                        <label for="excel" class="col-4 col-form-label">Archivo de horarios</label>
                        <div class="col-8 col-sm-6">
                            <input class="form-control-file" id="excel" name="archivo" accept=".xlsx, .xls" require>
                        </div>
                    </div>

                    <div class="form-group mt-5 row justify-content-center">
                        <!-- on click reload -->
                        <button id="btn-cancelar" type="button" class="btn btn-danger mx-2" onclick="location.reload()">
                            <span class="ing-cancelar"></span>
                            Cancelar
                        </button>

                        <button id="btn-cargar" type="button" class="btn btn-primary" onclick="submit_files()">
                            <span class="ing-guardar"></span>
                            Guardar horario
                        </button>
                    </div>
                </div>
            </div>

        </form>
    </main>

    <div class="modal fade" id="modalDescargarPlantilla" tabindex="-1" aria-labelledby="descargarPlantillaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descargarPlantillaModalLabel">Instrucciones</h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ol>
                        <li> Los encabezados deberán mantenerse en todo momento, tal cual se encuentran en la plantilla. </li>
                        <li> Las horas válidas son de 7:00 a 22:00 en bloques de 15 minutos. </li>
                        <li> La columna DURACIÓN es la duración de una clase en horas. Si la clase es de 7:15–8:45 se pone que la hora de la clase es de 7:15 con una duración de 180. </li>
                        <!-- <li> Únicamente las columnas de … </li> -->
                        <li> Si se encuentra un error en la revisión del archivo no se guardará ningún registro. </li>
                        <li> Una vez revisado el archivo haz clic en el botón [Guardar horario] para que se guarde la información. </li>

                    </ol>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Aceptar</button>
                    <button type="button" class="btn btn-primary" id="descargarPlantilla"><span class="ing-descarga"></span> Descargar</button>
                    <button type="button" class="btn btn-primary" id="descargarPlantillaEjemplo"><span class="ing-descarga"></span> Descargar ejemplo</button>
                </div>
            </div>
        </div>
    </div>

</body>
<?php
require_once("import/html_footer.php");
require_once("js/messages.php")
?>
<script src="js/scrollables.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<script src="js/custominputfile.min-es.js"></script>
<link rel="stylesheet" href="css/custominputfile.min.css">
<script src="js/fetchlib.js"></script>
<script>
    var datum = []

    $(document).ready(function() {

        $('#excel').customFile({
            allowed: ['xlsx', 'xls'],
            maxFiles: 1,
            callbacks: {
                onSuccess: async function(item) {
                    var formData = $.customFile.serialize('archivo');

                    const {
                        status,
                        message,
                        data
                    } = await fetch('action/action_revisar_excel.php', {
                            method: 'POST',
                            body: formData,
                        })
                        .then(response => response.json())
                        .catch(error => {
                            return {
                                status: 'error',
                                message: 'Error al cargar el archivo',
                            }
                        });

                    if (status == 'error') {
                        triggerMessage(message, 'Error en el formato del archivo');
                        item.destroy();
                        return
                    }

                    triggerMessage(message + " Haz clic en el botón <b>Guardar horario</b> para guardar los datos", `Archivo revisado, aún <b>no guardado</b>`, 'primary');
                    datum = data;
                    // hide form
                    document.querySelector('#input-file').classList.add('d-none');
                    document.querySelector('#input-carrera').classList.add('d-none');

                    // show button
                    document.querySelector('#btn-cargar').classList.remove('d-none');
                    document.querySelector('#btn-cancelar').classList.remove('d-none');
                },
            }
        });

        // hide
        document.querySelector('#input-file').classList.add('d-none');
        document.querySelector('#btn-cancelar').classList.add('d-none');
        document.querySelector('#btn-cargar').classList.add('d-none');
        // on click in carrera
        [... document.querySelectorAll('#dlcarrera ul li')].forEach(
            li => li.addEventListener('click', () => {
                document.querySelector('#input-file').classList.remove('d-none')
            })
        )
    })

    async function submit_files() {
        // disable button
        const button = document.querySelector('#btn-cargar');
        // add class disabled to button
        button.classList.add('disabled');
        // disable button
        button.disabled = true;

        // add loading icon
        button.innerHTML = '<span class="ing-cargando"></span> Cargando...';

        let missing = [];

        let carrera = $('#filter_carrera').val();
        if (carrera == '') missing.push('Carrera');

        if (datum.length == 0) missing.push('Archivo de horarios');

        let facultad = <?= $user->facultad['facultad_id'] ?>;

        if (missing.length > 0) {
            messageMissingInputs(missing);

            // remove class disabled to button
            button.classList.remove('disabled');
            // enable button
            button.disabled = false;

            // remove loading icon
            button.innerHTML = '<span class="ing-guardar"></span> Guardar horario';

            return;
        }

        const formData = new FormData();

        formData.append('carrera', carrera);
        formData.append('facultad', facultad);
        formData.append('periodo', <?= $user->periodo_id ?>);
        formData.append('data', JSON.stringify(datum));


        const {
            status,
            message
        } = await fetch('action/action_horario_excel.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .catch(error => {
                return {
                    status: 'error',
                    message: 'Error al cargar el archivo',
                }
            });

        triggerMessage(message, (status == 'error') ? 'Error al guardar el archivo' : 'Horarios guardados', (status == 'error') ? 'danger' : 'success');

        // await 1 second
        // await setTimeout(() => {}, 1000);

        // remove class disabled to
        button.classList.remove('disabled');
        // enable button
        button.disabled = false;
        button.innerHTML = 'Cargar otro horario';

        // refresh page
        button.onclick = () => location.reload()

        // hide button
        document.querySelector('#btn-cancelar').classList.add('d-none');
    }

    document.querySelector('#descargarPlantilla').addEventListener('click', function() {
        window.open('template/plantilla.xlsx', '_blank');
    });

    document.querySelector('#descargarPlantillaEjemplo').addEventListener('click', function() {
        window.open('template/ejemplo.xlsx', '_blank');
    });
</script>


</html>