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

{% block stylesheet %}
    <link rel="stylesheet" type="text/css" href="{{asset('bootstrap-select/dist/css/bootstrap-select.css')}}"/>
{% endblock %}

{% block javascripts %}
    <!-- jQuery -->
    <script src="{{asset('js/jquery-ui.js')}}"></script>

    <script src="{{asset('js/misJs/pago.js')}}"></script>
    <script src="{{asset('js/misJs/conveniosPagos.js')}}"></script>
    <script src="{{asset('js/misJs/agregarEvento.js')}}"></script>
    <script src="{{asset('js/misJs/borrarPagos.js')}}"></script>
    <script src="{{asset('js/misJs/pagosTitulacion.js')}}"></script>
    <script src="{{asset('js/misJs/borrarPagos.js')}}"></script>
    <script src="{{asset('js/misJs/borrarPagosTitulacion.js')}}"></script>
    <script src="{{asset('js/misJs/modificarMontoTitulacion.js')}}"></script>
    <script src="{{asset('js/misJs/modificarTablaPagos.js')}}"></script>

    <script src="{{asset('bootstrap-select/dist/js/bootstrap-select.js')}}"></script>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        {% set color = "lightblue" %}
        {% set tipoUsuario = app.session.get('rol') %}
        {% if alumno.estatus.ideEst == 10 %}
            {#  BAJA TEMPORAL #}            
            {% set color = "orange" %}
        {% elseif alumno.estatus.ideEst == 6 %}
            {#  BAJA DEFINITIVA #}
            {% set color = "red" %}
        {% else %}
            {% set color = "lightblue" %}
        {% endif %}


        <div class="row">
            <div class="col-lg-12">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-user mr-1"></i>
                        DATOS GENERALES
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-2 col-xs-12" id="fotoMini">
                                <!--<h4>Alumno</h4>-->
                                {% if alumno.credencial == 1 %}
                                    <img src="{{asset(fotoAlumno)}}" class="img-fluid" style="border-radius: 10px;border: solid 1px blue;height: 10rem;"/>
                                {% else %}
                                    <img src="{{asset(fotoAlumno)}}" class="img-fluid" style="border-radius: 10px;border: solid 1px red;height: 10rem;"/>
                                {% endif %}
                            </div><!-- FIN col-lg-2 col-xs-12 -->

                            <div class="col-lg-10 col-xs-12">
                                <div class="row small g-3">
                                    <div class="col-md-4">
                                        <label class="control-label" for="nombre">Nombre del alumno:</label>
                                        <input type="text" class="form-control form-control-sm" id="nombre" name="nombre" value="{{alumno.apePat}} {{alumno.apeMat}} {{alumno.nomAlu}}" readonly="true">
                                        <input type="hidden" id="idAlu" name="idAlu" value="{{alumno.ideAlu}}">
                                    </div>
                                    <div class="col-md-2">
                                        {% if alumno.modalidad == "SEMESTRAL" %}
                                            <label class="control-label">Semestre:</label>
                                        {% else %}
                                            <label class="control-label">Cuatrimestre:</label>
                                        {% endif %}
                                        <input type="text" class="form-control form-control-sm" id="numero" name="numero" value="{{alumno.numero}}°" readonly="true">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="control-label">Especialidad:</label>
                                        <input type="text" class="form-control form-control-sm" id="nomCar" name="nomCar" value="{{alumno.cveLic.cveNivAca.nombre}} EN {{alumno.cveLic.nomLic}}" readonly="true">
                                        <input type="hidden" class="form-control" id="cveCar" name="cveCar" value="{{alumno.cveLic.ideLic}}" readonly="true">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="control-label" for="numCtl">Matricula:</label>
                                        <input type="text" class="form-control form-control-sm" id="numCtl" name="numCtl" value="{{alumno.cveCtl}}-{{ alumno.ideAlu }}" readonly="true">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label" for="cvePla">Plantel:</label>
                                        <input type="text" class="form-control form-control-sm" id="cvePla" name="cvePla" value="{{alumno.cvePla.nomPla}}" readonly="true">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="control-label" for="fecMov">Fecha de registro:</label>
                                        <input type="text" class="form-control form-control-sm" id="fecMov" name="fecMov" value="{{alumno.fecMov | date('Y-m-d') }}" readonly="true">
                                    </div>
                                    <div class="col-md-2 text-center">
                                        <label class="control-label" for="detalles">*</label>
                                        <a href="{{path('consulta_alumno_dos', {ideAlu: alumno.ideAlu} )}}" class="btn btn-sm btn-info btn-block" target="_blank">Detalles</a>
                                    </div>
                                </div>
                            </div>
                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-12 -->
            <div class="col-lg-4">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-user mr-1"></i>
                        TITULACIÓN
                    </div>
                    <div class="card-body">
                        <div class="row small">
                            {% if titulacion != NULL %}
                                <div class="col-lg-4 p-1">
                                    <label class="alert alert-info" style="padding: 5px;margin-bottom: 5px;width: 100%;">
                                        <i class="fa fa-bookmark fa-fw"></i>  ${{titulacion.costoTramite | number_format(2,".",",")}}
                                    </label>
                                </div><!-- FIN col-lg-4 -->
                                <div class="col-lg-4 p-1">
                                    <label class="alert alert-warning" style="padding: 5px;margin-bottom: 5px;width: 100%;">
                                        <i class="fa fa-coins fa-fw"></i>  ${{pagoTitulacion.abonado | number_format(2,".",",") }}
                                    </label>
                                </div><!-- FIN col-lg-4 -->
                                <div class="col-lg-4 p-1">
                                    <label class="alert alert-danger" style="padding: 5px;margin-bottom: 5px;width: 100%;">
                                        <i class="fa fa-exclamation-triangle fa-fw"></i>  ${{pagoTitulacion.debe | number_format(2,".",",") }}
                                    </label>
                                </div><!-- FIN col-lg-4 -->


                                {% if tipoUsuario == 99 or tipoUsuario == 77 %}
                                    <div class="col-lg-6 p-1 text-right">
                                        <a id="btnTitulacionCambiarCosto" class="btn btn-sm btn-warning" data-toggle="modal" data-target="#myModalTitulacionCambiarCosto" data-backdrop="static" data-keyboard="false">
                                            <i class="fa fa-edit mr-1 fw"></i>Editar Costo
                                        </a>
                                    </div>
                                {% else %}
                                {% endif %}
                                <div class="col-lg-6 p-1 text-right">
                                    <a id="btnTitulacion" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModalTitulacion" data-backdrop="static" data-keyboard="false">
                                        <i class="fa fa-hand-holding-usd mr-1 fw"></i>Abonar
                                    </a>
                                </div>

                            {% else %}
                                <a id="btnTitulacion" class="btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#myModalTitulacion" data-backdrop="static" data-keyboard="false"> INICIAR TRAMITE</a>

                            {% endif %}



                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-4 -->
            <div class="col-lg-4">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-user mr-1"></i>
                        OTROS
                    </div>
                    <div class="card-body">
                        <div class="row">

                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-4 -->
            <div class="col-lg-4">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-user mr-1"></i>
                        CONVENIOS
                    </div>
                    <div class="card-body">
                        <div class="row">

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


            <div class="col-lg-12" style="padding-left: 0px;padding-right: 0px;display: none;">



                <div class="col-lg-12 col-xs-12" style="padding-left: 0px;padding-right: 0px;border: solid 1px #000;">

                    <div class="col-lg-5 col-xs-12" style="margin-top: 10px;border-left: solid 1px #000;">
                        <label>OTROS</label>
                        <select id="otros" name="otros" class="form-control">
                            {% if otros is defined %}
                                {% set nivel = -5 %}
                                {% for o in otros %}
                                    {% if o.cveTra != -1 %}
                                        {% if nivel != o.cveTra %}
                                            {% set nivel = o.cveTra %}
                                            {% if nivel == 0 %}
                                                <optgroup label="OTROS"></optgroup>
                                            {% elseif nivel == 1 %}
                                                <optgroup label="Bachillerato Escolarizado"></optgroup>
                                            {% elseif nivel == 3 %}
                                                <optgroup label="Licenciatura"></optgroup>
                                            {% elseif nivel == 4 %}
                                                <optgroup label="Maestría"></optgroup>
                                            {% elseif nivel == 5 %}
                                                <optgroup label="Doctorado"></optgroup>
                                            {% elseif nivel == 6 %}
                                                <optgroup label="Diplomado"></optgroup>
                                            {% endif %}

                                        {% else %}
                                        {% endif %}
                                        <option value="{{o.ideCosTra}}">{{o.desTra}}-$<i class="pull-right">{{o.monto}}</i></option>
                                    {% else %}
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </select>
                        <a id="btnOtros" class="btn btn-sm btn-info pull-right" data-toggle="modal" data-target="#myModal3">GENERAR RECIBO</a>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="contOtros" style="height: 100px;font-size: smaller;">
                            <table class="table table-striped table-condensed">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>No. RECIBO</th>
                                        <th>CONCEPTO</th>
                                        <th>FECHA</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if otrosPagos is defined and otrosPagos != null %}
                                        {% for o in otrosPagos %}
                                            <tr>
                                                <td>{{loop.index}}</td>
                                                <th>{{o.numeroRecibo}}</th>
                                                <td>{{o.cveTra.desTra}}</td>
                                                <td style="width: 85px;">{{o.fecMov | date('d-m-Y')}}</td>
                                                <td>
                                                    {% if loop.index == 1 %}
                                                        <a id="otro{{o.ideAluTra}}" class="btn btn-xs btn-success btn-block" href="{{path('imprimir_otro',{ideOtro:o.ideAluTra})}}" target="_blank"><i class="fa fa-print fw fa-sm"></i></a>
                                                        {% else %}
                                                        <a id="otro{{o.ideAluTra}}" class="btn btn-xs btn-default btn-block" href="{{path('imprimir_otro',{ideOtro:o.ideAluTra})}}" target="_blank"><i class="fa fa-print fw fa-sm"></i></a>
                                                        {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-5 col-xs-12" style="margin-top: 10px;border-left: solid 1px #000;">
                        <label>CONVENIOS</label>
                        {% if convenios is defined and convenios | length  > 0 %}
                            {% for c in convenios %}
                                <a class="btn btn-info btn-xs" href="{{path('formato_convenio',{'ideCon':c.ideCon})}}" target="_blank">Convenio #{{c.numConvenio}}</a>
                            {% endfor %}
                        {% else %}
                            NO TIENE CONVENIOS REGISTRADOS EN SISTEMA
                        {% endif %}

                        {% if alumno.convenio == 0 %}
                            <a id="btnCrearConvenios" class="btn btn-sm btn-danger pull-right" data-toggle="modal" data-backdrop="static" data-keyboard="true" data-target="#myModalCrearConvenio">CREAR CONVENIO</a>
                        {% endif %}
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="contConvenio" style="height: 159px;">
                            {% if alumno.convenio == 0 %}
                                <label class="label label-success">NO TIENE CONVENIOS</label>
                            {% else %}
                                <table class="table table-condensed table-bordered table-striped table-hover table-responsive">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>MES</th>
                                            <th>MONTO</th>
                                            <th>ABONADO</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% set registros = 0 %}
                                        {% set totalConvenio = 0 %}
                                        {% for pc in pagosConvenio %}
                                            {% set registros = loop.length %}
                                        {% endfor %}
                                        {% for pc in pagosConvenio %}
                                            {% if loop.index == 1%}
                                                <tr style="background-color: orange;">
                                                    <td>{{loop.index}}</td>
                                                    <td>
                                                        {{pc.fecIni | date('d') }}-{{pc.nomMes}}-{{pc.fecIni | date('Y') }}
                                                    </td>
                                                    <td>${{pc.monto}}</td>
                                                    <td>${{pc.deposito}}</td>
                                                    <td>
                                                        {% if pc.monto == pc.deposito %}
                                                            <a class="btn btn-success btn-xs" data-toggle="modal" data-backdrop="static" data-keyboard="true" data-target="#myModalAbonarConvenioOK" onclick="cargarAbonosConvenioOK({{pc.idePagCon}})">Ver pagos</a>
                                                        {% else %}
                                                            <a class="btn btn-info btn-xs" data-toggle="modal" data-backdrop="static" data-keyboard="true" data-target="#myModalAbonarConvenio" onclick="cargarAbonosConvenio({{pc.idePagCon}}, 1)">Abonar</a>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% else %}
                                                <tr>
                                                    <td>{{loop.index}}</td>
                                                    <td>
                                                        {{pc.fecIni | date('d') }}-{{pc.nomMes}}-{{pc.fecIni | date('Y') }}
                                                    </td>
                                                    <td>${{pc.monto}}</td>
                                                    <td>${{pc.deposito}}</td>
                                                    <td>
                                                        {% if pc.monto == pc.deposito %}
                                                            <a class="btn btn-success btn-xs" data-toggle="modal" data-backdrop="static" data-keyboard="true" data-target="#myModalAbonarConvenioOK" onclick="cargarAbonosConvenioOK({{pc.idePagCon}})">Ver pagos</a>
                                                        {% else %}
                                                            <a class="btn btn-info btn-xs" data-toggle="modal" data-backdrop="static" data-keyboard="true" data-target="#myModalAbonarConvenio" onclick="cargarAbonosConvenio({{pc.idePagCon}})">Abonar</a>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endif %}
                                            {% set totalConvenio = totalConvenio + pc.monto %}
                                        {% else %}
                                            <tr>
                                                <td colspan="5">ESTO ES RARO, DEBERÍA DE HABER UN LISTADO DE PAGOS EN EL CONVENIO</td>
                                            </tr>
                                        {% endfor %}
                                        {% if registros > 0 %}
                                            <tr style="background-color: #0CB7F2;">
                                                <td colspan="2">TOTAL A PAGAR</td>
                                                <td>$ {{totalConvenio | number_format(2,".",",") }}</td>
                                            </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            {% endif %}
                        </div>
                    </div>
                </div>








            </div><!-- FIN COL-12    -->






        </div><!-- FIN ROW -->


    </div><!-- FIN container-fluid -->


    <!-- INICIAN VENTANAS MODALES -->

    <!-- 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">
                        {% if alumno.reinscripcion == 0 %}
                            INSCRIPCIÓN
                        {% else %}
                            REINSCRIPCIÓN
                        {% endif %}
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div id="gifI" hidden="true" class="img-responsive">
                                <img src="{{asset('images/load2.gif')}}" />
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="contTablaModI">
                            </div>
                            <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-3 col-sm-3 col-xs-12 text-right">
                                        <label>MODO DE PAGO:</label>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        <select name="modoPagoI" id="modoPagoI" class="form-control">
                                            <option value="default">Selecciona</option>
                                            <option value="0">BOUCHER</option>
                                            <option value="1">EFECTIVO</option>
                                            <option value="2">TRANSFERENCIA</option>
                                            <option value="3">TERMINAL</option>
                                            <!--<option value="99">MARCAR COMO PAGADO</option>-->
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="bancoI">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>FOLIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                        <input name="referenciaI" id="referenciaI" type="text" value="" class="form-control" placeholder="Referencia">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="efectivoI">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>PAGÓ CON:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="pConI" id="pConI" type="text" value="" class="form-control" placeholder="Efectivo">
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                        <label>CAMBIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="cambioI" id="cambioI" type="text" value="" class="form-control" placeholder="Cambio" readonly="true">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                    <label>FECHA:</label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <input name="fechaMovI" id="fechaMovI" type="date" value="{{"now" | date('Y-m-d')}}" class="form-control" readonly="true">
                                </div>
                            </div>

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

        </div>
    </div> <!-- FIN MODAL -->
    <!-- Modal 2 -->
    <div id="myModal2" 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">MENSUALIDAD</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div id="gif3" hidden="true" class="img-responsive" >
                                <img src="{{asset('images/load2.gif')}}" />
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="contTablaMod2">
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="col-md-3 col-sm-3 col-xs-12 text-right">
                                        <label>MODO DE PAGO:</label>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        <select name="modoPago" id="modoPago" class="form-control">
                                            <option value="default">Selecciona</option>
                                            <option value="0">BOUCHER</option>
                                            <option value="1">EFECTIVO</option>
                                            <option value="2">TRANSFERENCIA</option>
                                            <option value="3">TERMINAL</option>
                                            <!--<option value="99">MARCAR COMO PAGADO</option>-->
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="banco">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>FOLIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                        <input name="referencia2" id="referencia2" type="text" value="" class="form-control" placeholder="Folio">
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>PAGÓ A TIEMPO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                        <select id="pagoATiempo" name="pagoATiempo" class="form-control">
                                            <option value="0" selected="true">NO</option>
                                            <option value="1">SI</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="efectivo">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>PAGÓ CON:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="pCon" id="pCon" type="text" value="" class="form-control" placeholder="Efectivo">
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                        <label>CAMBIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="cambio" id="cambio" type="text" value="" class="form-control" placeholder="Cambio" readonly="true">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                    <label>FECHA:</label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <input name="fechaMov2" id="fechaMov2" type="date" value="{{"now" | date('Y-m-d')}}" class="form-control" readonly="true">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnModPagarMes">PAGAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCancelarMes">CANCELAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL 2 -->
    <!-- Modal 3 -->
    <div id="myModal3" 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">OTROS CARGOS</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div id="gif4" hidden="true" class="img-responsive" >
                                <img src="{{asset('images/load2.gif')}}" />
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="contTablaMod3">
                            </div>
                            <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-3 col-sm-3 col-xs-12 text-right">
                                        <label>MODO DE PAGO:</label>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-12">
                                        <select name="modoPago3" id="modoPago3" class="form-control">
                                            <option value="default">Selecciona</option>
                                            <option value="0">BOUCHER</option>
                                            <option value="1">EFECTIVO</option>
                                            <option value="2">TRANSFERENCIA</option>
                                            <option value="3">TERMINAL</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="banco3">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>FOLIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-6">
                                        <input name="referencia3" id="referencia3" type="text" value="" class="form-control" placeholder="Folio">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="efectivo3">
                                    <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                        <label>PAGÓ CON:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="pCon3" id="pCon3" type="text" value="" class="form-control" placeholder="Efectivo">
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                        <label>CAMBIO:</label>
                                    </div>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input name="cambio3" id="cambio3" type="text" value="" class="form-control" placeholder="Cambio" readonly="true">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                    <label>FECHA:</label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-12">
                                    <input name="fechaMov3" id="fechaMov3" type="date" value="{{"now" | date('Y-m-d')}}" class="form-control" readonly="true">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnModPagarOtros">PAGAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCancelarotros">CANCELAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL 3 -->
    <!-- Modal R -->
    <div id="myModalR" 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">REINSCRIPCION</h4>
                    {% if banderaRec is defined%}
                        <input type="hidden" id="banRec" name="banRec" value="{{banderaRec}}">
                    {% else %}
                        <input type="hidden" id="banRec" name="banRec" value="">
                    {% endif %}
                </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">
                                    {% if alumno.modalidad == "SEMESTRAL" %}
                                        <label>SEMESTRE ACTUAL:</label>
                                    {% else %}
                                        <label>CUATRIMESTRE ACTUAL:</label>
                                    {% endif %}
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="nR" id="nR" type="number" value="{{alumno.numero}}" class="form-control" readonly="true">
                                </div>
                            </div>
                            <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">
                                    {% if alumno.modalidad == "SEMESTRAL" %}
                                        <label>INGRESA EL NUMERO DE SEMESTRE:</label>
                                    {% else %}
                                        <label>INGRESA EL NUMERO DE CUATRIMESTRE:</label>
                                    {% endif %}
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="numeroR" id="numeroR" type="number" value="" class="form-control">
                                </div>
                            </div>
                            <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>FECHA DE INICIO:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="fechaInicio" id="fechaInicio" type="date" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="btnModR">CREAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCancelarR">CANCELAR</button>
                </div>
            </div>

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

    <!-- Modal CREAR CONVENIO -->
    <div id="myModalCrearConvenio" 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">CREAR CONVENIO</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorCrearConvenio">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal" id="btnModGuardarConvenio">GUARDAR CONVENIO</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCancelarConvenio">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL CREAR CONVENIO -->
    <!-- Modal ABONAR CONVENIO -->
    <div id="myModalAbonarConvenio" 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">ABONAR CONVENIO</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorAbonarConvenio">
                        </div>
                        <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-3 col-sm-3 col-xs-12 text-right">
                                    <label>MODO DE PAGO:</label>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <select name="modoPagoConvenio" id="modoPagoConvenio" class="form-control">
                                        <option value="default">Selecciona</option>
                                        <option value="0">BOUCHER</option>
                                        <option value="1">EFECTIVO</option>
                                        <option value="2">TRANSFERENCIA</option>
                                        <option value="3">TERMINAL</option>
                                    </select>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-12 text-right">
                                    <label>MONTO A ABONAR:</label>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-12">
                                    <input type="number" name="montoAbonoC" id="montoAbonoC" class="form-control text-right" min="0" placeholder="$ 0.00">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="bancoC">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                    <label>FOLIO:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-6">
                                    <input name="referenciaConvenio" id="referenciaConvenio" type="text" value="" class="form-control" placeholder="Folio">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="efectivoC">
                                <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                    <label>PAGÓ CON:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input name="pConC" id="pConC" type="number" value="" class="form-control" placeholder="Efectivo">
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                    <label>CAMBIO:</label>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input name="cambioC" id="cambioC" type="number" value="" class="form-control" placeholder="Cambio" readonly="true">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-12 text-right">
                                <label>FECHA:</label>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12">
                                <input name="fechaMovC" id="fechaMovC" type="date" value="{{"now" | date('Y-m-d')}}" class="form-control" readonly="true">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnModAbonarConvenio">ABONAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarAbonarConvenio">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL ABONAR CONVENIO -->
    <!-- Modal ABONAR CONVENIO OK-->
    <div id="myModalAbonarConvenioOK" 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">LISTA DE ABONOS DEL CONVENIO</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorAbonosDelConvenio">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnModAbonarConvenio">ABONAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarAbonarConvenio">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL ABONAR CONVENIO OK-->
    <!-- Modal CREAR EVENTOS -->
    <div id="myModalEventos" 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">AGREGAR EVENTOS</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorAgregarEvento">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnModAgregarEvento">AGREGAR</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarAgregarEvento">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL AGREGAR EVENTO -->
    <!-- Modal myModalTitulacion -->
    <div class="modal fade" id="myModalTitulacion" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="ventanaModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-xl">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ventanaModalLabel">
                        PAGOS DE TITULACIÓN
                    </h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorAgregarPagoTitulacion">
                        </div>
                        <div class="col-lg-12 mt-3">
                            <div class="card border-secondary mb-1">
                                <div class="card-header bg-secondary border-secondary text-white">
                                    <i class="fas fa-money-check-alt mr-1"></i>
                                    AGREGAR ABONOS
                                </div>
                                <div class="card-body">
                                    <div class="row small">
                                        <div class="col-lg-4">
                                            <label class="control-label">MONTO:</label>
                                            <input type="number" id="montoAbonarTitulacion" name="montoAbonarTitulacion" value="" placeholder="$0.00" class="form-control text-right">
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="control-label">MODO DE PAGO:</label>
                                            <select name="modoPagoTitulacion" id="modoPagoTitulacion" class="form-select">
                                                <option value="default">Selecciona</option>
                                                <option value="0">BOUCHER</option>
                                                <option value="1">EFECTIVO</option>
                                                <option value="2">TRANSFERENCIA</option>
                                                <option value="3">TERMINAL</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4" id="bancoT">
                                            <label class="control-label">FOLIO:</label>
                                            <input name="referenciaTitulacion" id="referenciaTitulacion" type="text" value="" class="form-control" placeholder="Folio">
                                        </div>
                                        <div class="col-lg-12 text-right mt-3">
                                            <input type="button" value="AGREGAR PAGO" class="btn btn-sm btn-success" onclick="agregarPagoTitulacion();" id="btnAgregarPagoTitulacion" name="btnAgregarPagoTitulacion">
                                        </div>


                                    </div><!-- FIN row small -->
                                </div><!-- FIN card-body -->
                            </div><!-- FIN card -->



                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarAgregarPagoTitulacion">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL AGREGAR EVENTO -->
    <!-- Modal myModalEliminarPagosColegiatura -->
    <div id="myModalEliminarPagosColegiatura" 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">ELIMINAR PAGOS v1</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorDetallesIngresoAEliminar">
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorDetallesPagoEliminado">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarEliminarIngreso">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL ELIMINAR INGRESO PAGOS COLEGIATURA -->
    <!-- Modal myModalEliminarPagostITULACION -->
    <div id="myModalEliminarPagosTitulacion" 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">ELIMINAR PAGOS TITULACIÓN</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorDetallesIngresoTitulacionAEliminar">
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorDetallesPagoTitulacionEliminado">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarEliminarIngresoTitulacion">CERRAR</button>
                </div>
            </div>

        </div>
    </div> <!-- FIN MODAL ELIMINAR INGRESO TITULACION PAGOS COLEGIATURA -->
    <!-- VENTANA MODAL EDITAR COSTO DE TITULACION -->
    <div id="myModalTitulacionCambiarCosto" class="modal fade" role="dialog">
        <div class="modal-dialog modal-xl">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header text-white" style="background-color: #336375;">
                    <h5 class="modal-title">CAMBIAR COSTO DE TITULACIÓN</h5>
                    <button type="button" class="btn-close bg-white" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row small">

                        <div class="col-lg-4">
                            <label>COSTO ACTUAL:</label>
                            <div id="contenedorCostoTitulacionActual">
                                <input type="text" id="costoTitulacionActual" name="costoTitulacionActual" value="" placeholder="$0.00" class="form-control form-control-sm text-right" readonly="true">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <label>NUEVO MONTO:</label>
                            <input type="number" id="costoTitulacionNuevo" name="costoTitulacionNuevo" value="" placeholder="$0.00" class="form-control form-control-sm text-right">
                        </div>
                        <div class="col-lg-2">
                            <label>*</label>
                            <input type="button" value="MODIFICAR COSTO" class="btn btn-sm btn-success btn-block" onclick="modificarCostoTitulacionDirecta();" id="btnModificarCostoTitulacion" name="btnModificarCostoTitulacion">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"  id="btnModCerrarCambiarCostoTitulacion">CERRAR</button>
                </div>
            </div>

        </div>
    </div><!-- TERMINA VENTANA MODAL EDITAR COSTO TITULACION -->
    <!-- VENTANA MODAL EDITAR TABLA DE PAGO -->
    <div id="myModalEditarTablaPago" 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">EDITAR TABLA DE PAGOS</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12" id="contenedorEditarTablaPago">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCerrarCambiarTablaPago">CERRAR</button>
                </div>
            </div>

        </div>
    </div><!-- TERMINA VENTANA MODAL EDITAR TABLA DE PAGOS -->



    <!-- TERMINAN VENTANAS MODALES -->


{% endblock %}