<div class="row ">
  <nav class="breadcrumb">  
    <a class="breadcrumb-item active" href="<%= dashboard_path %>">Home</a>   
    <a class="breadcrumb-item active" href="#">Batches</a>       
  </nav>
</div>
<div class="row  top-content">
    <span style="float: right">
        <%= link_to t('.new', :default => t("helpers.links.new")),new_batch_path,:class => 'btn btn-primary' %>
    </span> 
</div>
<div class="row content">
  <div class="col-lg-4">
    <label><strong>Search:</strong></label>
    <input type="text" id="myInput" class="form-control">
  </div>
  <div class="col-lg-4">
    <label><strong>Select Client:</strong></label>
    <%= select_tag "client", options_from_collection_for_select(@clients, "id", "name"), prompt: "All", :class => 'form-control'%>
  </div>
  <div class="col-lg-4">
    <label><strong>Select Product:</strong></label>
    <%= select_tag "product_category", options_from_collection_for_select(@product_categories, "id", "name"), prompt: "All", :class => 'form-control'%>
  </div>
   
</div> 
<div class="row show_image">
  <div class="col-lg-6"></div>
  <div class="col-lg-4" id="loading">
    <img src="<%= asset_path( 'spinner.gif' ) %>" />
  </div>
</div>  
<div class="row content">    
  <div class="card"> 
  <div id="filterrific_results">    
    <div class="card-header">              
      <strong>Batch List</strong> 
      <strong>(Count: <%= @count %> ) </strong>
     

    </div>   
    <div class="card-block">
      
        <table class="table" style="border-top:none" id="myTable">
          <thead>
            <tr> 
              <th>Order Ref</th>       
              <th>Created By</th>            
              <th>Qty Processing</th>
              <th>Qty Success</th>                 
              <th>Qty Fail</th>   
              <th>Export Count</th> 
              <th>Exported By</th>                   
              <th>Created At</th> 
              <th>Action</th>                           
            </tr>
          </thead>
          <tbody>                 
            <% @batches.each do |batch| %>
              <tr>                                             
                <td><%= batch.order_ref rescue '' %></td>                      
                <td><%= batch.user_name rescue '' %></td>  
                <td><%= batch.qty_processing rescue '' %></td> 
                <td><%= batch.qty_success rescue '' %></td> 
                <td><%= batch.qty_fail rescue '' %></td>     
                <td><%= batch.export_count %></td>    
                <td><%= batch.exported_by %></td>             
                <td><%= batch.created_at.strftime("%e,%b %Y %I:%M %p") rescue '' %></td>
                <td>
                    <%= link_to 'Detail',
                      batch_path(batch), :class => 'btn btn-primary btn-sm' %>
                </td> 
              </tr>
            <% end %>
          </tbody>
        </table> 
        <%= paginate  @batches %>
        <div>          
        </div>
      
    </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // function mySearch() {
  //   var input, filter, table, tr, td, i;
  //   input = document.getElementById("myInput");
  //   filter = input.value.toUpperCase();

  //   table = document.getElementById("myTable");
  //   tr = table.getElementsByTagName("tr");
  //   for (i = 0; i < tr.length; i++) {
  //     td = tr[i].getElementsByTagName("td")[0];
  //     console.log(td);
  //     if (td) {
  //       console.log(td.innerHTML.toUpperCase().indexOf(filter));
  //       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
  //         tr[i].style.display = "";
  //       } else {
  //         tr[i].style.display = "none";
  //       }
  //     }       
  //   }
  // }
  $(document).ready(function(){
    
    $('#loading').hide();
    client_id=$("#client").val();
    product_category_id=$("#product_category").val();
    search_keyword=$('#myInput').val();


    $('#product_category').on('change', function() {
      product_category=$(this).val(); 
      client=$("#client").val();
      search_keyword=$('#myInput').val();       
      filter(client,product_category,search_keyword);
    });

    $('#client').on('change', function() {
      client=$(this).val();
      product_category=$("#product_category").val(); 
      search_keyword=$('#myInput').val();      
      filter(client,product_category,search_keyword);
    }); 

    $('#myInput').keyup(function(){
      search_keyword = $(this).val().toLowerCase();      
      client=$("#client").val();
      product_category=$("#product_category").val();
      filter(client,product_category,search_keyword);

    });
    
    function filter(client,product_category,search_keyword){  
      
      $.ajax({
        type:'GET',
        url: '<%= batch_filter_path %>',   
        data : {'client_id':client ,'product_category_id':product_category,'search_keyword':search_keyword},
        beforeSend: function(){
          $('#loading').show();
        },
        complete: function(){
          $('#loading').hide();
        },
        success: function(data) {
        }  
      });   
    }

  })  
</script>