{% extends 'base_app.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('assets/vendor/lightbox2/dist/css/lightbox.css') }}" rel="stylesheet">
    <style>
        .full{
            width: 100%;
        }
        .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.IdServicioCe.nombre }}
                        <code>CEA-{{ todo.idInstitucion.idEjeParroquia.IdEje.abreviacion }}-{{ todo.adscripcion.anoAdscripcion }}-{{ todo.adscripcion.correlativoAdscripcion }}</code>:
                        {{ todo }}
                    </h4>
                </div>
                <div class="col-md-3">
                    {% if servicio.idEstatus.id == 1 %}
                        <h4 class="alert alert-success">Estatus <strong>{{ servicio.idEstatus }}</strong> </h4>
                        <small>Activo desde: {{ servicio.fechaUltimaActualizacion | date("d-m-Y h:i:s") }}</small>
                    {% 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 Ingreso UBV:</label>
                                <input type="date" class="form-control" id="username" name="primerApellido"
                                       value="{{ todo.adscripcion.fechaIngreso|date('Y-m-d') }}" readonly/>
                            </div>
                            {% if todo.escalafones is not null %}
                                <div class="form-group">
                                    <label for="Escalafones">Escalafones:</label>
                                    <table class="table table-striped table-bordered">
                                        <th>Escalafón</th>
                                        <th>Fecha</th>
                                        <th>Tipo</th>
                                        {% for escala in todo.escalafones %}

                                            <tr>
                                                <td>{{ escala.idEscala }}</td>
                                                <td>{{ escala.fechaEscala | date('d-m-Y') }}</td>
                                                <td>{{ escala.idTipoEscala }}</td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                    {% if servicio.idServicioCe.id == 5 %} <p>Escalfón al que está solicitando: <strong>{{ proxEscala.nombre }} </strong></p>{% endif %}
                                    {% if todo.escalafones is empty %}
                                        <div class="form-group">
                                            <h6 class="alert alert-warning">El Docente al momento de la solicitud
                                                informa no
                                                haber realizado Concurso de oposición</h6>
                                        </div>
                                        <!-- <button class="btn btn-success btn-sm">Añadir Concurso de Oposición</button>                               -->
                                    {% endif %}


                                </div>
                            {% endif %}


                            {% if todo.adscripcion.idLineaInvestigacion is not null %}
                                <div class="form-group">
                                    <label for="username">Area y Línea de Investigación:</label>
                                    <ul>
                                        <li>{{ todo.adscripcion.idLineaInvestigacion.idAreaInvestigacion }}</li>
                                        <li>{{ todo.adscripcion.idLineaInvestigacion }}</li>
                                    </ul>
                                </div>
                            {% endif %}


                            {% if todo.adscripcion.tituloTrabajo is not null %}
                                <div class="form-group">
                                    <label for="titulo">Título del Trabajo:</label>
                                    <input type="text" class="form-control"
                                           value="{{ todo.adscripcion.tituloTrabajo }}" readonly/>
                                </div>
                            {% endif %}

                        </div>
                    </div>
                    <div class="col-md-5">
                        <h4>
                            Documentos en <span style="color: red;">Rojo</span> (rechazados),
                            en <span style="color: green;">verde</span> (aprobados),
                            <span style="color:#8A6D3B;" >amarrillos </span> en espera de revisión.
                        </h4>
                        <div class="widget-content">

                            {% for verificado in todo.documentosVerificados | sort %}
                                {% if verificado.idServicio.id == servicio.id %}
                                    {% if verificado.idEstatus.id == 3 %}
                                        {% if verificado.idTipoDocumentos.id <= 4 %}
                                            <a style="color:red;" target="_blank" href="{{ asset('uploads/adscripcion/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% else %}
                                            <a style="color:red;" target="_blank" href="{{ asset('uploads/ascenso/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% endif %}

                                    {% elseif verificado.idEstatus.id == 1 %}
                                        {% if verificado.idTipoDocumentos.id <= 4 %}
                                            <a style="color:green;" target="_blank" href="{{ asset('uploads/adscripcion/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% else %}
                                            <a style="color:green;" target="_blank" href="{{ asset('uploads/ascenso/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% endif %}
                                    {% else %}
                                        {% if verificado.idTipoDocumentos.id <= 4 %}
                                            <a target="_blank" style="color:#8A6D3B;" href="{{ asset('uploads/adscripcion/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% else %}
                                            <a style="color:#8A6D3B;" target="_blank" href="{{ asset('uploads/ascenso/' ~ verificado.ubicacion) }}">{{ verificado.idTipoDocumentos.nombre }}</a><br>
                                        {% endif %}
                                    {% endif %}
                                {% endif %}

                            {% endfor %}

                            {% form_theme form 'bootstrap_3_layout.html.twig' %}
                            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
                            {{ form_widget(form) }}
                            {{ form_end(form) }}



                        </div>
                    </div>


                </div>

            <!-- MOSTRAR ACTIVIDAD PIDA DEL DOCENTE  -->
            {% if not todo.pida %}
                <p class="alert alert-warning">El Docente no ha registrado todavía su actividad PIDA</p>
            {% else %}

                <div class="col-md-12">
                    {% if servicioPida.idEstatus.id == 2 %}
                        <h4 class="alert btn-warning">El docente Todavía está creando su PIDA</h4>
                    {% elseif servicioPida.idEstatus.id == 4 %}
                        <h4 class="btn btn-primary col-lg-12" >Este Pida está formalizado y listo para ser revisado por la coordianción</h4>
                    {% endif %}
                    <div class="account-container full register">

                        <div class="content clearfix">

                            <h2>PIDA <span class="small" style="float: right;"> Estatus: {{ servicioPida.idEstatus }}</span></h2>
                            <table class="table table-bordered">
                                <th>Objetivo Histórico</th>
                                <th>Actividad Docente</th>
                                <th>Tarea Específica</th>
                                <th>Plazo</th>
                                <th>Estatus</th>
                                {% for pid in todo.pida | sort %}
                                    {#solo  muestre la vigente #}
                                    {% if pid.idDocenteServicio.id == servicioPida.id %}
                                    <tr>
                                    <td rowspan="{{ pid.pidaTareaEspecifico | length }}">
                                        {{ pid.idPlanHistoricoNacionalEstrategico.nombre }}

                                    </td>
                                    <td rowspan="{{ pid.pidaTareaEspecifico | length }}">
                                        {{ pid.idActividadDocente.nombre }}
                                    </td>

                                    {% for tarea in pid.pidaTareaEspecifico | sort %}
                                        <td>{{ tarea.pidaTareaEspecifico }}

                                        </td>
                                        <td>{{ tarea.idPidaPlazo }}</td>
                                        <td>
                                            {{ tarea.idPidaEstatus }}

                                        </td>

                                        </tr>
                                    {% endfor %}

                                    </tr>
                                    {% endif %}
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}
            {#{% if servicio.idEstatus.id == 3 %}
                    <button type="submit" class="btn btn-success" id="actualizar" name="actualizar">Actualizar Adscripción</button>
                {% endif %}#}


        </div>

    </div>

{% endblock %}


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

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

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

        $('form').submit(function() {
            console.log($(':radio:checked', this).length);
            for (var i = 0; i < $(':radio:checked', this).length; i ++){
                console.log($(':radio:checked', this)[i]);
                if ( ($(':radio:checked', this)[i].value == "")) {
                    alert('Debes revisar todos los documentos para poder enviar la solicitud!');
                    return false;
                }

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

                }
            }

        });
    </script>
{% endblock %}