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

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

        form.form-grupos label.error {
            display: none;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{asset('js/misJs/validacionPeriodos.js')}}"></script>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <h1 class="mt-4">CREAR PERIÓDOS</h1>
        <ol class="breadcrumb mb-2">
            <li class="breadcrumb-item active">Tablero</a></li>
        </ol>
        <div class="row">

            <div class="col-lg-12">
                <form class="row small g-3" role="form" action="{{path('periodos')}}" method="POST" id="form-periodos">
                    <div class="col-lg-3">
                        <label class="control-label">Periódo:</label>
                        <input type="text" class="form-control form-control-sm" placeholder="Ingresa el nombre del Periódo" id="periodo" name="periodo">
                    </div><!-- FIN COL-LG-4 -->
                    <div class="col-lg-3">
                        <label class="control-label">Fecha Inicio:</label>
                        <input type="date" class="form-control form-control-sm" id="mesInicio" name="mesInicio">
                    </div><!-- FIN COL-LG-4 -->
                    <div class="col-lg-3">
                        <label class="control-label">Fecha Termino:</label>
                        <input type="date" class="form-control form-control-sm" id="mesFinal" name="mesFinal">
                    </div><!-- FIN COL-LG-4 -->
                    <div class="col-lg-3">
                        <label class="control-label">Estatus:</label>
                        <select id="estatusP" name="estatusP" class="form-select form-select-sm">
                            <option value="default">Selecciona</option>
                            <option value="1">Vigente</option>
                            <option value="-1">Pendiente</option>
                            <option value="0">Terminado</option>
                        </select>
                    </div><!-- FIN COL-LG-4 -->
                    <div class="col-lg-12 text-right">
                        <input type="submit" class="btn btn-primary btn-sm" value="Guardar">
                    </div><!-- FIN COL-LG-12 -->
                </form>
            </div><!-- FIN DIV-12 -->

            <div class="col-lg-12">
                <h3>LISTA DE PERIÓDOS</h3>
            </div>
            <div class="col-lg-12 table-responsive">
                <table class="table table-condensed table-bordered table-hover small">
                    <thead class="thead-light">
                        <tr>
                            <th>No.</th>
                            <th>PERIODOS</th>
                            <th>INICIO</th>
                            <th>FIN</th>
                            <th>*</th>
                            <th>*</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if periodos is defined %}
                            {% for p in periodos %}
                                <tr>
                                    <td>{{loop.index}}</td>
                                    <td>{{p.periodo}}</td>
                                    <td>{{p.mesInicio | date('d-m-Y')}}</td>
                                    <td>{{p.mesFinal | date('d-m-Y')}}</td>
                                    <td>
                                        {% if p.estatus == 1 %}
                                            <i style="color: green;font-weight: bold;">VIGENTE</i>
                                        {% elseif p.estatus == -1 %}
                                            <i style="color: orange;font-weight: bold;">PENDIENTE</i>
                                        {% elseif p.estatus == 0 %}
                                            <i style="color: blue;font-weight: bold;">TERMINADO</i>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a href="{{path('periodos-actualizar',{'idePer' : p.idePer})}}"><i class="fa fa-edit" style="color: blue;" title="Editar"></i></a>
                                        <a href="#" data-toggle="modal" data-target="#myModal" onclick="traerDatosP({{p.idePer}})"><i class="fa fa-times" style="color: red;" title="Eliminar"></i></a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                </table>
            </div><!-- FIN DIV-12 -->


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


    


    <!-- Modal -->
    <div class="modal fade" id="myModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header text-white" style="background-color: #336375;">
                    <h5 class="modal-title" id="staticBackdropLabel">ELIMINAR PERIODO</h5>
                    <button type="button" class="btn-close bg-white" data-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" id="contenedor-eliminar-periodo">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" id="btnEliminarPeriodo">BORRAR</button>
                    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"  id="btnModCancelar">CANCELAR</button>
                </div>
            </div>

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