<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag '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 addorder-pages" style="padding:0px 3px 0px 3px;">
  <div id="oqs_loading_wrapper" style="display:none;">
    <div id="oqs_loading"></div>
  </div>
  <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="inclusive_tax" id="inclusive_tax" value="<%= @inclusive_tax%>">
  <input type="hidden" name="exclusive_tax" id="exclusive_tax" value="<%= @exclusive_tax%>">
  <input type="hidden" name="link_type" id="link_type" value="<%= @cashier_type %>">
  <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
  <div class="row m-t--5">
    <div class="col-lg-2 col-md-2 col-sm-2 hidden" 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" data-height="0">
      <ul class="nav nav-tabs flex-column category_list" role="tablist" id="ul-navbar">
        <li class="nav-item product" data-ref="<%= origami_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" id="menu_cache">
    <li class="list-menu">
      <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">
        <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 id="menu-slimscroll" data-height="0">
      <ul class="nav nav-tabs flex-column category_list category_cache_list" role="tablist" id="ul-navbar">
        <li class="nav-item product" data-ref="<%= origami_get_all_product_path %>">
         <a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>
       </li>
     </ul>
   </div>
 </div>


 <div class="col-md-7 col-lg-7 col-sm-7 m-t-10" >
  <div class="card">
    <div class="card-block" style="">
      <div class="card-text" id="custom-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">

            <% if type && modify_order%>
            <button type="button" class="btn btn-lg btn-default waves-effect col-md-4" id='back'>
             <!--  <i class="material-icons">reply</i> -->
             Back
           </button>

           <button type="button" class="btn btn-lg btn-primary waves-effect col-md-7" id='pending_order'>Pending Order
           </button>

           <%elsif !modify_order && type%>
           <button type="button" class="btn btn-lg btn-default waves-effect col-md-2" id='back' style="    padding: .5rem 0.15rem !important;">
             <!--  <i class="material-icons">reply</i> -->
             Back
           </button>

            <%# <% if @quick_service_only %>
              <!-- <button type="button" class="btn btn-lg btn-primary waves-effect col-md-9" id='pending_order' style="padding: .5rem 0.15rem !important;">Pending Order
              </button> -->
            <%# <% else %>
              <button type="button" class="btn btn-lg btn-primary waves-effect col-md-6" id='pending_order' style="padding: .5rem 0.15rem !important;">Pending Order
              </button>
              <a class="btn btn-lg bg-blue waves-effect select_table col-md-3" data-toggle="modal" data-target="#TableModal" style="    padding: .5rem 0.15rem !important;">Select</a>
              <input type="hidden" name="table_id" value="" id="table_id">
            <%# <% end %>
           <%else%>
           <button type="button" class="btn btn-lg btn-block btn-default waves-effect" id='back'>
            <i class="material-icons">reply</i>Back
          </button>
          <%end%>
          <br>
          <div class="card-header" style="padding: 0.12rem 0.25rem">
            <% if type %>
            <div class="row clearfix">
              <div class="col-md-6 col-lg-6 col-sm-12">
               <strong id="order-title" class="font-13">ORDER DETAILS </strong>
             </div>

             <% if modify_order %>
             <% if @table.nil? %>

             <div class="col-md-3 col-lg-3 col-sm-3">Table : </div>
             <p class="hidden" id="table_id"><%=@table_id%></p>
             <p class="hidden" id="table_type"></p>
             <p class="hidden" id="table_get_current"></p>
             <% else%>

             <div class="col-md-3 col-lg-3 col-sm-3">Table : <%=@table.name%></div>
             <p class="hidden" id="table_id"><%=@table_id%></p>
             <p class="hidden" id="table_type"><%=@table.type%></p>
             <p class="hidden" id="table_get_current"><%=@table.current_checkout_booking%></p>
             <% end%>

             <p class="hidden" id="booking_id"><%=@booking_id%></p>
             <p class="hidden" id="customer_id"><%=@customer ? @customer.customer_id : '---'%></p>
             <p class="hidden" id="sale_id"><%=@sale_id%></p>

             <div class="col-md-1 col-lg-1 col-sm-1">
              <button type="button" class="btn btn-xs btn-danger waves-effect float-left" id='clear_all'>   Clear
              </button>
            </div>
            <% else%>
            <p class="hidden" id="table_type"></p>
            <div class="col-md-2 col-lg-2 col-sm-2">

            </div>
            <div class="col-md-3 col-lg-3 col-sm-3">
              <button type="button" class="btn btn-xs btn-danger waves-effect float-left" id='clear_all'>   Clear
              </button>
            </div>
            <% end%>
          </div>
          <% else %>
          <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>| <span class="font-14">Table-<%=@table.name%></span>


             <p class="hidden" id="table_id"><%=@table_id%></p>
             <p class="hidden" id="table_type"><%=@table.type%></p>
             <p class="hidden" id="booking_id"><%=@booking_id%></p>
             <p class="hidden" id="customer_id"><%=@customer ? @customer.customer_id : ''%></p>
             <p class="hidden" id="table_get_current"><%=@table.current_checkout_booking%></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>
           <% end%>

         </div>
         <div class="card-block">
          <div class="card-text" id="order-detail-slimscroll" data-height="165">
           <table class="table table-striped summary-items" id="order-items-table" >
             <thead>
               <tr>
                 <th>#</th>
                 <th class="item-name">Items</th>
                 <th class="item-qty">QTY</th>
                 <th class="item-attr">Price</th>
               </tr>
             </thead>
             <tbody class="font-13" >

             </tbody>
           </table>
         </div>
         <div class="card-footer custom-card-footer" style="padding: 0.35rem 0.15rem !important;">

           <table class="table" id="order-charges-table" border="0">
               <%if @cashier_type=='quick_service' %>
                 <tr>
                   <td colspan="3" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Tax:</strong></td>
                   <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="total_tax">0.00</strong></td>
                 </tr>
                 <tr>
                    <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Total + tax:</strong></td>
               <% else %>
                 <tr>
                    <td colspan="2" style="padding:2px; text-align:" class="charges-name" width="25%"><strong>Total:</strong></td>
               <% end %>
               <td style="padding:2px;" width="15%"><strong id="total_qty">0</strong></td>

               <td style="padding:2px; text-align:" width="25%" class="item-attr"><strong id="sub_total">0.00</strong></td>
             </tr>
           </table>
           <% if type && modify_order%>
           <input type="hidden" name="customer_id" id="customer_id" value="<%= walkin.customer_id %>">

           <button type="button" class="btn btn-primary action-btn create col-md-11" id="create_pay_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Update Order & Pay</button>
           <%elsif !modify_order && type%>
           <input type="hidden" name="customer_id" id="customer_id" value="<%= walkin.customer_id %>">
           <% if current_user.role != "waiter"%>

            <% if @quick_service_only %>
              <button type="button" class="btn btn-primary action-btn create col-md-12" id="create_pay_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>
            <% else %>
              <button type="button" class="btn btn-primary action-btn create col-md-4" id="create_pay_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>
              <button type="button" class="btn btn-primary action-btn create col-md-7" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
            <% end %>
           <%end%>
           <% if @quick_service_only && current_user.role == "waiter"%>
            <button type="button" class="btn btn-primary action-btn create col-md-7" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
           <%end%>
           <%else%>
             <% if !@quick_service_only %>
              <button type="button" class="btn btn-primary action-btn create col-md-11" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
             <%end%>
           <%end%>


         </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">Total : <span id="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 add_to_order " data-dismiss="modal" id="add_to_order">Add to Order</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<!-- Large modal -->
