<!-- Column One -->
<div class="row clearfix">
  <div class="col-lg-8 col-md-8 col-sm-8">  
    <div class="body p-l-10">
      <%= form_tag oqs_root_path, :method => :get do %>
      <div class="row clearfix">
        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
           <input type="text" name="filter" class="form-control" placeholder="Search">
          
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
          <button type="submit" class="btn bg-blue waves-effect waves-effect">Search</button>
        </div>

      </div>
      <% end %>
    </div>
   
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <!-- <li class="nav-item nav-search <%= @filter.to_s.length > 0? " " : "hide"%>">
        <a class="nav-link <%= @filter.to_s.length > 0? "active" : " "%>" data-toggle="tab" href="#search" role="tab">Searching .. <span class="badge badge-pill badge-default" id="completed_count"><%= @queue_completed_item.length %></span></a>
      </li> -->
      <li class="nav-item nav-completed">
        <a class="nav-link active" data-toggle="tab" href="#completed" role="tab">Processed 
        <span class="badge bg-blue-grey" id="completed_count"><%= @queue_completed_item.length %></span></a>
      </li>
      <% # For Tab Disable for Station is inactive
      status=""
      i=0
      @queue_stations.each do |qsi|  
        if qsi.is_active == false   
          status="disabled"    
          end %>
          <li class="nav-item oqs_click" data-id="<%= qsi.id %>">
            <p class="hidden oqs-id"><%= qsi.id  %></p>
            <a class="nav-link" data-id="<%= qsi.id  %>" data-toggle="tab" href="" role="tab" <%= status %>>
              <%= qsi.station_name %>
              <% if @filter.nil? %>
              <span class="badge bg-blue-grey oqs_count<%= i%> oqs_count" data-id="<%= qsi.id  %>" id="completed_count">
              <!-- <span class="badge badge-pill badge-default oqs_count<%= i%> oqs_count" data-id="<%= qsi.id  %>"> --> <%= qsi.assigned_order_items.where("delivery_status=0 AND created_at >= '#{Time.now.beginning_of_day.utc}'").count %>                
              </span> 
              <%else%>
              <span class="label-count badge bg-blue-grey" data-id="<%= qsi.id  %>">
               <% @count.each do |c|%>    
               <% if qsi.id == c.station_id %>
               <%= c.total %>                
               <%end %>  
               <%end %>    
             </span>
             <%end%>
             <% if qsi.auto_print %>
             <span>(ap)</span>
             <% end %>  
           </a>
         </li>
         <% i+=1%>

         <% end %>      
      </ul>
     <!-- Nav tabs - End -->
     <p class="hidden filter"><%= @filter %></p>

     <div class="tab-content" id="custom-slimscroll" style="">
      <!--- Panel 0 - Completed -->

      <div class="tab-pane in active" id="completed" role="tabpanel">
        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
          <%   
          @queue_completed_item.each do |qid|                               
            %>
            <div class="card queue_station" data-order-no="<%= qid.order_id %>">
              <div class="card-block">
                <div class="row">
                  <span class="col-md-4 order-zone-type font-13"><%= qid.type %>-<%= qid.zone %></span>
                  <span class="order-zone hidden font-13"><%= qid.zone %></span>
                  <span class="col-md-8"><small class="float-right font-13"><%= qid.order_id %></small></span>
                </div> 
               <p class="m-b--10">
                  <span class="order-item font-16">
                    <%= qid.item_name %>
                  </span> [x
                  <span class="order-qty">
                    <%= qid.qty %>
                  </span> ]   
                </p>                  
                
                <br/><p class="card-text item-options"><%= qid.options == "[]"? "" : qid.options %></p> 

                <span class="card-text">
                  <span class="text-muted">Order at - 
                    <span class="order-at font-13">
                      <%= qid.created_at.utc.getlocal.strftime("%d-%m-%Y %I:%M %p") %>
                    </span> <br> 
                     Order By - <span class="order-by font-13">
                    <%= qid.item_order_by %>
                    </span> 
                  </span>
                </span>
              
                <p class="hidden order-status">completed</p>
                <p class="hidden order-customer"><%= qid.customer_name %></p>
                <p class="hidden assigned-order-item"><%= qid.assigned_order_item_id %></p>                
              </div>
            </div> 
            <%                                      
          end
          %>    
        </div>
      </div>


      <!-- End Panel 0 - Completed -->
      <!--- Order Items -->
      <div class="card-columns oqs_append" id="oqs_container" style="padding-top:10px; column-gap: 1.2rem;">       
      </div>
      <!--- end of Items-->
    </div>
  </div>

  <!-- Column Two -->
  <div class="col-lg-3 col-md-3 col-sm-3">
    <div class="card"  >
      <div class="card-header">
        <div><strong id="order-title">ORDER DETAILS</strong></div>
      </div>
      <div class="card-block">
        <div class="card-title">
          <table class="">
            <thead>
              <tr>
              <th style="width:33%; text-align:">Order By</th>
                <th style="width:33%; text-align:">Order At</th>
                <!-- <th style="width:33%; text-align:">Customer</th> -->
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="order-by" style="width:33%; text-align:"></td>
                <td id="order-at" style="width:33%; text-align:"></td>
                <!-- <td id="order-customer" style="width:33%; text-align:"></td> -->
                  </tr>
                  <tr>
                    <td><strong class="hidden cus_name">Customer</strong></td>
                    <td id="order-customer" colspan="2"></td>
                  </tr>
                </tbody>
              </table>                  
        </div>
        <div class="card-text" id="order-detail-slimscroll" style="min-height:; max-height:; overflow:">
          <table class="table" id="oqs-order-details-table">
            <thead>
              <tr>
                <th style="width:80%; text-align:left">Items</th>
                <th style="width:20%; text-align:right">QTY</th>
              </tr>
            </thead>
            <tbody>              
              <!-- Bind With JS -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Column Three -->
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- OQS Buttons -->
    <a href="<%= dashboard_path %>" class="btn btn-sm btn-block btn-default waves-effect" role="button" aria-haspopup="true"><i class="material-icons">reply</i> Back </a>
    <button type="button" title="Print Order Item" id="print_order_item" class="btn bg-blue btn-block btn-lg waves-effect">Print</a>
      <button type="button" class="btn bg-blue btn-block btn-lg waves-effect" id="print_order_summary">Print <br/>Order<br/>Summary</button>
      <!-- <button type="button" class="" id="print_order_summary">Print <br/>Order<br/>Summary</button> -->
  </div>
</div>

<script type="text/javascript">
  $(document).on('turbolinks:load', function() {
    $('#back').on('click', function () {
        window.location.href = '/dashboard';
    });
  });
</script>
