sx-fc/app/views/crm/dining_queues/index.html.erb

<div class="container-fluid">
<div class="page-header">
 <ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="<%= root_path %>"><%= t("views.right_panel.button.home") %></a></li>
  <li class="breadcrumb-item active"><%= t("en.queue") %></li>
  <span class="float-right">
    <%= link_to 'Back', root_path %>
  </span>
 </ul>
</div>

<div class="row">
 <!-- Column One -->
 <div class="col-lg-8 col-md-8 col-sm-8">

   <div class="tab-content" style="" id="custom-slimscroll">
   <div class="card">
   <div class="body">
   <% if @dining_queues.count > 0 %>
    <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
      
       <% @dining_queues.each do |queue| %>
         <% if queue.status == "Assign"
          @bg_color = "assign"
        elsif queue.status == "Cancel"
          @bg_color = "cancel"
        else
          @bg_color = "normal"
        end
        %>
        <div class="card select-queue <%= @bg_color %>" data-id="<%= queue.id %>">
           <div class="card-block">
            <p class="hidden queue-id"><%= queue.id  %></p>
            <p class="hidden queue-status"><%= queue.status  %></p>
            <div class="row card-title">
              <div class="col-md-auto col-sm-12 sx-margin-0">
                <p class="padding-0 margin-0">
                  <strong> Queue No : <%= queue.queue_no %></strong>
                </p>
              </div>
              <div class="col-md-auto col-sm-12 sx-margin-0">
                <p class="padding-0 margin-0">
                  <strong> Seater : <%= queue.seater %></strong>
                </p>
              </div>
            </div>

            <p class="card-title"> Name : <%= queue.name %></p>
            <p class="card-title"> Contact No : <%= queue.contact_no %></p>
            <p class="card-title"> Remark : <%= queue.remark %></p>
          </div>
        </div>
       <% end %>
      
    </div>
    <% else %>
       <p>There is no queue Now !</p>
      <% end %>
    </div>
   </div>
   </div>
<!-- tabs - End -->
</div>
<div class="col-md-3">
  <div class="card">
      <div class="body">
        <h6><i class="material-icons md-18">view_headline  QUEUE DETAILs</i> </h6>
        <p>
        1) Latest Queue No - <%= @complete_queue.last.queue_no  rescue 0 %> <br>
        2) Next Queue No - <% @next = (@complete_queue.last.queue_no.to_i rescue 0) + 1%>  
         <%= @next rescue 0 %> <br>
        3) Today Completed Queue - <strong> <%= @complete_queue.count %> </strong><br>

        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.button_lists") %></i> </h5>
        <p>
        1) <%= t("views.right_panel.button.cancel") %> 
           <%= t("views.right_panel.button.queue") %> - 
           <%= t("views.right_panel.detail.cancel_btn_txt") %> 
           <%= t("views.right_panel.detail.queue_txt") %> <br>

          2) <%= t("views.btn.new") %> 
           <%= t("views.right_panel.button.queue") %> - 
          <%= t("views.right_panel.detail.create_btn_txt") %> 
           <%= t("views.right_panel.detail.queue_txt") %><br>

           2) <%= t("views.btn.assign") %> 
           <%= t("views.right_panel.button.queue") %> - 
          <%= t("views.right_panel.detail.assign_txt") %> 
           <%= t("views.right_panel.detail.queue_txt") %><br>
        </p>
        <h5><i class="material-icons md-18">list <%= t("views.right_panel.header.link_lists") %></i> </h5>
        <p>
          1) <%= t("views.right_panel.button.home") %> - <%= t("views.right_panel.detail.home_txt") %> <br>
          2) <%= t("views.right_panel.button.back") %> - <%= t("views.right_panel.detail.back_txt") %> <%= t("views.right_panel.detail.home_txt") %> <br>
        </p>
      </div>
    </div> 
</div>
  <div class="col-lg-1 col-md-1 col-sm-1">
    <%= link_to t("views.btn.new"),new_crm_dining_queue_path,:class => 'btn bg-green btn-block btn-lg btn-block', 'data-no-turbolink' => true %>
    <hr>

    <button type="button" id="assign" class="btn btn-primary btn-block btn-lg waves-effect" style="font-size: 11px" disabled>Assign</button>
    <button type="button" id="cancel" class="btn btn-danger btn-block btn-lg waves-effect" style="font-size: 11px" disabled>Cancel</button>
   <!--  <a href="<%= dashboard_path %>" class="btn btn-default btn-block waves-effect" role="button" aria-haspopup="true" aria-expanded="false"> Back </a> -->
  </div>
</div>
</div>
<script type="text/javascript">
$(function(){

      $(".select-queue").on("click", function(){
          $('.select-queue').removeClass('selected-item');
          $(this).addClass('selected-item');
          var status = $(this).find(".queue-status").text();
          if(status != "Assign" && status != "Cancel"){
            $("#assign").removeAttr("disabled");
            $("#cancel").removeAttr("disabled");
          }else{
            $("#assign").attr("disabled","disabled");
            $("#cancel").attr("disabled","disabled");
          }
          $("#assign").val($(this).find(".queue-id").text());
          $("#cancel").val($(this).find(".queue-id").text());
      }); //End  Click


});
$('#assign').click(function() {
  var id = $(this).val();
  window.location.href = "dining_queues/"+id + "/assign"
});

$('#cancel').click(function() {
  var id = $(this).val();
  url = '<%= crm_cancel_queue_path %>';
  cancel_queue(id,url);
});


function cancel_queue(id,url) {
  swal({
    title: "Confirm!",
    text: "Are You Sure to cancel this Queue!",
  }, function () {
    $.ajax({
      type: "POST",
      url: url ,
      data: {id:id},
      dataType: "json",
      success: function(data) {
        if(data.status == true)
        {
         location.reload();
       }

     }
   });
  });
}

</script>
<style type="text/css">
  .card-columns {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
</style>