<?php
session_start();
require_once 'include/bd_pdo.php';
require_once 'classes/Archivos.php';
require_once 'classes/MainMenu.php';
require_once 'classes/Template.php';
require_once 'classes/ValidaSesion.php';

//CONSTANTES Y VARIABLES GLOBALES
$menu = 43;
$submenu = 433;
$titulo = '';

if (!isset($_SESSION['usuario_id']))
    ValidaSesion::salirPagina();
else {
    if(isset($_SESSION['usuario_id']))
        $objSesion = new ValidaSesion($pdo, $submenu);
    else 
        ValidaSesion::salirPagina();
}
if (isset($objSesion)) { 
    $titulo = $objSesion->nombrePagina();?>

<!DOCTYPE html>
<html>
    <head>
        <title>Alumnos - <?php echo $titulo; ?></title>
        <?php if($objSesion->tieneAcceso())
            Template::getCSS(array('elementos.css', 'custominputfile.css', 'secciones/eventos.css'));
        else
            Template::getCSS(); ?>
    </head>
    <body>    
    <input id="idUser" type="hidden" value="<?php echo $_SESSION['usuario_id']; ?>" />
        <?php $menuObj = new MainMenu($_SESSION["RolUsuario_id"], $menu, $submenu, $pdo);
        $menuObj->printMenu($titulo);
    if ($objSesion->tieneAcceso()) { ?>
        <main class="container-fluid content marco">
            <div class="d-inline-flex flex-row flex-wrap justify-content-center justify-content-sm-start align-items-start">
                <div id="ddlMeses" data-id="0" class="dropdownlist dropdownlist-azul1 m-2 mb-0">
                    <button id="btnMeses"><label class="bigFont">Selecciona un mes</label><span class="ing-caret"></span></button>
                    <ul>
                        <li data-id="1" class="dropdownlist-item bigFont">Enero</li>
                        <li data-id="2" class="dropdownlist-item bigFont">Febrero</li>
                        <li data-id="3" class="dropdownlist-item bigFont">Marzo</li>
                        <li data-id="4" class="dropdownlist-item bigFont">Abril</li>
                        <li data-id="5" class="dropdownlist-item bigFont">Mayo</li>
                        <li data-id="6" class="dropdownlist-item bigFont">Junio</li>
                        <li data-id="7" class="dropdownlist-item bigFont">Julio</li>
                        <li data-id="8" class="dropdownlist-item bigFont">Agosto</li>
                        <li data-id="9" class="dropdownlist-item bigFont">Septiembre</li>
                        <li data-id="10" class="dropdownlist-item bigFont">Octubre</li>
                        <li data-id="11" class="dropdownlist-item bigFont">Noviembre</li>
                        <li data-id="12" class="dropdownlist-item bigFont">Diciembre</li>
                    </ul>
                </div>
                <div id="ddlAnios" data-id="0" class="dropdownlist dropdownlist-azul2 m-2 mb-0" style="min-width:225px;">
                    <button id="btnAnios"><label class="bigFont">Selecciona un año</label><span class="ing-caret"></span></button>
                    <ul>
                        <li data-id="2020" class="dropdownlist-item bigFont">2020</li>
                        <li data-id="2021" class="dropdownlist-item bigFont">2021</li>
                        <li data-id="2022" class="dropdownlist-item bigFont">2022</li>
                        <li data-id="2023" class="dropdownlist-item bigFont">2023</li>
                    </ul>
                </div>
            </div>
            <div id="eventos"></div>
        </main>
        <!--- MODAL --->
        <div class="modalGral modal fade" id="modalConfirmar" tabindex="-1" data-backdrop="static" aria-labelledby="modalConfirmar" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body text-center display-5"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-verde btnIcon" id="btnConfirmar"><span class="ing-aceptar"></span></button>
                        <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
                    </div>
                </div>
            </div>
        </div>        
        <div class="modalGral modal fade" id="modalSubirArchivo" tabindex="-1" data-backdrop="static" aria-labelledby="modalSubirArchivo" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form id="formArchivo" class="modal-content" method="post" enctype="multipart/form-data">
                    <div class="modal-header">
                        <h3 class="modal-title">Cargar Evidencia</h3>
                    </div>
                    <div class="modal-body text-center">
                        <div id="msgDetalle" class="display-7 text-secondary mb-3"></div>
                        <div id="divArchivo" class="w-100 d-flex flex-column">
                            <div class="carga text-azul2 mb-3">
                                <div class="d-flex flex-column justify-content-center align-items-center">
                                    <div class="display-6 text-azul2">Cargando archivo</div>
                                    <div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul2);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul2-75);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul2-50);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul2-25);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul1-25);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul1-50);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul1-75);"></div>
                                        <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul1);"></div>
                                    </div>
                                </div>
                            </div>
                            <input id="addArchivo" name="archivo" type="file" accept=".pdf, .zip, .rar">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-verde btnIcon" id="btnOkArchivo"><span class="ing-aceptar"></span></button>
                        <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal fade" id="modalAviso" tabindex="-1" aria-labelledby="modalAviso" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content msgAviso d-flex flex-row justify-content-between align-items-stretch">
                    <div class="modal-header iconAviso d-flex justify-content-center align-items-center"><i class="display-3 "></i></div>
                    <div class="modal-body txtAviso flex-grow-1 d-flex flex-column justify-content-center align-items-center">
                        <div class="display-5 msg1 indivisa-text-black mb-3">Título</div>
                        <div class="mb-3 msg2">Texto del Mensaje</div>
                        <div class="rounded-pill p-2 text-white" data-dismiss="modal" aria-label="Close">Cerrar</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="isolation: isolate;">        
    <?php }  else { ?>
        <main class="container-fluid content marco">
            <div class="row justify-content-center" style="min-height: 600px;">
                <img id="errorImg" class="col-sm-3" src="img/nico_error.svg" />
                <div class="col-sm-9 display-4 d-flex flex-row justify-content-center align-items-center text-center">No tienes acceso a ésta página</div>
            </div>
        </main>
    <?php }
        Template::footer(); ?>
        </div>     
    <?php if($objSesion->tieneAcceso())
        Template::getJS(array('elementos.js', 'custominputfile.js', 'secciones/eventos.js'));
    else
        Template::getJS(); ?>
    </body>
</html>
<?php } else 
    ValidaSesion::salirPagina();