{% extends 'base_app.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/vendor/select2/dist/css/select2.min.css') }}"> 
    
    
    <style>               
        h1, h4{
            margin:0;
        }
        
        .container{
            margin-bottom: 0;
        }

        .account-container{
            width:100%;
            margin-left: 50px;
        }

    </style>
{% endblock %}



{% block body %}
    <div class="container">
        <h4 class="alert alert-info"><i class="fa fa-info-circle"></i>
            Estimado (a) Docente 
            <strong>{{app.user.idRolInstitucion.idRol.idPersona.primerNombre}}
                {{app.user.idRolInstitucion.idRol.idPersona.primerApellido}}</strong>,
            Mientras se verifican sus datos de adscripción, lo invitamos a registrar el PIDA rellenando
            los datos que solicitamos a continuación
            
        </h4>
    </div>
    <div class="row">
        <div class="col-md-5">


            <div class="account-container register">
                <div class="content clearfix">
                    <h1>PIDA</h1>
                    {% form_theme form 'bootstrap_3_layout.html.twig' %}
                    {{ form_start(form) }}
                    {{ form_row(form.id_plan_historico_nacional_estrategico) }}
                    {{ form_row(form.id_actividad_docente) }}
                    <ul class="actividad" data-prototype="{{ form_widget(form.pidaTareaEspecifico.vars.prototype)|e('html_attr') }}">

                    </ul>

                    <button type="submit" class="btn btn-success">Añadir</button>
                    <button type="submit" class="btn btn-primary">Añadir y Finalizar</button>
                    {{ form_end(form) }}
                </div>

            </div>
        </div>
        {% if pida %}
            <div class="col-md-6">
                <div class="account-container register">
                    <div class="content clearfix">
                        <h2>Mi pida <span class="small" style="float: right;"> Estatus: {{ servicio.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 pida %}
                            <tr>
                        <td rowspan="{{ pid.pidaTareaEspecifico | length }}">{{ pid.idPlanHistoricoNacionalEstrategico.nombre }}</td>
                        <td rowspan="{{ pid.pidaTareaEspecifico | length }}">{{ pid.idActividadDocente.nombre }}</td>

                        {% for tarea in pid.pidaTareaEspecifico %}
                                <td>{{ tarea.pidaTareaEspecifico }}
                                    {% if loop.index == loop.length %}
                                        <a data-id="{{ pid.id }}"  id="add_actividad{{ pid.id }}" data-toggle="modal" data-target="#nueva_actividad" class="btn btn-xs btn-warning">+</a>
                                    {% else %}
                                        <a data-id="{{ tarea.id }}"  id="remove{{ tarea.id }}" class="btn btn-xs btn-danger">-</a>
                                    {% endif %}
                                </td>
                                <td>{{ tarea.idPidaPlazo }}</td>
                                <td>{{ tarea.idPidaEstatus }}</td>

                            </tr>
                        {% endfor %}

                            </tr>
                        {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>



    <div class="modal fade" id="nueva_actividad" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">

            <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">Nueva Actividad</h4>
                </div>

                <div class="modal-body">


                    {% form_theme editForm 'bootstrap_3_layout.html.twig' %}
                    {{ form_start(editForm) }}
                    {{ form_widget(editForm) }}

                    <input type="hidden" id="id_pida" name="id_pida" value="" >
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-success" name="rechazar" id="rechazar">Añadir Actividad

                    </button>
                </div>
                {{ form_end(editForm) }}
            </div>

        </div>
    </div>

{% endblock %}




{% block javascripts  %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('assets/vendor/select2/dist/js/select2.full.min.js') }}"></script>
    <script type="text/javascript">
        
        $('select').select2();
        var $addActividadLink = $('<a href="#" class="add_actividad_link">Añadir Tarea Específica</a>');
        var $newLinkLiActividad = $('<li></li>').append($addActividadLink);
        jQuery(document).ready(function() {
            $ActividadHolder = $('ul.actividad');
            $ActividadHolder.append($newLinkLiActividad);
            $ActividadHolder.data('index', $ActividadHolder.find(':input').length);
            console.log($ActividadHolder);
            $addActividadLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addActividadForm($ActividadHolder, $newLinkLiActividad);
            });

        });

        function addActividadForm($contenidoHolder, $newLinkLiContenido) {
            // Get the data-prototype explained earlier
            var prototype = $contenidoHolder.data('prototype');
            console.log(prototype);

            // get the new index
            var index = $contenidoHolder.data('index');

            // Replace '$$name$$' in the prototype's HTML to
            // instead be a number based on how many items we have
            var newFormContenido = prototype.replace(/__name__/g, index);

            // increase the index with one for the next item
            $contenidoHolder.data('index', index + 1);

            // Display the form in the page in an li, before the "Add a tag" link li
            var $newFormLiContenido = $('<li></li>').append(newFormContenido);

            // also add a remove button, just for this example
            $newFormLiContenido.append('<a href="#" class="remove-tag">x</a>');

            $newLinkLiContenido.before($newFormLiContenido);

            // handle the removal, just for this example
            $('.remove-tag').click(function(e) {
                e.preventDefault();

                $(this).parent().remove();

                return false;
            });


        }

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

        var buttonpressed;
        $('[id^="add_"]').click(function() {
            alert("presionado: " + $(this).attr('data-id'))
            $("#id_pida").val($(this).attr('data-id'));
        });

        $('[id^="remove"]').click(function() {
            var x = confirm("eliminar tarea: " + $(this).attr('data-id'));
            if(x) {
                $.ajax({
                    method: "POST",
                    url: "{{ url('ajax_eliminar_tarea') }}",
                    async: true,
                    cache: false,
                    data: ({eliminar: $(this).attr('data-id')}),
                    success: function (data) {
                        console.log(data);
                        location.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);

                    }

                });
            }
        });





    </script>
{% endblock %}