{% extends 'EcdEmailingBundle::layout.html.twig' %}

{% block bridge %}
    {{ ecd_menu('order') }}
    <div style="clear: left"></div>
{% endblock %}

{% block title %}{% trans %}ecd_emailing.order.index.meta.title{% endtrans %}{% endblock %}

{% block content %}

<div id="ecd_emailing_order_index" class="container">

    <h1>{% trans %}ecd_emailing.order.index.title{% endtrans %}</h1>

    {% include 'EcdEmailingBundle:Order:filter.html.twig' with {'form': filterForm} %}


    <div id="highlighted-tabs">
        <div id="highlighted-states-selector" class="selected-sent">
            <img id="loading" src="{{ asset('bundles/ecdemailing/images/loader_tabs.gif') }}" alt="loading" title="loading" />
            <ul class="states-tabs">
            <li id="tab-sent"
                class="state-tab printing-state-sent"
                onclick="selectItem('highlighted-states-selector', 'sent'); refreshState('sent', '#content-sent');">
                {% trans %}ecd_emailing.order.index.status_sent{% endtrans %}
            </li>
            <li id="tab-invalid"
                class="state-tab printing-state-canceled_by_printer"
                onclick="selectItem('highlighted-states-selector', 'invalid'); refreshState('canceled', '#content-invalid');">
                {% trans %}ecd_emailing.order.index.status_canceled{% endtrans %}
            </li>
            <li id="tab-in_progress"
                class="state-tab printing-state-in_progress"
                onclick="selectItem('highlighted-states-selector', 'in_progress'); refreshState('requireValidation', '#content-in_progress');">
                {% trans %}ecd_emailing.order.index.status_needs_validation{% endtrans %}
            </li>
            <li id="tab-valid"
                class="state-tab printing-state-valid"
                onclick="selectItem('highlighted-states-selector', 'valid'); refreshState('completed', '#content-valid');">
                {% trans %}ecd_emailing.order.index.status_validation_completed{% endtrans %}
            </li>
            </ul>

            <div id="content-sent" class="state-content"></div>
            <div id="content-invalid" class="state-content"></div>
            <div id="content-in_progress" class="state-content"></div>
            <div id="content-valid" class="state-content"></div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
$(document).ready(function () {
    $('#loading')
        .hide()  // hide it initially
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;
    refreshState('sent', '#content-sent');

    $('#table_order tr.hoverable td:not(.actions)').on('click', function (event) {
      window.location = $(this).parent().find('td.actions a.details').attr('href');

    });

});
function refreshState(code, update) {
    $("#filter_currentState").attr('value', code);
    $.ajax({
      url: '{{ path('ecd_emailing_order_state') }}',
      type: 'POST',
      data: $("#form_filter_order").serialize(),
      success: function(data) {
        $(update).html(data);
      }
    });
}

function selectItem(node, code)
{
  if(node) {
    switch(typeof(node))
    {
      case 'string':
        selectItem(document.getElementById(node), code);
        break;
      case 'object':
        var classes = node.className.split(" ");

        for(var counter = 0; counter < classes.length; counter++) { // parcourt des classes de l'objet.
          if(classes[counter].match(/^selected-/i) && classes[counter] !== 'selected-' + code) { // Test si classe d'association des inputs.
            $(node).removeClass(classes[counter]);
          } // Test si classe d'association des inputs.
          $(node).addClass('selected-' + code);
        } // parcourt des classes de l'objet.

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