sx-fc/app/views/foodcourt/orders/app_orders.html.erb

<style type ="text/css">
  .assign {
    background-color:blue;
  }
  .completed{
    background-color:green;
  }
  /* Loading Dot */
  .processing-indicator {
        display: flex;
        gap: 6px;
  }

  .processing-dot {
      width: 10px;
      height: 10px;
      background: #2196F3;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out;
  }

  .processing-dot:nth-child(2) {
      animation-delay: 0.2s;
  }

  .processing-dot:nth-child(3) {
      animation-delay: 0.4s;
  }

  @keyframes bounce {
      0%, 80%, 100% {
          transform: translateY(0);
      }
      40% {
          transform: translateY(-12px);
      }
  }

  #fullpage-loading {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.712);
    align-items: center;
    justify-content: center;
  }
</style>
<%= javascript_include_tag 'custom', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'foodcourt/addorder', 'data-turbolinks-track': 'reload' %>

<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
  <div>
    <div style="display:flex; gap:10px; justify-content:center;">
      <div class="processing-dot"></div>
      <div class="processing-dot"></div>
      <div class="processing-dot"></div>
    </div>
    <div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
  </div>
</div>

<div class="container-fluid h-100" style="padding:0px 3px 0px 3px;margin-top:20px">
  <div id="oqs_loading_wrapper" style="display:none;">
    <div id="oqs_loading"></div>
  </div>

  <div class="row m-t--20 h-100">
    <% if !@booking.nil? || @pending %>
      <div class="col-md-6 col-lg-6 col-sm-12 float-left h-100 d-flex flex-column m-l-5 m-r-10" style="padding-right: 15px;">
    <% else %>
      <div class="col-md-10 col-lg-10 col-sm-12 h-100 d-flex flex-column" style="padding: 0 15px 0 20px !important;">
    <% end %>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs tab-col-teal m-t--10" role="tablist">
        <li class="nav-item">
          <a class="nav-link <%= params[:active] == 'completed' ? 'active' : '' %>" data-toggle="tab" href="#complete" role="tab"><%= t :competed %></a>
        </li>
        <li class="nav-item">
          <a class="nav-link <%= 'active' if params[:active].blank? %>" data-toggle="tab" href="#pending_order" role="tab">Pending Orders</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <%= params[:active] == 'mobile' ? 'active' : '' %>" data-toggle="tab" href="#mobile_orders" role="tab">Mobile Orders</a>
        </li>
      </ul>
      <!-- Nav tabs - End -->
      <div class="tab-content h-100 d-flex flex-column">
        <!--- Panel 0 - Completed Orders -->
        <div class="tab-pane h-100 <%= params[:active] == 'completed' ? 'active' : '' %>" id="complete" role="tabpanel">
          <div class="d-flex flex-column h-100">
            <div id="foodcourt-menu-slimscroll" class="flex-grow-1">
              <div class="card-columns p-l-10">
                <% bk_color ='' %>
                <% @completed.each do |c| %>
                  <%
                    if !@booking.nil?
                      if c.booking_id == @booking.booking_id
                        bg_color ='bg-secondary'
                      else
                        if c.sale.sale_status == 'void'
                          bg_color = 'bg-danger'
                        elsif c.sale.sale_status == 'completed'
                          bg_color = 'bg-success'
                        end
                      end
                    else
                      if c.sale.sale_status == 'void'
                        bg_color = 'bg-danger'
                      elsif c.sale.sale_status == 'completed'
                        bg_color = 'bg-success'
                      end
                    end
                  %>
                  <%= link_to foodcourt_app_order_by_booking_path(booking_id: c.booking_id, active: 'completed'), class: 'item-card' do %>
                    <div class="card <%= bg_color %> text-white" data-id ="<%= c.booking_id %>">
                      <div class="card-block">
                        <%= c.contact_no %><span style="font-size:12px;float:right;line-height:inherit;"> <%= c.checkin_at.strftime("%I:%M %p") %></span><br>
                        <%= c.orders.first.try(:order_id) %><span style="font-size:12px;float:right;line-height:inherit;"><%= c.booking_status %></span>
                      </div>
                    </div>
                  <% end %>
                <% end %>

                <% @pending_completed.each do |pc| %>
                  <% if @pending.present? %>
                    <% if @pending.sale_id == pc.sale_id %>
                      <% bg_color = 'bg-secondary' %>
                    <% else %>
                      <% if pc.sale_status == 'void' %>
                        <% bg_color = 'bg-danger' %>
                      <% elsif pc.sale_status == 'completed' %>
                        <% bg_color = 'bg-success' %>
                      <% end %>
                    <% end %>
                  <% else %>
                    <% if pc.sale_status == 'void' %>
                      <% bg_color = 'bg-danger' %>
                    <% elsif pc.sale_status == 'completed' %>
                      <% bg_color = 'bg-success' %>
                    <% end %>
                  <% end %>
                  <%= link_to foodcourt_app_order_by_booking_path(pending_id: pc.sale_id, active: 'completed'), class: 'item-card' do %>
                    <div class="card <%= bg_color %> text-white">
                      <div class="card-block">
                        <%= pc.receipt_no %><span style="font-size:12px;float:right;line-height:inherit;"> <%= pc.created_at.strftime("%I:%M %p") %></span>
                        <br>
                        <span style="font-size:12px;float:right;line-height: 30px;"><%= pc.sale_status %></span>
                      </div>
                    </div>
                  <% end %>
                <% end %>
               </div>
            </div>
          </div>
        </div>
        <!-- Panel 1 - Pending Orders -->
        <div class="tab-pane <%= 'active' if params[:active].blank? %> h-100" id="pending_order" role="tabpanel">
          <div class="h-100 d-flex flex-column">
            <div id="foodcourt-order-slimscroll" class="h-100">
              <div class="card-columns p-l-10">
                <% @pending_sales.each do |sale| %>
                  <% if @pending.present? %>
                    <% if @pending.sale_id == sale.sale_id %>
                      <% bg_color = 'bg-secondary' %>
                    <% else %>
                      <% bg_color = 'bg-danger' %>
                    <% end %>
                  <% else %>
                    <% bg_color = 'bg-danger' %>
                  <% end %>
                  <%= link_to foodcourt_app_order_by_booking_path(pending_id: sale.sale_id), class: 'item-card' do %>
                    <div class="card sales <%= bg_color %> text-white" data-id = "<%= sale.sale_id %>">
                      <div class="card-block">
                        <%= sale.receipt_no %>
                        <span class="float-right"><%= sale.created_at.strftime('%I:%M %p') %></span>
                        <br>
                        <span class = 'float-right m-t-5'>Billed</span>
                      </div>
                    </div>
                  <% end %>
                <% end %>
                <% @pending_orders.each do |order| %>
                  <% if @pending.present? && @status == 'order' %>
                    <% if @pending.booking_id == order.booking_id %>
                      <% bg_color = 'bg-secondary' %>
                    <% else %>
                      <% bg_color = 'blue' %>
                    <% end %>
                  <% else %>
                    <% bg_color = 'blue' %>
                  <% end %>
                  <%= link_to foodcourt_app_order_by_booking_path(pending_id: order.booking_id), class: 'item-card' do %>
                    <div class="card sales <%= bg_color %> text-white" data-id = "<%= order.booking_id %>">
                      <div class="card-block">
                        <%= order.booking_id %>
                        <span class="float-right"><%= order.created_at.strftime('%I:%M-%p') %></span>
                        <br>
                        <span class="float-right m-t-5">new</span>
                      </div>
                    </div>
                  <% end %>
                <% end %>
              </div>
            </div>
          </div>
        </div>
        <!-- Panel 2 - Mobile Orders -->
        <div class="tab-pane h-100 <%= params[:active] == 'mobile' ? 'active' : '' %>" id='mobile_orders' role='tabpanel'>
          <div class="h-100 d-flex flex-column">
            <div id="foodcourt-slimscroll" class="flex-grow-1">
              <div class="card-columns p-l-10">
                <% bk_color ='' %>
                <% @bookings.each do |bk|
                  bk_status ='new'

                  if !@booking.nil?
                    if bk.booking_id == @booking.booking_id
                      bk_color ='bg-secondary'
                    else
                      bk_color =bk.booking_status
                    end
                  else
                    bk_color =bk.booking_status
                  end %>
                  <%= link_to foodcourt_app_order_by_booking_path(booking_id:bk.booking_id, active: 'mobile'), class: 'item-card' do %>
                    <div class="card <%= bk_color %> text-white" data-id ="<%= bk.booking_id %>">
                      <div class="card-block">
                        <%= bk.contact_no %><span style="font-size:12px;float:right;line-height:inherit;"> <%= bk.checkin_at.strftime("%I:%M %p") %></span><br>
                        <%= bk.orders.first.try(:order_id) %><span style="font-size:12px;float:right;line-height:inherit;"><%= bk_status %></span>
                      </div>
                    </div>
                  <% end %>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% if !@booking.nil?%>
      <div class="col-md-5 col-lg-5 col-sm-12 h-100 d-flex flex-column m-l--15" style="padding-right: 15px">
        <span id="sale_id" style="display:none"><%= @booking.sale_id %></span>
        <div class="card h-100" style="margin-bottom: 10px !important">
          <div class="card-header" style="padding: 0.12rem 0.25rem">
            <div class="row">
              <div class="col-md-12 col-lg-12 col-sm-12" style="padding: 10px 10px">
                <strong id="order-title" class="font-18 p-l-10">ORDER DETAILS |</strong> <span class="font-18">Table-<%=@booking.dining_facility.try(:name)%></span><br>
              </div>
            </div>
          </div>
          <div class="card-block h-100 d-flex flex-column">
            <div>
              <span class="font-14 float-left d-inline"><b>Booking</b> - <%=@booking.booking_id%></span>
              <span class="font-14 float-right d-inline"><b>Order No</b> - <%=@booking.order_id%></span>
            </div>
            <div class="card-text h-100" id="foodcourt-table-slimscroll" style="overflow-y: auto">
              <table class="table table-striped summary-items fixed-header">
               <thead>
                 <tr>
                   <th class="text-nowrap">#</th>
                   <th class="item-name">Items</th>
                   <th class="item-qty text-nowrap">Qty</th>
                   <th class="item-attr text-nowrap">Price</th>
                 </tr>
               </thead>
               <tbody  class="font-13">
                 <%
                  sub_total = 0
                  count = 0
                 %>
                 <% @sale_data.sale_items.each do |sale_item|
                   count += 1
                 %>
                   <% sub_total += sale_item.price%>
                   <tr>
                     <td class="text-nowrap"><%= count %></td>
                     <td class="item-name"><%=sale_item.product_name%>@<%=number_with_precision( sale_item.unit_price, precision: precision.to_i )%></td>
                     <td class="text-nowrap"><%=sale_item.qty%></td>
                     <td class="item-attr text-nowrap"><%=(number_with_precision(sale_item.price, precision: precision.to_i ))%></td>
                   </tr>
                 <%end %>
               </tbody>
             </table>
           </div>
          </div>
          <div class="card-footer flex-grow-1 custom-card-footer">
            <table class="table" id="order-charges-table" border="0" cellpadding = "10">
              <tr>
                <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Sub Total</strong></td>
                <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total"><%=number_with_precision(sub_total, precision: precision.to_i)%></strong></td>
              </tr>
              <tr>
                <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>(Discount)</strong></td>
                <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total">(<%= number_with_precision(@sale_data.total_discount, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i ) %>)</strong></td>
              </tr>
              <tr>
                <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Total Tax</strong></td>
                <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total"><%= number_with_precision(@sale_data.total_tax, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></strong></td>
              </tr>
              <tr>
                <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Rounding Adj</strong></td>
                <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total"><%= number_with_precision(@sale_data.rounding_adjustment, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></strong></td>
              </tr>
              <tr>
                <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Grand Total</strong></td>
                <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total"><%= number_with_precision(@sale_data.grand_total, precision: precision.to_i ) rescue number_with_precision(0, precision: precision.to_i )%></strong></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    <% end %>

    <% if @pending %>
      <div class="col-md-5 col-lg-5 col-sm-12 h-100 d-flex flex-column m-l--15" style="padding-right: 15px">
        <% if @status == 'sale' %>
          <span id="sale_id" style="display:none"><%= @pending.try(:sale_id) %></span>
        <% elsif @status == 'order' %>
          <span id="sale_id" style="display:none"><%= @pending.try(:booking_id) %></span>
        <% end %>
        <div class="card"  style="height: 100%; margin-bottom: 10px;">
          <div class="card-header">
            <div>
              <% if @status == 'sale' %>
              <% table_name = @pending.try(:booking).try(:dining_facility).try(:name) %>
              <% elsif @status == 'order' %>
              <% table_name = @pending.try(:dining_facility).try(:name) %>
              <% end %>
              <strong id="order-title">INVOICE DETAILS </strong>| Table - <%= table_name %>
            </div>
            <div class="row p-l-5 p-r-5">
              <% if @status == 'sale' || @pending.try(:sale_status) == 'completed' || @pending.try(:sale_status) == 'void' %>
                <div class="col-lg-6 col-md-6 col-sm-6">
                  &nbsp; Receipt No:
                  <span id="receipt_no">
                    <%= @pending.receipt_no rescue '' %>
                  </span>
                </div>
              <% else%>
                <!-- <input type="hidden" id="save_order_id" value="<%#=@bookings.booking_orders[0].order_id%>"> -->
                <div class="col-lg-8 col-md-8 col-sm-8">
                  &nbsp; Order No: <span id="receipt_no">
                  <%= @pending.booking_orders.first.order_id rescue '' %></span>
                </div>
              <% end%>

              <% if @status == 'sale' || @pending.try(:sale_status) == 'completed' || @pending.try(:sale_status) == 'void' %>
                <div class="col-lg-6 col-md-6 col-sm-6 text-right">
                 Date:  <span id="receipt_date"><%= @pending.created_at.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%> &nbsp; </span>
                </div>
              <% else%>
                <div class="col-lg-4 col-md-4 col-sm-4 text-right">
                  Date:  <span id="receipt_date"><%= @pending.orders.first.created_at.strftime("%I:%M %p") rescue '-'%> &nbsp; </span>
                </div>
              <% end%>
            </div>
            <div class="row customer_detail p-l-5 p-r-5">
              <div class="col-lg-6 col-md-6 col-sm-6" >
                <% if @status == 'sale' %>
                  <input type="hidden" name="customer_id" value="<%= @pending.customer.customer_id rescue "-" %>" />
                  <span>
                    Customer: <%= @pending.customer.name rescue "-" %>
                  </span>
                <% else %>
                  <input type="hidden" name="customer_id" value="<%= @pending.orders.first.customer_id rescue "-" %>" />
                  <span>
                    Customer: <%= @pending.orders.first.customer.name rescue "-" %>
                  </span>
                <% end %>
              </div>
            </div>
          </div>
          <div class="card-block d-flex flex-column h-100">
            <div class="card-text h-100" id="foodcourt-table-slimscroll" style="overflow-y: auto">
              <table class="table table-striped fixed-header" id="order-items-table">
                <thead>
                  <tr>
                    <th class="item-name">Items</th>
                    <th class="item-attr">QTY</th>
                    <th class="item-attr">Price</th>
                  </tr>
                </thead>
                <tbody>
                  <% if @status == 'sale' %>
                    <% sub_total = 0
                    @pending.sale_items.each do |sale_item|
                    sub_total = sub_total + sale_item.price %>
                      <tr>
                        <td class='item-name'><%= sale_item.product_name %></td>
                        <td class='item-attr'><%= sale_item.qty %></td>
                        <td class='item-attr'><%= sale_item.price %></td>
                      </tr>
                    <% end%>
                  <% else %>
                    <% sub_total = 0
                      total = 0
                      @pending.order_items.each do |order_item|
                        total = order_item.qty * order_item.price
                      sub_total = sub_total + total %>
                        <tr class="edit_order" data-id='<%= order_item.order_items_id %>'>
                          <td class='item-name'><%= order_item.item_name %></td>
                          <td class='item-attr'><%= order_item.qty %></td>
                          <td class='item-attr'><%= total %></td>
                        </tr>
                      <% end %>
                  <% end%>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-footer">
            <table class="table" id="order-charges-table" border="0">
              <% if @status == 'sale' %>
                <tr>
                  <%if @pending.discount_type == 'member_discount'%>
                    <td class="charges-name"><strong>Member Discount:</strong></td>
                  <%else%>
                    <td class="charges-name"><strong>Discount:</strong></td>
                  <%end%>
                  <td class="item-attr"><strong id="order-discount">(<%= @pending.total_discount rescue 0%>)</strong></td>
                </tr>
                <tr>
                  <td class="charges-name"><strong>Tax:</strong></td>
                  <td class="item-attr"><strong id="order-Tax"><%= @pending.total_tax rescue 0%></strong></td>
                </tr>
                <tr>
                  <td class="charges-name"><strong>Rounding Adj:</strong></td>
                  <td class="item-attr"><strong id="order-round-adj"><%= @pending.rounding_adjustment rescue 0%></strong></td>
                </tr>
                <tr>
                  <td class="charges-name"><strong>Grand Total:</strong></td>
                  <td class="item-attr"><strong id="order-grand-total"><%= @pending.grand_total rescue 0%></strong></td>
                </tr>
                <tr class="rebate_amount"></tr>
              <% else%>
                <tr>
                  <td class="charges-name"><strong>Sub Total:</strong></td>
                  <td class="item-attr"><strong id="order-sub-total"><%= sub_total %></strong></td>
                </tr>
              <% end%>
            </table>
          </div>
        </div>
      </div>
    <% end %>


    <% if @pending || @booking %>
      <div class="col-md-1 col-lg-1 col-sm-12 h-100 d-flex flex-column" style="padding-right: 5px; margin-left: -5px;">
    <% else %>
      <div class="col-md-2 col-lg-2 col-sm-12 h-100 d-flex flex-column" style="padding: 0 15px 0 5px;">
    <% end %>
      <button type="button" class="btn btn-block btn-default waves-effect" id='back'>
        <i class="material-icons">reply</i>
         <%= t("views.btn.back") %>
      </button>
      <button type="button" class="btn btn-block btn-default waves-effect" id='refresh'>Refresh</button>

      <% if @booking && @booking.booking_status == 'assign' %>
        <button type="button" class="btn btn-primary btn-block waves-effect create" id="done_order">
          DONE
        </button>
      <% end %>
      <% if @booking && @booking.booking_status != 'void' %>
        <hr>
        <a class="btn btn-block bg-red waves-effect access_modal" data-toggle="modal"  data-type="void"> Void </a>
      <% end %>

      <!-- pending order button list -->
      <% if @pending && params[:active].nil? %>

        <% if current_user.role != "waiter" && @status == "order"%>
          <hr>
          <button type="button" id="addorder" class="btn bg-blue btn-block">Update Order</button>
        <%end%>

        <% if current_user.role != "waiter" && @status == "sale"%>
          <hr>
          <button type="button" id="void" class="btn btn-block bg-red waves-effect" >VOID</button>
          <button type="button" id="pay" class="btn bg-blue btn-block" data-toggle="modal" data-target="#read_modal">Pay</button>
        <%end%>

        <% if @status != "sale"%>
          <hr>
          <!-- <button type="button" id="request_bills" class="btn btn-block bg-blue waves-effect">Req.Bill</button> -->
          <% order_id = @pending.try(:orders).try(:first).try(:order_id) if @status == 'order' %>
          <button type="button" class="btn btn-block bg-blue waves-effect req_bill" data-toggle="modal" data-target="#payment_modal" >Req.Bill</button>
          <button type="button" id="order_cancel" class="btn btn-block bg-red waves-effect" >CANCEL</button>
          <input type="hidden" id="save_order_id" value="<%=order_id%>">
        <%end%>

      <% elsif @pending && params[:active] == 'completed' %>
        <% if current_user.role != "waiter" %>
          <% if @pending.sale_status != 'void' && @pending.sale_status != 'waste' && @pending.sale_status != 'spoile' %>
            <hr>
            <% if current_user.role == "cashier" %>
              <% if @pending.payment_status != 'foc' %>
                <a class="btn btn-block bg-red waves-effect access_modal" data-toggle="modal"  data-type="void"> Void</a>
              <% end %>
              <a class="btn btn-block bg-blue waves-effect access_modal" data-toggle="modal"  data-type="reprint"> Re.Print</a>
            <% else %>
              <% if @pending.payment_status != 'foc' %>
                <button type="button" class="btn bg-red btn-block" data-toggle="modal" data-target="#voidModal" readonly= "<%= (can? :overall_void, :void)? 'true': 'false' %>" > Void </button>
              <% end %>
                <button type="button" id="reprint" class="btn bg-blue btn-block">Re.Print</button>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    </div>

  </div>
  <div class="modal fade" id="voidModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="voidModalLabel">Please Enter Reason for Void</h4>
        </div>
        <div class="modal-body">
           <input type="textarea" name="remark" class="form-control col-md-12 remark" id="remark">
        </div>
        <div class="modal-footer ">
          <div class="row p-r-20">
            <div class="col-md-5">
              <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-red waves-effect " id="void" active="true">VOID</button>
            </div>
            <div class="col-md-5">
              <button type="button" class="btn btn-link  p-t-5 p-b-5 bg-blue waves-effect" data-dismiss="modal">CLOSE</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="AccessCodeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title" id="AccessCodeModalLabel">Enter Access Code</h4>
        <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#111;">&times;</button>
        </div>
        <div class="modal-body" style="padding: 0px 25px 15px 25px !important">
           <input type="password" id="access_code" class="access_code form-control col-md-12 ">
          <div class="row bottom p-l-15 p-r-15 m-t-10">
               <div class="col-md-3 access_number border-top border-left" data-value="1" data-type="num">1</div>
               <div class="col-md-3 access_number border-top border-left" data-value="2" data-type="num">2</div>
               <div class="col-md-3 access_number border-top border-left" data-value="3" data-type="num">3</div>
               <div class="col-md-3 access_number border-top border-left" data-value="4" data-type="num">4</div>
             </div>
             <div class="row bottom p-l-15 p-r-15">
               <div class="col-md-3 access_number border-top border-left" data-value="5" data-type="num">5</div>
               <div class="col-md-3 access_number border-top border-left" data-value="6" data-type="num">6</div>
               <div class="col-md-3 access_number border-top border-left" data-value="7" data-type="num">7</div>
               <div class="col-md-3 access_number border-top border-left" data-value="8" data-type="num">8</div>
             </div>
             <div class="row bottom p-l-15 p-r-15">
               <div class="col-md-3 access_number border-top border-left" data-value="9" data-type="num">9</div>
               <div class="col-md-3 access_number border-top border-left" data-value="0" data-type="num">0</div>
               <div class="col-md-3 access_number border-top border-left orange" data-type="clr">Clr</div>
               <div class="col-md-3 access_number ok border-top border-left blue" data-type="ok" data-action="">OK</div>

             </div>
        </div>
      </div>
    </div>
  </div>
