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

{% block stylesheet %}
{% 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/pagosTitulacion.js')}}"></script>
    <script src="{{asset('js/misJs/borrarPagosTitulacion.js')}}"></script>
    <script src="{{asset('js/misJs/modificarMontoTitulacion.js')}}"></script>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        {% set tipoUsuario = app.session.get('rol') %}

        {% set color = "lightblue" %}

        {% 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-6">
                                        <label class="control-label" for="nomCar">Titulación directa en:</label>
                                        <input type="text" class="form-control form-control-sm" id="nomCar" name="nomCar" value="{{ especialidad.cveNivAca.nombre }} EN {{especialidad.nomLic}}" readonly="true">
                                        <input type="hidden" id="cveCar" name="cveCar" value="{{especialidad.ideLicTit}}">
                                    </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}}" readonly="true">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="control-label" for="cvePla">Plantel/Coordinador:</label>
                                        <input type="text" class="form-control form-control-sm" id="cvePla" name="cvePla" value="{{titulacion.cord.nomCor}}" readonly="true">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="control-label" for="fecMov">Fecha de registro:</label>
                                        <input type="date" 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">
                                        <label class="control-label" for="colegiatura">Costo del tramite:</label>
                                        <input type="text" class="form-control form-control-sm" id="colegiatura" name="colegiatura" value="$ {{alumno.costoInscripcion | number_format(2,".",",") }}" readonly="true">
                                    </div>
                                    {% if tipoUsuario == 99 or tipoUsuario == 77 %}
                                        <div class="col-md-2 text-center">
                                            <label class="control-label" for="colegiatura">*</label>
                                            <a  class="btn btn-sm btn-primary btn-block" data-toggle="modal" data-target="#myModalTitulacionCambiarCosto" data-backdrop="static" data-keyboard="false" onclick="validarMontoTitulacion();">
                                                Editar Costo
                                            </a>
                                        </div>
                                    {% endif %}
                                    <div class="col-md-2 text-center">
                                        <label class="control-label" for="detalles">*</label>
                                        <a id="detalles" href="{{path('consulta_alumno_dos', {ideAlu: alumno.ideAlu} )}}" class="btn btn-sm btn-info btn-block" target="_self">
                                            Detalles
                                        </a>
                                    </div>


                                </div><!-- FIN row small g-3 -->
                            </div><!-- FIN col-lg-10 -->

                        </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><!-- FIN row -->
    </div><!-- FIN container-fluid -->









    <!-- INICIAN VENTANAS MODALES -->

    <!-- 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>
                                            <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="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 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 CREAR 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>
                                        <option value="99">MARCAR COMO PAGADO</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 CREAR CONVENIO -->
    <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 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" style="background-color: #C9DAE1;">
                    <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">
                            <div class="panel-body" style="padding-top: 0px;">
                                <div class="row">
                                    <div class="col-lg-12" style="border-top: solid 2px green;">
                                        <h4>AGREGAR PAGO</h4>
                                    </div>

                                    <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 form-control-sm text-right">
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="control-label">MODO DE PAGO:</label>
                                        <select name="modoPagoTitulacion" id="modoPagoTitulacion" class="form-select form-control-sm">
                                            <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-4" id="bancoT">
                                        <label class="control-label">FOLIO:</label>
                                        <input name="referenciaTitulacion" id="referenciaTitulacion" type="text" value="" class="form-control form-control-sm" 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 -->


                            </div>
                        </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="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 -->


    <!-- TERMINAN VENTANAS MODALES -->
{% endblock %}