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

{% block module_content %}
  <div class="page-title">
    <div class="title_left">
        <h3>
            Empresas de la categoria "{{ categoria.nombreEs }}"
        </h3>
    </div>    
  </div>

  <div class="clearfix"></div>
  
  <div class="row">
    <div class="col-xs-6">
        <h4>Buscar empresas</h4>
        <br>
        <form id="busqueda-form" action="" class="row">
            <div class="col-xs-6">
                <input type="text" 
                name="busqueda" 
                placeholder="Nombre" 
                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></th>
                </tr>
            </thead>
            <tbody>
                <td colspan="2">No hay coincidencias</td>
            </tbody>
        </table>
    </div>
    <div class="col-xs-6">
        <h4>Empresas asignadas al evento</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></th>
                </tr>
            </thead>
            <tbody id="sortable">
                {% if empresasAsignadas|length %}
                {% for itemAsignado in empresasAsignadas %}
                    <tr class="item ui-state-default" 
                        data-idempresa="{{ itemAsignado.empresa.id }}" 
                        data-idevento="{{ itemAsignado.evento.id }}" 
                        data-idcategoria="{{ itemAsignado.categoria.id }}">
                        <td>
                            <i class="fa fa-sort" aria-hidden="true"></i> 
                        </td>
                        <td>{{ itemAsignado.empresa.nombre }}</td>
                        <td>
                            <form 
                            action="{{ path('admin_evento_categoria_empresa_desvincular', {
                                eventoId: evento.id,
                                id: categoria.id, 
                                empresaId: itemAsignado.empresa.id, 
                            }) }}">
                                <button class="btn btn-default btn-xs" type="submit">Desvincular</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="3">No hay empresas vinculadas</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">
        <a href="{{ path('admin_evento_categoria_list', {eventoId: evento.id }) }}" class="btn btn-primary">Volver al listado</a>
      </div>
    </div>
  </div>
  
{% endblock %}


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

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript">

        $('body').on('submit', '#busqueda-form', function (ev) {
            ev.preventDefault();
            $.post( 
                '{{ path("admin_evento_categoria_empresa_buscar", { eventoId:evento.id, id: categoria.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));
                            form = '<form action="/admin/evento/' +
                            response[i].eventoId + '/categoria/' +
                            response[i].categoriaId + '/empresa/' + 
                            response[i].id + '/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());   
                }
            );
        });

        $('body').on('click', '#resultados .vincular', function (ev) {
            ev.preventDefault();
            var el = $(this);
            $.post( 
                '',
                {
                    speakerId: el.parents('tr').data('id')
                }, 
                function( response ) {

                }
            );
        });

        $( function() {
            $( "#sortable" ).sortable({
                stop: function( event, ui ) {
                    setTimeout(function() {
                    var trItem = $('tr.item'), 
                        itemsOrdenados = [], idEmpresa;
                    
                    for (var i = 0; i < trItem.length; i++) {
                        idEmpresa = $(trItem[i]).data('idempresa');
                        if (idEmpresa === undefined) {
                            continue;
                        }
                        itemsOrdenados.push(
                            {
                                idCategoria: $(trItem[i]).data('idcategoria'),
                                idEvento: $(trItem[i]).data('idevento'),
                                idEmpresa: idEmpresa,
                            }
                        );
                    }
                    
                    $.post( 
                        '{{ path("admin_evento_categoria_empresa_ordenar", { eventoId:evento.id, id: categoria.id }) }}',
                        {
                            itemsOrdenados: itemsOrdenados
                        }, 
                        function( response ) {

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

{% endblock %}