sx-fc/app/views/crm/home/_booking.html.erb

<!--- Booking Items -->
<div class="card-columns" style="padding-top:10px">

  <% @i = 0 %>
  <% @booking.each do |booking| %>
    <% if booking.booking_status == "new" %>
    <div class="card">
        <div class="card-block booking_click" data-id="sfddf" data-ref="<%= api_booking_path booking.id%>" id="card-block booking_block"  >
           <p class="hidden booking-id"><%= booking.id  %></p> 
           <h4 class="card-title">
             <%= @i += 1 %> . <%= booking.dining_facility.name %>
             - <%= booking.id %>
           </h4>
           <!-- <p class="card-text">Medium, Fries, Salad</p> -->
           <p class="card-text">
            <small class="text-muted">
              Order at  <%= booking.checkin_at.strftime("%H,%m") %>, <%= booking.checkin_by %>
            </small>
          </p>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col-md-6">

            </div>
            <div class="col-md-6">

            </div>
          </div>
        </div>
    </div>
  <% end %>
<% end %>
<!--- end of Items-->
</div>
<script type="text/javascript">
$(function(){

  $(".booking_click").on("click", function(){
    $(".summary-items tbody tr").remove();
    $("#cancel").removeAttr("disabled");
    $("#assign").removeAttr("disabled");

    var booking_id = $(this).find(".booking-id").text();
    $("#crm_print").val(booking_id);
    $("#crm_print").removeAttr("disabled");

    var url = $(this).attr('data-ref');
    show_details(url); 

  }); //End Booking Click

  $('.nav-link').click(function () {
    var href = $(this).attr('href');
    if(href== "#customer" || href == "#queue"){
      $("#cancel").attr("disabled","disabled");
      $("#assign").attr("disabled","disabled");
    }
  });
  //End nav-liik

  $('.crm_print').click(function() {
    var booking_id = $('#crm_print').val();

    $.ajax({      
      type: "GET",         
      url: "crm/print/"+booking_id,
      data: {},
      dataType: "json",
      success: function(data) {

      }  
    });
  });
  //End Print Click

  $('.assign').click(function(e){
    var booking_id = $(this).val();
    var type       = $(this).attr("data-type");
    alert(booking_id);

    update_booking(booking_id,type)
  });
  //End Assing Click

  $('.cancel').click(function(e){
    var booking_id = $(this).val()
    var type       = $(this).attr("data-type")

    update_booking(booking_id,type)
  });
  //End cancle Click


  $(".customer_detail").on("click", function(){
    $(".summary-items tbody tr").remove();
    $("#crm_print").removeAttr("disabled");
    var id = $(this).attr('data-ref');
    $('.customer_detail').removeClass('selected-item');
    $(this).addClass('selected-item');
    customer_details(id); 

  });
  //end customer click 


}); 
 
function show_details(url_item){  
  //Start Ajax
  $.ajax({      
    type: "GET",         
    url: url_item, 
    data: {},
    dataType: "json",
    success: function(data) {
      item_data = data.order_items;
            //console.log(item_data.length);
 
            $("#table").text(data.table_name) 
            $("#order_at").text(data.checkin_at) 
            $("#order_by").text(data.checkin_by) 
            $("#assign").val(data.id) 
            $("#cancel").val(data.id) 
            $('.no_record').addClass('hide');
            
            for(var field in item_data) {  
                if (item_data[field].item_name){
                  var price = parseFloat(item_data[field].price).toFixed(2);

                  row = "<tr>"
                  +'<td style="width:33%; text-align:left">' + item_data[field].item_name +'</td>'
                  +'<td style="width:33%; text-align:center">' + item_data[field].qty + '</td>'
                  +'<td style="width:33%; text-align:right">' + price + '</td>'
                  +'</tr>'; 
                } 
                $(".summary-items tbody").append(row);
            }
     }
  });
  //end Ajax 
  $('.booking_click').removeClass('selected-item');
  $(this).addClass('selected-item');
}

function customer_details(id){  
  //Start Ajax
    $.ajax({      
      type: "GET",         
      url: "api/customers/get_order/"+id,
      data: {},
      dataType: "json",
        success: function(data) {
            item_data = data.order_items;

            $("#for-booking").remove();
            var div_data = "<strong>CUSTOMER DETAILS</strong>";
            $("#order-title").replaceWith(div_data); 
            $('.no_record').addClass('hide');
            $('.customer-detail').removeClass('hide') ;

            $("#cus_name").text(data.name) 
            $("#cus_email").text(data.email) 
            $("#cus_contact_no").text(data.contact_no) 


            if(item_data.length>0){
                for(var field in item_data) {  
                    if (item_data[field].item_name){
                      var price = parseFloat(item_data[field].price).toFixed(2);

                      row = "<tr>"
                      +'<td style="width:33%; text-align:left">' + item_data[field].item_name +'</td>'
                      +'<td style="width:33%; text-align:center">' + item_data[field].qty + '</td>'
                      +'<td style="width:33%; text-align:right">' + price + '</td>'
                      +'</tr>'; 
                    } 
                    $(".summary-items tbody").append(row);
                }
            }else{
              $('.no_record').removeClass('hide');
              $("#crm_print").attr("disabled","disabled");
            }
        }
    });
    //End Ajax 
}

function update_booking(booking_id,type) {
  //Start Ajax
  $.ajax({      
      type: "POST",         
      url: "crm/update_booking/" ,
      data: {booking_id:booking_id,type:type},
      dataType: "json",
      success: function(data) {
          if(data.status == true && data.type == "cancel")
          { 
            alert('Booking has canceled!');
          }else{
            alert('Booking has completed!');
          }
          location.reload();
      }  
  });//End Ajax
}

</script>

<style type="text/css">
  .selected-item {
  background-color: #ccc;
}
</style>