</div>
<%= render "read_modal" %>

<script defer type="text/javascript">

  // nfc scan
  $("#read_modal").on('shown.bs.modal', function() {
    $('#payment_modal').css('display', 'none');
  })

  $("#read_nfc").on('click', function() {
    $('#payment_modal').hide();

    $('#payment_modal').css('display', 'none');
    $('.modal-backdrop.fade').css('display', 'none');
  });

  $("#read_modal").on('shown.bs.modal', function() {
    $('#payment_modal').css('display', 'none');
    $('#payment_modal').hide();
    $("#read_modal").attr('data-for', 'member');

    // alert('show read nfc modal');
    var sale_id = $('#sale_id').text();

    getCardNo();

    onScan.attachTo(document, {
      onScan: function (sCode) {
        setCardNo(sCode);
      },
    });
  });

  // qr pay
  var dynamicQR = document.querySelector('.payment-card#dynamic_qr')

  if(dynamicQR) {
    document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
      document.getElementById('fullpage-loading').style.display = 'flex';

      setTimeout(function() {
        document.getElementById('fullpage-loading').style.display = 'none';
      }, 5000);
        initDynamicQrPay();
    });
  }


  function initDynamicQrPay() {
        const paymentMethod = 'MMQR';
        const $serverMode = $('#server_mode');
        const $createOrderBtn = $('#create_order');
        const $createPayOrderBtn = $('#create_pay_order');

        $.ajax({
            url: '/foodcourt/qrpay/req_bill?order_id=' + $('#receipt_no').text().trim() + '&customer_id=' + $('input[name="customer_id"]').val(),
            method: 'GET',
            success: function(result) {
                console.log(result);
                if(! result.status) {
                  alert('Something went wrong');
                  return;
                }

                window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
                if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
                    // customer_display_view(null, "reload");
                }
            },
            error: function(xhr) {
                $('#oqs_loading_wrapper').hide();
                $createOrderBtn.prop('disabled', false);
                $createPayOrderBtn.prop('disabled', false);

                const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
                swal("Error", errorMsg, "error");
            }
        });
    }

    // const cancelButton = document.querySelector('.btn-cancel');

    // cancelButton.addEventListener('click', function () {
    //     console.log("Action: Cancel payment.");

    //     paymentCards.forEach(c => c.classList.remove('active'));
    //     $("#payment_modal").css('display', 'none');
    //     $("#payment_modal").hide();

    // });


  var cashier_type = 'food_court';
  $("#read_modal").on("hidden.bs.modal", function (e) {
    $("#read_modal").css("display", "none");
  });

  $("#payment_modal").on("hidden.bs.modal", function (e) {
    $("#read_modal").css("display", "none");
  });

  $(document).ready( function() {
    if ("<%= @pending %>" || "<%= @booking %>") { // adjust column gap
      $('.card-columns').css('column-gap', '0.3rem')
    }
  })

  $('#pay, .req_bill').on('click', function () {
    // $("#read_modal").show();
    // $("#read_modal").attr('data-for', 'member');
    // var sale_id = $('#sale_id').text();
    // getCardNo();

    // onScan.attachTo(document, {
    //   onScan: function(sCode) {
    //     setCardNo(sCode)
    //   }
    // });
  });
