<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'foodcourt/addorder', 'data-turbolinks-track': 'reload' %>
<% type = request.path_info.include?('quick_service') || request.path_info.include?('food_court')%>
<% modify_order = request.path_info.include?('modify_order')%>
<div class="container-fluid h-100" style="padding:0px 3px 0px 3px;">
  <div id="oqs_loading_wrapper" style="display:none;">
    <div id="oqs_loading"></div>
  </div>
  <% @order_id = params[:order_id].gsub('"', '') if params[:order_id] %>
  <input type="hidden" name="type" id="role" value="<%= current_user.role%>">
  <input type="hidden" name="cashier_type" id="cashier_type" value="<%= type%>">
  <input type="hidden" name="link_type" id="link_type" value="<%= @cashier_type %>">
  <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
  <input type="hidden" name="order_id" id="order_id" value= "<%= @order_id %>">
  <input type="hidden" name="table_id" value="" id="table_id">
  <div class="row pt-3" style="height: 93vh">
    <div class="col-lg-2 col-md-2 col-sm-2 hidden d-flex flex-column h-100" id="menu_data">
      <li class="list-menu">
        <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">

          <span class="main_menu" id="main_menu menu_name" >
            <%if @menu.present? %>
            <%=@menus[0].name%>
            <% end%>
          </span>
        </a>
        <ul class="ml-menu menu_list aria-hidden " style="border-top: 1px solid #fff">
          <% @menus.each do |menu| %>
          <li class="nav-item menu_click" data-name="<%=menu.name%>" data-id="<%=menu.id%>" style="">
           <a class="nav-link" data-toggle="tab" href="" role="tab" style="text-transform: lowercase;"><%=menu.name%></a>
         </li>
         <%end%>
       </ul>
     </li>
     <div id="menu1-slimscroll" class="flex-grow-1">
      <ul class="nav nav-tabs flex-column category_list" role="tablist" id="ul-navbar">
        <li class="nav-item product" data-ref="<%= foodcourt_get_all_product_path %>">
          <a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>
        </li>
        <% @menu.each do |menu| %>
        <% if !menu.valid_time.nil? %>
        <% if menu.menu_category_id.nil? %>
        <!--if type quick_service or cashier for table -->
        <% if type %>
        <% if !menu.code.include? "SPL" %>
        <li class="nav-item">
          <p class="hidden menu-id"><%= menu.id  %></p>
          <a class="nav-link menu_category sub_click first_<%=menu.id%>" data-toggle="tab" href="" role="tab" data-id="<%=menu.id%>" data-sub-id="<%=menu.get_sub_category%>"> <%= menu.name%>
          </a>
          <ul class="sub_category_list hidden fadeInTop animated" id="sub_category_list">
          </ul>
        </li>
        <% end%>
        <!-- else quick_service or cashier for table -->
        <% else %>
        <% if @table.current_checkout_booking.nil? %>
        <% if !menu.code.include? "SPL" %>
        <li class="nav-item ">
          <p class="hidden menu-id"><%= menu.id  %></p>
          <a class="nav-link menu_category sub_click first_<%=menu.id%>" data-toggle="tab" href="" role="tab" data-id="<%=menu.id%>" data-sub-id="<%=menu.get_sub_category%>"> <%= menu.name%>
          </a>
          <ul class=" sub_category_list hidden fadeInTop animated" id="sub_category_list">
          </ul>
        </li>
        <% end%>
        <% else %>
        <li class="nav-item ">
          <p class="hidden menu-id"><%= menu.id  %></p>
          <a class="nav-link menu_category sub_click first_<%=menu.id%>" data-toggle="tab" href="" role="tab" data-id="<%=menu.id%>" data-sub-id="<%=menu.get_sub_category%>"> <%= menu.name%>
          </a>
          <ul class=" sub_category_list hidden fadeInTop animated" id="sub_category_list">
          </ul>
        </li>
        <% end%>
        <!-- end quick_service or cashier for table -->
        <% end %>
        <% end%>
        <% end %>
        <%end %>
      </ul>
    </div>
  </div>


  <div class="col-lg-2 col-md-2 col-sm-2 hidden h-100 d-flex flex-column m-t-10" id="menu_cache">
    <div class="card h-100" style="margin-bottom: 10px;">
      <div class="card-header">
        <li class="list-menu" style="background: none">
          <a href="javascript:void(0);" id="menu_dropdown" class="menu-toggle dropdown-toggle toggled my-toggle ">
            <span class="main_menu menu_cache_name" id="main_menu menu_cache_name"></span>
          </a>
          <ul class="ml-menu menu_list aria-hidden menu_cache_list" style="border-top: 1px solid #fff">
          </ul>
        </li>
      </div>
      <div class="card-block h-100 d-flex flex-column">
        <div id="foodcourt-menu-slimscroll" class="flex-grow-1 card-text">
          <ul class="nav nav-tabs flex-column category_list category_cache_list" role="tablist" id="ul-navbar">
          <%if Product.any? %>
            <li class="nav-item product" data-ref="<%= foodcourt_get_all_product_path %>">
             <a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>
           </li>
          <%end%>
         </ul>
       </div>
      </div>
    </div>

 </div>


 <div class="col-md-7 col-lg-7 col-sm-7 m-t-10 d-flex flex-column h-100" id="menu-item-list" style="margin-left: -10px;
    margin-right: -10px;">
  <div class="card h-100" style="margin-bottom: 10px;">
    <div class="card-block d-flex flex-column h-100" style="">
      <div class="card-text" id="foodcourt-slimscroll">
        <div class="row menu_items_list" style="margin:0px 1px 0px 1px ;">
         <!-- append data -->
         <% @menu.each do |menu| %>
         <% if !menu.valid_time.nil? %>
         <% if menu.menu_category_id.nil? %>
         <!--if type quick_service or cashier for table -->
         <% if type %>
         <% if !menu.code.include? "SPL" %>
         <div class="card custom-card testimonial-card animated fadeInRight menu_category sub_click" data-id="<%=menu.id%>">
          <div class='card-block custom-card-block'>
            <p><%=menu.name%> </p>
              <p><%=menu.code%> </p>
              </div>
            </div>
            <% end%>
            <!-- else quick_service or cashier for table -->
            <% else %>
            <% if @table.current_checkout_booking.nil? %>
            <% if !menu.code.include? "SPL" %>
            <div class="card custom-card testimonial-card animated fadeInRight menu_category sub_click" data-id="<%=menu.id%>">
              <div class='card-block custom-card-block'>
                <p><%=menu.name%> </p>
                  <p><%=menu.code%> </p>
                  </div>
                </div>
                <% end%>
                <% else %>
                <div class="card custom-card testimonial-card animated fadeInRight menu_category sub_click" data-id="<%=menu.id%>">
                  <div class='card-block custom-card-block'>
                    <p><%=menu.name%> </p>
                      <p><%=menu.code%> </p>
                      </div>
                    </div>
                    <% end%>
                    <!-- end quick_service or cashier for table -->
                    <% end %>
                    <% end%>
                    <% end %>
                    <%end %>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-lg-3 col-sm-3 m-t-10 d-flex flex-column h-100">
            <div class="card h-100"  style="margin-right: -20px; margin-bottom: 10px;">
              <div class="card-header" style="padding: 0.12rem 0.25rem">

                <button type="button" class="btn btn-lg btn-primary waves-effect col-md-8" id='app_order'>
                  Orders
                </button>
                <button class="btn btn-lg bg-blue waves-effect select_table col-md-3" data-toggle="modal" data-target="#TableModal">Select</button>

                <div class="row ">
                <div class="col-md-9 col-lg-9 col-sm-9 ">
                  <strong id="order-title" class="font-14 p-l-10">ORDER DETAILS </strong>
                  <p class="hidden" id="booking_id"><%=@booking_id%></p>
                  <p class="hidden" id="sale_id"><%=@sale_id%></p>
                  </div>
                  <div class="col-md-3 col-lg-3 col-sm-3">
                    <button type="button" class="btn btn-xs btn-danger waves-effect" id='clear_all'>    Clear
                    </button>
                  </div>
                </div>
              </div>

              <div class="card-block d-flex flex-column h-100">
                <!-- <div class="table-responsive">
                  <table class="table m-b-0" id="append-table">
                    <thead>

                    </thead>
                  </table>
                </div> -->
                <div class="card-text h-100" id="foodcourt-order-slimscroll">
                  <table class="table table-striped summary-items" id="order-items-table">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Items</th>
                        <th class="text-nowrap text-right">QTY</th>
                        <th class="text-nowrap text-right">Price</th>
                      </tr>
                    </thead>
                    <tbody class="font-13" >

                    </tbody>
                  </table>
                </div>
              </div>
              <div id="card-footer-placeholder"></div>
              <div class="card-footer flex-grow-1 custom-card-footer" id="orders-footer">
                <table class="table" id="order-charges-table" border="0">
                  <tr>
                    <td colspan="2" style="padding:2px;" class="charges-name"><strong>Total:</strong></td>
                    <td style="padding:2px 20px 2px 2px;"><strong id="total_qty">0</strong></td>
                    <td style="padding:2px;" class="item-attr <%= params[:modify] ? '' : 'text-right'%>"><strong id="sub_total">0.00</strong></td>
                  </tr>
                </table>
                <div class="row gap-3 d-flex justify-content-between">
                    <% if params[:update] %>
                        <button type="button" class="btn btn-primary action-btn create col-md-12 m-t-5" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#payment_modal" style=" height: 50px; width: 100%;">Update Order & Pay</button>
                    <% else %>
                        <% if @sale_id.nil?%>
                            <button type="button" class="btn btn-primary action-btn create col-md-5 d-inline" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#payment_modal" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
                        <% else %>
                            <button type="button" class="btn btn-primary action-btn create col-md-5 d-inline" id="add_to_existing_order" disabled="disabled" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
                        <% end %>
                        <button type="button" class="btn btn-primary w-full action-btn create col-md-7 d-inline" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
                </div>
                  <% end %>
              </div>
            </div>
          </div>
     </div>
  </div>

     <!-- Modal -->
     <div class=" modal" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true" style="">
      <div class="modal-dialog custom-modal-dialog" role="document">
        <div class="modal-content">

          <div class="modal-body">
            <table width="100%" class="table table-striped">
             <thead>
               <tr>
                 <th style="">Item Name</th>
                 <th style="">Quantity</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td class="item_name" id="modal-item-name"></td>
                 <td>
                   <input type="number" name="qty" class="form-control col-md-12 input-number" data-value="0" id="modal-qty" value="" min="1" max="10000">
                 </td>
                 <td>
                   <button type="button" id="remove" class="btn btn-danger" data-dismiss="modal">Remove</button>
                 </td>
               </tr>
             </tbody>
           </table>
           <div class="row bottom p-l-15 p-r-15 m-t-10">
             <div class="col-md-3 cashier_number border-top border-left" data-value="1" data-type="num">1</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="2" data-type="num">2</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="3" data-type="num">3</div>
             <div class="col-md-3 cashier_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 cashier_number border-top border-left" data-value="5" data-type="num">5</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="6" data-type="num">6</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="7" data-type="num">7</div>
             <div class="col-md-3 cashier_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 cashier_number border-top border-left" data-value="9" data-type="num">9</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="0" data-type="num">0</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="00" data-type="num">00</div>
             <div class="col-md-3 cashier_number border-top border-left  bg-orange" data-type="clr">Clr</div>
           </div>
         </div>
         <div class="modal-footer">
          <div class="row">
            <div class="col-md-5">
              <button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
            </div>
            <div class="col-md-5">
              <button type="button" class="btn btn-primary " data-dismiss="modal" id="save">Update</button>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>

  <!-- Menu Item modal -->

  <div class="item-modal modal sx_item_detailModal" id="sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog custom-modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
          <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
          <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>

        </div>
        <div class="modal-body">
          <div class="row no-set-item">
            <div class="col-md-5">
              <p style="text-align: center;" id="modal_box_img"></p>
              <div class="input-group">
                <input type="text" value="1" id="count" class="change_qty keypress_qty form-control col-md-6 ">
                <span class="input-group-btn col-md-3">
                  <button type="button" class="btn btn-danger btn-block btn-number"  value="-" id="minus">
                   <i class="material-icons">remove</i>

                 </button>
               </span>

               <span class="input-group-btn col-md-3">
                <button type="button" class="btn btn-success btn-block btn-number" value="+" id="plus">
                 <i class="material-icons">add</i>
               </button>
             </span>
           </div>
           <p class="hidden" id="unit_price"></p>
           <p class="hidden" id="instance_code"></p>
           <p class="hidden" id="instance_name"></p>
           <p class="hidden" id="promotion_price"></p>
           <p class="hidden" id="item_instances"></p>
           <p class="hidden" id="item_code"></p>
         </div>
         <div class="col-md-7 item-detail">
          <h5>Attributes</h5>
          <div class="attributes-list">
          </div>
          <hr>
          <h5>Options</h5>
          <div class="options-list">
          </div>
          <hr>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="mr-auto">
        <h4 class=" pull-left d-inline">Total : <span id="total_price"></span></h4>
        <h5 id="wanring_text" class="d-inline text-danger" style="margin-left: 50px"></h5>
      </div>
      <div class="row">
        <div class="col-md-4">
          <button type="button" class="btn btn-default " data-dismiss="modal" id="close">Close</button>
        </div>
        <div class="col-md-6">
            <button type="button" class="btn btn-primary add_to_order " data-dismiss="modal" id="add_to_order">Add to Order</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<%= render "layouts/read_modal" %>

