<?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 = 44;
$submenu = 441;
$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('jquery-ui.css','elementos.css','month-picker.css','secciones/formacion.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 marco d-flex flex-column">
            <div class="nav nav-tabs tabGral justify-content-center" id="menu" role="tablist">
                <button class="tabs nav-link active" data-seccion="1" id="tabHistorial" data-toggle="tab" data-target="#navHistorial" type="button" role="tab" aria-controls="navHistorial" aria-selected="true"><label>Historial Académico</label></button>
                <button class="tabs nav-link" data-seccion="2" id="tabIdiomas" data-toggle="tab" data-target="#navIdiomas" type="button" role="tab" aria-controls="navIdiomas" aria-selected="false"><label>Idiomas</label></button>
                <button class="tabs nav-link" data-seccion="3" id="tabHabilidades" data-toggle="tab" data-target="#navHabilidades" type="button" role="tab" aria-controls="navHabilidades" aria-selected="false"><label>Habilidades Técnicas</label></button>
            </div>
            <div class="tab-content p-2 flex-grow-1">
                <div class="tab-pane fade show active" id="navHistorial" role="tabpanel" aria-labelledby="navHistorial">
                    <div class="d-flex flex-column">
                        <button id="btnHistorial" class="btn btn-verde align-self-end mb-3"><i class="ing-mas mr-1"></i>Agregar al Historial Académico</button>
                        <div class="flex-grow-1 contenido w-100 d-flex flex-row flex-wrap justify-content-around align-items-stretch"></div>
                    </div>
                </div>
                <div class="tab-pane fade" id="navIdiomas" role="tabpanel" aria-labelledby="navIdiomas">
                    <div class="d-flex flex-column">
                        <button id="btnIdioma" class="btn btn-verde align-self-end mb-3"><i class="ing-mas mr-1"></i>Agregar un Idioma</button>
                        <div class="flex-grow-1 contenido w-100 d-flex flex-row flex-wrap justify-content-around align-items-stretch"></div>
                    </div>
                </div>
                <div class="tab-pane fade" id="navHabilidades" role="tabpanel" aria-labelledby="navHabilidades">
                    <div class="d-flex flex-column">
                        <button id="btnHabilidad" class="btn btn-verde align-self-end mb-3"><i class="ing-mas mr-1"></i>Agregar una Habilidad Técnica</button>
                        <div class="flex-grow-1 contenido w-100 d-flex flex-row flex-wrap justify-content-around align-items-stretch"></div>
                    </div>
                </div>
            </div>
        </main>
        <div class="modalGral modal fade" id="modalHistorial" tabindex="-1" data-backdrop="static" aria-labelledby="modalHistorial" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title"></h5></div>
                    <div class="modal-body">
                        <label class="lblTit">Estudio</label>
                        <div id="ddlTipoEstudio" data-id="0" class="dropdownlist mb-3">
                            <button id="btnTipoEstudio"><label>Elige el tipo de estudio</label><span class="ing-caret"></span></button>
                            <ul>
                                <li data-id="1" data-dato="1" class="dropdownlist-item">Certificación</li>
                                <li data-id="2" data-dato="0" class="dropdownlist-item">Curso</li>
                                <li data-id="3" data-dato="1" class="dropdownlist-item">Licenciatura</li>
                                <li data-id="4" data-dato="1" class="dropdownlist-item">Especialidad</li>
                                <li data-id="5" data-dato="1" class="dropdownlist-item">Maestría</li>
                                <li data-id="6" data-dato="0" class="dropdownlist-item">Doctorado</li>
                                <li data-id="7" data-dato="0" class="dropdownlist-item">Postdoctorado</li>
                            </ul>
                        </div>
                        <label id="titEstudio" class="lblTit estudio"></label>
                        <input id="inputEstudio" type="text" class="mb-3 estudio">
                        <label class="lblTit institucion">Institución</label>
                        <input id="inputInstitucion" type="text" placeholder="Escribe el nombre de la institución" class="mb-3 institucion">
                        <label class="lblTit estatus">Estatus</label>
                        <div id="ddlEstatus" data-id="0" class="dropdownlist estatus mb-3">
                            <button id="btnEstatus"><label>Elige el estatus del estudio</label><span class="ing-caret"></span></button>
                            <ul>
                                <li data-id="1" class="dropdownlist-item">En curso</li>
                                <li data-id="2" class="dropdownlist-item" data-info="formal">Pasante</li>
                                <li data-id="3" class="dropdownlist-item" data-info="formal">Titulado</li>
                                <li data-id="4" class="dropdownlist-item" data-info="informal">Acreditado</li>
                            </ul>
                        </div>
                        <label id="titPeriodo" class="lblTit periodo"></label>
                        <div class="alert alert-warning mb-1" role="alert">La fecha de término <b>no</b> puede ser anterior a la fecha de inicio</div>
                        <div class="d-flex flex-row justify-content-between align-items-center mb-3">
                            <input id="inputFechaInicio" type="text" class="datepicker inputAjustado month-year-input periodo" placeholder="Fecha de inicio" readonly>
                            <span class="endDate mx-2 periodo">-</span>
                            <input id="inputFechaFin" type="text" class="datepicker endDate inputAjustado month-year-input periodo" placeholder="Fecha de Término" readonly>
                        </div>
                        <label class="lblTit cedula">Cédula o folio</label>
                        <input id="inputCedula" class="cedula" type="text" placeholder="Escribe el número de cédula o folio">
                    </div>
                    <div class="modal-footer">                            
                        <button id="btnOkHistorial" type="button" class="btn btn-verde btnIcon"><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="modalIdioma" tabindex="-1" data-backdrop="static" aria-labelledby="modalIdioma" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title"></h5></div>
                    <div class="modal-body">
                        <label class="lblTit">Idioma</label>
                        <div id="dlIdioma" class="position-relative datalist mb-3">
                            <input id="inputIdioma" class="datalist-input" type="text" placeholder="Escribe el nombre del idioma" autocomplete="off">
                            <span id="iconIdioma" class="text-primary input-buscar"></span>
                            <?php $archivo = Archivos::getContenido('docs','generales.json');
                            $datos = array();
                            if ($archivo)
                                $datos = json_decode($archivo,true);
                            ?>
                            <ul style="display:none">
                                <?php if (isset($datos['idiomas'])) {                                    
                                    foreach ($datos['idiomas'] as $idioma) { ?>
                                <li><?php echo $idioma; ?></li>
                                <?php }
                                } ?>
                            </ul>
                        </div>
                        <label class="lblTit">Nivel</label>
                        <div class="star-rating">
                            <div class="d-flex justify-content-center flex-row-reverse fieldset" data-tipo="radiobutton">
                                <input data-indice="3"  type="radio" id="idioma3" name="nivelIdioma" value="3" />
                                <label for="idioma3"><div class="display-5 ing-estrella1"></div><span>Avanzado</span></label>
                                <input data-indice="2"  type="radio" id="idioma2" name="nivelIdioma" value="2" />
                                <label for="idioma2"><div class="display-5 ing-estrella1"></div><span>Intermedio</span></label>
                                <input data-indice="1"  type="radio" id="idioma1" name="nivelIdioma" value="1" />
                                <label for="idioma1"><div class="display-5 ing-estrella1"></div><span>Básico</span></label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">                            
                        <button id="btnOkIdioma" type="button" class="btn btn-verde btnIcon"><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="modalHabilidad" tabindex="-1" data-backdrop="static" aria-labelledby="modalHabilidad" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header"><h5 class="modal-title"></h5></div>
                    <div class="modal-body">
                        <label class="lblTit">Habilidad</label>
                        <input id="inputHabilidad" type="text" placeholder="Escribe la habilidad técnica" class="mb-3">
                        <label class="lblTit">Nivel</label>
                        <div class="star-rating">
                            <div class="d-flex justify-content-center flex-row-reverse fieldset" data-tipo="radiobutton">
                                <input data-indice="3"  type="radio" id="habilidad3" name="nivelHabilidad" value="3" />
                                <label for="habilidad3"><div class="display-5 ing-insignia3"></div><span>Avanzado</span></label>
                                <input data-indice="2"  type="radio" id="habilidad2" name="nivelHabilidad" value="2" />
                                <label for="habilidad2"><div class="display-5 ing-insignia3"></div><span>Intermedio</span></label>
                                <input data-indice="1"  type="radio" id="habilidad1" name="nivelHabilidad" value="1" />
                                <label for="habilidad1"><div class="display-5 ing-insignia3"></div><span>Básico</span></label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">                            
                        <button id="btnOkHabilidad" type="button" class="btn btn-verde btnIcon"><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="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 class="modalGral modal fade" id="modalEliminar" tabindex="-1" data-backdrop="static" aria-labelledby="modalEliminar" 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="btnOkEliminar"><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>
    <?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 } ?>
        <div style="isolation: isolate;">
        <?php Template::footer(); ?>
        </div>
        <?php if ($objSesion->tieneAcceso())
            Template::getJS(array('jquery-ui.js','month-picker.js','elementos.js','secciones/formacion.js'));
        else 
            Template::getJS(); ?>
    </body>
</html>
<?php } else 
    ValidaSesion::salirPagina();