{% extends 'CmBundle:Z:baseDos.html.twig' %}

{% block stylesheet %}
    <style>
        .error {
            color: red;
            border-color: red;
        }

        form.form-titulacion label.error {
            display: none;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/misJs/alumnoTitulacion2.js') }}"></script>
    <script src="{{ asset('js/misJs/validacionAlumnoTitulacionDos.js') }}"></script>
{% endblock %}

{% block content %}
    {% set tipoUsuario = app.session.get('rol') %}

    <div class="container-fluid">
        <h1 class="mt-4">REGISTRO DE ALUMNO: Titulación Directa</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{ path('cm_homepage') }}">Tablero</a></li>
            <li class="breadcrumb-item active">TD</li>
        </ol>
        <div class="row">
            <div class="col-lg-12">
                <div class="card border-warning mb-1">
                    <div class="card-header bg-warning border-warning text-white">
                        <i class="fas fa-graduation-cap mr-1"></i>
                        LLENAR EL SIGUIENTE FORMULARIO
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <!--<form class="form-horizontal" action="{path('alta_alumno_titulacion')}}" method="POST" onsubmit="return checkSubmit();" id="form-titulacion"> -->
                                <form class="row small" action="{{ path('alta_alumno_titulacion') }}" method="POST"
                                      id="form-titulacion">
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne">
                                                <button class="accordion-button" type="button">
                                                    DATOS PERSONALES
                                                </button>
                                            </h2>
                                            <div id="collapseOne" aria-labelledby="headingOne"
                                                 data-bs-parent="#accordionExample">
                                                <div class="accordion-body"
                                                     style="border-left: 1px solid lightgray;border-right: 1px solid lightgray;">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <label class="control-label" for="apePat">Primer
                                                                Apellido:</label>
                                                            <input type="text" class="form-control form-control-sm"
                                                                   id="apePat" name="apePat"
                                                                   placeholder="Primer Apellido"
                                                                   style="text-transform: uppercase;" autofocus="true">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="control-label" for="apeMat">Segundo
                                                                Apellido:</label>
                                                            <input type="text" class="form-control form-control-sm"
                                                                   id="apeMat" name="apeMat"
                                                                   placeholder="Segundo Apellido"
                                                                   style="text-transform: uppercase;">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="control-label" for="nomAlu">Nombre(s):</label>
                                                            <input type="text" class="form-control form-control-sm"
                                                                   id="nomAlu" name="nomAlu"
                                                                   placeholder="Nombre o nombres"
                                                                   style="text-transform: uppercase;">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="control-label" for="curp">CURP:</label>
                                                            <input type="text" class="form-control form-control-sm"
                                                                   id="curp" name="curp" placeholder="CURP"
                                                                   style="text-transform: uppercase;"
                                                                   onblur="curp2date(this.value);">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="control-label" for="sexAlu">Género:</label>
                                                            <select id="sexAlu" name="sexAlu"
                                                                    class="form-select form-control-sm">
                                                                <option value="default">Selecciona</option>
                                                                <option value="1">Mujer</option>
                                                                <option value="0">Hombre</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="control-label" for="fecNac">Fec.
                                                                Nacimiento:</label>
                                                            <input type="date" class="form-control form-control-sm"
                                                                   id="fecNac" name="fecNac">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="control-label" for="edad">Edad:</label>
                                                            <input type="number" class="form-control form-control-sm"
                                                                   id="edad" name="edad">
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingTwo">
                                                <button class="accordion-button" type="button">
                                                    DATOS ACADÉMICOS
                                                </button>
                                            </h2>
                                            <div id="collapseTwo" aria-labelledby="headingTwo"
                                                 data-bs-parent="#accordionExample">
                                                <div class="accordion-body"
                                                     style="border-left: 1px solid lightgray;border-right: 1px solid lightgray;">

                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="row">
                                                                <div class="col-md-5">
                                                                    <label class="control-label" for="tipoAlumno">Tipo
                                                                        Registro:</label>
                                                                    <select id="tipoAlumno" name="tipoAlumno"
                                                                            class="form-select form-control-sm"
                                                                            readonly="true">
                                                                        <option value="8" selected="true">TITULACIÓN
                                                                            DIRECTA
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="row pb-2">
                                                                <div class="col-md-10 pb-2"
                                                                     style="border: solid 1px #ffc107;">
                                                                    <label class="control-label" for="ideCordinador">Cordinador:</label>
                                                                    <div id="gifCord" hidden="true"
                                                                         class="img-responsive">
                                                                        <img src="{{ asset('images/load2.gif') }}"/>
                                                                    </div>
                                                                    <div id="contCordinador">
                                                                        <select id="ideCordinador" name="ideCordinador"
                                                                                class="form-select form-control-sm">
                                                                            <option value="default">Selecciona</option>
                                                                            {% if cordinadores is defined %}
                                                                                {% for c in cordinadores %}
                                                                                    <option value="{{ c.ideCorTit }}">{{ c.nomCor }}</option>
                                                                                {% endfor %}
                                                                            {% endif %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                {#
                                                                <div class="col-md-2 pb-2" style="border: solid 1px #ffc107;">
                                                                    <label class="control-label" for="bntModCord">.</label>
                                                                    <input type="button" class="btn btn-primary btn-sm btn-block" value="NUEVO" data-toggle="modal" data-target="#myModalCord" id="bntModCord">
                                                                </div>
                                                                #}
                                                            </div>


                                                        </div>
                                                        {# <div class="col-md-6">
                                                            <div class="row pb-2">
                                                                <div class="col-md-10 pb-2" style="border: solid 1px #ffc107;">
                                                                    <label class="control-label" for="contProcedencias">Instituto de Egreso:</label>
                                                                    <div id="gif2" hidden="true" class="img-responsive">
                                                                        <img src="{{asset('images/load2.gif')}}" />
                                                                    </div>
                                                                    <div id="contProcedencias">
                                                                        <select id="escProcedencia" name="escProcedencia" class="form-select form-control-sm">
                                                                            <option value="default">Selecciona</option>
                                                                            {% if procedencias is defined %}
                                                                                {% for p in procedencias %}
                                                                                    <option value="{{p.ideInsEgr}}">{{p.nomIns}}</option>
                                                                                {% endfor %}
                                                                            {% endif %}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-2 pb-2" style="border: solid 1px #ffc107;">
                                                                    <label class="control-label" for="btnModEgreso">.</label>
                                                                    <input type="button" class="btn btn-primary btn-sm btn-block" value="NUEVO" data-toggle="modal" data-target="#myModal" id="btnModEgreso">
                                                                </div>
                                                            </div>
                                                        </div> #}

                                                        <div class="col-md-3">
                                                            <label class="control-label" for="fecEgr">Fecha del
                                                                Certificado:</label>
                                                            <input type="date" class="form-control form-control-sm"
                                                                   id="fecEgr" name="fecEgr" required>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label" for="nivel">Nivel:</label>
                                                            <div id="contNiveles">
                                                                <select class="form-select form-control-sm" id="nivel"
                                                                        name="nivel">
                                                                    <option value="default">Selecciona</option>
                                                                    <option value="lic">Licenciatura</option>
                                                                    <option value="mae">Maestría</option>
                                                                    <option value="doc">Doctorado</option>
                                                                    <option value="esp">Especialidad</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div id="gifCT" hidden="true" class="img-responsive">
                                                                <img src="{{ asset('images/load2.gif') }}"/>
                                                            </div>
                                                            <label class="control-label" for="cveCar" id="etqLic">Licenciatura:</label>
                                                            <label class="control-label" for="cveCar" id="etqMae">Maestría:</label>
                                                            <label class="control-label" for="cveCar" id="etqDoc">Doctorado:</label>
                                                            <label class="control-label" for="cveCar" id="etqEsp">Especialidad:</label>
                                                            <div id="contLicenciaturasTitulacion">
                                                                <select class="form-select form-control-sm" id="cveCar"
                                                                        name="cveCar">
                                                                    <option value="default">Selecciona</option>
                                                                    {% if carreras is defined %}
                                                                        {% for c in carreras %}
                                                                            <option value="{{ c.ideLicTit }}">{{ c.nomLic }}</option>
                                                                        {% endfor %}
                                                                    {% endif %}
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label" for="cT">Costo
                                                                del Trámite:</label>
                                                            <div id="contInscripcion">
                                                                <input type="number" step="any" id="cT" name="cT"
                                                                       class="form-control form-control-sm" value="0.0"
                                                                       style="text-align: right;">
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingThree">
                                                <button class="accordion-button" type="button">
                                                    REQUISITOS
                                                </button>
                                            </h2>
                                            <div id="collapseThree" aria-labelledby="headingThree"
                                                 data-bs-parent="#accordionExample">
                                                <div class="accordion-body"
                                                     style="border-left: 1px solid lightgray;border-right: 1px solid lightgray;border-bottom: 1px solid lightgray;">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="row">
                                                                <div class="col-12 text-center">
                                                                    <h3 style="padding: 0px;margin: 0px;"><strong>ORIGINALES</strong>
                                                                    </h3>
                                                                </div>
                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="cerPre">1.-
                                                                        Certificado de Bachillerato</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="cerPre" name="cerPre"
                                                                               class="form-check-input">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="actNac">2.-
                                                                        Acta de Nacimiento Certificada</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="actNac" name="actNac"
                                                                               class="form-check-input">
                                                                    </div>
                                                                </div>
                                                            </div><!-- FIN ROW -->

                                                        </div><!-- col-sm-6 -->
                                                        <div class="col-sm-6">
                                                            <div class="row">
                                                                <div class="col-12 text-center">
                                                                    <h3 style="padding: 0px;margin: 0px;">
                                                                        <strong>COPIAS</strong></h3>
                                                                </div>

                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="cerPre2">1.-
                                                                        Certificado de Bachillerato</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="cerPre2"
                                                                               name="cerPre2" class="form-check-input">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="actNac2">2.-
                                                                        Acta de Nacimiento</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="actNac2"
                                                                               name="actNac2" class="form-check-input">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="copCurp2">3.-
                                                                        CURP validada de Internet</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="copCurp2"
                                                                               name="copCurp2" class="form-check-input">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-8 text-right">
                                                                    <label class="form-check-label" for="cerMed2">4.-
                                                                        IFE o INE (3 copias)</label>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="form-check form-switch">
                                                                        <input type="checkbox" id="cerMed2"
                                                                               name="cerMed2" class="form-check-input">
                                                                    </div>
                                                                </div>
                                                            </div><!-- FIN ROW -->

                                                        </div><!-- col-sm-6 -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion-item">
                                            <div id="collapseFour" aria-labelledby="headingFour"
                                                 data-bs-parent="#accordionExample">
                                                <div class="accordion-body"
                                                     style="border-left: 1px solid lightgray;border-right: 1px solid lightgray;border-bottom: 1px solid lightgray;">
                                                    <div class="row">
                                                        <div class="col-sm-12 text-right">
                                                            <button type="submit" class="btn btn-success btn-block"
                                                                    id="btnGuardarRegistro"><strong>Registrar</strong>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>


                            </div><!-- FIN col-lg-12 -->
                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-12 -->


        </div><!-- FIN row -->
    </div>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="background-color: #C9DAE1;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">REGISTRAR NUEVO INSTITUTO DE EGRESO</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                    <label>NOMBRE DEL INSTITUTO:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="procedencia" id="procedencia" type="text" class="form-control"
                                           onkeyup="this.value = this.value.toUpperCase();">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnGuardarProcedencia">
                        GUARDAR
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnModCancelar">CANCELAR
                    </button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL -->
    <!-- Modal CORDINADORES-->
    <div id="myModalCord" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="background-color: #C9DAE1;">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">REGISTRAR NUEVO CORDINADOR</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                    <label>NOMBRE:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="nomCordinador" id="nomCordinador" type="text" class="form-control"
                                           onkeyup="this.value = this.value.toUpperCase();">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnGuardarCordinador">
                        GUARDAR
                    </button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnModCancelarCordinador">
                        CANCELAR
                    </button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL CORDINADORES-->

{% endblock %}