<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %> 
<div id="oqs_loading_wrapper" style="display:none;">
  <div id="oqs_loading"></div>
</div>

<div class="row m-t--20">
    <div class="col-lg-2 col-md-2 col-sm-2">
        <ul class="nav nav-tabs flex-column" role="tablist" >
            <% @menu.each do |menu|  %>
                <%   if menu.menu_category_id.nil?%>
                  <li class="nav-item menu_category sub_click" data-id="<%=menu.id%>">
                    <p class="hidden menu-id"><%= menu.id  %></p> 
                    <a class="nav-link" data-toggle="tab" href="" role="tab"> <%= menu.name%>
                       <ul class=" sub_category_list hidden fadeInTop animated" id="sub_category_list">
                      </ul>
                    </a>
                     
                  </li>
                  <% end%>
            <%end %>
            <!-- <li class="nav-item menu_category">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
              <ul class="dropdown-menu multi-level">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
                
              </ul>
            </li> -->
            <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 class="col-md-7 col-lg-7 col-sm-7 m-t-10">
      <div class="card-columns custom-card-columns menu_items_list" style="column-gap: 10px;">
         <!-- append data -->
      </div>
    </div>

    <div class="col-md-3 col-lg-3 col-sm-3 m-t-10">
        <button type="button" class="btn btn-block btn-default waves-effect" id='back'>
          <i class="material-icons">reply</i>
           Back
        </button>
          <br>
        <div class="card-header">
          <div>
             <strong id="order-title" class="font-14">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>

          </div>
        </div>
        <div class="card-block">
            <div class="card-text" style="max-height:550px; overflow:auto"">
               <table class="table table-striped summary-items">
                 <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">
               <table class="table" id="order-charges-table" border="0">
                 <tr>
                   <td class="charges-name"><strong>Sub Total:</strong></td>
                   <td class="item-attr"><strong id="sub_total">0.00</strong></td>
                 </tr>
               </table>
               <button type="button" class="btn btn-primary btn-block create" id="create_order" disabled="disabled">Create Order</button>
            </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-header">
          <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
          </div>
          <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" id="modal-qty" value="" min="1" max="100">
                 </td>
                 <td>
                   <button type="button" id="remove" class="btn btn-danger" data-dismiss="modal">Remove</button>
                 </td>
               </tr>
             </tbody>
             </table>
         </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>
                
                      
                        <!-- <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="change_qty" value="" min="1" max="100"> -->
                       
                        <div class="input-group">
                          <span class="input-group-btn">
                              <button type="button" class="btn btn-danger btn-number"  value="-" id="minus">
                               <i class="material-icons">remove</i>
                                
                              </button>
                          </span>
                          <input type="text" value="1" id="count" class="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="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="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="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">
                <div class="row set-item">
                  <div class="col-md-4">
                  <p 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="options-list">
                        </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>


