<div class="col-lg-12 table-responsive">
    <div class="row">
        <div class="col-lg-12 table-responsive">
            <table class="table table-bordered table-condensed small">
                <thead class="thead-light">
                    <tr>
                        <th>PLANTEL</th>
                        <th>MES</th>
                        <th>TOTAL</th>
                        <th>ABONADO</th>
                        <th>DEBE</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ pago.cvePla.nomenclatura }}</td>
                        <td>{{ pago.mesMatriculacion }}-{{ pago.fecMat | date('Y') }}</td>
                        <td>${{ pago.monto | number_format(2,".",",") }}</td>
                        <td>${{ pago.abonado | number_format(2,".",",") }}</td>
                        <td>
                            <input type="number" step="any" id="maximo_a_pagar" name="maximo_a_pagar" value="{{ pago.debe }}" class="form-control form-control-sm" readonly="true">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!-- FIN col-lg-12 table-responsive -->
        <div class="col-lg-12">
            <div class="card border-secondary mb-1">
                <div class="card-header bg-secondary border-secondary text-white">
                    <i class="fas fa-search-dollar mr-1"></i>
                    HISTORIAL DE PAGOS
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12 table-responsive" id="cont_tabla_pagos_matricualcion">
                            <table class="table table-bordered table-condensed table-hover small">
                                <thead class="thead-light">
                                    <tr>
                                        <th>N.C.</th>
                                        <th>FECHA</th>
                                        <th>MONTO</th>
                                        <th>REFERENCIA</th>
                                        <th>RECIBO</th>
                                        <th>*</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% set suma = 0 %}
                                    {% for i in ingresos %}
                                        <tr>
                                            <td>{{ loop.index }}</td>
                                            <td>{{ i.fecMov | date('d-m-Y') }}</td>
                                            <td>
                                                ${{ i.monto | number_format(2,".",",") }}
                                                {% set suma = suma + i.monto %}
                                            </td>
                                            <td>{{ i.referencia }}</td>
                                            <td>
                                                {% if loop.last %}
                                                    <a class="btn btn-xs btn-success" target="_blank" href="{{ path('pagos_matriculacion_imprimir_recibo',{'ideIngMat':i.ideIngMat}) }}">
                                                        <i class="fa fa-print fw"></i> {{ i.numRecibo }}
                                                    </a>
                                                {% else %}
                                                    <a class="btn btn-xs btn-secondary" target="_blank" href="{{ path('pagos_matriculacion_imprimir_recibo',{'ideIngMat':i.ideIngMat}) }}">
                                                        <i class="fa fa-print fw"></i> {{ i.numRecibo }}
                                                    </a>
                                                {% endif %}

                                            </td>
                                            <td>
                                                <a class="btn btn-danger btn-xs">
                                                    <i class="fa fa-trash-alt fw"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td colspan="6" class="text-center">AUN NO SE HAN REGISTRADO PAGOS</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3">TOTAL</td>
                                        <td>${{ suma | number_format(2,".",",") }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div><!-- FIN col-lg-12 -->
                    </div><!-- FIN row -->
                </div><!-- FIN card-body -->
            </div><!-- FIN card -->
        </div><!-- FIN col-lg-12 -->
        <div class="col-lg-12">
            <div class="card border-warning mb-1">
                <div class="card-header bg-warning border-secondary text-white">
                    <i class="fas fa-wallet mr-1"></i>
                    REGISTRAR PAGO
                </div>
                <div class="card-body">
                    <div class="row small g-2">
                        <div class="col-lg-4">
                            <label class="control-label" for="monto_a_pagar_matriculacion">CANTIDAD</label>
                            <input type="number" step="any" id="monto_a_pagar_matriculacion" name="monto_a_pagar_matriculacion" class="form-control form-control-sm">
                        </div><!-- FIN col-lg-4 -->
                        <div class="col-lg-4">
                            <label class="control-label" for="modoPagoIMAT">MODO DE PAGO</label>
                            <select name="modoPagoIMAT" id="modoPagoIMAT" class="form-select form-control-sm" onchange="generarReferencia();">
                                <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><!-- FIN col-lg-4 -->
                        <div class="col-lg-4">
                            <label class="control-label">*</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="checkEnfermeria" name="checkEnfermeria">
                                <label class="form-check-label" for="checkEnfermeria">MARCAR COMO PAGO DE ENFERMERÍA</label>
                            </div>
                        </div><!-- FIN col-lg-4 -->
                        <div class="col-md-4">
                            <label class="control-label" for="cveBan">BANCO:</label>
                            <select class="form-select form-select-sm" id="cveBan" name="cveBan">
                                <option value="default">Selecciona</option>
                                {% for b in bancos %}
                                    <option value="{{ b.ideBan }}">{{ b.banco }} : {{ b.nombre }}</option>
                                {% else %}
                                    <option value="default">Aun sin registros</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label class="control-label" for="referencia_pag_mat">REFERENCIA</label>
                            <input type="text" name="referencia_pag_mat" id="referencia_pag_mat" class="form-control form-control-sm">
                        </div><!-- FIN col-lg-4 -->

                        <div class="col-lg-4 text-center">
                            <label class="control-label" for="guardar_pag_mat">*</label>
                            <button type="button" class="btn btn-success btn-block btn-sm" id="guardar_pag_mat" onclick="guardarPagoMesMatriculacion({{pago.idePagMat}});">
                                REGISTRAR PAGO
                            </button>
                        </div><!-- FIN col-lg-4 s-->
                        <div class="col-lg-12" id="cont_respuesta_guardar_pago">

                        </div><!-- FIN col-lg-12 -->


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

    </div><!-- FIN row -->

</div>