<table class="table table-condensed table-bordered table-hover">
    <thead>
        <tr style="background-color: rgb(51, 99, 117);color: white;">
            <th class="text-center">#</th>
            <th class="text-center">MES</th>
            <th class="text-center">TOTAL A PAGAR</th>
            <th class="text-center">ABONADO</th>
            <th class="text-center">DEBE</th>
            <th class="text-center"><i class="fa fa-eye fw"></i></th>
            <th class="text-center"><i class="fa fa-edit fw"></i></th>
            <th class="text-center"><i class="fa fa-money-bill-wave fw"></i></th>
            <th class="text-center"><i class="fa fa-trash-alt fw"></i></th>
        </tr>
    </thead>
    <tbody>
        {% set total = 0 %}
        {% set abonado = 0 %}
        {% set debe = 0 %}

        {% for p in pagosMat %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{p.mesMatriculacion}}-{{ p.fecMat | date('Y') }}</td>
                <td class="text-right">${{ p.monto | number_format(2,".",",") }}</td>
                <td class="text-right">${{ p.abonado | number_format(2,".",",") }}</td>
                <td class="text-right">
                    {% if p.estatus == 0 %}
                        <b style="color: green;">
                            ${{ p.debe | number_format(2,".",",") }}
                        </b>
                    {% else %}
                        <b style="color: red;">
                            ${{ p.debe | number_format(2,".",",") }}
                        </b>
                    {% endif %}
                </td>
                {% set total = total + p.monto %}
                {% set abonado = abonado + p.abonado %}
                {% set debe = debe + p.debe %}
                <td class="text-center">
                    <button type="button" class="btn btn-info btn-xs" id="btn_ver_mes_mat{{p.idePagMat}}">
                        <i class="fa fa-eye fw"></i>
                    </button>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-info btn-xs" id="btn_editar_mes_mat{{p.idePagMat}}" data-bs-toggle="modal" data-bs-target="#ventanaModal" onclick="editarPagoMesMatriculacion({{p.idePagMat}});">
                        <i class="fa fa-edit fw"></i>
                    </button>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-success btn-xs" id="btn_agregar_pago_mes_mat{{p.idePagMat}}" data-bs-toggle="modal" data-bs-target="#ventanaModal" onclick="agregarPagoMesMatriculacion({{p.idePagMat}});">
                        <i class="fa fa-money-bill-wave fw"></i>
                    </button>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-xs" id="borrarMesMatriculacion">
                        <i class="fa fa-trash-alt fw"></i>
                    </button>
                </td>

            </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr style="font-weight: bold;">
            <td class="text-right" colspan="2">TOTALES</td>
            <td class="text-right">$ {{ total | number_format(2,".",",") }}</td>
            <td class="text-right">$ {{ abonado | number_format(2,".",",") }}</td>
            <td class="text-right" style="background-color: yellow;">$ {{ debe | number_format(2,".",",") }}</td>
            <td class="text-center" colspan="4">
                {% if total > 0 %}
                    {{ ( (debe * 100)/total ) | number_format(2,".",",") }}%
                {% else %}
                    0.00%
                {% endif %}

            </td>
        </tr>
    </tfoot>
</table>