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

{% block stylesheet %}
    <style>
        .verticalText {
            writing-mode: vertical-rl;
            vertical-align: -webkit-baseline-middle;
            text-align: -webkit-center;
            transform: rotate(180deg);
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{asset('js/misJs/ce/scriptCE.js') }}" type="text/javascript"></script>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <h1 class="mt-4">PLANTEL: {{plantel.nomPla}}</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item active">Tablero</li>
        </ol>
        <div class="row">

            <div class="col-lg-12 table-responsive" id="contenedor-resultados">
                <table class="table table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th style="background-color: rgb(237,125,49);vertical-align: middle;" class="text-center">CUA.</th>
                                {% if cuadroZ | length > 0 %}
                                    {% for x in cuadroZ[0] %}
                                    <th style="background-color: rgb(0,32,96);color: white;font-size: xx-small;vertical-align: middle;" class="text-center">
                                        {#<p class="verticalText">{{x}}</p>#}
                                        {{x[0]}}
                                    </th>
                                {% endfor %}
                            {% endif %}
                            <th style="background-color: rgb(146,208,80);vertical-align: middle;" class="text-center">TOTAL</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% set sumFilas = 0 %}
                        {% for key, x in cuadroZ %}
                            {% if key > 0 %}
                                {% set sumaFila = 0 %}

                                <tr>
                                    <td style="background-color: rgb(0,32,96);color: white;" class="text-center">{{loop.index-1}}°</td>
                                    {% for y in x %}
                                        <td style="background-color: white;font-weight: bolder;text-align: center;color: #006600;">
                                            {% if y[0] != 0 %}
                                                {#
                                                {{y}}
                                                #}
                                                {#<input type="button" class="btn btn-primary btn-xs" value="" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#myModal" >#}
                                                <button type="button" class="btn btn-primary btn-xs" data-bs-toggle="modal" data-bs-target="#myModal" onclick="listarAlumnos({{y[1]}},{{y[2]}} ,{{y[3]}} );">
                                                    {{ y[0] }}
                                                </button>
                                            {% endif %}
                                        </td>
                                        {% set sumaFila = (sumaFila + y[0]) %}
                                    {% endfor %}
                                    <td style="background-color: rgb(237,125,49);text-align: center;font-weight: bolder;">
                                        {{sumaFila}}
                                        {% set sumFilas = sumFilas + sumaFila %}
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td style="background-color: rgb(0,32,96);color: white;vertical-align: middle;" class="text-center"><b>TOTAL</b></td>
                            {% for sc in columnas %}
                                <td style="background-color: rgb(237,125,49);" class="text-center">
                                    <b>{{ sc }}</b>
                                </td>
                            {% endfor %}
                            <td style="background-color: rgb(0,32,96);"></td>
                        </tr>
                        <tr>
                            <td style="background-color: rgb(146,208,80);color: white;vertical-align: middle;" class="text-center">TOTAL</th>
                                {% if cuadroZ | length > 0 %}
                                    {% set colum = cuadroZ[0] | length %}
                                <td colspan="{{colum+1}}" class="text-center" style="background-color: rgb(146,208,80);color: white;">
                                    <h4 style="margin: 0;"><b>{{ sumFilas }}</b></h4>
                                </td>
                            {% endif %}
                        </tr>
                    </tbody>
                </table>
            </div><!-- FIN col-12 -->
        </div><!-- FIN row -->
    </div><!-- FIN container-fluid -->

    <div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header text-white" style="background-color: #336375;">
                    <h5 class="modal-title" id="staticBackdropLabel">LISTA DE ALUMNOS</h5>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive" id="con_lis_alu">

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal" id="btnExportar" disabled="true">EXPORTAR</button>
                    <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal" id="btnModCerrar">CERRAR</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}