//  $('#pay').on('click', function () {
//     // var sale_id = $('#sale_id').text();
//     getCardNo();
//   });

 $("#read_modal #close").on('click',function(){
    if($("#order-items-table tr").length > 1){
      $( "#create_pay_order" ).prop( "disabled", false );
    }
    $("#read_modal").modal('hide');
  });

  $('#addorder').on('click', function () {
    var status = "<%= @status %>"
    if (status == 'sale'){
      var table_id = "<%= @pending.try(:booking).try(:dining_facility).try(:id) %>"
      var booking_id = "<%= @pending.try(:booking).try(:id) %>"
    }
    else {
      var table_id = "<%= @pending.try(:dining_facility).try(:id) %>";
      var booking_id = "<%= @pending.try(:booking_id) %>";
      var order_id = "<%= @pending.try(:orders).try(:first).try(:order_id) %>";
    }

    var sale_id = $("#sale_id").text();
    // if (table_id) {
      window.location.href = '/foodcourt/food_court/modify_order/' + booking_id + "/"+ sale_id + '?update=true';
    // }else{
    //   window.location.href = '/foodcourt/food_court/modify_order/' + booking_id + "/" + sale_id + '?update=true&order_id="'+order_id+'"'
    // }

  });

  $('#back').on('click', function () {
     window.location.href ="<%=foodcourt_food_court_path %>";
  });
  $('#done_order').on('click', function () {
    swal({
      title: "Alert !",
      text: 'Order Complete?',
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes",
      cancelButtonClass: 'btn btn-danger',
      closeOnConfirm: false
    }, function (isConfirm) {
      if (isConfirm) {
        $('.confirm').prop("disabled",true);
        $.ajax({
          type: "POST",
          url: "/foodcourt/<%=@booking_id %>/<%=@order_id %>/completed",
          data: {customer_id:"<%=@customer_id %>"},
          dataType: "json",
          success: function(data) {
            swal({
             title: "Information!",
             text: 'Send sms to customer ',
             type: "success",
           }, function () {
             window.location.href ="<%=foodcourt_app_order_by_booking_path %>";
           });
          }
        });
      }
    });
  });
