{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"> <a href="{{ link_overview }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a> </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="well">
      <div class="row">
        <div class="col-sm-5">
          <div class="input-group date">
            <input type="text" class="form-control" id="input-date-start" data-date-format="YYYY-MM-DD" placeholder="{{ entry_date_start }}" value="{{ date_start }}" name="filter_date_start">
            <span class="input-group-btn">
            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span> </div>
        </div>
        <div class="col-sm-5">
          <div class="input-group date">
            <input type="text" class="form-control" id="input-date-end" data-date-format="YYYY-MM-DD" placeholder="{{ entry_date_end }}" value="{{ date_end }}" name="filter_date_end">
            <span class="input-group-btn">
            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span> </div>
        </div>
        <div class="col-sm-2 text-right"> <a id="button-filter" class="btn btn-primary" data-toggle="tooltip" title="{{ button_filter }}"><i class="fa fa-filter"></i></a> </div>
      </div>
    </div>
    <table class="table table-bordered table-hover">
      <thead>
      <tr>
        <th class="text-left">{{ column_ref }}</th>
        <th class="text-left">{{ column_status }}</th>
        <th class="text-left">{{ column_date_requested }}</th>
        <th class="text-left">{{ column_date_updated }}</th>
        <th class="text-center">{{ column_sku }}</th>
        <th class="text-center">{{ column_stock }}</th>
      </tr>
      </thead>
      <tbody>
        {% if not table_data %}
          <tr>
            <td class="text-center" colspan="6">{{ text_empty }}</td>
          </tr>
        {% endif %}
        {% for ref, row in table_data %}
          <tr>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ ref }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.status }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.date_requested }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.date_updated }}</td>
            {% for data in row.data %}
              <tr>
                <td class="text-center">{{ dataRow.sku }}</td>
                <td class="text-center">{{ dataRow.stock }}</td>
              </tr>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript"><!--
  $('#button-filter').on('click', function() {
    url = 'index.php?route=extension/openbay/amazon/stockUpdates&user_token={{ user_token }}';

    var filter_date_start = $('#input-date-start').val();

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

    var filter_date_end = $('#input-date-end').val();

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

  $(document).ready(function() {
    $('#input-date-start').datepicker({dateFormat: 'yy-mm-dd'});
    $('#input-date-end').datepicker({dateFormat: 'yy-mm-dd'});
  });

  $('.date').datetimepicker({
	language: '{{ datepicker }}',  
    pickTime: false
  });

  $('.datetime').datetimepicker({
	language: '{{ datepicker }}',
    pickDate: true,
    pickTime: true
  });

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