sx-fc/app/views/oqs/home/index.html.erb

<div class="row">
  <!-- Column One -->
  <div class="col-lg-8 col-md-8 col-sm-8">    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#completed" role="tab">Processed <span class="badge badge-pill badge-default" id="completed_count"><%= @queue_completed_item.length %></span></a>
      </li>

      <% # For Tab Disable for Station is inactive
        status=""
        @queue_stations.each do |qsi|  
          if qsi.is_active == false   
            status="disabled"    
          end %>
      <li class="nav-item oqs_click" >
        <p class="hidden oqs-id"><%= qsi.id  %></p>
         <a class="nav-link" data-toggle="tab" href="" role="tab" <%= status %>>
            <%= qsi.station_name %>
            <span class="badge badge-pill badge-default" id=""><%= qsi.assigned_order_items.count %>                
            </span> 
            <% if qsi.auto_print %>
              <span>(ap)</span>
            <% end %>       
        </a>
      </li>
      <% end %>      
    </ul>
    <!-- Nav tabs - End -->

    <div class="tab-content" style="max-height:670px; overflow:auto">
      <!--- Panel 0 - Completed -->
      <div class="tab-pane 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">
                <div class="card-block">
                  <h4 class="card-title">
                    <span class="order-zone-type"><%= qid.type %> - </span>
                    <span class="order-zone"><%= qid.zone %></span>
                    <small class="pull-right"><%= qid.order_id %></small>
                  </h4> 
                  <h4>
                    <span class="order-item">
                      <%= qid.item_name %>
                    </span> [x
                    <span class="order-qty">
                      <%= qid.qty %>
                    </span> ]   
                  </h4>                  
                                    
                  <p class="card-text item-options"><%= qid.options == "[]"? "" : qid.options %></p> 
                 
                  <p class="card-text">
                    <small class="text-muted">Order at 
                    <span class="order-at">
                      <%= qid.created_at.utc.getlocal.strftime("%d-%m-%Y %I:%M %p") %>
                    </span> - 
                    <span class="order-by">
                      <%= qid.item_order_by %>
                    </span> 
                    </small>
                  </p>
                  <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 Item for Queue Station -->

        <!--- Order Items -->
        <div class="card-columns oqs_append" 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 - Table</strong></div>
      </div>
      <div class="card-block">
        <div class="card-title">
          <table class="table">
            <thead>
              <tr>
                <th style="width:33%; text-align:left">Order By</th>
                <th style="width:33%; text-align:right">Order At</td>
                <th style="width:33%; text-align:right">Customer</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="order-by" style="width:33%; text-align:left"></td>
                <td id="order-at" style="width:33%; text-align:right"></td>
                <td id="order-customer" style="width:33%; text-align:right"></td>
              </tr>
              <tr>
                <td><strong>Table/Room</strong></td>
                <td id="order-from" colspan="2"></td>
              </tr>
            </tbody>
          </table>                  
        </div>
        <div class="card-text" style="min-height:360px; max-height:360px; overflow:auto">
          <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 -->
    <button type="button" title="Print Order Item" id="print_order_item" class="btn btn-primary btn-lg btn-block">Print</a>
    <button type="button" class="btn btn-primary btn-lg btn-block" id="print_order_summary">Print <br/>Order<br/>Summary</button>
    <a href="<%= dashboard_path %>" class="btn btn-primary btn-lg btn-block" role="button" aria-haspopup="true"> Back </a>
    <!-- <button type="button" class="" id="print_order_summary">Print <br/>Order<br/>Summary</button> -->

  </div>
</div>
<script type="text/javascript">
$(function(){

  $(".oqs_click").on("click", function(){

    var oqs_id = $(this).find(".oqs-id").text();
    var url = 'oqs/get_items/'+oqs_id;
    show_details(url); 

  }); //End Click
 
function show_details(url){  
   var oqs_append = $('.oqs_append');
   oqs_append.empty();

  //Start Ajax
  $.ajax({      
    type: "GET",         
    url: url, 
    data: {},
    dataType: "json",
    success: function(data) {
        for(var field in data) {
          var price = parseFloat(data[field].price).toFixed(2);

          if (data[field]["options"] == "[]") {
            options = "";
          }else{
            options = data.options;
          }

          var date = new Date(data[field]["created_at"]); 
          var show_date = date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() + ' ' +  date.getHours()+ ':' +  date.getMinutes();       
           
          row ='<div class="card queue_station">'
                  +'<div class="card-block">'
                      +'<h4 class="card-title">'
                        +'<span class="order-zone-type">'+data[field]["zone"]+'- </span>'
                        +'<span class="order-zone">'+ data[field]["zone"] +'</span>'
                        +'<small class="pull-right">'+ data[field]["order_id"] +'- </small>'
                      +'</h4>'

                      +'<h4>'
                        +'<span class="order-item">'+ data[field]["item_name"] +'- </span>'
                        +'<span class="order-qty">'+ data[field]["qty"] +'- </span>'
                      +'</h4>'

                      +'<p class="card-text item-options">'+ options +'</p>'

                      +'<p class="card-text">'
                        +'<small class="text-muted">Order at'
                          +'<span class="order-at">'+ show_date +'</span> - '

                          +'<span class="order-by">'+ data[field]["item_order_by"] +'</span> '
                          +'</small> '
                      +'</p>'

                      +'<p class="hidden order-customer">'+ data[field]["customer_name"] +'</p> '
                      +'<p class="hidden assigned-order-item">'+ data[field]["assigned_order_item_id"] +'</p> '
                  +'</div>'

                  +'<div class="card-footer">'
                      +'<button id="edit_'+ data[field]["assigned_order_item_id"]+'" class="btn btn-warning order-item order-item-edit">EDIT</button>'
                      +' <button id="assigned_queue_' + data[field]["assigned_order_item_id"] +'" class="btn btn-primary order-item order-complete">COMPLETE</button>'
                  +'</div>'

              +'</div>'; 
                  
                 
                 
            $('.oqs_append').append(row);
        }
        
     }
  });
  //end Ajax 

}
});
</script>