$('#void').on('click', function () {
    var access_code  = localStorage.getItem("access_code");
   swal({
     title: "Alert",
     text: "Are you sure want to Void?",
     type: "warning",
     showCancelButton: true,
     confirmButtonColor: "#DD6B55",
     confirmButtonText: "Yes, void it!",
     closeOnConfirm: false
   }, function (isConfirm) {
     if (isConfirm) {
       $('.confirm').prop("disabled",true);
       var sale_id = $('#sale_id').text();
       var remark  = $("#remark").val();
       var ajax_url = "/foodcourt/sale/" + sale_id +'/food_court/void';
       $.ajax({
         type: 'POST',
         url: ajax_url,
         data: "remark="+ remark + "&sale_id=" + sale_id+ "&access_code=" + access_code,
         success: function (result) {
               // For Server Print - from jade
               if ($("#server_mode").val() == "cloud") {
                 if(typeof code2lab != 'undefined'){
                   code2lab.printFile(result.filepath.substr(6), result.printer_url);
                 }
               }
              window.location.href = '/foodcourt/app_orders';
            }
          })
     }
   });
 });
 $(document).on('click', '.access_modal', function(event){
      type = $(this).data("type");
      $(".ok").attr("data-action",type);
      $('#AccessCodeModal').modal('show');
    });

 $(document).on('click', '.access_number', function(event){
      if(event.handled !== true) {
        var original_value = $('#access_code').val();
        var input_type = $(this).attr("data-type");

        switch (input_type) {
            case 'num':
              var input_value = $(this).attr("data-value");
              if (original_value){
                $('#access_code').val(original_value + input_value);
              }else{
                $('#access_code').val(original_value + input_value);
              }
              break;
            case 'ok':
              var type = $(this).attr("data-action");
              code = $('#access_code').val();
              check_emp_access_code(code,type)
              break;
            case 'clr':
              $('#access_code').val("");
              break;
        }
        event.handled = true;
      } else {
          return false;
      }
    });

