<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">
 <!-- Column One -->
 <div class="col-lg-11 col-md-11 col-sm-11">

   <div class="tab-content" style="max-height:670px; overflow-y:scroll">

    <!--- Panel 1 - Table Orders -->
    <div class="active" role="tabpanel">
       <div class="tab-pane" role="tabpanel">
           <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 %>" style="width: 21.5rem;">
                 <div class="card-block">
                      <p class="hidden queue-id"><%= queue.id  %></p> 
                      <p class="hidden queue-status"><%= queue.status  %></p>
                      <span class="card-title"><strong> Queue No : <%= queue.queue_no %></strong></span>
                      <span class="card-title pull-right"><strong> Seater : <%= queue.seater %></strong></span><br>
                      <span class="card-title"> Name : <%= queue.name %></span><br>
                      <span class="card-title"> Contact No : <%= queue.contact_no %></span>
                      <span class="card-title"> Remark : <%= queue.remark %></span>
                 </div>
               </div>
            
             <% end %>
           </div>
       </div>
    </div>
</div>
<!-- tabs - End -->
</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>
    <button type="button" id="cancel" class="btn btn-warning btn-lg btn-block" disabled>Cancel</button>  
  </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) {
      $.confirm({
        title: 'Confirm!',
        content: 'Are You Sure to cancel this Queue!',
        buttons: {
              cancel: function () { 
              },
              confirm: {
              text: 'Confirm',
              btnClass: 'btn-green',
              keys: ['enter', 'shift'],
              action: function(){
                  $.ajax({      
                        type: "POST",         
                        url: url ,
                        data: {id:id},
                        dataType: "json",
                        success: function(data) {
                          if(data.status == true)
                          { 
                           location.reload();
                          }
                          
                        }  
                });
               }
              }
              
        }
    });
}

</script>