<!-- Large modal -->
<div class="modal sx_item_set_detailModal h-100" id="sx_item_set_detailModal" tabindex="-1" role="dialog" aria-labelledby="sx_item_set_detailLabel" aria-hidden="true" >
  <div class="modal-dialog custom-modal-dialog modal-lg h-100">
    <div class="modal-content h-100">
      <div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
        <h4 class="modal-title" style="color:#fff;" id="set_name"></h4>
        <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">&times;</button>
      </div>
      <div class="modal-body h-100" id="set-menu-item-slimscroll" data-height="50">
        <!-- id="set-menu-item-slimscroll" -->
        <div class="row set-item">
          <div class="col-md-4">
            <p class="set_default_option" style="text-align: center;"> <%= image_tag "logo.png" ,width: '', height: '', :id => 'logo' %></p>
                <!-- <div class="form-group">
                  <label class="col-md-6" style="margin-top:5px">Quantity</label>
                  <input type="number" name="qty" class="form-control col-md-5 input-number change_qty" id="set_change_qty" value="" min="1" max="100">
                </div>  -->

                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-danger btn-number"  value="-" id="set_minus">
                      <i class="material-icons">remove</i>
                    </button>
                  </span>
                  <input type="text" value="1" id="set_count" class="set_change_qty keypress_qty form-control col-md-12 ">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-success btn-number" value="+" id="set_plus">
                      <i class="material-icons">add</i>
                    </button>
                  </span>
                </div>

                <p class="hidden" id="set_unit_price"></p>
                <p class="hidden" id="set_instance_code"></p>
                <p class="hidden" id="set_instance_name"></p>
                <p class="hidden" id="set_promotion_price"></p>
                <p class="hidden" id="set_item_instances"></p>
                <p class="hidden" id="set_item_code"></p>
                <p></p>

                <div class="" id="modal-set-slimscroll" data-height="100">
                  <div class="options-list" style="margin-top:-5px">
                  </div>

                  <div class='selected-set-list'>

                  </div>
                </div>

              </div>

              <div class="col-md-8">
                <div class="instance-list row"></div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="mr-auto">
            <h4 class=" pull-left">Total : <span id="set_total_price"></span></h4>
          </div>
          <div class="row">
            <div class="col-md-4">
              <button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
            </div>
            <div class="col-md-6">
              <button type="button" class="btn btn-primary set_order" data-dismiss="modal" id="set_order">Add to Order</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="TableModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" style="margin-top: -1rem;">
          <!-- <h4 class="modal-title" id="TableModalLabel">Select Table</h4> -->
          <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;">&times;</button>
        </div>
        <div class="modal-body" style="margin-top: -0.75rem;padding-top:5px">
          <%@zone.each do |zone| %>
          <h5>Zone : <%=zone.name%></h5>
          <div class="card-columns" style="column-count: 7;">
            <%zone.tables.each do |table| %>
            <% if table.status == 'occupied' %>
            <%  color="red"%>
            <% else %>
            <%  color="green"%>
            <% end %>
            <div class="card tables <%=color%> text-white table_<%= table.id %>" data-id="<%= table.id %>" data-type="<%= table.type %>" data-name="<%= table.name %>">
              <div class="card-block">
                <%= table.name %>
              </div>
            </div>
            <%end%>

            <%zone.rooms.each do |table| %>
            <% if table.status == 'occupied' %>
            <%  color="red"%>
            <% else %>
            <%  color="green"%>
            <% end %>
            <div class="card tables <%=color%> text-white table_<%= table.id %>" data-id="<%= table.id %>" data-type="<%= table.type %>" data-name="<%= table.name %>">
              <div class="card-block">
                <%= table.name %>
              </div>
            </div>
            <%end%>
          </div>
          <%end%>
          <div class="modal-footer  p-r-30">
            <button type="button" class="btn btn-link btn-danger waves-effect" data-dismiss="modal">CLOSE</button>
            &nbsp;  &nbsp;
            <button type="button" class="btn btn-link bg-blue waves-effect confirm_table" data-dismiss="modal">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
