<?php
session_start();
require_once 'classes/MainMenu.php';
require_once './classes/SGI.php';
require_once 'classes/Template.php';
require_once 'include/bd_pdo.php';
?>
<!DOCTYPE html>
<html>
    <head>
	<title>Alumnos - Home</title>
        <?php if ($_SESSION['RolUsuario_desc'] == 'ALUMNO')
            Template::getCSS(array('custominputfile.css','elementos.css','secciones/home.css')); 
        else
            Template::getCSS(); ?>
    </head>
    <body>
	<?php $menuObj = new MainMenu($_SESSION["RolUsuario_id"], 0, 0, $pdo);
        $menuObj->printMenu();
        if ($_SESSION['RolUsuario_desc'] == 'ALUMNO') {?>
        <main class="container-fluid marco">
            <div class="bg-main d-flex flex-column p-3">
                <div class="d-flex flex-row justify-content-center align-items-center">
                    <div class="position-relative foto">
                        <img id="foto" />
                        <div class="divIconsFoto position-absolute d-flex flex-row justify-content-around align-items-center">
                            <div class="iconFoto d-flex justify-content-center align-items-center" data-toggle="modal" data-target="#modalFoto"><i class="ing-camara"></i></div>
                            <div id="limpiaFoto" class="iconFoto d-flex justify-content-center align-items-center"><i class="ing-borrar"></i></div>
                        </div>
                    </div>
                </div>
                <div class="acercaTit display-7 px-3 py-2 mt-4 mb-2 ml-n3">Acerca de mi</div>
                <div id="txtAcerca" placeholder="Escribe tu reseña aquí"></div>
                <div class="d-flex justify-content-end align-items-center mt-3">
                    <span class="ing-editar iconAcciones text-azul2 btnCirc" data-tipo="2"></span>
                    <div class="btns">
                        <span class="ing-aceptar iconAcciones text-success" data-tipo="2"></span>
                        <span class="ing-cancelar iconAcciones text-danger" data-tipo="2"></span>
                    </div>
                </div>
                <div class="flex-grow-1 d-flex flex-column justify-content-end align-items-center">
                    <div class="align-self-end">
                        <span class="ing-mas iconAcciones text-success" data-toggle="modal" data-target="#modalAddRedes"></span>
                        <span class="ing-menos iconAcciones text-danger" data-tipo="3"></span>
                    </div>
                    <div id="divRedes" class="d-flex flex-row justify-content-around align-items-start flex-wrap"></div>
                </div>
            </div>
            <div class="datos p-3">
                <div id="estatus" class="indivisa-text-bold-italic text-secondary display-6"></div>
                <div id="completo">
                    <label class="indivisa-text-black text-primary display-4"></label>
                    <input type="hidden" id="msg" />
                    <i id="validacion" class="ing-importante2 display-6 align-top text-azul1 pointer invisible" data-trigger="click hover" data-html="true" data-toggle="tooltip" data-placement="top" title=" "></i>
                </div>
                <div class="d-flex flex-column justify-content-start align-items-center">
                    <input id="nombre" type="text" class="indivisa-text-black text-primary display-4 mb-1" value="" disabled="true">
                    <input id="apellidos" type="text" class="indivisa-text-black text-primary display-4 mb-2" value="" disabled="true">
                </div>
                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center">
                    <div class="d-flex justify-content-start align-items-center display-7"><span class="text-azul2 mr-1">CURP:</span><input id="curp" type="text" value="" maxlength="18" disabled /></div>
                    <div class="d-flex justify-content-around align-items-center align-self-end">
                        <span class="ing-editar iconAcciones text-azul2" data-tipo="1"></span>
                        <div class="btns mt-2 mt-sm-0">
                            <span class="ing-aceptar iconAcciones text-success" data-tipo="1"></span>
                            <span class="ing-cancelar iconAcciones text-danger" data-tipo="1"></span>
                        </div>
                    </div>
                </div>
                <section id="carreras" class="mt-4 px-3 px-md-5"></section> 
            </div>
            <div class="intereses d-flex flex-column p-3">
                <div class="d-flex flex-row justify-content-end align-items-center bordeInf mb-0 pb-2">
                    <h4 class="text-center flex-grow-1">Mis Intereses</h4>
                    <div id="accionIntereses">
                        <span class="ing-mas iconAcciones text-success" data-toggle="modal" data-target="#modalInteres"></span>
                        <span class="ing-menos iconAcciones text-danger" data-tipo="4"></span>
                    </div>
                    <div id="eliminaIntereses">
                        <span class="ing-aceptar iconAcciones text-success" data-tipo="4"></span>
                        <span class="ing-cancelar iconAcciones text-danger" data-tipo="4"></span>
                    </div>
                </div>
                <div class="container-fluid flex-grow-1">
                    <div class="row h-100 container mx-0 px-0">
                        <div class="col-sm-12 p-3 bordeInfInteres">
                            <h6 class="mb-0 py-2">Profesionales</h6>
                            <ul id="profesionales" class="row"></ul>
                        </div>
                        <div class="col-sm-12 p-3">
                            <h6 class="mb-0 py-2">Personales</h6>
                            <ul id="personales" class="row"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!----- MODALS ----->
        <div class="modalGral modal fade" id="modalFoto" tabindex="-1" data-backdrop="static" aria-labelledby="modalConfirmar" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form id="formFoto" class="modal-content" method="post" enctype="multipart/form-data">
                    <div class="modal-header d-flex flex-column">
                        <h5 class="modal-title w-100 text-center mb-2">Cambia tu foto</h5>
                        <div class="display-7 text-secondary">Considera subir una foto de frente (no selfie), medio tronco hacia arriba, con fondo blanco y vestimenta formal.<br />Esta foto podrá ser utilizada para documentos de la facultad por lo que es importante cumplir con las recomendaciones.</div>
                    </div>
                    <div class="modal-body">
                        <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 foto</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">
                        </div>
                    </div>
                    <div class="modal-footer">                            
                        <button type="button" id="btnOkFoto" data-dato="0" 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>
                </form>
            </div>
        </div>
        <div class="modalGral modal fade" id="modalInteres" tabindex="-1" data-backdrop="static" aria-labelledby="modalInteres" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header d-flex flex-column">
                        <h5 class="modal-title w-100 text-center mb-2">Agrega un interés</h5>
                        <div class="display-7 text-secondary text-justify">Los intereses permiten compartirte información de la facultad o la universidad referente a los mismos.</div>
                    </div>
                    <div class="modal-body">
                        <label class="lblTit">Tipo de Interés</label>
                        <div id="ddlInteres" data-id="-1" class="dropdownlist mb-3">
                            <button id="btnInteres"><label>Elige el tipo de interés</label><span class="ing-caret"></span></button>
                            <ul>
                                <li class="dropdownlist-item" data-id="0">Personal</li>
                                <li class="dropdownlist-item" data-id="1">Profesional</li>
                            </ul>
                        </div>
                        <label class="lblTit">Interés</label>
                        <input id="inputInteres" type="text" placeholder="Escribe tu interés">
                    </div>
                    <div class="modal-footer">                            
                        <button type="button" class="btn btn-verde btnIcon" id="btnOkAddInteres"><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="modalAddRedes" tabindex="-1" data-backdrop="static" aria-labelledby="modalAddRedes" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Agrega una Red o Dato de Contacto</h5>
                    </div>
                    <div class="modal-body">
                        <label class="lblTit">Dato de contacto | Red</label>
                        <div id="dlRed" class="position-relative datalist mb-3" data-id="-1" data-subtipo="-1">
                            <input id="inputRed" class="datalist-input" type="text" placeholder="Escribe aquí el dato o red que buscas" autocomplete="off">
                            <span id="iconRed" class="text-primary input-buscar"></span>
                            <ul style="display:none">
                            <?php $redes = SGI::getRedes($pdo);
                            if (count($redes) > 0){
                                array_push($redes, array('TipoContacto_id' => 0, 'TipoContacto_desc' => 'Contacto de Emergencia', 'TipoContacto_icono' => 'fa-solid fa-book-medical', 'SubtipoContacto' => false));
                                $temp = array();
                                $key = array_search(0, array_column($redes, 'TipoContacto_id'));
                                $temp = $redes[$key];
                                unset($redes[$key]);
                                array_unshift($redes, $temp);
                                $key = array_search(2, array_column($redes, 'TipoContacto_id'));
                                $temp = $redes[$key];
                                unset($redes[$key]);
                                array_unshift($redes, $temp);
                                $key = array_search(3, array_column($redes, 'TipoContacto_id'));
                                $temp = $redes[$key];
                                unset($redes[$key]);
                                array_unshift($redes, $temp);
                                $key = array_search(1, array_column($redes, 'TipoContacto_id'));
                                $temp = $redes[$key];
                                unset($redes[$key]);
                                array_unshift($redes, $temp);
                            }
                            if (isset($redes)) {
                                foreach ($redes as $red) { ?>
                                <li data-id="<?php echo $red['TipoContacto_id']; ?>" data-subtipo="<?php echo intval($red['SubtipoContacto']); ?>"><i class="<?php echo $red['TipoContacto_icono']; ?> mr-1"></i><label><?php echo $red['TipoContacto_desc']; ?></label></li>
                            <?php }
                            } ?>
                            </ul>
                        </div>
                        <label id="titNomEmergencia" class="lblTit emergencia">Nombre Contacto de Emergencia</label>
                        <input id="inputNomEmergencia" type="text" class="emergencia mb-3" placeholder="Escribe el nombre de la persona que será contacto de emergencia">
                        <label id="titDato" class="lblTit dato"></label>
                        <input id="inputDato" type="text" class="dato mb-3">
                        <label id="titSubTipo" class="lblTit subtipo"></label>
                        <div id="ddlSubTipo" data-id="0" class="dropdownlist subtipo mb-3">
                            <button id="btnSubTipo"><label></label><span class="ing-caret"></span></button>
                            <ul></ul>
                        </div>
                        <label id="titUsoRed" class="lblTit uso"></label>
                        <div id="ddlUsoRed" data-id="0" class="dropdownlist uso">
                            <button id="btnUsoRed"><label>Elige el tipo de uso</label><span class="ing-caret"></span></button>
                            <ul>
                                <li class="dropdownlist-item" data-id="2">Empresarial</li>
                                <li class="dropdownlist-item" data-id="1">Personal</li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">                            
                        <button type="button" class="btn btn-verde btnIcon" id="btnOkAddRedes"><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="modalSupRedes" tabindex="-1" data-backdrop="static" aria-labelledby="modalSupRedes" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Elimina Red o Dato de Contacto</h5>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">                            
                        <button type="button" class="btn btn-verde btnIcon" id="btnOkSupRedes"><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 } ?>
        <!-- FOOTER -->
        <div style="isolation: isolate;">
        <?php Template::footer(); ?>
        </div>
        <?php if ($_SESSION['RolUsuario_desc'] == 'ALUMNO')
            Template::getJS(array('custominputfile.js','elementos.js','secciones/home.js'));
        else
            Template::getJS(); ?>
    </body>
</html>