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

{% block module_content %}
  
  {{ include('admin/_flash_messages.html.twig') }}

  <div class="page-title">
    <div class="title_left">
      <h3>Items del "Día {{ fecha.nombre }}"</h3>
    </div>    
  </div>

  <div class="clearfix"></div>
  
  {% if entity.agenda %}
  <div class="wrapper-table-agenda table-responsive">
    <table class="table table-striped jambo_table bulk_action">
      <thead>
        <tr class="headings">
          <th class="column-title">#</th>
          <th class="column-title">Item </th>
          <th class="column-title">Horario </th>
          <th class="column-title no-link last"><span class="nobr">Acciones</span></th>
        </tr>
      </thead>

      <tbody id="sortable">
        {% if items|length %}
        {% for item in items %}
        <tr class="item even pointer" data-iditem="{{ item.id }}">
          <td>
              <i class="fa fa-sort" aria-hidden="true"></i> 
          </td>
          <td>{{ item.tituloEs }}</td>
          <td>
            {{ item.horaDesde ~ ':' ~ item.minutosDesde }}
            /
            {{ item.horaHasta ~ ':' ~ item.minutosHasta }}
          </td>
          <td class=" last">
            <a 
              href="{{ path('admin_evento_agenda_fecha_items_edit', {
                id: entity.id,
                agendaId: entity.agenda.id,
                fechaId: fecha.id,
                itemId: item.id,
              }) }}" 
              class="btn btn-primary btn-xs" 
            ><i class="fa fa-edit"></i> Editar</a>

            <a 
              href="{{ path('admin_evento_agenda_fecha_items_speakers', {
                id: entity.id,
                agendaId: entity.agenda.id,
                fechaId: fecha.id,
                itemId: item.id,
              }) }}" 
              class="btn btn-primary btn-xs" 
            ><i class="fa fa-edit"></i> Speakers</a>

            <a 
              href="{{ path('admin_evento_agenda_fecha_items_empresas', {
                id: entity.id,
                agendaId: entity.agenda.id,
                fechaId: fecha.id,
                itemId: item.id,
              }) }}" 
              class="btn btn-primary btn-xs" 
            ><i class="fa fa-edit"></i> Empresa sponsor</a>
            
            {{ form_start(deleteForms[item.id]) }}
              <button type="submit" class="btn btn-danger btn-xs" 
                data-toggle="confirmation" 
                data-title="Realizar accion?" 
                data-btn-ok-label="Si" 
                data-btn-cancel-label="No"
              ><i class="fa fa-remove"></i> Borrar</button>
            {{ form_end(deleteForms[item.id]) }}
          </td>
        </tr>
        {% endfor %}
      {% else %}
      <tr class="even pointer">
        <td colspan="2">No hay items creados para esta fecha</td>
      </tr>
      {% endif %}         
      </tbody>
    </table>
  </div>
  {% endif %}

  <div class="actions">
      <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
        <a 
        href="{{ path('admin_evento_agenda_edit', {id: entity.id, agendaId: agenda.id}) }}" 
        class="btn btn-primary">Volver a fechas</a>
        <a href="{{ path('admin_evento_agenda_fecha_items_new', 
        { id: entity.id, agendaId: agenda.id, fechaId: fecha.id }) }}" 
          class="btn btn-success">Crear item</a>
      </div>
    </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script type="text/javascript">
    $( function() {
      $( "#sortable" ).sortable({
          stop: function( event, ui ) {
            setTimeout(function() {
              var trItem = $('tr.item'), 
                  items = [], itemId;
              
              for (var i = 0; i < trItem.length; i++) {
                  itemId = $(trItem[i]).data('iditem');
                  if (itemId === undefined) {
                      continue;
                  }
                  items.push(itemId);
              }
              
              $.post( 
                  '{{ path("admin_evento_agenda_fecha_items_ordenar", { id:entity.id, agendaId: agenda.id, fechaId: fecha.id }) }}',
                  {
                      items: items
                  }, 
                  function(response) {}
              );
            }, 500);
          }
      });
      $( "#sortable" ).disableSelection();
    });
  </script>
{% endblock %}