sx-fc/app/views/origami/addorders/detail.html.erb

<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %> 
<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2">
        <ul class="nav nav-tabs flex-column" role="tablist" >
          <% @menu.each do |menu| %>
          <li class="nav-item menu_category" data-ref="<%= api_restaurant_menu_category_path menu.id%>">
            <p class="hidden menu-id"><%= menu.id  %></p> 
            <a class="nav-link" data-toggle="tab" href="" role="tab"> <%= menu.name%></a>

          </li>
          <% end %>
        </ul>
    </div>
    <div class="col-md-7 col-lg-7 col-sm-7">
      <div class="card-columns menu_items_list" style="column-gap: 10px;">
         <!-- append data -->
      </div>
    </div>

    <div class="col-md-3 col-lg-3 col-sm-3">
        <div class="card-header">
          <div>
             <strong id="order-title">ORDER DETAILS </strong> |  Table <%=@table_id%>
             <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>
          </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>
                 
                 </tbody>
               </table>
            </div>
            <div class="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-success 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" role="document">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="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">
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
            <button type="button" class="btn btn-success" data-dismiss="modal" id="save">Update</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Menu Item modal -->

    <div class="item-modal modal sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #54A5AF;">
            <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
               <button type="button" class="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;"> <%= image_tag "logo.png" ,width: '', height: '', :id => 'logo' %></p>
                      <br><br>
                      <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="change_qty" value="" min="1" max="100">
                      </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">      
                      <strong style="font-size: 18px;">Attributes</strong>           
                     <div class="attributes-list">

                     </div>
                     <strong style="font-size: 18px;">Options</strong>
                     <div class="options-list">
                     </div>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="mr-auto">
                  <h4 class=" pull-left">Total : <span id="total_price"></span></h4>
                </div>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
                <button type="button" class="btn btn-success add_to_order" data-dismiss="modal" id="add_to_order">Add to Order</button>
            </div>
        </div>
      </div>
    </div>


     <!-- Large modal -->
    <div class=" modal sx_item_set_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #54A5AF;">
            <h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
               <button type="button" class="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-5">
                      <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="change_qty" value="" min="1" max="100">
                      </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>
                        <p></p>
                        <div class="opt-list">
                          <h4>Options</h4>
                        </div>
                  </div>
                  <div class="col-md-7">       
                     <div class="instance-list"></div>
                  </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="mr-auto">
                  <h4 class=" pull-left">Total : <span id="total_price"></span></h4>
                </div>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
                <button type="button" class="btn btn-success add_to_order" data-dismiss="modal" id="add_to_order">Add to Order</button>
            </div>
        </div>
      </div>
    </div>