<div class="page-header">
   <ul class="breadcrumb">
    <li><a href="<%=  %>">Home</a></li>
    <li>Queue</li>
    <li>Assign Queue <%=@queue.queue_no%></li>
   
  </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:auto">

    <!--- Panel 1 - Table Orders -->
    <div class="active" id="tables" role="tabpanel">
       <div class="tab-pane" id="rooms" role="tabpanel">
           <div class="card-columns" style="padding-top:10px; column-gap: 2.2rem;">
           <% @i =0 %> 
             <% DiningFacility.all.each do |table| %>
              <div class="card assign_table <%= table.status=="available" ? "green" : "red"%>" data-id="<%= table.id %>">
               <div class="card-block">
                    <p class="hidden queue-id"><%= @queue.id  %></p> 
                    <p class="hidden queue-status"><%= table.status  %></p>
                    <p style="text-align: center"><%= table.name %></p>
                    <p style="text-align: center">Seat : <%= table.seater %></p>
               </div>
             </div>
            
             <% end %>
           </div>
       </div>
    </div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1">
    <br>
       <a href="<%= crm_dining_queues_path%>" class="btn btn-primary">
        <i class="fa fa-arrow-left fa-lg"></i> Back
       </a>
    </div>
</div>

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js"></script> -->

<script type="text/javascript">

$(document).on('click',".assign_table",function(){

    var queue_id  = $(this).find(".queue-id").text();
    var table_id = $(this).attr('data-id');
    url = '<%= crm_assign_table_path %>';
    var status  = $(this).find(".queue-status").text()
    
    if (status == "available") {
    	assign_table(queue_id,table_id,url);
    } else {
    	$.confirm({
	        title: 'Alert!',
	        content: 'You cannot assign this table',
	        buttons: {
	             
	              confirm: {
	              text: 'Ok',
	              btnClass: 'btn-green',
	              
	              }  
	        }
        });
    }         
})

function assign_table(id,table_id,url) {
      $.confirm({
        title: 'Confirm!',
        content: 'Are You Sure to assign this customer!',
        buttons: {
              
              cancel: function () {
                
              },
              confirm: {
              text: 'Confirm',
              btnClass: 'btn-green',
              keys: ['enter', 'shift'],
              action: function(){
                  $.ajax({      
                        type: "POST",         
                        url: url ,
                        data: {id:id,table_id:table_id},
                        dataType: "json",
                        success: function(data) {
                          if(data.status == true)
                          { 
                            window.location.href = '<%=crm_dining_queues_path%>'
                          }else{
                            alert('Record not found!');
                            location.reload();
                          }
                          
                        }  
                });
               }
              }
              
        }
    });
}

</script>