function createAccessCode(code) {
 localStorage.setItem("access_code",code);
}
function check_emp_access_code(access_code,type) {
    var url = "/foodcourt/check_emp_access_code/" + access_code ;
    $.ajax({
        type: 'POST',
        url: url,
        data: {},
        success: function (result) {
           if (result.status == true) {
            createAccessCode(code);
             if (type == "edit") {
                var dining_id = $('#dining').text();
                var sale_id = $('#sale_id').text();
                if (dining_id) {
                  window.location.href = '/foodcourt/table/' + dining_id + "/sale/" + sale_id + "/food_court/edit";
                }else{
                  window.location.href = "/foodcourt/table/sale/" + sale_id + "/food_court/edit";
                }
             }else if(type == "void"){
               $('#AccessCodeModal').modal('hide');
               $('#voidModal').modal('show');
             }else if(type == "waste") {
                waste_and_spoilage("waste")
             }else if(type == "spoile") {
                waste_and_spoilage("spoile")
             }else if(type == "foc"){
               $('#AccessCodeModal').modal('hide');
               $('#focModal').modal('show');
             }
             else if(type == "reprint"){
               $('#AccessCodeModal').modal('hide');
               reprint();
             }
           }else{
             swal("Oops",result.message,"warning");
           }
        }
    });
}

