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

{% block stylesheets %}
    <link href="{{ asset('js/jquery-ui/jquery-ui.min.css') }}" rel="stylesheet">
{% endblock %}    

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
    <script type="text/javascript">

        $(function () {

            var collection = [],
                    membre,
                    initializeSortable = false,
                    autor_search = $('#autor_search'),
                    result = $('#autors_result');

            $('#proclamo_appbundle_projecte_grup').autocomplete({
                source: function (request, response) {

                    $.ajax({
                        url: '{{ path('projectes_search_agrupacio') }}',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response(data.data.map(function (item) {
                                return item.grup;
                            }));
                        }
                    })
                },
                minLength: 1
            });

            $('.membres').each(function (idx, el) {
                var autor = {
                    nom: $(el).data('nom')
                }
                collection.push(autor);
            });

            $('#autor_search').autocomplete({
                source: function (request, response) {

                    $.ajax({
                        url: '{{ path('personal_search_nom_json') }}',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response($.map(data.data, function (item) {
                                return {value: item.nom, nom: item.nom};
                            }));
                        }
                    });
                },
                minLength: 1,
                select: function (event, ui) {
                    membre = ui.item;
                }
            });

            $('#add_button').on('click', function (ev) {

                stopEvent(ev);

                var autor, nom = autor_search.val();

                if (nom) {
                    if (!membre) {
                        membre = {
                            nom: nom
                        }
                    }

                    if (collection.map(function (el) {
                        return el.nom;
                    }).indexOf(nom) === -1) {
                        collection.push(membre);

                        autor = createAutor(membre.nom);

                        result.append(autor);                        
                    }
                    
                    {#if (!initializeSortable) {
                        result.sortable({
                            placeholder: "ui-state-highlight",
                            cursor: "move"
                        });
                        result.disableSelection();
                        initializeSortable = true;
                    }
                    
                    result.sortable("refresh");#}
                }

                autor_search.val("");
                membre = null;

            });

            function stopEvent(ev) {
                ev.preventDefault();
                ev.stopPropagation();
            }

            function createAutor(nom) {
                var label = $('<label></label>').text(nom);
                var a = $('<a></a>').attr('href', '#').attr('class', 'delete_nom').data('nom', nom).on('click', deleteNom).text('Esborrar');
                var hidden = $('<input></input>').attr('type', 'hidden').attr('name', 'membres[]').attr('value', nom);
                var html = $('<li></li>').attr("class", "autor_result").append(label).append(a).append(hidden);
                return html;
            }

            function deleteNom(ev) {

                stopEvent(ev);

                var nom = $(this).data('nom'),
                        col = [];

                for (var i = 0, l = collection.length; i < l; i++) {
                    if (collection[i].nom !== nom) {
                        col.push(collection[i]);
                    }
                }

                collection = col;

                $(ev.target).parent().remove();
            }

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

{% form_theme form 'form.html.twig' %}

{% block body -%}
    <div class="zona-edicio">
        <h1>Nou projecte com a investigador/a principal per a {{ personal.nomcognoms }}</h1>

        <form method="POST" action="{{ path('projecte_create', { 'id': personal.id }) }}" {{ form_enctype(form) }} class="pure-form pure-form-aligned">

            {{ form_row(form.grup) }}
            {{ form_row(form.titol) }}
            {{ form_row(form.inici) }}
            {{ form_row(form.final) }}
            {{ form_row(form.codi) }}
            {{ form_row(form.link) }}
            {{ form_row(form.descripcio) }}

            <div class="pure-control-group">
                <label>Autors</label>
                <input type="text" id="autor_search" placeholder="Buscar"/>
                <a href="#" id="add_button" class="pure-button">Afegir</a>
            </div>    

            <ul id="autors_result">
                {% for autor in entity.autors %}
                    <li class="autor_result">
                        <label>{{ autor.nomCognoms }}</label>
                        <input class="membres" type="hidden" name="membres[]" value="{{ autor.nomCognoms }}" data-nom="{{ autor.nomCognoms }}" />
                    </li>
                {% endfor %}
            </ul>    

            {{ form_row(form._token) }}

            <div class="pure-controls">
                <a class="pure-button pure-button-active" href="{{ path('personal_show', { 'id': personal.id }) }}">Cancelar</a>
                <input class="pure-button pure-button-active" type="submit" value="Crear" />
            </div>
        </form>

    </div>
{% endblock %}