<div class="modal sx_item_set_detailModal" 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">
    <div class="modal-content">
      <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" data-height="50">
        <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>
          <% if type && !modify_order%>
          <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' %>
                    <% if table.get_booking.nil? %>
                    <% if table.get_checkout_booking.nil? %>
                    <%  color="red"%>
                    <% else %>
                    <%  color="orange"%>
                    <% end %>

                    <% else %>
                    <% if table.get_checkout_booking.nil? %>
                    <%  color="blue"%>
                    <% else %>
                    <%  color="orange"%>
                    <% end %>
                    <% end %>
                    <% 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' %>
                    <% if table.get_booking.nil? %>
                    <% if table.get_checkout_booking.nil? %>
                    <%  color="red"%>
                    <% else %>
                    <%  color="orange"%>
                    <% end %>
                    <% else %>
                    <% if table.get_checkout_booking.nil? %>
                    <%  color="blue"%>
                    <% else %>
                    <%  color="orange"%>
                    <% end %>
                    <% end %>
                    <% 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>
          <% end %>
          <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();
          jQuery(function(){
            var menus = JSON.parse(localStorage.getItem("menus"));
            if (menus != null) {
              var id = menus[0]["categories"][0]["id"];
        // console.log(id);
      }else{
        var id = 1;
      }
      jQuery('.first_'+id).click();
    });

          $(document).ready(function () {
            var menus = JSON.parse(localStorage.getItem("menus"));
            if (menus != null) {
              menu_cache_append(menus);
            }else{
              $("#menu_data").removeClass("hidden");
            }

            function menu_cache_append(menus){
              $("#menu_cache").removeClass("hidden");
              $(".menu_cache_name").text(menus[0]["name"])
              for(var i in menus) {
                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]);
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            $(".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);
            });

            $('#pending_order').on('click', function () {
             window.location.href = '/origami/'+'<%= @cashier_type %>'+'/pending_order';
           });

            $(document).on('click', '.menu_click', function(event){
              var menu_id = $(this).attr("data-id");
              var name = $(this).attr("data-name");
              var menus = JSON.parse(localStorage.getItem("menus"));

              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 menu_click_cache_append(name,menus,menu_id) {
       var menu_list = $('.menu_items_list');
       menu_list.empty();

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

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

        //  row = ' <li class="nav-item product" data-ref="<%= origami_get_all_product_path %>">'
        //     +'<a class="nav-link" data-toggle="tab" href="" role="tab">Products</a>'
        //    +'</li>';
        // $(".category_cache_list").append(row);

        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");
        $('#total_tax').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 %>
    });
  </script>
