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

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

        .form-control.valid {
            border-color: green;
            color: green;
        }

        .error {
            color: red;
        }
    </style>
{% endblock %}

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

{% block content %}
    {% set externo = app.session.get('externo') %}
    <div class="container-fluid">
        <h1 class="mt-4">REGISTRO DE ALUMNO: Especialidad</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{ path('cm_homepage') }}">Tablero</a></li>
            <li class="breadcrumb-item active">Especialidad</li>
        </ol>
        <div class="row">
            <div class="col-lg-12">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info 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="row small" action="{{ path('alta_alumno') }}" method="POST"
                                      id="formulario-alumno-licenciatura">
                                    <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-3">
                                                            <label class="control-label" for="tipoAlumno">Tipo
                                                                Registro:</label>
                                                            <select id="tipoAlumno" name="tipoAlumno"
                                                                    class="form-select form-control-sm" readonly="true">
                                                                {# <option value="default">Selecciona</option> #}
                                                                <option value="13" selected="true">ESPECIALIDAD</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label" for="staAlu">Estatus:</label>
                                                            <select id="staAlu" name="staAlu"
                                                                    class="form-select form-control-sm" readonly="true">
                                                                <option value="default">Selecciona</option>
                                                                {% if estatus is defined %}
                                                                    {% for e in estatus %}
                                                                        {% if e.tipEst == 4 %}
                                                                            {% if e.cveEst == "API" %}
                                                                                <option value="{{ e.ideEst }}"
                                                                                        selected="true">{{ e.desEst }}</option>
                                                                            {% else %}
                                                                                {% if externo == 0 %}
                                                                                    <option value="{{ e.ideEst }}">{{ e.desEst }}</option>
                                                                                {% else %}
                                                                                {% endif %}
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                {% endif %}
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label" for="fecEgr">Fec.
                                                                Bachillerato:</label>
                                                            <input type="date" class="form-control form-control-sm"
                                                                   id="fecEgr" name="fecEgr">
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="control-label" for="fecIng">Inicio de
                                                                Ciclo:</label>
                                                            <input type="date" class="form-control form-control-sm"
                                                                   id="fecIng" name="fecIng">
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="control-label" for="cveEsc">Plantel:</label>
                                                            <select class="form-select form-control-sm" id="cveEsc"
                                                                    name="cveEsc">
                                                                <option value="default">Selecciona</option>
                                                                {% if planteles is defined %}
                                                                    {% for p in planteles %}
                                                                        <option value="{{ p.idePla }}">{{ p.nomPla }}</option>
                                                                    {% endfor %}
                                                                {% endif %}
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <label class="control-label"
                                                                   for="modalidad">Modalidad:</label>
                                                            <select class="form-select form-control-sm" id="modalidad"
                                                                    name="modalidad">
                                                                <option value="default">Selecciona</option>
                                                                <option value="SEMESTRAL">SEMESTRAL</option>
                                                                <option value="CUATRIMESTRAL">CUATRIMESTRAL</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="control-label"
                                                                   for="cveCar">Especialidad:</label>
                                                            <div id="gifL" hidden="true" class="img-responsive">
                                                                <img src="{{ asset('images/load2.gif') }}"/>
                                                            </div>
                                                            <div id="contLicenciaturas">
                                                                <select class="form-select form-control-sm" id="cveCar"
                                                                        name="cveCar">
                                                                    <option value="default">Selecciona</option>
                                                                    {% if licenciaturas is defined %}
                                                                        {% for l in licenciaturas %}
                                                                            <option value="{{ l.ideLic }}">{{ l.nomLic }}</option>
                                                                        {% endfor %}
                                                                    {% endif %}
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div id="numeroSemestre">
                                                                <label class="control-label" for="numSem">Num.
                                                                    Semestre:</label>
                                                                <input type="number"
                                                                       class="form-control form-control-sm" id="numSem"
                                                                       name="numSem" min="1" value="1" readonly="true">
                                                            </div>
                                                            <div id="numeroCuatrimestre">
                                                                <label class="control-label" for="numCua">Num.
                                                                    Cuatrimestre:</label>
                                                                <input type="number"
                                                                       class="form-control form-control-sm" id="numCua"
                                                                       name="numCua" min="1" value="1" readonly="true">
                                                            </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><!-- FIN ACORDDION BODY -->
                                            </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><!-- FIN accordionExample -->

                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </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 PLANTEL DE PROCEDENCIA</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 PLANTEL:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="procedencia" id="procedencia" type="text" class="form-control">
                                </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 -->

{% endblock %}