From b8d66044cc0d809977a0674833f45e9c7d161bab Mon Sep 17 00:00:00 2001
From: Zin Moe <zin.moe@code2lab.com>
Date: Wed, 18 Mar 2020 17:50:48 +0630
Subject: [PATCH] out of stock in cashier page

---
 app/assets/javascripts/addorder.js            | 507 +++++++++++-------
 app/views/foodcourt/addorders/detail.html.erb |   3 +-
 app/views/origami/addorders/detail.html.erb   |   2 +-
 3 files changed, 314 insertions(+), 198 deletions(-)

diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index e3f9877e..2d53ed99 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -65,14 +65,14 @@ $(function() {
                   +"<div class='add_icon p-t-65 p-b-65'  data-item-code='"
                         + product[field].item_code +"' data-name='"
                         + product[field].name +"' data-qty = '"+ qty +"' data-price = '"
-                        + product[field].unit_price +"' data-instance-code = '"+ product[field].item_code +"' data-instance = '"
+                        + product[field].unit_price +"' data-instance-code = '"+ product[field].item_code +"' data-instances = '"
                         + product[field].name +"' data-promotion-price = '"+ 1 +"' data-attributes = '"
                         + JSON.stringify(item_attributes) +"' data-options = '"
-                          + JSON.stringify(options) +"' data-opt = '"
-                          + JSON.stringify(options) +"' data-image='"+image_path+"'>"
+                          + JSON.stringify(options) +"' data-id = '"+ JSON.stringify(item_attributes) +"' data-opt = '"
+                          + JSON.stringify(options) +"' data-image='"+image_path+"' data-toggle='modal' data-target='.sx_item_detailModal'>"
                   +'</div>'
                     +'<div class="card-footer custom-card-footer custom-flex-footer">'
-                      +'<span style="font-weight:900;flex-grow:1;">'+ product[field].unit_price +'</span>'
+                      +'<span style="font-weight:900;flex-grow:1;"></span>'
                       +"<div class='offset-4 col-2 menu_item_box' data-item-code='"
                           + product[field].item_code +"' data-instance = '"
                           +JSON.stringify(item_attributes)+"' data-id = '"
@@ -98,9 +98,9 @@ $(function() {
                         + product[field].name +"' data-qty = '"+ qty +"' data-price = '"
                         + product[field].unit_price +"' data-instance-code = '"+ product[field].item_code +"' data-instance = '"
                         + product[field].name +"' data-promotion-price = '"+ 1 +"' data-attributes = '"
-                        + JSON.stringify(item_attributes) +"' data-options = '"
+                        + JSON.stringify(item_attributes) +"' data-id = '"+ JSON.stringify(item_attributes) +"' data-options = '"
                           + JSON.stringify(options) +"' data-opt = '"
-                          + JSON.stringify(options) +"' data-image=''>"
+                          + JSON.stringify(options) +"' data-image='' data-toggle='modal' data-target='.sx_item_detailModal'>"
                     +'<div class="product_box">'+ product[field].name +'</div>'
                     +'</div>'
 
@@ -119,7 +119,7 @@ $(function() {
                   +'</div>'
 
                     +'<div class="card-footer custom-card-no-img-footer custom-flex-footer">'
-                      +'<span style="font-weight:900;flex-grow:1;">'+ product[field].unit_price +'</span>'
+                      +'<span style="font-weight:900;flex-grow:1;"></span>'
                       +"<div class='offset-4 col-2 menu_item_box menu_item_no_img_box' data-item-code='"
                           + product[field].item_code +"' data-instance = '"
                           +JSON.stringify(item_attributes)+"' data-id = '"
@@ -540,6 +540,68 @@ $(function() {
 
   //click item row for add order
   $(document).on('click', '.menu_item_box', function(event){
+    attributes         = $(this).data('id');
+    selected_item      = $(this).data('item');
+    instances          = $(this).data('instance');
+    item_options       = $(this).data('option');
+    data =  $(this).parent().siblings('.add_icon');
+
+    show_attribute_selection_modal(attributes, selected_item, instances, item_options, data)
+    
+  });
+
+  // click plus icon for add
+  $(document).on('click', '.add_icon', function(event){
+
+    if($(this).find('.product_box')) {
+      $('.sx_item_detailModal').modal('hide');
+      
+      var item_data = $(this);
+      code = $(this).data('instance-code');
+
+      if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
+        item = get_item(item_data,"add_icon");
+        customer_display_view(item,"add");
+      }
+      show_item_detail(item_data,"add_icon");
+      calculate_sub_total();
+      autoScrollToItem(code)
+
+      return
+    }
+
+    if ($(this).data('instances').length == 1) {
+
+      $('.sx_item_detailModal').modal('hide');
+
+      if ($(this).data('instances')[0].out_of_stock == false ) {
+        var item_data = $(this);
+        code = $(this).data('instance-code');
+
+        if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
+          item = get_item(item_data,"add_icon");
+          customer_display_view(item,"add");
+        }
+        show_item_detail(item_data,"add_icon");
+        calculate_sub_total();
+        autoScrollToItem(code)
+
+      }
+      return
+
+    } else {
+
+      attributes         = $(this).data('id');
+      selected_item      = $(this).data('attributes');
+      instances          = $(this).data('instances');
+      item_options       = $(this).data('options');
+      data               = $(this)
+
+      show_attribute_selection_modal(attributes, selected_item, instances, item_options, data)
+    }
+  }); //End Add Icon Click
+
+  function show_attribute_selection_modal(attributes, selected_item, instances, item_options, data) {
     $('.attributes-list').empty();
     $('.options-list').empty();
     $('#modal_box_img').empty();
@@ -553,19 +615,16 @@ $(function() {
     $('.add_to_order').removeAttr('data-name');
     $('.add_to_order').removeAttr('data-attributes');
     $('.add_to_order').removeAttr('data-options');
+    $('.add_to_order').removeAttr('disabled');
+    $('#minus').removeAttr('disabled');
+    $('#plus').removeAttr('disabled');
+    $('#count').removeAttr('readonly');
+    $('#wanring_text').text('');
+    $('#total_price').text(0.0);
 
-     $('#count').val(1);
+    $('#count').val(1);
     change_qty_plus_minus("count","plus","minus");
-
-    // data =  $(this).parent().children().children('.add_icon');
-    data =  $(this).parent().siblings('.add_icon');
-
-    $('#total_price').text(data.attr('data-price'));
-    attributes         = $(this).data('id');
-    selected_item      = $(this).data('item');
-    instances          = $(this).data('instance');
-    item_options       = $(this).data('option');
-
+    
     if (data.attr('data-image')) {
       if (modify_order) {
         image = "<img id='' width='200px' src='../../"+data.attr('data-image')+"'>";
@@ -585,37 +644,30 @@ $(function() {
     $('#modal_box_img').append(image);
 
     instance_attributes = []
+    oos_values = ''
+    total_price = 0
+
     for(var field in instances) {
+      if (instances[field].out_of_stock && instances[field].is_default) {
+        oos_values = instances[field].values;
+        $('#add_to_order').attr('disabled', true);
+        $('#minus').attr('disabled', true);
+        $('#plus').attr('disabled', true);
+        $('#count').attr('readonly', true)
+      }
+
       value = instances[field].values;
       $(value).each(function(i){
          options = value[i];
          instance_attributes.push(options);
-        // $.ajax({
-        //   type: "GET",
-        //   url: '../../api/restaurant/menu_item_attributes/'+value[i],
-        //   data: {id:value[i]},
-        //   success:function(result){
-
-        //     options = result["name"];
-        //     instance_attributes.push(options);
-        //   }
-        // });
       });
     }
 
-    // selected_arr = []
-    // $(selected_item).each(function(i){
-    //   $.ajax({
-    //     type: "GET",
-    //     url: '../../api/restaurant/menu_item_attributes/'+selected_item[i],
-    //     data: {id:selected_item[i]},
-    //     success:function(result){
-    //       name = result["name"];
-    //       selected_arr.push(name);
-    //     }
-    //   });
-    // });
+    selected_item = selected_item.sort()
 
+    if(oos_values) {
+      oos_values = oos_values.sort()
+    }
 
     for(var field in attributes) {
       value = attributes[field]["values"];
@@ -625,18 +677,25 @@ $(function() {
       $(value).each(function(i){
         disabled = "false";
         status ="";
+
         if(parseInt(jQuery.inArray(value[i], selected_item)) !== -1){
-          status = "selected-attribute";
+          if(JSON.stringify(oos_values) != JSON.stringify(selected_item)) {
+            status = "selected-attribute";
+            total_price = data.attr('data-price')
+          }
         }
+
         if(parseInt(jQuery.inArray(value[i], instance_attributes)) == -1){
          // disabled = "disabled";
         }
+
         row +="<button id='selected-attribute' data-instances='"+JSON.stringify(instances)+"' data-type='"
         +type+"' data-value='"+value[i]+"' class='btn btn- waves-effect attribute_btn "
         + status +" "+ type +" '"+ disabled +" >"
         +value[i]
         +"</button>";
       });
+
       $(".attributes-list").append(row);
     }
 
@@ -658,9 +717,9 @@ $(function() {
     $('#instance_name').text(data.attr('data-instance'));
     $('#instance_code').text(data.attr('data-instance-code'));
     $('#promotion_price').text(data.attr('data-promotion-price'));
-    $('#total_price').text(data.attr('data-price'));
+    $('#total_price').text(total_price);
     $('#unit_price').text(data.attr('data-price'));
-  });
+  }
 
   // click select option icon for add
   $(document).on('click', '.attribute_btn', function(event){
@@ -687,20 +746,75 @@ $(function() {
 
     qty = $('.change_qty').val();
 
+    if($('#total_price').text() > 0) {
+      $('#add_to_order').removeAttr('disabled')
+      $('#total_price').text(0.0)
+    }
+
+    var equal = false;
     for(var field in instances) {
       item_attr = instances[field].values;
-
+      item_attr = item_attr.sort()
+      selected_attr = selected_attr.sort()
       if(JSON.stringify(item_attr) == JSON.stringify(selected_attr)){
-        unit_price = instances[field].price ;
-        total_price = qty * unit_price ;
-        $('#instance_name').text(instances[field].name);
-        $('#instance_code').text(instances[field].code);
-        $('#promotion_price').text(instances[field].promotion_price);
-        $('#total_price').text(total_price);
-        $('#unit_price').text(unit_price);
+        if (instances[field].out_of_stock) {
+          var text = ''
+          var length = 0
+          for (var i in selected_attr) {
+            length += 1;
+            if (length == selected_attr.length) {
+              text += selected_attr[i]
+            }
+            else {
+              text += selected_attr[i]+'-' 
+            }
+          }
+          $('#wanring_text').text('')
+          $('#wanring_text').append('<strong>' + text + '</strong> is sold out.')
+          $('#add_to_order').attr('disabled', true)
+          $('#minus').attr('disabled', true);
+          $('#plus').attr('disabled', true);
+          $('#count').attr('readonly', true)
+          return 
+        } else {
+          equal = true
+          unit_price = instances[field].price ;
+          total_price = qty * unit_price ;
+          $('#instance_name').text(instances[field].name);
+          $('#instance_code').text(instances[field].code);
+          $('#promotion_price').text(instances[field].promotion_price);
+          $('#total_price').text(total_price);
+          $('#unit_price').text(unit_price);
+        }
       }
     }
 
+    if (equal) {
+      $('#wanring_text').text('');
+      $('#add_to_order').removeAttr('disabled');
+      $('#minus').removeAttr('disabled');
+      $('#plus').removeAttr('disabled');
+      $('#count').removeAttr('readonly')
+    } else {
+      var text = ''
+      var length = 0
+      for (var i in selected_attr) {
+        length += 1;
+        if (length == selected_attr.length) {
+          text += selected_attr[i]
+        }
+        else {
+          text += selected_attr[i]+'-' 
+        }
+      }
+      $('#wanring_text').text('')
+      $('#wanring_text').append('<strong>' + text + '</strong> is not available.')
+      $('#add_to_order').attr('disabled', true)
+      $('#minus').attr('disabled', true);
+      $('#plus').attr('disabled', true);
+      $('#count').attr('readonly', true)
+    }
+
   }); //End selecct attribute buttom
 
   // click select option icon for add
@@ -781,14 +895,13 @@ $(function() {
     total_price   = $('#total_price').text();
     qty           = parseInt($('#count').val());
 
-      var item_row  = $('.selected-attribute');
+    var item_row  = $('.selected-attribute');
 
     attribute_arr = get_selected_attributes('selected-attribute');
     option_arr    = get_selected_attributes('selected-option');
     if (item_row.length>0) {
       var instances = jQuery.parseJSON(item_row.attr('data-instances'));
 
-
       for(var field in instances) {
 
         attrbu = JSON.stringify(attribute_arr);
@@ -803,7 +916,9 @@ $(function() {
             }
 
         }
-        if (JSON.stringify(attribute_arr) === JSON.stringify(instances[field].values)) {
+        attribute_arr = attribute_arr.sort()
+        instance_arr = instances[field].values.sort()
+        if (JSON.stringify(attribute_arr) === JSON.stringify(instance_arr)) {
           console.log('instances');
           console.log(attrbu);
           $('.add_to_order').attr('data-instance-code',instances[field].code);
@@ -832,30 +947,15 @@ $(function() {
     }
     show_item_detail(item_data,"add_to_order");
     calculate_sub_total();
-    code = $('#item_code').text()
+    code = $('#instance_code').text()
     autoScrollToItem(code);
 
   }); //End add order  Click
 
-  // click plus icon for add
-  $(document).on('click', '.add_icon', function(event){
-    var item_data = $(this);
-    code = $(this).data('item-code');
-
-    if ($('#server_mode').val() != "cloud" && second_display_lookup == 2) {
-      item = get_item(item_data,"add_icon");
-      customer_display_view(item,"add");
-    }
-
-    show_item_detail(item_data,"add_icon");
-    calculate_sub_total();
-    autoScrollToItem(code)
-  }); //End Add Icon Click
-
   // scroll to element
   function autoScrollToItem(code) {
     console.log(code)
-    element = $('.summary-items').find(`[data-code='${code}']`);
+    element = $('.summary-items').find(`[data-instance-code='${code}']`);
     item_qty = element.find('#item_qty').text()
     parent = element.parents('.card-text')
 
@@ -958,7 +1058,7 @@ $(function() {
       +'<td class="item-cell-name" id="item_name" >' + data.attr('data-name')+ ' ' + instance +''+option_name+'</td>'
       +'<td class="item-cell-qty" id="item_qty">' + qty + '</td>'
       +'<td class="item-cell-price" id="item_price">'
-      + parseFloat(price).toFixed(2)
+      + parseFloat(price * qty).toFixed(2)
       +'</td>'
       +'</tr>';
       $(".summary-items tbody").append(row);
@@ -1607,148 +1707,163 @@ $(function() {
                   });
                 }
 
+                pointer_event = 'cursor'
+                opacity = ''
+                status = ''
+                if (instances.length == 1) {
+                  if (instances[0].out_of_stock == true) {
+                    pointer_event = 'none'
+                    opacity = '0.5'
+                    status = 'out of stock'
+                  }
+                } else {
+                  count = 0;
+                  $(instances).each(function(i) {
+                    if (instances[i].out_of_stock == true) {
+                      count += 1
+                      status = 'out of stock'
 
+                      if (instances.length == count) { // all attributes out of stock
+                        pointer_event = 'none'
+                        opacity = '0.5'
+                      }
+
+                    }
+                  })
+                }
+
+                if (status) {
+                  price_tag = '<span class="text-danger" style="font-weight:900;flex-grow:1;">'+status+'</span>'
+                } else {
+                  price_tag ='<span style="font-weight:900;flex-grow:1;">'+price+'</span>'
+                }
+                
                 if (menu_items[field].image) {
                   if (modify_order) {
                     image_path = "../../"+menu_items[field].image;
                   }else{
                     image_path = menu_items[field].image;
                   }
-                  if (out_of_stock === true) {
-                    // oos_item = out_of_stock_item
-                    oos_item = '<div class="card custom-card testimonial-card fadeInRight imageOBJ" id="'+ code +'" style="pointer-events: none; height: 100%;">'
-                    oos_header = '<div class="head-'+code+'" style="position: absolute;z-index: 5;bottom: 0;left: 0;right: 0;text-align: center;background: #fb483a;margin: auto;color: #fff;padding: 8px;font-weight: bolder;">OUT OF STOCK</div>'
-                    opacity = 0.5
-                  }else{
-                    oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height: 100%;">'
-                    oos_header = ''
-                    opacity = ''
-                  }
+                  oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height: 100%; pointer-envents: '+pointer_event+';">'
                   name = menu_items[field].name
                   short_name = truncateString(name, 30)
                   row = '<div class="col-md-6 col-sm-6 col-lg-3 m-t-2">'
-                            + oos_item + oos_header
-                                      +'<div class="custom-card-head card-head row" style="margin:0px; height: 40px; font-size: 0.9em; opacity: '+opacity+'" >'
-                                        +'<div class="col-md-10 " style="padding:0px !important;">'+ short_name +'</div>'
+                            + oos_item
+                            +'<div class="custom-card-head card-head row" style="margin:0px; height: 40px; font-size: 0.9em; opacity: '+opacity+'" >'
+                              +'<div class="col-md-10 " style="padding:0px !important;">'+ short_name +'</div>'
 
+                             +'</div>'
+                            +"<div  class='"+add_icon+"' "
+                                          +" data-item-code='"+ menu_items[field].code +"' "
+                                          +" data-name='"+ menu_items[field].name +"' "
+                                          +" data-qty = '"+ qty +"' "
+                                          +" data-price = '" + price +"' "
+                                          +" data-instance-code = '"+ code +"' "
+                                          +" data-instance = '" + name +"' "
+                                          +" data-promotion-price = '"+ promotion_price +"' "
+                                          +" data-id= '" + JSON.stringify(menu_items[field].attributes) +"'"
+                                          +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
+                                          +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-opt = '" + JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-image='"+image_path+"' "
+                                          +" data-toggle='modal' "
+                                          +" data-target='."+data_target+"' "
+                                          +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+""
+                                          +" 'data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
+                                + '<img src = "../../'+image_path+'" class="img-fluid" style="opacity: '+opacity+';"/>'
+                              +'</div>'
+                              +'<div class="card-footer custom-card-footer custom-flex-footer" style="height: 40px;">'
+                                + price_tag
+                                + "<div class='offset-4 col-2 "+menu_item_box
+                                + "' data-item-code='" + menu_items[field].code
+                                + "' data-instance='" + JSON.stringify(menu_items[field].instances)
+                                + "' data-id='" + JSON.stringify(menu_items[field].attributes)
+                                + "' data-item='" + JSON.stringify(item_attributes)
+                                + "' data-option='" + JSON.stringify(menu_items[field].options)
+                                + "' data-opt='" + JSON.stringify(menu_items[field].options)
+                                + "' data-item-sets='" + JSON.stringify(menu_items[field].item_sets)
+                                + "' data-toggle='modal'"
+                                + "  data-target='." + data_target +"'"
+                                + "  style='padding:0px 5px 0px 5px; opacity: "+opacity+"; pointer-events: "+pointer_event+";'>"
+                                    + "<i class='m-l--5 fa " + fa_plus + "'>"
+                                    + add
+                                    + "</i>"
+                                +'</div>'
+
+                            +'</div>'
+                        +'</div>'; ;
+                      }else{
+                        oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height:100%; pointer-events: '+pointer_event+';">'
+                        
+                        name = menu_items[field].name
+                        short_name = truncateString(name, 50)
+                        row = '<div class="col-md-6 col-sm-6 col-lg-3 m-t-2">'
+                                + oos_item
+                                    +'<div class="custom-card-no-img-head card-head h-100 '+add_icon+' " id="oos'+ code +'" style="margin:0px;display:flex; opacity: '+opacity+';"'
+                                          +" data-item-code='"+ menu_items[field].code +"' "
+                                          +" data-name='" + menu_items[field].name +"' "
+                                          +" data-qty = '"+ qty +"' "
+                                          +" data-price = '" + price +"' "
+                                          +" data-instance-code = '"+ code +"' "
+                                          +" data-instance = '" + name +"' "
+                                          +" data-promotion-price = '"+ promotion_price +"' "
+                                          +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
+                                          + "data-id= '" + JSON.stringify(menu_items[field].attributes)+"'"
+                                          +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-opt = '"+ JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-image='' data-toggle='modal' "
+                                          +" data-target='."+data_target+"' "
+                                          +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"'"
+                                          +" data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
+
+                                          +'<div class="product_box" style="width:100%;"><span>'+ short_name +'<span></div>'
+                                    +'</div>'
+                                    +"<div  class='"+add_icon+"' "
+                                          +" data-item-code='"+ menu_items[field].code +"' "
+                                          +" data-name='" + menu_items[field].name +"' "
+                                          +" data-qty = '"+ qty +"' "
+                                          +" data-price = '" + price +"' "
+                                          +" data-instance-code = '"+ code +"' "
+                                          +" data-instance = '" + name +"' "
+                                          +" data-promotion-price = '"+ promotion_price +"' "
+                                          +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
+                                          +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-opt = '"+ JSON.stringify(menu_items[field].options) +"' "
+                                          +" data-image='' data-toggle='"+data_modal+"' "
+                                          +" data-target='."+data_target+"' "
+                                          +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"'"
+                                          +" data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
                                        +'</div>'
-                                      +"<div  class='"+add_icon+"' "
-                                                    +" data-item-code='"+ menu_items[field].code +"' "
-                                                    +" data-name='"+ menu_items[field].name +"' "
-                                                    +" data-qty = '"+ qty +"' "
-                                                    +" data-price = '" + price +"' "
-                                                    +" data-instance-code = '"+ code +"' "
-                                                    +" data-instance = '" + name +"' "
-                                                    +" data-promotion-price = '"+ promotion_price +"' "
-                                                    +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
-                                                    +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-opt = '" + JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-image='"+image_path+"' "
-                                                    +" data-toggle='"+data_modal+"' "
-                                                    +" data-target='."+data_target+"' "
-                                                    +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+""
-                                                    +" 'data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
-                                          + '<img src = "../../'+image_path+'" class="img-fluid" style="opacity: '+opacity+'"/>'
+                                        +'<div class="card-footer custom-card-no-img-footer custom-flex-footer" style="height: 50px;">'
+                                            + price_tag
+                                            +" <div class='offset-4 col-2 menu_item_no_img_box "+menu_item_box+" ' "
+                                              +" data-item-code='"+ menu_items[field].code +"' "
+                                              +" data-instance = '" +JSON.stringify(menu_items[field].instances)+"' "
+                                              +" data-id = '"+JSON.stringify(menu_items[field].attributes)+"' "
+                                              +" data-item = '" +JSON.stringify(item_attributes)+"' "
+                                              +" data-option = '"+JSON.stringify(menu_items[field].options)+"'"
+                                              +" data-opt = '"+JSON.stringify(menu_items[field].options)+"' "
+                                              +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"' "
+                                              +" data-toggle='modal' "
+                                              +" data-target='."+data_target+"' "
+                                              +" style='padding:0px 5px 0px 5px; opacity: "+opacity+"; pointer-envents: "+pointer_event+";'>"
+                                                        +"<i class='m-l--5 fa "+fa_plus+"' >"
+                                                        +add+ '</i>'
+                                        +'</div>'
                                         +'</div>'
-                                        +'<div class="card-footer custom-card-footer custom-flex-footer">'
-                                          +'<span style="font-weight:900;flex-grow:1;">'+ price +'</span>'
-                                          + "<div class='offset-4 col-2 "+menu_item_box
-                                          + "' data-item-code='" + menu_items[field].code
-                                          + "' data-instance='" + JSON.stringify(menu_items[field].instances)
-                                          + "' data-id='" + JSON.stringify(menu_items[field].attributes)
-                                          + "' data-item='" + JSON.stringify(item_attributes)
-                                          + "' data-option='" + JSON.stringify(menu_items[field].options)
-                                          + "' data-opt='" + JSON.stringify(menu_items[field].options)
-                                          + "' data-item-sets='" + JSON.stringify(menu_items[field].item_sets)
-                                          + "' data-toggle='modal'"
-                                          + "  data-target='." + data_target +"'"
-                                          + "  style='padding:0px 5px 0px 5px' >"
-                                              + "<i class='m-l--5 fa " + fa_plus + "'>"
-                                              + add
-                                              + "</i>"
-                                          +'</div>'
-
-                                      +'</div>'
-                                  +'</div>'; ;
-                            }else{
-                              if (out_of_stock === true) {
-                                // oos_item = out_of_stock_item
-                                oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height:100%; pointer-events: none;">'
-                                oos_header = '<div class="head'+code+'" style="position: absolute;z-index: 5;bottom: 0;left: 0;right: 0;text-align: center;background: #fb483a;margin: auto;color: #fff;padding: 8px;font-weight: bolder;">OUT OF STOCK</div>'
-                                opacity = 0.5
-                              }else{
-                                oos_item = '<div class="card custom-card testimonial-card fadeInRight" id="'+ code +'" style="height:100%;">'
-                                oos_header = ''
-                                opacity = ''
-                              }
-                                  name = menu_items[field].name
-                                  short_name = truncateString(name, 60)
-                                  row = '<div class="col-md-6 col-sm-6 col-lg-3 m-t-2">'
-                                          + oos_item + oos_header
-                                              +'<div class="custom-card-no-img-head card-head h-100 '+add_icon+' " id="oos'+ code +'" style="margin:0px;display:flex; opacity: '+opacity+';"'
-                                                    +" data-item-code='"+ menu_items[field].code +"' "
-                                                    +" data-name='" + menu_items[field].name +"' "
-                                                    +" data-qty = '"+ qty +"' "
-                                                    +" data-price = '" + price +"' "
-                                                    +" data-instance-code = '"+ code +"' "
-                                                    +" data-instance = '" + name +"' "
-                                                    +" data-promotion-price = '"+ promotion_price +"' "
-                                                    +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
-                                                    +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-opt = '"+ JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-image='' data-toggle='"+data_modal+"' "
-                                                    +" data-target='."+data_target+"' "
-                                                    +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"'"
-                                                    +" data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
-
-                                                    +'<div class="product_box" style="width:100%;"><span>'+ short_name +'<span></div>'
-                                              +'</div>'
-                                              +"<div  class='"+add_icon+"' "
-                                                    +" data-item-code='"+ menu_items[field].code +"' "
-                                                    +" data-name='" + menu_items[field].name +"' "
-                                                    +" data-qty = '"+ qty +"' "
-                                                    +" data-price = '" + price +"' "
-                                                    +" data-instance-code = '"+ code +"' "
-                                                    +" data-instance = '" + name +"' "
-                                                    +" data-promotion-price = '"+ promotion_price +"' "
-                                                    +" data-attributes = '" + JSON.stringify(item_attributes) +"' "
-                                                    +" data-options = '"+ JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-opt = '"+ JSON.stringify(menu_items[field].options) +"' "
-                                                    +" data-image='' data-toggle='"+data_modal+"' "
-                                                    +" data-target='."+data_target+"' "
-                                                    +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"'"
-                                                    +" data-instances = '"+JSON.stringify(menu_items[field].instances)+"'>"
-                                                 +'</div>'
-                                                  +'<div class="card-footer custom-card-no-img-footer custom-flex-footer">'
-                                                      +'<span style="font-weight:900;flex-grow:1;">'+ price + '</span>'
-                                                      +" <div class='offset-4 col-2 menu_item_no_img_box "+menu_item_box+" ' "
-                                                        +" data-item-code='"+ menu_items[field].code +"' "
-                                                        +" data-instance = '" +JSON.stringify(menu_items[field].instances)+"' "
-                                                        +" data-id = '"+JSON.stringify(menu_items[field].attributes)+"' "
-                                                        +" data-item = '" +JSON.stringify(item_attributes)+"' "
-                                                        +" data-option = '"+JSON.stringify(menu_items[field].options)+"'"
-                                                        +" data-opt = '"+JSON.stringify(menu_items[field].options)+"' "
-                                                        +" data-item-sets = '"+JSON.stringify(menu_items[field].item_sets)+"' "
-                                                        +" data-toggle='modal' "
-                                                        +" data-target='."+data_target+"' "
-                                                        +" style='padding:0px 5px 0px 5px'>"
-                                                                  +"<i class='m-l--5 fa "+fa_plus+" '>"
-                                                                  +add+ '</i>'
-                                                  +'</div>'
-                                                  +'</div>'
 
 
-                                            +'</div>'
-                                        +'</div>';
+                                  +'</div>'
+                              +'</div>';
 
-                    }
+                }
 
-                $('.menu_items_list').append(row);
-              }
-              //end instances in menu-items alest 1 instance
-            }
-            //end is_sub_item false
+            $('.menu_items_list').append(row);
           }
+          //end instances in menu-items alest 1 instance
+        }
+        //end is_sub_item false
+      }
   }
   $("#add_to_existing_order").on('click', function(e){
     $(this).attr('disabled', 'disabled');
diff --git a/app/views/foodcourt/addorders/detail.html.erb b/app/views/foodcourt/addorders/detail.html.erb
index 985a5e43..6a42c2bf 100644
--- a/app/views/foodcourt/addorders/detail.html.erb
+++ b/app/views/foodcourt/addorders/detail.html.erb
@@ -336,7 +336,8 @@
     </div>
     <div class="modal-footer">
       <div class="mr-auto">
-        <h4 class=" pull-left">Total : <span id="total_price"></span></h4>
+        <h4 class=" pull-left d-inline">Total : <span id="total_price"></span></h4>
+        <div id="wanring_text" class="d-inline text-danger" style="margin-left: 50px"></div>
       </div>
       <div class="row">
         <div class="col-md-4">
diff --git a/app/views/origami/addorders/detail.html.erb b/app/views/origami/addorders/detail.html.erb
index 7ac3fb59..d5d3e7e5 100644
--- a/app/views/origami/addorders/detail.html.erb
+++ b/app/views/origami/addorders/detail.html.erb
@@ -441,7 +441,7 @@
         <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" id="set-menu-item-slimscroll" data-height="50">
+      <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>