{% 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">
        {% for message in app.session.flashBag.get('danger') %}
            <div class="alert alert-danger">{{ message }}</div>
        {%endfor %}

        {% for message in app.session.flashBag.get('success') %}
            <div class="alert alert-success">{{ message }}</div>
        {%endfor %}

        {% for message in app.session.flashBag.get('warning') %}
            <div class="alert alert-warning">{{ message }}</div>
        {%endfor %}
    </div>
    <div class="row">
        {% if not servicio or servicio.idEstatus.id == 2 or servicio.idEstatus.id == 5 %}
        <div class="col-md-4">


            <div class="panel panel-white">
                <div class="panel-heading clearfix">
                    <h4>Creación del PIDA</h4>
                </div>
                <div class="panel-body">
                    {% 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>

                    {{ form_end(form) }}
                </div>

            </div>
        </div>
        {% endif %}
        {% if pida %}
        {% if servicio.idEstatus.id == 2 %}
            <div class="col-md-7">
        {% else %}
            <div class="col-md-11">
        {% endif %}
                <div class="panel panel-white">
                    <div class="panel-heading clearfix">
                        <h4>Mi PIDA</h4><span class="small" style="float: right;"> Estatus: {{ servicio.idEstatus }}</span>
                    </div>
                    <div class="panel-body">


                        {% if not caduca %}
                            {% form_theme caducidadForm 'bootstrap_3_layout.html.twig' %}
                                {{ form_start(caducidadForm) }}
                            <div class="row">
                                <div class="col-lg-5">
                                {{ form_row(caducidadForm.fechaInicio) }}
                                </div>
                                <div class="col-lg-5">
                                    {{ form_row(caducidadForm.fechaFinal) }}
                                </div>
                                {% if servicio %}
                                    <div class="col-lg-2">
                                        <button type="submit"> Asignar</button>
                                    </div>
                                {% endif %}
                                </div>
                                {{ form_end(caducidadForm) }}
                        {% else %}
                            PIDA válido desde: {{ caduca.fechaInicio | date('d-m-Y')}} hasta: {{ caduca.fechaFinal | date('m-d-Y') }}.   duración total PIDA: ( {%  if caducaAnos > 0  %} {{ caducaAnos }} años {% endif %}{{ caducaMeses }} meses con {{ caducaDias }} días  )

                        {% endif %}
                        <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 | sort %}
                            <tr>
                        <td rowspan="{{ pid.pidaTareaEspecifico | length }}">
                            {{ pid.idPlanHistoricoNacionalEstrategico.nombre }}
                            {% if servicio.idEstatus.id == 2 %}<a data-id="{{ pid.id }}"  id="delete{{ pid.id }}" class="btn btn-xs btn-danger">-</a>{% endif %}
                        </td>
                        <td rowspan="{{ pid.pidaTareaEspecifico | length }}">
                            {{ pid.idActividadDocente.nombre }}
                        </td>

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

                            </tr>
                        {% endfor %}

                            </tr>
                        {% endfor %}
                        </table>
                        {% if servicio.idEstatus.id == 2 %}<button id="finalizarPida" data-servicio="{{ servicio.id }}" class="btn btn-primary">Finalizar PIDA</button>{% endif %}
                    </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>


    <div class="modal fade" id="nuevo_estatus" 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 estatusForm 'bootstrap_3_layout.html.twig' %}
                    {{ form_start(estatusForm) }}
                    {{ form_widget(estatusForm) }}

                    <input type="hidden" id="id_estatus" name="id_estatus" 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);

                    }

                });
            }
        });


        $('[id^="delete"]').click(function() {
            var x = confirm("eliminar Labor completa: " + $(this).attr('data-id'));
            if(x) {
                $.ajax({
                    method: "POST",
                    url: "{{ url('ajax_eliminar_labor') }}",
                    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);

                    }

                });
            }
        });

        $('#finalizarPida').click(function() {
            var x = confirm("Desea terminal la edición y Finalizar su pida?");
            if(x) {
                $.ajax({
                    method: "POST",
                    url: "{{ url('ajax_finalizar_pida') }}",
                    async: true,
                    cache: false,
                    data: ({finalizar: $(this).attr('data-servicio')}),
                    success: function (data) {
                        console.log(data);
                        location.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);

                    }

                });
            }
        });



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





    </script>
{% endblock %}