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

{% block stylesheet %}
    <style type="text/css">
        .estatico {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: rgb(51, 99, 117) !important;
            color: white !important;
        }
    </style>

    <style>
        .filaPlantel {
            cursor: pointer;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="{{ asset('bootstrap-select/dist/css/bootstrap-select.css') }}"/>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/misJs/da/matriculacion.js') }}"></script>
    <script src="{{ asset('js/misJs/da/editarMatriculacion.js') }}"></script>
    <script src="{{ asset('js/misJs/da/eliminarMesMatriculacion.js') }}"></script>

    <script src="{{ asset('bootstrap-select/dist/js/bootstrap-select.js') }}"></script>
{% endblock %}


{% block content %}
    <div class="container-fluid">
        <h1 class="mt-4">Matriculación</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{ path('cm_homepage') }}">Tablero</a></li>
            <li class="breadcrumb-item active">Matriculación</li>
        </ol>
        <div class="row">
            <div class="col-lg-3">
                <div class="card border-secondary mb-1">
                    <div class="card-header bg-secondary border-secondary text-white">
                        <i class="fas fa-building mr-1"></i>
                        ESCUELAS
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12 table-responsive" style="height: 300px;">
                                <table class="table table-bordered table-condensed table-hover small">
                                    <thead class="thead-light">
                                    <tr class="text-center">
                                        <th>N.C.</th>
                                        <th>PLANTEL</th>
                                        <th>ADEUDO</th>
                                        <th style="white-space: nowrap;">M. ACTIVA</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% set total = 0 %}
                                    {% for p in planteles %}
                                        <tr id="{{ p[0].idePla }}" class="filaPlantel"
                                            onclick="cambiarColorFila(this.id);">
                                            <td class="text-right">{{ loop.index }}</td>
                                            <td class="text-left">{{ p[0].nomenclatura }}</td>
                                            <td class="text-right" style="white-space: nowrap;">
                                                $ {{ p[2] | number_format(2,'.',',') }}</td>
                                            <td class="text-center">{{ p[1] }}</td>
                                            {% set total = total + p[1] %}
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                    <tfoot>
                                    <tr style="background-color: #e9ecef;font-weight: bold;">
                                        <td colspan="2" class="text-right">TOTAL</td>
                                        <td class="text-center">{{ total }}</td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-3 -->

            <div class="col-lg-9">
                <div class="card border-secondary mb-1">
                    <div class="card-header bg-secondary border-secondary text-white">
                        <i class="fas fa-building mr-1"></i>
                        DETALLES ESCUELA
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12" id="cont_det_plantel">


                            </div><!-- FIN col-lg-12 table-responsive CONT_DET_PLANTEL-->
                        </div><!-- FIN row -->
                    </div><!-- FIN card-body -->
                </div><!-- FIN card -->
            </div><!-- FIN col-lg-9 -->


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

    <!-- Modal -->
    <div class="modal fade" id="ventanaModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="ventanaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ventanaModalLabel">

                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                            onclick="actualizarDatos();"></button>
                </div>
                <div class="modal-body">
                    <div class="row" id="cont_det_esp">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"
                            onclick="actualizarDatos();">Cerrar
                    </button>
                    <button type="button" class="btn btn-primary btn-sm disabled">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="ventanaModalOperaciones" data-bs-backdrop="static" data-bs-keyboard="false"
         tabindex="-1" aria-labelledby="ventanaModalLabelOperaciones" aria-hidden="true">
        <div class="modal-dialog modal-xs">
            <div class="modal-content border-primary">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="ventanaModalLabelOperaciones">
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row" id="cont_operaciones_masivas">
                    </div>
                </div>
                <div class="modal-footer bg-primary">
                    {# <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" onclick="actualizarDatosPagoMesMatriculacion();">Cerrar</button> #}
                </div>
            </div>
        </div>
    </div>
{% endblock %}