<?php
    session_start();

    require_once 'classes/Template.php';
    require_once 'classes/ValidaSesion.php';
    require_once 'classes/Archivos.php';
    require_once 'include/mpdf/autoload.php';
    require_once 'include/bd_pdo.php';

    $titulo = 'Proceso de Titulacion';
    
    if (!isset($_SESSION['usuario_id']))
        ValidaSesion::salirPagina();
    else {
        if(isset($_SESSION['usuario_id']))
            $objSesion = new ValidaSesion();
        else 
            ValidaSesion::salirPagina();
    }
    if (isset($objSesion)) { ?>

<!DOCTYPE html>
<html lang="es" prefix="og: http://ogp.me/ns#">
    <head>
    <style> 
        .emphasis {
            color:          #07a9cd;
            font-weight:    bold;
        }
        .tooltip-inner {
            background-color: #808080 !important;
            color: white;
        }
        .bs-tooltip-right .arrow::before,
        .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            border-right-color: #808080 !important;
        }

        #pbar-on {
            border-radius:  20px;
            background:     #07a9cd;
            padding:        10px;
            margin:         10px;             
            height:         2px;  
        }
        #pbar-off {
            border-radius:  20px;
            background:     #e6e6e6;
            padding:        10px;
            margin:         10px;             
            height:         2px;
        }
    </style>
	<title>Alumnos - <?php echo $titulo; ?></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="css/bootstrap-ing.min.css" type="text/css">        
        <link rel="stylesheet" href="css/custominputfile.css" type="text/css">
        <link rel="stylesheet" href="css/indivisa.css" type="text/css">
        <link rel="stylesheet" href="css/jquery-ui.css" type="text/css">        
        <link rel="stylesheet" href="css/calendar.css" type="text/css">
        <link rel="stylesheet" href="css/fa_all.css" type="text/css">
        <?php Template::getCSS(array('elementos.css')); ?>
    </head>
    <body>
        <?php Template::header($titulo); ?>
        <!-- <?php print_r($_SESSION['usuario_id'])?> -->
        <main class="container-fluid content marco">                        
            <div class="modal fade" id="modalAviso" tabindex="-1" aria-labelledby="modalAviso" aria-hidden="true" data-backdrop="static">
                <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 bg-warning d-flex justify-content-center align-items-center"><i class="display-3 ing-importante"></i></div>
                            <div class="modal-body txtAviso flex-grow-1 d-flex flex-column justify-content-center align-items-center">
                                <div class="display-5 indivisa-text-black mb-3" style="font-size: 50px">¡Alto!</div>
                                <div class="mb-3" style="text-align: center; font-size: 18px">Se requiere autorización del Jefe de Titulación para continuar al siguiente paso, regrese más tarde.</div>                                                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="paso1">
                <div class="row">
                    <div class="col-12">
                        <h4 class="col-12">Servicio Social y Certificado Total de Estudios</h4>
                        <form name = "Form1" id = "Form1" action = "action/tit_insert.php" method="POST"">
                            <div class="d-flex justify-content-center">                                        
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-verde" type="button" id="save1" data-toggle="modal" data-target="#modalAviso"> <span class="ing-guardar"></span> Guardar</button>                                       
                                <button class="btn btn-rojo" type="button" id="erase1"> <span class="ing-borrar"></span> Limpiar</button>                                    
                            </div>                                
                            <div class="d-flex flex-column justify-content-center" style="text-align: center">                                        
                                <div style="padding-bottom: 30px">
                                    <h5>Comprobante de Término del Servicio Social</h5>                                                             
                                    <p style="padding-bottom: 10px">Favor de subirlo en formato PDF.</p>
                                    <div class="row">
                                        <div class="col-2"></div>
                                        <div class="col-8 flex-fill" style = "40px 0px">
                                            <input name="cert-ss" id="cert-ss" type="file">
                                        </div>
                                    </div>                                            
                                </div>                                        
                                <div style="padding-bottom: 30px">
                                    <div class="d-flex flex-row justify-content-center align-items-center" style="padding-bottom: 10px">
                                        <h5>Fecha de Entrega de Constancia de Estudios</h5>
                                        <button style="padding: 15px" class="btn" type="button" data-toggle="tooltip" title="Al terminar sus estudios, inicie el trámite para recibir su Constancia de Estudios e ingrese la fecha en la cuál lo recibirá.">
                                            <span class="ing-importante2" style="color: #D21034"></span>
                                        </button>
                                    </div>
                                    <div class="row">
                                        <div class="col-3"></div>
                                        <div class="col-6">
                                            <input id="date-picker" name="fecha_estudios" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" readonly="readonly">
                                        </div>
                                    </div>                                            
                                </div>
                                <div>
                                    <h5 style="padding-bottom: 10px">Elija su Tipo de Titulación</h5>
                                    <div class="row">
                                        <div class="col-3"></div>
                                        <div id="ddlNormal" class="col-6 dropdownlist mx-2">
                                            <button type="button" id="btnNormal">
                                                <label id="type-tit_0">Tipo de Titulación...</label>
                                                <span class="ing-caret"></span>
                                            </button>
                                            <ul style="text-align: left">
                                                <li id="type-tit_1" data-id="1" class="dropdownlist-item">Examen de Conocimientos Generales - CENEVAL</li>
                                                <li id="type-tit_2" data-id="2" class="dropdownlist-item">Promedio Meritorio</li>
                                                <li id="type-tit_3" data-id="3" class="dropdownlist-item">Maestría/Posgrado</li>
                                            </ul>                
                                            <input type="hidden" id="opc_estudios" name="opc_estudios" value="">
                                        </div>                                            
                                    </div>
                                </div>
                            </div>                                                                                                            
                        </form>
                    </div>
                </div>
            </div>
            <div id="paso2" style="display:none;">
                <div class="row">
                    <div class="col-12">                        
                        <h4 class="col-12"> <span id="title-mod"></span> </h4>                            
                        <form name = "Form2" id="Form2" action = "action/tit_insert.php" method="POST">
                            <div class="d-flex justify-content-center">                                        
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p>
                            </div>   
                            <div class="text-right">
                                <button class="btn btn-verde" type="button" id="save2" data-toggle="modal" data-target="#modalAviso"> <span class="ing-guardar"></span> Guardar</button>
                                <button class="btn btn-rojo" type="button" id="erase2"> <span class="ing-borrar"></span> Limpiar</button>                                    
                            </div>
                            <div class="msgBox d-flex flex-row justify-content-center align-items-center">
                                <img src="img/triangulos.svg" class="imgBoxIzq" />
                                <img src="img/triangulos.svg" class="imgBoxDer" />
                                <hr class="hrArriba">
                                <hr class="hrAbajo">
                                <div class="display-7">
                                    <div class="d-flex flex-row justify-content-center align-items-center" style="padding: 10px 20px">                                        
                                        <h1 style="text-align: center; width: 90px"> <span id="dia2"></span> <span id="mes2"></span> </h1>
                                        <div class="d-flex flex-column flex-grow-1">
                                            <p style="text-align: center">Fecha límite para el llenado de formato.</p>
                                            <p style="text-align: center">Esta información será revisada para poder liberar la clave de pago en el sistema.</p>
                                        </div>                                                                                                                                
                                    </div>
                                </div>
                            </div>                           
                            <div class="d-flex flex-column justify-content-center" style="padding: 20px 10px 0px">
                                <a id="genPDF">    
                                    <div class="d-flex flex-row justify-content-center" style="padding-bottom: 20px">
                                        <div class="d-flex flex-column" style="padding-right: 8px; text-align: center">
                                            <h5>Formato de Gestión Escolar</h5>
                                            <p>Descarga el archivo y vuelve a subirlo con su firma autógrafa.</p>
                                        </div>                                        
                                        <h1 class="d-flex align-items-center" style="padding-left: 8px"><span class="ing-descarga"></span></h1>
                                    </div>
                                </a>
                                <div class="row" style="text-align: center">
                                    <div class="col-6 flex-column" style="padding-right: 40px">
                                        <h5>Formato Gestión Escolar (firmado)</h5>                                                                                                                
                                        <p>El archivo debe ser en formato PDF y con firma autógrafa clara y legible.</p>                                                                                                                         
                                    </div>
                                    <div class="col-6 flex-column" style="padding-left: 40px">
                                        <h5>Identificación Oficial con Fotografía</h5>                                        
                                        <p>Deberá subir su credencial INE o pasaporte, en formato PDF.</p>                                                                                                                        
                                    </div>
                                </div>
                                    <div class="row">
                                        <div class="col-6 flex-fill" style="padding-right: 40px">
                                            <input name="form-ge" id="form-ge" type="file">
                                        </div>
                                        <div class="col-6 flex-fill" style="padding-left: 40px">
                                            <input name="id-oficial" id="id-oficial" type="file">
                                        </div> 
                                    </div>                          
                            </div>                                                                     
                        </form>
                    </div>
                </div>
            </div>
            <div id="paso3" style="display:none;">
                <div class="row">
                    <div class="col-12">
                        <h4 class="col-12">Pago del Trámite</h4>
                        <form name = "Form3" id="Form3" action = "action/tit_insert.php" method="POST">
                            <div class="d-flex justify-content-center">                                        
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-on" class="flex-fill"></p> 
                                <p id="pbar-off" class="flex-fill"></p>
                            </div>
                            <div class="text-right">
                                <button class="btn btn-verde" type="button" id="save3" data-toggle="modal" data-target="#modalAviso"> <span class="ing-guardar"></span> Guardar</button>
                                <button class="btn btn-rojo" type="button" id="erase3"> <span class="ing-borrar"></span> Limpiar</button>                                    
                            </div>
                            <div class="msgBox d-flex flex-row justify-content-center align-items-center">
                                <img src="img/triangulos.svg" class="imgBoxIzq" />
                                <img src="img/triangulos.svg" class="imgBoxDer" />
                                <hr class="hrArriba">
                                <hr class="hrAbajo">
                                <div class="display-7">
                                    <div class="d-flex flex-column justify-content-center" style="padding: 10px 20px">
                                        <p style="text-align: center">La clave para realizar el pago en el sistema SGU es <span id="sgu" class="emphasis">###</span>.</p>
                                        <p style="text-align: center">El periodo de pago será del <span class="emphasis"><span id="idia3"></span> de <span id="imes3"></span> al <span id="fdia3"></span> de <span id="fmes3"></span></span>.</p>
                                        <p style="text-align: center">Una vez que realices el pago, suba su comprobante aquí para finalizar su trámite.</p>
                                    </div>
                                </div>                                   
                            </div>
                            <div class="d-flex flex-column justify-content-center" style="padding-top: 20px; text-align: center">                                        
                                <h5 style="padding-bottom: 10px">Comprobante de Pago</h5>                                                                    
                                <div class="row">
                                    <div class="col-2"></div>
                                    <div class="col-8 flex-fill" style="40px 0px">
                                        <input name="pago" id="pago" type="file">                                        
                                    </div>
                                </div>
                            </div>                                        
                        </form>
                    </div>
                </div>
            </div>
            <div id="pasoP" style="display:none;">
                <div class="row">
                    <div class="col-12">
                        <h4 class="col-12">Ceremonia de Toma de Protesta</h4>                            
                        <div class="d-flex justify-content-center" style="padding-bottom: 30px">                                        
                            <p id="pbar-on" class="flex-fill"></p> 
                            <p id="pbar-on" class="flex-fill"></p> 
                            <p id="pbar-on" class="flex-fill"></p> 
                            <p id="pbar-on" class="flex-fill"></p>
                        </div>                                
                        <div class="msgBox d-flex flex-row justify-content-center align-items-center">
                            <img src="img/triangulos.svg" class="imgBoxIzq" />
                            <img src="img/triangulos.svg" class="imgBoxDer" />
                            <hr class="hrArriba">
                            <hr class="hrAbajo">
                            <div class="display-6">
                                <div class="d-flex flex-column justify-content-center" style="padding: 10px 20px">
                                    <h1 class="display-4" style="text-align: center; padding-bottom: 10px; font-style: italic">¡Felicidades!</h1>
                                    <p style="text-align: center">La fecha de la Ceremonia de la Toma de Protesta es el</p>
                                    <p style="text-align: center" class="emphasis"><span id="pdia4"></span>° de <span id="pmes4"></span> a las <span id="phora4">XX:XX</span></p>
                                    <p style="text-align: center">en <span id="plugar4" class="emphasis"></span>.</p>
                                    <p style="text-align: center">Es importante que llegues al menos 10 minutos antes de que inicie el evento.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex flex-row justify-content-center" style="padding: 40px 0px">
                            <div class="d-flex flex-column justify-content-center" style="padding: 0px 20px">
                                <div>
                                    <a id="a-egel" target="_blank">
                                        <div class="d-flex flex-row justify-content-end">
                                            <h2 style="padding-right: 30px; padding-bottom: 50px">Testimonio del Egel</h2>
                                            <p style="font-size: 34px"><span class="ing-descarga"></span></p>
                                        </div>                                    
                                    </a>
                                </div>
                                <div>
                                    <a id="a-id" target="_blank">
                                        <div class="d-flex flex-row justify-content-end">
                                            <h2 style="padding-right: 30px">Identificación Oficial</h2>
                                            <p style="font-size: 34px"><span class="ing-descarga"></span></p>
                                        </div>                                    
                                    </a>
                                </div>                                                                                
                            </div>
                            <div class="d-flex flex-column justify-content-center" style="padding: 0px 20px">
                                <div>
                                    <a id="a-fg" target="_blank">
                                        <div class="d-flex flex-row justify-content-end">
                                            <h2 style="padding-right: 30px; padding-bottom: 50px">Formato de Gestión Escolar</h2>
                                            <p style="font-size: 34px"><span class="ing-descarga"></span></p>
                                        </div>
                                    </a>                                    
                                </div>
                                <div>
                                    <a id="a-pago" target="_blank">
                                        <div class="d-flex flex-row justify-content-end">
                                            <h2 style="padding-right: 30px">Comprobante de Pago</h2>
                                            <p style="font-size: 34px"><span class="ing-descarga"></span></p>
                                        </div>
                                    </a>                                    
                                </div>                                                                                      
                            </div>
                        </div>                                                                    
                    </div>
                </div>                                        
            </div>
            <div id="pasoT" style="display:none;">
                <h6>Te titulaste, wuuu</h6>
            </div>                
        </main>

        <!--- FOOTER--->
        <div style="isolation: isolate;">
            <?php Template::footer(); ?>
        </div>
        <?php Template::getJS(array('bootstrap.bundle.min.js', 'jquery-ui.js', 'custominputfile.js', 'datepicker-es.js', 'elementos.js', 'fechas.js')); ?>            

        <script>
            // Script para el funcionamiento del Wizard                        
            <?php 
                $u_id = $_SESSION['usuario_id'];
                $stmt = $pdo->prepare('SELECT "Alumno_status" FROM "TIT_Alumno" WHERE "Usuario_id" = :id');
                $stmt->bindParam(":id",$u_id);
                if(!$stmt->execute()){
                    echo "Error";
                }
                $altabla = $stmt ->fetch();
                $stmt -> closeCursor();                
            ?>
            let x = <?php echo $altabla["Alumno_status"] ?>;
            // console.log(x);
            // let x = 7;
            const step = ["paso1", "paso2", "paso3", "pasoP", "pasoT"];
            switch(x) {
                case 1:
                    $("#"+step[0]).show();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    break;
                case 2:
                    $("#"+step[0]).show();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    $('#modalAviso').modal('show')
                    break;
                case 3:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).show();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    break;
                case 4:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).show();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    $('#modalAviso').modal('show')
                    break;
                case 5:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).show();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    break;
                case 6:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).show();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    $('#modalAviso').modal('show')
                    break;
                case 7:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).show();
                    $("#"+step[4]).hide();
                    break;
                case 8:
                    $("#"+step[0]).hide();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).show();
                    break;
                default:
                    $("#"+step[0]).show();
                    $("#"+step[1]).hide();
                    $("#"+step[2]).hide();
                    $("#"+step[3]).hide();
                    $("#"+step[4]).hide();
                    break;
            }                        
        </script>

        <script>
            // Script para funcionamiento del Calendario
            var datepickerOptions = { dateFormat: "dd/mm/yy", showOtherMonths: true, selectOtherMonths: true, minDate: "-1M", maxDate: "+1Y" }

            $(document).ready(function() {
                $(".date-picker").datepicker(datepickerOptions)              
                $(".date-picker" ).datepicker( $.datepicker.regional[ "es" ] );
            })
        </script>        

        <script>
            // Script para funcionamiento del Drag-n-Drop
            $(document).ready(function(){
                $('#cert-ss').customFile({
                    type: 'all',
                    allowed: ["pdf"],
                    maxFiles: 1                    
                });
                $('#form-ge').customFile({
                    type: 'all',
                    allowed: ["pdf"],
                    maxFiles: 1                    
                });
                $('#id-oficial').customFile({
                    type: 'all',
                    allowed: ["pdf"],
                    maxFiles: 1                    
                });
                $('#pago').customFile({
                    type: 'all',
                    allowed: ["pdf"],
                    maxFiles: 1                    
                });
            })
        </script>

        <script>
            // Script para Guardado
            $(document).on("click", "#save1", function(event) {                                
                let datos = $.customFile.serialize('#Form1');                
                datos.append('fecha_estudios',$('#date-picker').val());
                datos.append('opc_titulacion',$('#opc_estudios').val());
                datos.append('tipo', 1);
                console.log(datos);
                $.ajax({
                    url: 'action/tit_insert.php',
                    type: 'POST',
                    contentType: false,
                    cache: false,
                    processData: false,
                    data: datos,

                    success:function(result) {
                        if(result["error"] != "" && result["error"] !== undefined){
                            alert(result["error"]);
                        }else{
                            console.log("Boton Guardar 01 FUNCIONA.")                      
                        }                    
                    },
                    error:function(jqXHR, textStatus, errorThrown) {
                        alert("Boton Guardar 01 ocurrio ERROR.");
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                // TERMINO DE AJAX
            });
            
            $(document).on("click", "#save2", function(event) {
                let datos = $.customFile.serialize('#Form2');                                
                datos.append('tipo', 2);
                console.log(datos);
                $.ajax({
                    url: 'action/tit_insert.php',
                    type: 'POST',
                    contentType: false,
                    cache: false,
                    processData: false,
                    data: datos,

                    success:function(result) {
                        if(result["error"] != "" && result["error"] !== undefined){
                            alert(result["error"]);
                        }else{
                            console.log("Boton Guardar 02 FUNCIONA.")                      
                        }                    
                    },
                    error:function(jqXHR, textStatus, errorThrown) {
                        alert("Boton Guardar 02 ocurrio ERROR.");
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                // TERMINO DE AJAX
            });

            $(document).on("click", "#save3", function(event) {
                let datos = $.customFile.serialize('#Form3');                                
                datos.append('tipo', 3);
                console.log(datos);
                $.ajax({
                    url: 'action/tit_insert.php',
                    type: 'POST',
                    contentType: false,
                    cache: false,
                    processData: false,
                    data: datos,

                    success:function(result) {
                        if(result["error"] != "" && result["error"] !== undefined){
                            alert(result["error"]);
                        }else{
                            console.log("Boton Guardar 03 FUNCIONA.")                      
                        }                    
                    },
                    error:function(jqXHR, textStatus, errorThrown) {
                        alert("Boton Guardar 03 ocurrio ERROR.");
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            });
        </script>                    

        <script>
            // Script para funcionamiento del botón "Limpiar"
            $(document).on( "click", "#erase1", function(event){
                var form = $(this).parents("form");                       
                var el0 = document.getElementById("type-tit_0");
                var el1 = document.getElementById("type-tit_1");
                var el2 = document.getElementById("type-tit_2");
                var el3 = document.getElementById("type-tit_3");

                $(".cif-close").click();
                form.find("input").val("");                                
                el1.classList.remove("active");
                el2.classList.remove("active");
                el3.classList.remove("active");
                el0.innerHTML = "Tipo de Titulación...";
            });
            $(document).on( "click", "#erase2", function(event){
                var form = $(this).parents("form");                
                
                $(".cif-close").click();                                                                                                
            });
            $(document).on( "click", "#erase3", function(event){
                var form = $(this).parents("form");                
                
                $(".cif-close").click();                                                                                                
            });
        </script>
            
        <script>
            // Mini Scripts para Funcionamiento General de la Página

            // Guardado del valor de DropDownList
            $(document).on( "click", "#ddlNormal ul li", function (event){                
                var el1 = document.getElementById("type-tit_1");
                var el2 = document.getElementById("type-tit_2");
                var el3 = document.getElementById("type-tit_3");
                var opc = document.getElementById("opc_estudios");                

                // console.log(el1);
                if (el1.classList.contains("active")) {                                                        
                    opc.setAttribute("value", 1)
                }
                if (el2.classList.contains("active")) {                    
                    opc.setAttribute("value", 2)
                }
                if (el3.classList.contains("active")) {                    
                    opc.setAttribute("value", 3)
                }
            });
            
            // Opciones del Tooltip para Paso 1
            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip({delay: { "show": 200, "hide": 500 }, placement: "right"});
            });

            // Generador de PDFs para Formatos Generales
            $("#genPDF").on("click", function(event) {
                $.ajax({
                    url: 'action/tit_insert.php',
                    type: 'POST',
                    dataType: 'json',
                    data: { tipo: 5 },

                    success:function(result) {
                        if(result["error"] != "" && result["error"] !== undefined){
                            alert(result["error"]);
                        }else{
                            console.log("Boton GeneradorPDF FUNCIONA.")                      
                        }                    
                    },
                    error:function(jqXHR, textStatus, errorThrown) {
                        alert("Boton GeneradorPDF ocurrio ERROR.");
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                // TERMINO DE AJAX
            });

            // Extracción de Datos para Impresiones de Fechas y Lugares
            $(document).ready(function(){
                $.ajax({
                    url: 'action/tit_insert.php',
                    type: 'POST',                    
                    dataType: 'json',
                    data: { tipo: 4 },

                    success:function(result) {
                        if(result["error"] != "" && result["error"] !== undefined){
                            alert(result["error"]);
                        } else {
                            // Datos - Título con Modo de Titulación, del Paso 2
                            switch(result["Desglose_Modalidad"]) {
                                case 1:
                                    $("#title-mod").text("Opción - CENEVAL");
                                    break;
                                case 2:
                                    $("#title-mod").text("Opción - Promedio Meritorio");
                                    break;
                                case 3:
                                    $("#title-mod").text("Opción - Maestría");
                                    break;
                                default:
                                    $("#title-mod").text("Opción - NO DEBERÍAS DE ESTAR AQUÍ");
                                    break;
                            }

                            // Datos - Día y Mes de Fecha Límite, del Paso 2                            
                            date_arr = result["Admin_fLimite"].split("-");
                            aux = parseInt(date_arr[2]);
                            aux = aux.toString();
                            $("#dia2").text(aux);                            
                            switch(parseInt(date_arr[1])) {
                                case 1:
                                    $("#mes2").text("Ene");
                                    break;
                                case 2:
                                    $("#mes2").text("Feb");
                                    break;
                                case 3:
                                    $("#mes2").text("Mar");
                                    break;
                                case 4:
                                    $("#mes2").text("Abr");
                                    break;
                                case 5:
                                    $("#mes2").text("May");
                                    break;
                                case 6:
                                    $("#mes2").text("Jun");
                                    break;
                                case 7:
                                    $("#mes2").text("Jul");
                                    break;
                                case 8:
                                    $("#mes2").text("Ago");
                                    break;
                                case 9:
                                    $("#mes2").text("Sep");
                                    break;
                                case 10:
                                    $("#mes2").text("Oct");
                                    break;
                                case 11:
                                    $("#mes2").text("Nov");
                                    break;
                                case 12:
                                    $("#mes2").text("Dic");
                                    break;
                                default:
                                    $("#mes2").text("IDK");
                                    break;
                            }
                            
                            // Datos - Día y Mes de Fecha Límite de Pago Inicial, del Paso 3
                            date_arr = result["Admin_pinicial"].split("-");
                            aux = parseInt(date_arr[2]);
                            aux = aux.toString();
                            $("#idia3").text(aux);                            
                            switch(parseInt(date_arr[1])) {
                                case 1:
                                    $("#imes3").text("Enero");
                                    break;
                                case 2:
                                    $("#imes3").text("Febrero");
                                    break;
                                case 3:
                                    $("#imes3").text("Marzo");
                                    break;
                                case 4:
                                    $("#imes3").text("Abril");
                                    break;
                                case 5:
                                    $("#imes3").text("Mayo");
                                    break;
                                case 6:
                                    $("#imes3").text("Junio");
                                    break;
                                case 7:
                                    $("#imes3").text("Julio");
                                    break;
                                case 8:
                                    $("#imes3").text("Agosto");
                                    break;
                                case 9:
                                    $("#imes3").text("Septiembre");
                                    break;
                                case 10:
                                    $("#imes3").text("Octubre");
                                    break;
                                case 11:
                                    $("#imes3").text("Noviembre");
                                    break;
                                case 12:
                                    $("#imes3").text("Diciembre");
                                    break;
                                default:
                                    $("#imes3").text("IDK");
                                    break;
                            }

                            // Datos - Día y Mes de Fecha Límite de Pago Final, del Paso 3
                            date_arr = result["Admin_pFinal"].split("-");
                            aux = parseInt(date_arr[2]);
                            aux = aux.toString();
                            $("#fdia3").text(aux);                            
                            switch(parseInt(date_arr[1])) {
                                case 1:
                                    $("#fmes3").text("Enero");
                                    break;
                                case 2:
                                    $("#fmes3").text("Febrero");
                                    break;
                                case 3:
                                    $("#fmes3").text("Marzo");
                                    break;
                                case 4:
                                    $("#fmes3").text("Abril");
                                    break;
                                case 5:
                                    $("#fmes3").text("Mayo");
                                    break;
                                case 6:
                                    $("#fmes3").text("Junio");
                                    break;
                                case 7:
                                    $("#fmes3").text("Julio");
                                    break;
                                case 8:
                                    $("#fmes3").text("Agosto");
                                    break;
                                case 9:
                                    $("#fmes3").text("Septiembre");
                                    break;
                                case 10:
                                    $("#fmes3").text("Octubre");
                                    break;
                                case 11:
                                    $("#fmes3").text("Noviembre");
                                    break;
                                case 12:
                                    $("#fmes3").text("Diciembre");
                                    break;
                                default:
                                    $("#fmes3").text("IDK");
                                    break;
                            }

                            // Datos - Día, Mes, Hora y Lugar de la Toma de Protesta, del Paso 4
                            date_arr = result["Admin_Protesta"].split("-");
                            aux = parseInt(date_arr[2]);
                            aux = aux.toString();
                            $("#pdia4").text(aux);                            
                            switch(parseInt(date_arr[1])) {
                                case 1:
                                    $("#pmes4").text("Enero");
                                    break;
                                case 2:
                                    $("#pmes4").text("Febrero");
                                    break;
                                case 3:
                                    $("#pmes4").text("Marzo");
                                    break;
                                case 4:
                                    $("#pmes4").text("Abril");
                                    break;
                                case 5:
                                    $("#pmes4").text("Mayo");
                                    break;
                                case 6:
                                    $("#pmes4").text("Junio");
                                    break;
                                case 7:
                                    $("#pmes4").text("Julio");
                                    break;
                                case 8:
                                    $("#pmes4").text("Agosto");
                                    break;
                                case 9:
                                    $("#pmes4").text("Septiembre");
                                    break;
                                case 10:
                                    $("#pmes4").text("Octubre");
                                    break;
                                case 11:
                                    $("#pmes4").text("Noviembre");
                                    break;
                                case 12:
                                    $("#pmes4").text("Diciembre");
                                    break;
                                default:
                                    $("#pmes4").text("IDK");
                                    break;
                            }
                            // aux = result["Admin_Lugar"];
                            $("#plugar4").text(result["Admin_Lugar"]);

                            // Datos - Ligas de Documentos para Visualizar
                            $("#a-fg").attr("href", result["Desglose_NombreTitulo"]);
                            $("#a-id").attr("href", result["Alumno_IDOficial"]);
                            $("#a-pago").attr("href", result["Desglose_Comprobante"]);
                        }                    
                    },
                    error:function(jqXHR, textStatus, errorThrown) {
                        alert("Ocurrio ERROR en la extraccion de datos.");
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            });               
        </script>

        <script>
            // Script base para funcionamiento de DropDownList
            let dropdownlist_click = [false,false,false];            
            $(document).ready(function (){
                /***** DROPDOWNLIST *****/
                $('#btnNormal').click({elem: 'Normal'},clickDropdownList);
                $('#btnNormal').blur({elem: 'Normal', index: 0},blurDropdownList);
                $('#ddlNormal ul li').mousedown({index: 0},mousedownDropdownList);
                $('#ddlNormal ul li').mouseup({elem: 'Normal', index: 0},mouseupDropdownList);
                $('#ddlNormal ul li').click(itemDropdownList);                            
            });
        </script>
    </body>
</html>
<?php } else 
    ValidaSesion::salirPagina();