{{ header }}{{ column_left }}
<!-- Content Wrapper. Contains page content -->
<div id="content" class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div>
      <div class="pull-right">
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
      </div>
      <h1>
        {{ heading_title }}
      </h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  <!-- Alert -->
  <section class="content-header">
    {% if error_warning %}
      {% for error in error_warning %}
        <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>
      {% endfor %}
    {% endif %}

    {% if error_orders %}
      {% for error_order in error_orders %}
      <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_order.order_id }} - {{ error_order.error }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>
      {% endfor %}
    {% endif %}

    {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }} <button type="button" class="close" data-dismiss="alert">&times;</button></div>
    {% endif %}
  </section>
  <!-- /.alert -->

  <!-- Main content -->
  <section class="content">

    <!-- Default box -->
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">{{ text_list }}</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="{{ text_collapse }}">
            <i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div class="well">
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label" for="input-order-id">{{ entry_order_id }}</label>
                <input type="text" name="filter_order_id" value="{{ filter_order_id }}" placeholder="{{ entry_order_id }}" id="input-order-id" class="form-control" />
              </div>
              <div class="form-group">
                <label class="control-label" for="input-customer">{{ entry_customer }}</label>
                <input type="text" name="filter_customer" value="{{ filter_customer }}" placeholder="{{ entry_customer }}" id="input-customer" class="form-control" />
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label" for="input-order-status">{{ entry_order_status }}</label>
                <select name="filter_order_status_id" id="input-order-status" class="form-control">
                  <option value="*"></option>
                    {% if filter_order_status_id == '0' %}
                      <option value="0" selected="selected">{{ text_missing }}</option>
                    {% else %}
                      <option value="0">{{ text_missing }}</option>
                    {% endif %}
                    {% for order_status in order_statuses %}
                      {% if order_status.order_status_id == filter_order_status_id %}
                        <option value="{{ order_status.order_status_id }}" selected="selected">{{ order_status.name }}</option>
                      {% else %}
                        <option value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                      {% endif %}
                    {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label" for="input-channel">{{ entry_order_channel }}</label>
                <select name="filter_channel" id="input-channel" class="form-control">
                  <option value=""></option>
                  {% for channel in channels %}
                    {% if channel.module == filter_channel %}
                      <option value="{{ channel.module }}" selected="selected">{{ channel.title }}</option>
                    {% else %}
                      <option value="{{ channel.module }}">{{ channel.title }}</option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label" for="input-date-added">{{ entry_date_added }}</label>
                <div class="input-group date">
                  <input type="text" name="filter_date_added" value="{{ filter_date_added }}" placeholder="{{ entry_date_added }}" data-date-format="YYYY-MM-DD" id="input-date-added" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                  </span></div>
              </div>
            </div>
            <div class="col-sm-4">
              <button type="button" id="button-filter" class="btn btn-primary pull-right"><i class="fa fa-filter"></i> {{ button_filter }}</button>
            </div>
          </div>
        </div>
        <form action="{{ link_update }}" method="post" id="order-update-form">
          <div class="well">
            <div class="row">
              <div class="col-sm-12">
                <div class="form-group">
                  <div class="input-group">
                    <select name="change_order_status_id" class="form-control">
                    {% for order_status in order_statuses %}
                      <option value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                    {% endfor %}
                    </select>
                    <a data-toggle="tooltip" title="{{ button_filter }}" class="btn btn-primary input-group-addon" onclick="$('#order-update-form').submit();"><i class="fa fa-plus-circle"></i> {{ button_status }}</a> </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th width="1"><input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" /></th>
                  <th class="text-center">{% if sort == 'o.order_id' %} <a href="{{ sort_order }}" class="{{ order|lower }}">{{ column_order_id }}</a> {% else %} <a href="{{ sort_order }}">{{ column_order_id }}</a> {% endif %}</th>
                  <th class="text-center">{{ column_market_order_ref }}</th>
                  <th class="text-center">{% if sort == 'channel' %} <a href="{{ sort_channel }}" class="{{ order|lower }}">{{ column_channel }}</a> {% else %} <a href="{{ sort_channel }}">{{ column_channel }}</a> {% endif %}</th>
                  <th class="text-center">{% if sort == 'customer' %} <a href="{{ sort_customer }}" class="{{ order|lower }}">{{ column_customer }}</a> {% else %} <a href="{{ sort_customer }}">{{ column_customer }}</a> {% endif %}</th>
                  <th class="text-center">{% if sort == 'status' %} <a href="{{ sort_status }}" class="{{ order|lower }}">{{ column_status }}</a> {% else %} <a href="{{ sort_status }}">{{ column_status }}</a> {% endif %}</th>
                  <th class="text-center">{% if sort == 'o.date_added' %} <a href="{{ sort_date_added }}" class="{{ order|lower }}">{{ column_date_added }}</a> {% else %} <a href="{{ sort_date_added }}">{{ column_date_added }}</a> {% endif %}</th>
                  <th class="text-right">{{ column_action }}</th>
                </tr>
              </thead>
              <tbody>
              {% if orders %}
                {% for order in orders %}
                <tr>
                  <td style="text-align: center;">
                    {% if order.selected %}
                      <input type="checkbox" name="selected[]" value="{{ order.order_id }}" checked="checked" />
                    {% else %}
                      <input type="checkbox" name="selected[]" value="{{ order.order_id }}" />
                    {% endif %}
                  </td>
                  <td class="text-center">{{ order.order_id }}</td>
                  <td class="text-center">{{ order.market_order_ref }}</td>
                  <td class="text-center">{{ order.channel }}</td>
                  <td class="text-center">{{ order.customer }}</td>
                  <td class="text-center">{{ order.status }}</td>
                  <td class="text-center">{{ order.date_added }}</td>
                  <td class="text-right"><a href="{{ order.view }}" data-toggle="tooltip" title="{{ button_view }}" class="btn btn-info"><i class="fa fa-eye"></i></a></td>
                </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td class="text-center" colspan="7">{{ text_no_results }}</td>
                </tr>
              {% endif %}
              </tbody>
            </table>
          </div>
        </form>
        <div class="row">
          <div class="col-sm-6 text-left">{{ pagination }}</div>
          <div class="col-sm-6 text-right">{{ results }}</div>
        </div>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript"><!--
  $('#button-filter').on('click', function() {
  url = 'index.php?route=marketplace/openbay/orderlist&user_token={{ user_token }}';

  var filter_order_id = $('input[name=\'filter_order_id\']').val();

  if (filter_order_id) {
    url += '&filter_order_id=' + encodeURIComponent(filter_order_id);
  }

  var filter_customer = $('input[name=\'filter_customer\']').val();

  if (filter_customer) {
    url += '&filter_customer=' + encodeURIComponent(filter_customer);
  }

  var filter_order_status_id = $('select[name=\'filter_order_status_id\']').find(":selected").val();

  if (filter_order_status_id != '*') {
    url += '&filter_order_status_id=' + encodeURIComponent(filter_order_status_id);
  }

  var filter_channel = $('select[name=\'filter_channel\']').find(":selected").val();

  if (filter_channel != '') {
    url += '&filter_channel=' + encodeURIComponent(filter_channel);
  }

  var filter_date_added = $('input[name=\'filter_date_added\']').val();

  if (filter_date_added) {
    url += '&filter_date_added=' + encodeURIComponent(filter_date_added);
  }

	location = url;
});

  $('input[name=\'filter_customer\']').autocomplete({
    'source': function(request, response) {
      $.ajax({
        url: 'index.php?route=customer/customer/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
        dataType: 'json',
        success: function(json) {
          response($.map(json, function(item) {
            return {
              label: item['name'],
              value: item['customer_id']
            }
          }));
        }
      });
    },
    'select': function(item) {
      $('input[name=\'filter_customer\']').val(item['label']);
    }
  });

  $('.date').datetimepicker({
	language: '{{ datepicker }}',
    pickTime: false
  });
//--></script>
{{ footer }}
