[% USE HTML %]
[%- USE LxERP %]
[%- USE T8 %]
[%- USE L %]

[% SET size=50 %]
[% SET show_images=0 %]

<h1>[% title %]</h1>
<div style="padding-bottom: 15px">
[% 'Filter' | $T8 %]:
<form id="filter" name="filter" method="post" action="controller.pl">
 <table>
  </tr>
    <td>[% 'Customer' | $T8 %]</td>
    <td>[% L.customer_vendor_picker('filter.order.customer.id', FORM.customer_id, type='customer', class="filter", size=size) %]</td>
  </tr>
  <tr>
    <td>[% 'Part' | $T8 %]</td>
    <td>[% L.input_tag('filter.part.all:substr:multi::ilike', FORM.part, size = size, class="filter") %]</td>
  </tr>
  <tr>
    <td>[% 'Order Number' | $T8 %]</td>
    <td>[% L.input_tag('filter.order.ordnumber:substr::ilike', FORM.ordnumber, size = 10, class="filter") %]</td>
  <tr>
  <tr>
    <td>[% 'Order Date' | $T8 %]</td>
    <td>[% 'From' | $T8 %] [% L.date_tag("filter.order.transdate:date::ge", filter.order.transdate_date___ge, class="filter") %] [% 'Until' | $T8 %] [% L.date_tag('filter.order.transdate:date::le', filter.order.transdate_date__le, class="filter") %]</td>
  <tr>
  <tr>
    <td>[% 'Description' | $T8 %]</td>
    <td>[% L.input_tag('filter.description:substr::ilike', filter.description_substr__ilike, size = size, class="filter") %]</td>
  </tr>
  <tr>
    <td>[% 'Long Description' | $T8 %]</td>
    <td>[% L.input_tag('filter.longdescription:substr::ilike', filter.longdescription_substr__ilike, size = size, class="filter") %]  </tr>
  <tr>
    <td>[% 'Show images' | $T8 %]</td>
    <td>[% L.checkbox_tag('show_images', checked=show_images) %]  </tr>
  </tr>
</table>
[% L.button_tag("this.form.reset(); refresh_plot();", LxERP.t8("Reset")) %]
</form>

<div id="orderitems" style="padding-top: 20px">
[% PROCESS 'order_items_search/_order_item_list.html' %]
</div>


<script type="text/javascript">
  $(function() {
    [% IF FORM.customer_id %]
      $( "#filter_part_all_substr_multi_ilike" ).focus();
    [% ELSE %]
      $( "#filter_order_customer_id_name" ).focus();
    [% END %]

    addInputCallback($(".filter"), refresh_plot , 300 );

    $('#show_images').change(function(){
      refresh_plot();
    });
  });


  function refresh_plot() {
    var filterdata = $('#filter').serialize()
    var url = './controller.pl?action=OrderItem/order_item_list_dynamic_table&' + filterdata;
    $.ajax({
        url : url,
        type: 'POST',
        success: function(data){
            $('#orderitems').html(data);
        }
    })

  };

function addInputCallback(inputfield, callback, delay) {
    var timer = null;
    inputfield.on('keyup', function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            callback();
        }, delay );
    });
    inputfield = null;
}
</script>