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

{% block stylesheet %}
    <style>
        .form-control.error {
            border-color: red;
        }

        .form-control.valid {
            border-color: green;
            color: green;
        }

        .error {
            color: red;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/misJs/MesaServicios/mesaServicios.js') }}"></script>
    <script src="{{ asset('js/misJs/MesaServicios/validacionMS.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
{% endblock %}


{% block content %}
    <div class="container-fluid">
        {% for flashMessage in app.session.flashbag.get('mensaje') %}
            <script>
                swal("", "{{ flashMessage }}", "success");
            </script>
        {% endfor %}
        {% set tipoUsuario = app.session.get('rol') %}

        {% set externo = app.session.get('externo') %}

        <h1 class="mt-4">Mesa de Ayuda</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item"><a href="{{ path('cm_homepage') }}">Tablero</a></li>
            <li class="breadcrumb-item active">Mesa de Ayuda</li>
        </ol>
        <div class="row">
            <div class="col-lg-12">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-file mr-1"></i>
                        NUEVO
                    </div>
                    <div class="card-body">
                        <form class="row small" action="{{ path('mesa_servicios') }}" method="POST" id="formularioMS"
                              enctype="multipart/form-data">
                            <div class="row small pb-2">
                                {% if tipoUsuario == 2 %}
                                    <div class="col-lg-6">
                                        <label for="cvePla" class="control-label">ESCUELA</label>
                                        <select name="cvePla" id="cvePla" class="form-select form-control-sm" required>
                                            <option value="default">--Selecciona--</option>
                                            {% for e in escuelas %}
                                                {% if tipoUsuario == 2 %}
                                                    <option value="{{ e.idePla }}" selected>{{ e.nomPla }}</option>
                                                {% else %}
                                                    <option value="{{ e.idePla }}">{{ e.nomPla }}</option>
                                                {% endif %}
                                            {% else %}
                                                <option value="default">--Sin Datos--</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                {% else %}
                                    <div class="col-lg-6">
                                        <label for="cvePla" class="control-label">ESCUELA</label>
                                        <select name="cvePla" id="cvePla" class="form-select form-control-sm" required>
                                            <option value="default">--Selecciona--</option>
                                            {% for e in escuelas %}
                                                {% if tipoUsuario == 2 %}
                                                    <option value="{{ e.idePla }}" selected>
                                                        {{ e.nomenclatura }} : {{ e.nomPla }}
                                                    </option>
                                                {% else %}
                                                    <option value="{{ e.idePla }}">
                                                        {{ e.nomenclatura }} : {{ e.nomPla }}
                                                    </option>
                                                {% endif %}
                                            {% else %}
                                                <option value="default">--Sin Datos--</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                {% endif %}
                                <div class="col-lg-3">
                                    <label for="cveArea" class="control-label">ÁREA</label>
                                    <select name="cveArea" id="cveArea" class="form-select form-control-sm" required>
                                        <option value="default">--Selecciona--</option>
                                        {% for a in areas %}
                                            <option value="{{ a.ideCatArea }}">{{ a.area }}</option>
                                        {% else %}
                                            <option value="default">--Sin Datos--</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-lg-3">
                                    <label for="cveCatSem" class="control-label">PRIORIDAD</label>
                                    <select name="cveCatSem" id="cveCatSem" class="form-select form-control-sm"
                                            required>
                                        <option value="default">--Selecciona--</option>
                                        {% for s in semaforos %}
                                            <option value="{{ s.ideCatSem }}">{{ s.descripcion }}</option>
                                        {% else %}
                                            <option value="default">--Sin Datos--</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row small pb-2">
                                <div class="col-lg-8">
                                    <label for="asunto" class="control-label">ASUNTO</label>
                                    <textarea name="asunto" id="asunto" class="form-control form-control-sm"
                                              style="resize: none;" maxlength="500"
                                              required></textarea>
                                </div>
                                <div class="col-lg-2">
                                    <label for="asunto" class="control-label">FECHA ENTREGA</label>
                                    <input type="date" name="fecCompromiso" id="fecCompromiso"
                                           class="form-control form-control-sm">
                                </div>
                                <div class="col-lg-2">
                                    <label for="asunto" class="control-label">DESEA ADJUNTAR ARCHIVOS</label>
                                    <select name="adjuntar" id="adjuntar" class="form-select form-control-sm"
                                            onchange="validarHtmlArchivos();" required>
                                        <option value="0" selected>NO</option>
                                        {% for a in 1..5 %}
                                            <option value="{{ a }}">{{ a }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row small pb-2">
                                <div class="col-lg-6" id="contenedor-archivos-adjuntos">
                                    *******
                                </div>
                            </div>
                            <div class="row small pb-2">
                                <button type="submit" class="btn btn-success btn-block btn-sm">REGISTRAR</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- fin col-lg-12    -->
            <div class="col-lg-12">
                <div class="card border-info mb-1">
                    <div class="card-header bg-info border-info">
                        <i class="fas fa-file mr-1"></i>
                        MESAS ACTIVAS
                    </div>
                    <div class="card-body">
                        <div class="row small pb-2 table-responsive">
                            <table class="table table-bordered table-condensed table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>N.C.</th>
                                    <th>FECHA</th>
                                    <th>AREA</th>
                                    <th>PLANTEL</th>
                                    <th>ASUNTO</th>
                                    <th>ENTREGA</th>
                                    <th>RESPUESTAS</th>
                                    <th>*</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for m in mesasServicio %}
                                    {% if m.estatus == 1 %}
                                        <tr>
                                            <td>{{ loop.index }}</td>
                                            <td style="white-space: nowrap;">
                                                {% if (m.fecMov | date('d-m-Y')) == ( "now"|date("d-m-Y") ) %}
                                                    {{ m.horMov | date('h:i a') }}
                                                {% else %}
                                                    {{ m.fecMov | date('d-m-Y') }}
                                                {% endif %}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-xs">
                                                    {{ m.cveCatArea.area }}
                                                </button>
                                                <button type="button" class="btn btn-success btn-xs">
                                                    {{ m.cveEmp.nomEmp }}
                                                </button>
                                            </td>
                                            <td class="text-center">
                                                {% set color = "" %}
                                                {% if m.cveSemaforo.valor == 1 %}
                                                    {% set color = "btn-success" %}
                                                {% elseif m.cveSemaforo.valor == 2 %}
                                                    {% set color = "btn-warning" %}
                                                {% elseif m.cveSemaforo.valor == 3 %}
                                                    {% set color = "btn-danger" %}
                                                {% endif %}
                                                <button type="button" class="btn btn-xs btn-block {{ color }}"
                                                        data-toggle="tooltip" data-placement="bottom"
                                                        title="{{ m.cvePla.nomPla }}">
                                                    {{ m.cvePla.nomenclatura }}
                                                </button>
                                            </td>
                                            <td>{{ m.tema }}</td>
                                            <td class="text-center" style="white-space: nowrap;">
                                                {% if m.fecCompromiso is null %}
                                                    <p><b>SIN FECHA</b></p>
                                                {% else %}
                                                    <button type="button" class="btn btn-secondary btn-xs">
                                                        {{ m.fecCompromiso | date('d-m-Y') }}
                                                    </button>
                                                {% endif %}
                                            </td>
                                            <td class="text-center">
                                                <button class="btn btn-primary btn-xs" data-bs-toggle="modal"
                                                        data-bs-target="#myModalExpediente"
                                                        onclick="respuestasMS({{ m.ideMesSer }});">
                                                    <i class="fa fa-plus-circle fw"></i>
                                                </button>
                                            </td>
                                            <td></td>
                                        </tr>
                                    {% endif %}
                                {% else %}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- fin col-lg-12    -->
        </div>
    </div>

    <!-- Modal EXPEDIENTE -->
    <div class="modal fade" id="myModalExpediente" tabindex="-1"
         aria-labelledby="myModalExpedienteLabel"
         aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content" id="contModalMS">

            </div>
        </div>
    </div> <!-- FIN MODAL EXPEDIENTE -->
{% endblock %}