{% 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">Servicio número <code>{{servicio.id}}</code>: 
                        {{ docente }}
                    </h4>                       
                </div>
                <div class="col-md-3">
                    {% if servicio.idEstatus.id == 1 %}
                        <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>
            <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">
                        
                        <div class="form-group">
                            <label for="username">Fecha de Solicitud:</label>
                            <input type="date" class="form-control" value="{{ servicio.fechaSolicitud |date('Y-m-d') }}" />
                        </div>
                        
                        <div class="form-group">
                            <label for="Escalafones">Solicitud:</label>
                            {{servicio.idServicioCe.Nombre}}                                            
                        </div>
                           
                        {% if servicio.idServicioCe.id == 1 %}   
                            <div class="form-group">
                               <label for="Escalafones">Fecha de Ingreso UBV:</label>
                               {{ docente.adscripcion.fechaIngreso|date('d/m/Y') }}
                           </div>
                           
                            <div class="form-group">
                               <label for="Escalafones">Fecha de Oposicion:</label>
                               {{ oposicion.fechaEscala|date('d/m/Y') }}                                       
                           </div>
                           
                            
                        {% endif %}  
                        
                        {% if servicio.idServicioCe.id == 3 %}   
                            <div class="form-group">
                               <label for="Escalafones">Malla que Solicita:</label>
                               {{ estado_academico.idOfertaMallaCurricular.idMallaCurricularInstitucion.idMallaCurricular }}                                       
                           </div>                                                      
                           
                            
                        {% endif %}


                        <form action="{{ path('cea_servicios_actualizar', { 'id': servicio.id, 'estatus' : 'true' }) }}" method="POST" name="aprobar">
                        {% if servicio.idEstatus.id == 3 %}
                            <button class="btn btn-success btn-sm" type="submit" name="aprobado" id="aprobado" ><span class="fa fa-check" ></span>&nbsp;Aprobar</button>
                        {% elseif servicio.idEstatus.id == 2 %}
                            <button class="btn btn-success btn-sm" type="submit" name="aprobado" id="aprobado" ><span class="fa fa-check" ></span>&nbsp;Aprobar</button>
                            <a id="modal_rechazo" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#motivo_rechazo"  ><span class="fa fa-close"></span>&nbsp;Rechazar</a>
                        {% endif %}
                        
                         </form>
                        <!-- Modal -->
<div class="modal fade" id="motivo_rechazo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
      <form action="{{ path('cea_servicios_actualizar', { 'id': servicio.id, 'estatus' : 'false' }) }}" method="POST" name="rechazar">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Rechazo de Solicitud</h4>
      </div>
        
      <div class="modal-body">
          
          
          <div class="form-group">
            <label for="message-text" class="control-label">Mensaje:</label>
            <textarea class="form-control" id="message-text" name="message-text"></textarea>
          </div>
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Enviar Correo</button>
      </div>
    </div>
     </form>
  </div>
</div>
                        
                   
                    <hr />
                        </div>
                </div>
               {% if servicio.idServicioCe.id == 1 or servicio.idServicioCe.id == 2 %}
                <div class="col-md-5">    
                     <h3>Documentos Para confirmar</h3>
                     <div class="widget-content">
                                             
                         
                         {% for documento in docente.documentosVerificados %}

                            {% if documento.idTipoDocumentos.identificador == "trabajo" or documento.idTipoDocumentos.identificador == "oposicion" %}
                                {% set extension = documento.ubicacion | split('.') | last %}
                                <div {% if extension != "pdf" %}class="col-xs-6"{% else %}class="col-xs-12"{% endif %}>
                            <div class="thumbnail">

                                {% if extension != "pdf" %}
                                    <a href="{{asset('uploads/adscripcion/'~ documento.ubicacion)}}" data-lightbox="trabajo">
                                        <img src="{{ asset('uploads/adscripcion/thumb/'~ documento.ubicacion) }}" />
                                    </a>
                                {% else %}
                                    <object type="application/pdf" data="{{asset('uploads/adscripcion/'~ documento.ubicacion)}}" width="100%" height="300px"></object>
                                {% endif %}
                              <div class="caption">                                
                                <p>{{ documento.idTipoDocumentos.nombre }}</p>
                                  {% if documento.idEstatus.id == 2 or documento.idEstatus.id == 3 %}
                                  <div class="wrapper">
                                      <label for="yes_radio{{ loop.index }}" class="yes-lbl"><i class="fa fa-check"></i>
                                      </label>
                                      <input type="radio" value="1" name="{{ documento.idTipoDocumentos.identificador }}" class="yes_radio" id="yes_radio{{ loop.index }}" {% if documento.idEstatus.id == 1 %} checked="checked" {% endif %} disabled>
                                      <label for="maybe_radio{{ loop.index }}" class="maybe-lbl">
                                          <i class="fa fa-question"></i>
                                      </label>
                                      <input type="radio" value="" name="{{ documento.idTipoDocumentos.identificador }}" class="maybe_radio" id="maybe_radio{{ loop.index }}" {% if documento.idEstatus.id == 2 %} checked="checked" {% endif %} disabled>
                                      <label for="no_radio{{ loop.index }}" class="no-lbl"><i
                                                  class="fa fa-close"></i></label><input type="radio" value="3"
                                                                                         name="{{ documento.idTipoDocumentos.identificador }}"
                                                                                         class="no_radio"
                                                                                         id="no_radio{{ loop.index }}" {% if documento.idEstatus.id == 3 %} checked="checked" {% endif %} disabled>

                                      <div class="toggle"></div>
                                  </div>
                                  {% endif %}
                              </div>
                          </div>
                        </div>
                         {% endif %}
                         {% endfor %}

                                                                                                        
                              
                    </div>
                </div>
                   {% else %}
                       <div class="col-md-5">
                           <h3>Documentos Para confirmar</h3>
                           Permisio inicia: {{ servicio.docentePermisoTiempo.last.fechaInicio | date("m-d-Y") }} <br>
                           Permisio finaliza: {{ servicio.docentePermisoTiempo.last.fechaFinal | date("m-d-Y") }} <br>
                           <div class="widget-content">


                               {% for documento in docente.documentosVerificados %}

                                   {% if documento.idServicio.id == servicio.id %}
                                       {% set extension = documento.ubicacion | split('.') | last %}
                                       <div {% if extension != "pdf" %}class="col-xs-6"{% else %}class="col-xs-12"{% endif %}>
                                           <div class="thumbnail">

                                               {% if extension != "pdf" %}
                                                   <a href="{{asset('uploads/permiso/'~ documento.ubicacion)}}" data-lightbox="trabajo">
                                                       <img src="{{ asset('uploads/permiso/thumb/'~ documento.ubicacion) }}" />
                                                   </a>
                                               {% else %}
                                                   <object type="application/pdf" data="{{asset('uploads/adscripcion/'~ documento.ubicacion)}}" width="100%" height="300px"></object>
                                               {% endif %}
                                               <div class="caption">
                                                   <p>{{ documento.idTipoDocumentos.nombre }}</p>
                                                   {% if documento.idEstatus.id == 2 or documento.idEstatus.id == 3 %}
                                                       <div class="wrapper">
                                                           <label for="yes_radio{{ loop.index }}" class="yes-lbl"><i class="fa fa-check"></i>
                                                           </label>
                                                           <input type="radio" value="1" name="{{ documento.idTipoDocumentos.identificador }}" class="yes_radio" id="yes_radio{{ loop.index }}" {% if documento.idEstatus.id == 1 %} checked="checked" {% endif %} >
                                                           <label for="maybe_radio{{ loop.index }}" class="maybe-lbl">
                                                               <i class="fa fa-question"></i>
                                                           </label>
                                                           <input type="radio" value="" name="{{ documento.idTipoDocumentos.identificador }}" class="maybe_radio" id="maybe_radio{{ loop.index }}" {% if documento.idEstatus.id == 2 %} checked="checked" {% endif %} disabled>
                                                           <label for="no_radio{{ loop.index }}" class="no-lbl"><i
                                                                       class="fa fa-close"></i></label><input type="radio" value="3"
                                                                                                              name="{{ documento.idTipoDocumentos.identificador }}"
                                                                                                              class="no_radio"
                                                                                                              id="no_radio{{ loop.index }}" {% if documento.idEstatus.id == 3 %} checked="checked" {% endif %} >

                                                           <div class="toggle"></div>
                                                       </div>
                                                   {% endif %}
                                               </div>
                                           </div>
                                       </div>
                                   {% endif %}
                               {% endfor %}



                           </div>
                       </div>
               {% endif %}

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


{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('assets/vendor/lightbox2/dist/js/lightbox.min.js') }}"></script>
    <script>
        var buttonpressed;
        $('#aprobado').click(function() {
            //alert("click"); return false;
            buttonpressed = $(this).attr('name');
            console.log($(':radio:checked').length);
            for (var i = 0; i < $(':radio:checked').length; i ++){
                console.log($(':radio:checked')[i]);
                if ( ($(':radio:checked')[i].value == "")) {
                    alert('Debes revisar todos los documentos para poder enviar la solicitud!');
                    $("#aprobado").button('reset');
                    return false;
                }

            }
            console.log($("input[type=submit][clicked=true]").val());
            if (buttonpressed == "aprobado") {
                for (var i = 0; i < $(':radio:checked').length; i++) {
                    console.log($(':radio:checked')[i]);
                    if (($(':radio:checked')[i].value == "3")) {
                        alert('No puedes aprobar una solicitud con documentos en estatus de rechazado');
                        $("#aprobado").button('reset');
                        return false;
                    }

                }
            }
        });

        $('#rechazar').click(function() {
            buttonpressed = $(this).attr('name')
        });

        $('#motivo_rechazo').on('hidden.bs.modal', function (e) {
            $("#modal_rechazo").button('reset');
        })

    </script>
    {% endblock %}