$('#reprint').on('click', function () {
    reprint();
  });

  function reprint(){
    var sale_id = $('#sale_id').text();

    var ajax_url = '/foodcourt/'+ sale_id  + "/reprint";

    $.ajax({
      type: "GET",
      url: ajax_url,
      success: function (result) {
        if ($("#server_mode").val() == "cloud") {
          if(typeof code2lab != 'undefined'){
            code2lab.printFile(result.filepath.substr(6), result.printer_url);
          }
        }
        location.reload();
      }
    });
  }

  $('#order_cancel').on('click', function () {
    var order_id = $('#save_order_id').val();
    swal({
     title: "Alert",
     text: "Are you sure want to cancel this order?",
     type: "warning",
     showCancelButton: true,
     confirmButtonColor: "#DD6B55",
     confirmButtonText: "Yes, cancel it!",
     closeOnConfirm: false
    }, function (isConfirm) {
      if (isConfirm) {
        $('.confirm').prop("disabled",true);
        $.ajax({
          type: "GET",
          url: "/foodcourt/food_court/"+order_id+"/cancel_order" ,
          data: {},
          dataType: "json",
          success: function(data) {
            if(data.status == true)
            {
              window.location.href = '/foodcourt/app_orders';
            }else{
              alert("error")
              swal("Alert!", "Error!", data.error_message);
              location.reload();
            }
          }
        });
      }
   });
  });

</script>