{% extends "admin/base.html.twig" %}

{% block module_content %}
  <div class="page-title">
    <div class="title_left">
        <h3>{% if rol == 1 %}Speakers{% else %}Comité{% endif %} 
        del evento: "{{ entity.nombreEs }}"
        </h3>
    </div>    
  </div>

  <div class="clearfix"></div>
  
  <div class="row">
    <div class="col-xs-6">
        <h4>Buscar personas</h4>
        <br>
        <form id="busqueda-form" action="" class="row">
            <div class="col-xs-6">
                <input type="text" 
                name="busqueda" 
                placeholder="Nombre/Apellido" 
                class="form-control"> 
            </div>
            <div class="col-xs-6">
                <button class="btn btn-primary" 
                type="submit">Buscar</button>
            </div>
        </form>
        <br>
        <table id="resultados" class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <td colspan="3">No hay coincidencias</td>
            </tbody>
        </table>
    </div>
    <div class="col-xs-6">
        <h4>{% block titleAsignados %}Personas asignadas al evento{% endblock %}</h4>

        <br>
        <div class="row" style="height:39px;"></div>
        <br>

        <table id="vinculados" class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th>#</th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="sortable">
                {% if speakersAsignados|length %}
                {% for speakerAsignado in speakersAsignados %}
                    <tr class="speaker ui-state-default" data-idpersona="{{ speakerAsignado.persona.id }}">
                        <td>
                            <i class="fa fa-sort" aria-hidden="true"></i> 
                        </td>
                        <td>{{ speakerAsignado.persona.nombre }}</td>
                        <td>{{ speakerAsignado.persona.apellido }}</td>
                        <td>
                            <form action="
                            {% block desvincularFormAction %}
                            {{ path('admin_evento_personas_desvincular', {
                                id: entity.id, personaId: speakerAsignado.persona.id, rol: rol
                            }) }}
                            {% endblock %}">
                                <button class="btn btn-default btn-xs" type="submit">Desvincular</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="4">No hay speakers vinculados</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
  </div>

  <div class="row">
    <div class="form-group" style="margin-top:60px;">
      <div class="col-xs-12 text-center">
        {% block actionsBottom %}
        <a href="{{ path('admin_evento_edit', {id: entity.id }) }}" class="btn btn-primary">Volver al evento</a>
        {% endblock %}
      </div>
    </div>
  </div>
  
{% endblock %}


{% block javascripts %}
    {{ parent() }}

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    {% block scriptSection %}
    <script type="text/javascript">
        var rol = {{ rol }},
            eventoId = {{ entity.id }};

        $('body').on('submit', '#busqueda-form', function (ev) {
            ev.preventDefault();
            $.post( 
                '{{ path("admin_evento_personas_buscar", {id:entity.id}) }}',
                {
                    busqueda: $('#busqueda-form input').val()
                }, 
                function( response ) {
                    var data = $('<div />'), form, $tr;
                    if (response.length) {
                        for (var i = 0; i < response.length; i++) {
                            $tr = $('<tr />');
                            $tr.append($('<td />').text(response[i].nombre));
                            $tr.append($('<td />').text(response[i].apellido));
                            form = '<form action="/admin/evento/' +
                            response[i].eventoId + '/personas/' +
                            response[i].id + '/rol/' + rol + '/vincular">';
                            form += '<button class="btn btn-default btn-xs" type="submit">Vincular</button>';
                            form += '</form>';
                            $tr.append($('<td />').html(form));
                            data.append($tr);
                        }
                    } else {
                        $tr = $('<tr />');
                        $tr.append(
                            $('<td />').prop('colspan', 3).text('No hay coincidencias')
                        );
                        data.append($tr);
                    }

                    $('#resultados').show().find('tbody').html(data.html());   
                }
            );
        });

        $( function() {
            $( "#sortable" ).sortable({
                stop: function( event, ui ) {
                    setTimeout(function() {
                    var trSpeakers = $('tr.speaker'), 
                        eventoPersonas = [], idPersona;
                    
                    for (var i = 0; i < trSpeakers.length; i++) {
                        idPersona = $(trSpeakers[i]).data('idpersona');
                        if (idPersona === undefined) {
                            continue;
                        }
                        eventoPersonas.push(
                            {
                                idPersona: idPersona,
                                idEvento: eventoId,
                            }
                        );
                    }
                    
                    $.post( 
                        '{{ path("admin_evento_personas_ordenar", {id:entity.id, rol: rol}) }}',
                        {
                            eventoPersonas: eventoPersonas
                        }, 
                        function( response ) {

                        }
                    );
                    }, 500);
                }
            });
            $( "#sortable" ).disableSelection();
        } );
    </script>
    {% endblock %}

{% endblock %}