<!-- Column One -->
<div class="row clearfix" style="">
  <div class="col-lg-7 col-md-7 col-sm-7"> 
    <p class="hidden filter"><%= @filter %></p>
    <div class="card">
      <div class="card-block">
        <div class="body p-l-10">
          <div class="row clearfix">
            <div class="form-group col-lg-4 col-md-4 col-sm-4">
              <label class="label-align">Select Station</label>
              <span class="hidden" id="oqs_active"></span>
              <select class="form-control select oqs_click" name="oqs_id" id="oqs_id">
                <option value="0"  data-id="0">All</option>
                <% @queue_stations.each do |qsi|  %>
                  <% if qsi.is_active != false %>
                   <% selected = ""%>
                  <%if qsi.id == current_user.order_queue_station_id %>
                      <% selected = 'selected=""'%>
                  <%end%>
                  <p class="hidden oqs-id"><%= qsi.id  %></p>
                  <option value="<%= qsi.id %>"  data-id="<%= qsi.id %>" <%=selected%> style="padding:5px 20px !important;"> <%= qsi.station_name %></option>
                  <% end %>
                <% end %> 
              </select>
            </div>

            <div class="form-group col-lg-4 col-md-4 col-sm-4">
              <label class="label-align">Select Status</label>
              <span class="hidden" id="oqs_active"></span>
              <select class="form-control select status_click" name="status" id="status">
                <option value="All">All</option>
                <option value="New">New</option>
                <option value="Processed">Processed</option>
              </select>
            </div>
          </div>
        </div>
        <div class="tab-content" id="custom-slimscroll" style="">
          <div class="tab-pane in active" id="completed" role="tabpanel">
            <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;column-count: ;">
              <%   
              @queue_completed_item.each do |qid|                               
                %>
                <div class="card queue_station" data-order-no="<%= qid.order_id %>">
                  <div class="card-block">
                      <div class="row">
                        <%if qid.type.present?%>
                        <span class="col-md-4 order-zone-type font-13"><%= qid.type %>-<%= qid.zone %></span>
                        <%else%>
                        <span class="col-md-4 order-zone-type font-13"></span>
                        <%end%>

                        <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> ]  
                        <% if !qid.set_menu_items.nil? %>
                          <% qid.set_menu_items.each do |item_instance|%>
                           <br><span class="font-12">
                           <%= item_instance %>
                            </span>
                          <% end %>
                        <% end %> 
                      </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>
                  <% if !qid.delivery_status %>
                  <div class="card-footer">
                    <button id="edit_<%= qid.assigned_order_item_id %>" data-no-turbolink="true" class="btn btn-warning order-item order-item-edit">EDIT</button>
                     <button id="assigned_queue_<%= qid.assigned_order_item_id %>" class="btn btn-primary order-item order-complete">COMPLETE</button>
                  </div>
                  <%end%>
               </div> 
              <% end %>    
            </div>
           </div>
          <div class="card-columns oqs_append" id="oqs_container" style="padding-top:10px; column-gap: 1.2rem;">       
      </div>
    </div>
      </div>
    </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>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="order-by" style="width:33%; text-align:"></td>
                <td id="order-at" 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>              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
 -->
  <!-- Column Three -->
  <div class="col-lg-4 col-md-4 col-sm-4"><!-- table-block -->
    <p class="hidden filter"><%= @filter %></p>
    <div class="card">
      <div class="card-block">
        <div class="tab-content" id="table-slimscroll" style="">
          <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#table" id="defaultOpen">Table</a></li>
            <%if !@rooms.empty? %>
            <li><a data-toggle="tab" href="#room">Room</a></li>
            <% end %>
          </ul>
          <div class="tab-content">
            <div id="table" class="tab-pane fade">
              <% @tables.each do |table|  %>
                <div class="col-lg-4 col-md-4 col-sm-4 table-float">
                  <button class='btn btn-lg waves-effect green tables table-width' value="<%= table.id %>" data-id="<%= table.id %>"> <%= table.name %> <br> <%= table.zone.name %></button>
                </div>
              <% end %> 
            </div>
            <%if !@rooms.empty? %>
            <div id="room" class="tab-pane fade">
              <% @rooms.each do |room|  %>
                <div class="col-lg-4 col-md-4 col-sm-4 table-float">
                  <button class='btn btn-lg waves-effect green tables table-width' value="<%= room.id %>" data-id="<%= room.id %>"> <%= room.name %> <br> <%= room.zone.name %></button>
                </div>
              <% end %> 
            </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>      
  </div>
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- OQS Buttons -->
    <!-- <br> -->
     <% if current_user.role != "kitchen" %>
    
    <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>
   <%end%> 
    <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>
      <% if ENV["SERVER_MODE"] != "cloud" %>
    <%end%>     -->
  </div>
</div>
<input type="hidden" id="server_mode" value="<%=ENV["SERVER_MODE"]%>">

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

<style type="text/css">
 .oqs-btn {
   padding: .46875rem 0.25rem;color: #fff !important;position: relative;margin-bottom: .3125rem;font-size: .875rem;text-decoration: none;text-transform: uppercase;letter-spacing: 0;cursor: pointer;border: 0;
 }
</style>