<div class="container-fluid">
    <div class="page-header">
     <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="<%= dashboard_path %>">Home</a></li>
       <li class="breadcrumb-item"><a href="<%= crm_dining_queues_path %>">Queue</a></li>
      <li class="breadcrumb-item active">Assign Queue <%=@queue.queue_no%></li>
      <span class="float-right">
        <%= link_to 'Back', dashboard_path %>
      </span>
     </ul>
    </div>
</div>
<div class="row">
 <!-- Column One -->
 <div class="col-lg-12 col-md-12 col-sm-12">
   <div id="custom-slimscroll">
     <div class="tab-content">
      <!--- 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>
</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 {
      swal ( "Alert!" ,  "You cannot assign this table!" ,  "warning" );
    }         
})

function assign_table(id,table_id,url) {
  swal({
    title: "Confirm!",
    text: "Are You Sure to assign this customer!",
  }, 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{
          swal ( "Alert!" ,  "Record not found!" ,  "warning" );
          location.reload();
        }

      }  
    });
  });
}

</script>

