{% extends 'base_app.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/vendor/lightbox2/dist/css/lightbox.css') }}" rel="stylesheet">
    <style>
        .wrapper {
            width: 6.9rem;
            height: 2rem;
            position: relative;
            margin: 0rem auto;
            border-radius: 2rem;
            background: gray;
        }

        .wrapper .toggle {
            width: 1.8rem;
            height: 1.8rem;
            position: absolute;
            left: 2.5rem;
            top: 0.1rem;
            border-radius: 50%;
            box-sizing: border-box;
            border: 0.1rem solid #ff6c00;
            background: #ff8933;
            box-shadow: 0 0 0.2rem 0.1rem #ff6c00 inset, 0 0 0.2rem 0.1rem #ff6c00;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .wrapper label {
            cursor: pointer;
            width: 2rem;
            height: 2rem;
            position: absolute;
            margin: 0;
            padding: 0;
            z-index: 1;
            display: inline-block;
            text-align: center;
            line-height: 2rem;
            text-transform: uppercase;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            color: white;

        }

        .wrapper input {
            position: absolute;
            left: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
        }

        .yes_radio:checked ~ .toggle {
            border: 0.1rem solid #008000;
            background: #00b300;
            box-shadow: 0 0 0.2rem 0.1rem #008000 inset, 0 0 0.2rem 0.1rem #008000;
            left: 0.1rem;
        }

        .no_radio:checked {
            background: red;
        }

        .no_radio:checked ~ .toggle {
            border: 0.1rem solid #ff0000;
            background: #ff3333;
            box-shadow: 0 0 0.2rem 0.1rem #ff0000 inset, 0 0 0.2rem 0.1rem #ff0000;
            left: 4.97rem;
        }

        .maybe_radio, .maybe-lbl {
            left: 33.33333%;
        }

        .no_radio, .no-lbl {
            left: 66.66667%;
        }

        .maybe-lbl {
            -webkit-animation-delay: 2s;
            -o-animation-delay: 2s;
            -moz-animation-delay: 2s;
            animation-delay: 2s;
        }

        .no-lbl {
            -webkit-animation-delay: 4s;
            -o-animation-delay: 4s;
            -moz-animation-delay: 4s;
            animation-delay: 4s;
        }


    </style>
{% endblock %}

{%block body %} 
    
     <div class="content-wrapper">
        <div class="container">
            {% for message in app.session.flashBag.get('notice') %}
         <h4 class="alert alert-success">{{ message }}</h4>
    
    {%endfor %}
            <div class="row">
                <div class="col-md-9">
                    <h4 class="page-head-line">Solicitud de Reconocimiento Escala <code>{{servicio.id}}</code>: 
                        {{ docente }}
                    </h4>                       
                </div>
                <div class="col-md-3">
                    {% if servicio.idEstatus.id == 4 %}
                        <h4 class="alert alert-success">Estatus <strong>{{servicio.idEstatus}}</strong></h4>
                    {% elseif servicio.idEstatus.id == 3 %}
                        <h4 class="alert alert-danger">Estatus <strong>{{servicio.idEstatus}}</strong></h4>
                    {% else %}
                        <h4 class="alert alert-warning">Estatus <strong>{{servicio.idEstatus}}</strong> </h4>
                    {% endif %}

                </div>

            </div>
            <form name="input" action="{{ path('cea_escala_actualizar', { 'id': servicio.id, 'escala': 'escalafones', 'estatus' : 'true' }) }}" method="post">
            <div class="row">
                
                <div class="col-md-6">

                    <div class="col-md-4">
                        <img src="{{ asset('bundles/framework/images/portal/logo_ubv.png') }}" />
                    </div>

                    <div class="col-md-8">      
                        
                    
                        
                        
                        {% if docente.escalafones is not empty %}
                        <div class="form-group">
                            <label for="Escalafones">Escalafones Obtenidos:</label>
                             <table class="table table-striped table-bordered">
                                    <th>Escalafón</th>
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                            {% for escala in docente.escalafones %}
                               
                                    <tr>
                                        <td>{{escala.idEscala }}</td>
                                        <td>{{escala.fechaEscala | date('d-m-Y') }}</td>
                                        <td>{{escala.idTipoEscala }}</td>
                                    </tr>                                                                                                    
                            {%endfor %}
                            </table>                            
                            <p><strong>Tipo de Reconocimiento:</strong>{% if not ascenso %} Concurso de oposición {% else %} Ascenso {% endif %}  </p>
                        </div>
                        {% endif %}

       {% if servicio.idEstatus.id == 2 %}

       {%  if not ascenso %}
            
            <select name="escala" required>
                <option value="">Escalafón al cual aprobó Concurso</option>
           {% for esc in escalafones %}              
                   <option value="{{ esc.id }}">{{ esc.nombre }}</option>                                        
           {% endfor %}
           <input type="hidden" name="tipo" value="1" />
           </select>                     
       {% else %}
           <input type="hidden" name="tipo" value="2" />
           <input type="text" value="{{ escalafones }}" readonly />
           <input type="hidden" name="escala" value="{{ escalafones.id }}" />
       {% endif %}
       <br><label for="fecha_escala"> Fecha de Escalafón: </label>   <input type="date" name="fecha_escala" />
       <br><button type="submit" class="btn btn-success btn-sm" ><span class="fa fa-check"></span>&nbsp;Aprobar</button>
       

       {% endif %}
                       
                        </div>
                        
                </div>
                             
                <div class="col-md-5">    
                     <h3>Documentos Consignados</h3>    
                     <div class="widget-content">
                                             
                         {% for documento in docente.documentosVerificados %}
                         {% if documento.idServicio.id == servicio.id %}
                         {% if not ascenso %} {% set u = "adscripcion" %} {% else %} {% set u = "ascenso" %} {% endif %}
                         <div class="col-xs-4">
                            <div class="thumbnail">
                                <a href="{{asset('uploads/'~u~'/'~ documento.ubicacion)}}" data-lightbox="adscripcion">
                                    <img src="{{ asset('uploads/'~u~'/thumb/'~ documento.ubicacion) }}" />
                                </a>
                              <div class="caption">                                
                                <p>{{ documento.idTipoDocumentos.nombre }}</p>
                                  <div class="wrapper">
                                      <label for="yes_radio" class="yes-lbl"><i class="fa fa-check"></i>
                                      </label>
                                      <input type="radio" value="1" name="reconocimiento" class="yes_radio" id="yes_radio" {% if documento.idEstatus.id == 1 %} checked="checked" {% endif %}>
                                      <label for="maybe_radio" class="maybe-lbl">
                                          <i class="fa fa-question"></i>
                                      </label>
                                      <input type="radio" value="" name="reconocimiento" class="maybe_radio" id="maybe_radio" {% if documento.idEstatus.id == 2 %} checked="checked" {% endif %} disabled>
                                      <label for="no_radio" class="no-lbl"><i
                                                  class="fa fa-close"></i></label><input type="radio" value="3"
                                                                                         name="reconocimiento"
                                                                                         class="no_radio"
                                                                                         id="no_radio" {% if documento.idEstatus.id == 3 %} checked="checked" {% endif %}>

                                      <div class="toggle"></div>
                                  </div>
                              </div>
                          </div>
                        </div>

                         {% endif %}
                         {% endfor %}

                     </div>
                         
                </div>
                        
                        

            </div>
            </form>
        </div>
        
    </div>
    
{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('assets/vendor/lightbox2/dist/js/lightbox.min.js') }}"></script>
    {% endblock %}