</div>
<style type="text/css">
  .fadeInRight{
    -webkit-animation-duration: 350ms !important;
  }
</style>

<script>
var cashier_type = $('#cashier_type').val();
//get menu item cache

$(document).ready(function () {
  // reset second dispaly on page load
  customer_display_view(null,"reload");

  footerHeight = $('#orders-footer').innerHeight() + 30
  $('#card-footer-placeholder').css('height', footerHeight)

  if (window.location.href.indexOf('#') != -1) {
    getAllMenu();
  }
  else{
    var menus = JSON.parse(localStorage.getItem("menus"));
    if (menus != null) {
      menu_cache_append(menus);
    }
  }

  $(".tables").on('click', function () {
    $('.tables').css('background-color','');
    $('.tables').removeClass('purple')
    var dining_id = $(this).attr("data-id");
    var name = $(this).attr("data-name");
    var type = $(this).attr("data-type");
    $(this).css('background-color','purple');
    $(this).addClass('purple')
    $('.confirm_table').attr("data-id",dining_id)
    $('.confirm_table').attr("data-name",name)
    $('.confirm_table').attr("data-type",type)
  });

  $(".confirm_table").on('click', function () {
    var dining_id = $(this).attr("data-id");
    var name      = $(this).attr("data-name");
    var type      = $(this).attr("data-type");
    $('#table_id').val(dining_id);
    $('#table_type').text(type);
    $('.select_table').text(name);
  });
  $('#app_order').on('click', function () {
    window.location.href = '/en/foodcourt/app_orders';
  });

  $(document).on('click', '.menu_click', function(event){

    $('.category_list').find('li').find('.nav-link').removeClass('active');

    var menu_id = $(this).attr("data-id");
    var name = $(this).attr("data-name");
    var menus = JSON.parse(localStorage.getItem("menus"));
    $('.menu_cache_list').toggle(300);
    if (menus != null) {
      menu_click_cache_append(name,menus,menu_id);
    }else{
      var url = "get_menu/"+menu_id;
      show_menu_cat_list(name, url);
    }
  });
  //End menu category Click

function getAllMenu(){
  $.ajax({
      type: "GET",
      url: '/foodcourt/get_all_menu',
      data: {},
      success:function(result){
        var menus = JSON.stringify(result);
        localStorage.setItem("menus", menus);
        if (result != null ) {
          menu_cache_append(result);
          $("#loading_wrapper").hide();
          $("#oqs_loading_wrapper").css("display", "none");
          $(".page-loader-wrapper").css("display", "none");
        }
      }
  });
}

function menu_cache_append(menus){
  $("#menu_cache").removeClass("hidden");
  if (!menus || menus.length == 0) {
    return;
  }

  $(".menu_cache_name").text(menus[0]["name"])

  if (menus.length == 1 ) {
    $(".list-menu").append($("#menu_dropdown").html());
    $("#menu_dropdown").remove();
    $(".menu_cache_list").remove();
  } else {
    for(var i in menus) {
      if (menus[i].categories.length)
        menu_list_template(menus[i]);
    }
  }

  var category = menus[0]["categories"];

  for(var ii in category) {
    if (category[ii]["is_available"]== true){
      if (category[ii]["valid_time"]== true){
        if (category[ii]["parent_id"] == null ){
          if(cashier_type){
            if (category[ii]["code"].includes("SPL") != true) {
              category_list_template(category[ii]);
            }
          }else{
            if ($("#table_get_current").text()) {
              if (category[ii]["code"].includes("SPL") != true) {
                category_list_template(category[ii]);
              }else {
                category_list_template(category[ii]);
              }
            }
          }
        }
      }
    }
  }
}

function menu_click_cache_append(name,menus,menu_id) {
  var menu_list = $('.menu_items_list');
  menu_list.empty();

  var menu_cat = $('.category_list');
  $('.category_list li:not(.product)').remove();

  $(".main_menu").text(name);

  for(var i in menus) {

  if (menu_id == menus[i]["id"] && menus[i]["is_active"] == true) {

      // menu_list_template(menus[i]);
      var category = menus[i]["categories"];

      for(var ii in category) {
        if (category[ii]["is_available"]== true){
          if (category[ii]["valid_time"]== true){
            if (category[ii]["parent_id"] == null ){
              if(cashier_type){
                if (category[ii]["code"].includes("SPL") != true) {
                  category_list_template(category[ii]);
                }
              }else{
                if ($("#table_get_current").text()) {
                  if (category[ii]["code"].includes("SPL") != true) {
                    category_list_template(category[ii]);
                  }else {
                    category_list_template(category[ii]);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

function category_list_template(menu) {
  row = '<li class="nav-item">'
  +'<p class="hidden menu-id">'+menu.id+'</p> '
  +'<a class="nav-link menu_category sub_click first_'+menu.id+'" '
  +'data-toggle="tab" href="" role="tab" data-id="'+menu.id+'" '
  +'data-sub-id="'+menu.sub_category+'">'+menu.name+''
  +'</a>'
  +'<ul class="sub_category_list hidden fadeInTop animated" '
  +'id="sub_category_list">'
  +'</ul>'

  +' </li>';
  $(".category_cache_list").append(row);
}

function menu_list_template(menu) {
  row = '<li class="nav-item menu_click" data-name="'+menu.name+'" '
  +' data-id="'+menu.id+'" style="">'
  +' <a class="nav-link" data-toggle="tab" href="" role="tab"'
  +' style="text-transform: lowercase;">'+menu.name+'</a>'
  +'</li>';
  $(".menu_cache_list").append(row);
}

//show menu item list when click menu category
function show_menu_cat_list(name, url_item){
  var menu_list = $('.menu_items_list');
  menu_list.empty();

  var menu_cat = $('.category_list');
  menu_cat.empty();

  $(".main_menu").text(name);
  cashier_type         = window.location.href.indexOf("quick_service");
  modify_order = window.location.href.indexOf("modify_order");
  if (cashier_type != -1 && modify_order != -1) {
  url_item = '../../../addorders/'+url_item;
  }
  if(modify_order == -1 && cashier_type != -1){
  url_item = 'addorders/'+url_item
  }
  if (cashier_type ==-1 && modify_order == -1){
  url_item = url_item;
  }
//Start Ajax
  $.ajax({
  type: "GET",
  url: url_item,
  data: {},
  dataType: "json",
  success: function(data) {
    for(var i in data) {
      if (data[i].is_available == true) {
        row = '<div class="card custom-card testimonial-card animated fadeInRight menu_category sub_click" data-id="'+ data[i].id +'">'
        +' <div class="card-block custom-card-block">'
        +'  <p>'+ data[i].name +'<p>'
        +'  <p>'+ data[i].code +' <p>'
        +'  </div>'
        +'   </div>';
        $('.menu_items_list').append(row);

        list = '<li class="nav-item menu_category sub_click" data-id="'+ data[i].id +'">'
        +'<p class="hidden menu-id">'+ data[i].id +'</p> '
        +'<a class="nav-link" data-toggle="tab" href="" role="tab"> '+ data[i].name +''
        +'<ul class=" sub_category_list hidden fadeInTop animated"'
        +'id="sub_category_list">'
        +'</ul>'
        +'</a>'
        +'</li>';
        $('.category_list').append(list);
      }
    }
  }
  });
//end Ajax
}
//end show list function

$(document).on('click', '#clear_all', function(event){
  $(".summary-items tbody").empty();
  $('#sub_total').text("0.00");
  $('#total_qty').text("0");
  $(".create").attr("disabled","disabled");
  customer_display_view(null,"reload");
});

function customer_display_view(data,status) {
  url = '../../../../origami/customer_view';
  $.ajax({
    type: "POST",
    url: url,
    data: {"data":data,"status":status},
    dataType: "json",
    success:function(result){
    }
  });
}

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

    switch (input_type) {
      case 'num':
      var input_value = $(this).attr("data-value");
      if (original_value == "0"){
        $('#modal-qty').val(input_value);
        $('#modal-qty').attr('data-value',input_value);
          // update_total_amount();
        }else{
          $('#modal-qty').val(original_qty + input_value);
          $('#modal-qty').attr('data-value',original_qty + input_value);
          // update_total_amount();
        }
        break;
        case 'add':

        case 'del' :

        case 'clr':
        $('#modal-qty').val(1);
        $('#modal-qty').attr('data-value',0);
        // update_total_amount();
        break;

      }
      event.handled = true;
  } else {
    return false;
  }
});

/* check webview loaded*/
var webview = '';
<%if @webview %>
var webview = <%= @webview %>;
showHideNavbar(webview);
<% end %>
});

function create_order(data,paymentMethod = "") {
  $("#oqs_loading_wrapper").show();
  var cashier_type = $("#link_type").val();
  localStorage.setItem("cashier_type", cashier_type);
  quick_service = window.location.href.indexOf("quick_service");
  localStorage.setItem("quick_service", quick_service);
  food_court = window.location.href.indexOf("food_court");
  localStorage.setItem("food_court", food_court);
  if (quick_service != -1 || food_court != -1) {
    type = cashier_type;
    var table_type = $("#table_type").text();
    var table_id = $("#table_id").val();
    var customer_id = $("#customer_id").val();
    var booking_id = $("#booking_id").text();
    var ajax_url = "addorders/create";
  } else {
    type = "cashier";
    var table_type = $("#table_type").text();
    var table_id = $("#table_id").text();
    var customer_id = $("#customer_id").text();
    var booking_id = $("#booking_id").text();
    var ajax_url = "../addorders/create";
  }
  var order_items = JSON.stringify(get_order_item_rows());
  if (booking_id.length > 0) {
    var params = {
      order_source: type,
      order_type: "dine_in",
      customer_id: customer_id,
      guest_info: "",
      booking_id: booking_id,
      table_id: table_id,
      order_items: order_items,
      create_type: "create_pay",
    };
  } else {
    var params = {
      order_source: type,
      order_type: "dine_in",
      customer_id: customer_id,
      guest_info: "",
      table_id: table_id,
      order_items: order_items,
      create_type: "create_pay",
    };
  }

  $.ajax({
    type: "POST",
    url: ajax_url,
    data: params,
    dataType: "json",
    success: function (result) {
      booking_id = result.booking_id;
      console.log(result);
      if (type == "quick_service") {
        window.location.href = "/origami/quick_service";
      }else if (type == "food_court" && paymentMethod == "") {
        window.location.href =
          "/foodcourt/app_orders?pending_id=" + booking_id;
      }else {
        if (table_type == "Table") {
          window.location.href = "/origami/table/" + table_id;
        } else {
          window.location.href = "/origami/room/" + table_id;
        }
      }

      if ($("#server_mode").val() != "cloud" && second_display_lookup == 2) {
        customer_display_view(null, "reload");
      }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#oqs_loading_wrapper").hide();
      $("#create_order").prop("disabled", false);
      $("#create_pay_order").prop("disabled", false);
      swal("Error", "Status: " + textStatus, "error");
    },
  });
}
</script>
