<div class="page-header">
   <ul class="breadcrumb">
    <li><a href="<%=  %>">Home</a></li>
    <li>Queue</li>
    <span style="float: right">
      <%= link_to t('.new', :default => t("helpers.links.new")),new_crm_dining_queue_path,:class => 'btn btn-primary btn-sm' %>
    </span>
  </ul>
</div>

<div class="row">
  <div class="col-lg-11 col-md-11 col-sm-11" style="min-height:670px; max-height:670px; overflow-y:scroll">

      <div class="row">
       <% @i = 0 %> .
         <% @dining_queues.each do |queue| %>
        <div class="col-md-3 ">
            <div class="card select-queue <%= !queue.status.nil? ? "assign" : ""%>" style="border:1px solid #ccc;margin-bottom: 10px ">
              <div class="card-block">
                <p class="hidden queue-id"><%= queue.id  %></p> 
                <p class="hidden queue-status"><%= queue.status  %></p>
                <h4 class="card-title"><%= @i += 1 %> . Queue No </h4>
                <h1 style="text-align: center"><%= queue.queue_no %></h1>
                <p class="card-text">
                  <small class="text-muted">Name : <%= queue.name %></small> <br>
                  <small class="text-muted">Contact : <%= queue.contact_no %></small>
                  <br>
                  <small class="text-muted">Status : <%= queue.status rescue '-' %></small>
                </p>
              </div>
            </div>

        </div>
        <% end %>
      </div>  


  </div>
  <div class="col-lg-1 col-md-1 col-sm-1">
    <button type="button" id="assign" class="btn btn-primary btn-lg btn-block" disabled>Assign</button>
        
  </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"){
            $("#assign").removeAttr("disabled");
          }else{
            $("#assign").addAttr("disabled");
          }
          $("#assign").val($(this).find(".queue-id").text());
      }); //End  Click

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

      });

</script>