<table class="table table-condensed table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>CONCEPTO</th>
            <th>MONTO</th>
            <th>BECA</th>
            <th>SUBTOTAL</th>
            <th></th>
            <th>RECARGOS</th>
            <th></th>
            <th>TOTAL</th>
        </tr>
    </thead>
    <tbody>
        {% if (a is defined and a != null) and (p is defined and p != null)%}
            <tr>
                <th>1</th>
                <th>Mensualidad {{p.nomMes}} {{p.fecIni | date('Y')}}
                </th>
                <th>
                    $ {{a.costoMensualidad}}
                </th>
                <th>
                    $ {{a.cveBeca.monto}}
                </th>
                <th>$ {{a.costoMensualidad - a.cveBeca.monto}}</th>
                <th>
                    <div class="material-switch pull-right">
                        <input type="checkbox" id="editarRecargos" name="editarRecargos" onclick="validarRecargos();">
                        <label for="editarRecargos" class="label-warning"></label>
                    </div>
                </th>
                <th>
                    {% if b is defined %}
                        {% if b == 0 %}
                            <input type="hidden" value="0" id="tMR">
                            $ <input type="number" step="any" value="0" id="totalMR" class="text-right" readonly="true" style="width: 100px;" onblur="validarRecargos2();" disabled="true" min="0">
                        {% elseif b == 1 %}
                            <input type="hidden" value="100" id="tMR">
                            $ <input type="number" step="any" value="100" id="totalMR" class="text-right" readonly="true" style="width: 100px;" onblur="validarRecargos2();" disabled="true" min="0">
                        {% elseif b == 2 %}
                            <input type="hidden" value="200" id="tMR">
                            $ <input type="number" step="any" value="200" id="totalMR" class="text-right" readonly="true" style="width: 100px;" onblur="validarRecargos2();" disabled="true" min="0">
                        {% endif %}
                    {% endif %}
                </th>

                <th>
                    <div class="material-switch pull-right">
                        <input type="checkbox" id="editarMensualidad" name="editarMensualidad" onclick="validarMensualidad();">
                        <label for="editarMensualidad" class="label-warning"></label>
                    </div>
                </th>
                <th>
                    {% if b is defined %}
                        <input type="hidden" value="{{(a.costoMensualidad)}}" id="monto">
                        {% if b == 0 %}
                            <input type="hidden" value="{{(a.costoMensualidad + 0)}}" id="mT">
                            $ <input type="number" step="any" value="{{(a.costoMensualidad +0)}}" id="totalM" class="text-right" readonly="true" style="width: 100px;" disabled="true">
                        {% elseif b == 1 %}
                            <input type="hidden" value="{{(a.costoMensualidad + 100)}}" id="mT">
                            $ <input type="number" step="any" value="{{(a.costoMensualidad +100)}}" id="totalM" class="text-right" readonly="true" style="width: 100px;" disabled="true">
                        {% elseif b == 2 %}
                            <input type="hidden" value="{{(a.costoMensualidad + 200)}}" id="mT">
                            $ <input type="number" step="any" value="{{(a.costoMensualidad +200)}}" id="totalM" class="text-right" readonly="true" style="width: 100px;" disabled="true">
                        {% endif %}
                    {% endif %}
                </th>
            </tr>
        {% else %}
            <tr>
                <td colspan="9" class="text-center">
                    <div class="alert alert-success">
                        <strong>NO HAY MESES POR PAGAR</strong>
                    </div>
                </td>
            </tr>
        {% endif %}
    </tbody>
</table>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 hidden">
        <li class="list-group-item">
            <strong>Pagar Todo</strong>
            <div class="material-switch pull-right">
                <input type="checkbox" id="anualidadCompleta" name="anualidadCompleta">
                <label for="anualidadCompleta" class="label-danger"></label>
            </div>
        </li>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <li class="list-group-item">
            <strong>Adelantar Meses</strong>
            <div class="material-switch pull-right">
                <input type="checkbox" id="adelantarMeses" name="adelantarMeses" onclick="adelantarMeses();">
                <label for="adelantarMeses" class="label-info"></label>
            </div>
        </li>
    </div>

    <div class="panel panel-default col-lg-12 col-md-12 col-sm-12 col-xs-12" id="contenedorMesesAdelantar" style="display: none;">
        <table class="table table-condensed table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>MES</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% if lPagos is defined %}
                    {% for p in lPagos %}
                        {% if p.nomMes != null %}
                            <tr>
                                <td>{{loop.index}}</td>
                                <td>{{p.nomMes}}</td>
                                <td>
                                    <input type="checkbox" id="{{p.idePag}}" class="maC" onclick="agregarMes(this.id);">
                                </td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
</div>