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

{% block stylesheet %}
    <link href="{{asset('js/jquery-ui.css')}}" rel="stylesheet" type="text/css">
{% endblock %}

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

{% endblock %}

{% block content %}
    <div class="row">
        <div class="form-horizontal col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <h3 class="text-left">DATOS DEL ALUMNO</h3>
            {% if alumno is defined %}
                <div class="form-group">
                    <label class="control-label col-sm-2 col-xs-12">Nombre:</label>
                    <div class="col-sm-10 col-xs-12">
                        <input type="text" class="form-control" id="nombre" name="nombre" value="{{alumno.apePat}} {{alumno.apeMat}} {{alumno.nomAlu}}" readonly="true">
                        <input type="hidden" class="form-control" id="idAlu" name="idAlu" value="{{alumno.ideAlu}}" readonly="true">
                        <input type="hidden" class="form-control" id="idApo" name="idApo" value="{{alumno.cveBeca.monto}}" readonly="true">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2 col-sm-6 col-xs-6">Num. Ctl.</label>
                    <div class="col-md-3 col-sm-6 col-xs-6">
                        <input type="text" class="form-control" id="numCtl" name="numCtl" value="{{alumno.cveCtl}}" readonly="true">
                    </div>
                    <label class="control-label col-md-3 col-sm-6 col-xs-6">Fec. Inscripción</label>
                    <div class="col-md-4 col-sm-6 col-xs-6">
                        <input type="date" class="form-control" id="fecMov" name="fecMov" value="{{alumno.fecMov | date('Y-m-d') }}" readonly="true">
                    </div>
                </div>
                <div class="form-group">
                    {% if alumno.tipoAlumno <= 2 %}
                        <label class="control-label col-md-3 col-sm-6 col-xs-12 text-left">Bachillerato</label>
                    {% elseif alumno.tipoAlumno == 3 %}
                        <label class="control-label col-md-3 col-sm-6 col-xs-12 text-left">Licenciatura</label>
                    {% elseif alumno.tipoAlumno == 4 %}
                        <label class="control-label col-md-3 col-sm-6 col-xs-12 text-left">Maestria</label>
                    {% elseif alumno.tipoAlumno == 5 %}
                        <label class="control-label col-md-3 col-sm-6 col-xs-12 text-left">Doctorado</label>
                        {% elseif alumno.tipoAlumno == 7 %}
                        <label class="control-label col-md-3 col-sm-6 col-xs-12 text-left">Retroactivo</label>
                    {% endif %}
                    <div class="col-md-9 col-sm-6 col-xs-12">
                        <input type="text" class="form-control" id="nomCar" name="nomCar" value="{{alumno.cveLic.nomLic}}" readonly="true">
                        <input type="hidden" class="form-control" id="cveCar" name="cveCar" value="{{alumno.cveLic.ideLic}}" readonly="true">
                        {#<input type="hidden" class="form-control" id="cosCol" name="cosCol" value="{{alumno.cveCol.monto}}" readonly="true">#}
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-sm-6 col-xs-12">
                        <a href="{{path('consulta_alumno_dos', {ideAlu: alumno.ideAlu} )}}" class="btn btn-sm btn-info" target="_blank">Detalles</a>
                    </div>
                </div>
                <div class="form-group text-right" id="contInscripcion">

                </div>
            {% endif %}
        </div>
        <div class="form-horizontal col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <h3>CAJA</h3>
            <div class="form-horizontal col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="form-horizontal col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 10px;">
                    <a id="btnHistorial" class="btn btn-sm btn-success" href="{{path('imprimir_historial_pagos',{ideAlu:alumno.ideAlu})}}" target="_blank" style="width: 165px;">IMPRIMIR HISTORIAL</a>
                </div>
            </div>

            <div class="col-lg-12 col-xs-12">
                <div class="form-horizontal col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 10px;">
                    <label>OTROS</label>
                    <select id="otros" name="otros" class="form-control">
                        {% if otros is defined %}
                            {% for o in otros %}
                                <option value="{{o.ideCosTra}}">{{o.desTra}}</option>
                            {% endfor %}
                        {% endif %}
                    </select>
                    <a id="btnOtros" class="btn btn-sm btn-primary " 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;">
                        <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" href="{{path('imprimir_otro',{ideOtro:o.ideAluTra})}}" target="_blank">COMPROBANTE</a>
                                                {% else %}
                                                    <a id="otro{{o.ideAluTra}}" class="btn btn-xs btn-info" href="{{path('imprimir_otro',{ideOtro:o.ideAluTra})}}" target="_blank">COMPROBANTE</a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-12 col-xs-12">
            <div id="gifTablaAlumno" hidden="true" class="img-responsive" >
                <img src="{{asset('images/load2.gif')}}" />
            </div>
            <div class="table-responsive" id="conTablaAlumno">
                <h3>HISTORIAL DE PAGOS</h3>
                <table class="table table-bordered table-condensed table-hover table-striped" style="font-size: smaller;">
                    <thead>
                        <tr>
                            <th>NP</th>
                            <th>CONCEPTO</th>
                            <th>MONTO</th>
                            <th>DEPOSITO</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if pagosConAbonos is defined%}
                            {% set suma = 0 %}
                            {% set sumaAbonado = 0 %}
                            {%for p in pagosConAbonos %}
                                <tr>
                                    <td>{{loop.index}}</td>
                                    <td>{{p[0].descripcion}}</td>
                                    <td class="text-right">${{p[0].monto | number_format(2,'.',',') }}</td>
                                    {% if p[0].monto == p[1] %}
                                        <td style="background-color: #5cb85c; color: white;" class="text-right">${{p[1] | number_format(2,".",",")}}</td>
                                    {% else %}
                                        {% if p[1] > 0 %}
                                            <td style="background-color: yellow;" class="text-right">${{p[1] | number_format(2,".",",")}}</td>
                                        {% else %}
                                            <td class="text-right">${{p[1] | number_format(2,".",",")}}</td>
                                        {% endif %}
                                    {% endif %}
                                    {% set sumaAbonado = sumaAbonado + p[1] %}
                                    <td>
                                        {% if p[0].monto == p[1] %}
                                            <a id="btnGenerarComprobante" class="btn btn-xs btn-success" href="{{path('comprobantes_bachillerato',{ideAlu:alumno.ideAlu,idePag : p[0].idePag})}}" target="_blank">GENERAR COMPROBANTE</a>
                                            <a id="btnAgregarPago" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal4" onclick="btnVerPago({{p[0].idePag}})">VER PAGOS</a>
                                        {% else %}
                                            <a id="btnAgregarPago" class="btn btn-xs btn-info" data-toggle="modal" data-target="#myModal2" onclick="btnAgregarPago({{p[0].idePag}})">AGREGAR PAGO</a>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if p[0].monto == p[1] %}
                                            PAGADO
                                        {% elseif p[0].monto > p[1] and p[1] != 0%}
                                            FALTA POR ABONAR
                                        {% elseif p[0].monto < p[1] %}
                                            EXCEDENTE
                                        {% else %}
                                            NO PAGADO
                                        {% endif %}
                                    </td>
                                </tr>
                                {% set suma = suma + p[0].monto %}
                            {% endfor %}
                            <tr>
                                <td colspan="2" class="text-right">TOTAL</td>
                                <td class="text-right">${{suma | number_format(2,".",",") }}</td>
                                <td class="text-right">${{sumaAbonado | number_format(2,".",",") }}</td>
                                <td colspan="2" class="text-right">RESTAN</td>
                                <td class="text-right">${{(suma - sumaAbonado) | number_format(2,".",",") }}</td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>


        </div>

        <!-- 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 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">ABONAR</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="gifAbono" 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">
                                    <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>
                                            </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="montoAbono" id="montoAbono" class="form-control" min="0" >
                                        </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>
                                    <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" id="btnModPagarMes">PAGAR</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"  id="btnModCancelarMes">CERRAR</button>
                    </div>
                </div>

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

        <!-- Modal 4 -->
        <div id="myModal4" 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">PAGOS REALIZADOS</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="gif5" 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="contTablaMod4">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>
                    </div>
                </div>

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

    </div>
{% endblock %}