<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'addorder', 'data-turbolinks-track': 'reload' %>
  <div class="container-fluid h-100" style="padding:0px 3px 0px 3px;">
    <div id="oqs_loading_wrapper" style="display:none;">
      <div id="oqs_loading"></div>
    </div>
    <div class="row m-t--25 h-100">
      <div class="col-lg-2 col-md-2 col-sm-2 hidden d-flex flex-column h-100" id="menu_data">
        <li class="list-menu">
          <a href="javascript:void(0);" class="menu-toggle dropdown-toggle toggled my-toggle " style="">

            <span class="main_menu" id="main_menu menu_name" >
              <%if @menu.present? %>
              <%=@menus[0].name%>
              <% end%>
            </span>
          </a>
          <ul class="ml-menu menu_list aria-hidden " style="border-top: 1px solid #fff">
            <% @menus.each do |menu| %>
            <li class="nav-item menu_click" data-name="<%=menu.name%>" data-id="<%=menu.id%>" style="">
             <a class="nav-link" data-toggle="tab" href="" role="tab" style="text-transform: lowercase;"><%=menu.name%></a>
           </li>
           <%end%>
         </ul>
        </li>
        <div id="menu1-slimscroll" class="flex-grow-1" 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 !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%>
                <% end%>
              <% end %>
            <%end %>
          </ul>
        </div>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 h-100  d-flex flex-column hidden" id="menu_cache">
        <div class="card h-100" style="margin-bottom: 10px;">
          <div class="card-header">
            <li class="list-menu" style="background-color: #fff;">
              <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>
          <div class="card-block d-flex flex-column h-100">
            <div id="foodcourt-slimscroll" class="h-100">
              <ul class="nav nav-tabs flex-column category_list category_cache_list" role="tablist" id="ul-navbar">
                
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-7 col-lg-7 col-sm-7 h-100 d-flex flex-column">
        <div class="card h-100" style="margin-bottom: 10px;">
          <div class="card-block flex-column d-flex h-100" style="">
            <div class="card-text h-100" id="foodcourt-menu-slimscroll">
              <div class="row menu_items_list" style="margin:0px 1px 0px 1px ;">
             <!-- append data -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 h-100 d-flex flex-column item-wrapper" >
        <div class="card h-100" style="margin-bottom: 10px;">
          <div class="card-header">
            <button type="button" class="btn btn-lg btn-block btn-default waves-effect m-t-5" id='back' style="width: 75%;">
              <i class="material-icons">reply</i>Back
            </button>
            <button type="button" class="btn btn-xs btn-danger waves-effect" id='clear_all' style="width: 23%; padding: 10px; margin-top: 5px;">  Clear</button>
          </div>

          <div class="card-block d-flex flex-column h-100">
            <div class="card-text h-100" id="foodcourt-order-slimscroll">
             <table class="table table-striped summary-items" id="order-items-table" >
                <thead>
                 <tr>
                   <th>#</th>
                   <th class="item-name">Items</th>
                   <th class="item-qty">Action</th>
                 </tr>
                </thead>
                <tbody class="font-13" >

                </tbody>
              </table>
            </div>
            <div class="card-footer" style="padding: 0.2rem 1rem 0 1rem !important;">
              <button type="button" class="btn btn-lg btn-block btn-primary waves-effect m-t-5" id='add_out_of_stock' disabled="disabled">
                Add Out Of Stock
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <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>
              <div class="col-md-7 item-detail">
                <div class="form-inputs">
                  <div class="form-group">
                    <!-- <input type="hidden" name="item_code" id="instance_code">
                    <input type="hidden" name="instance_name" id="instance_name"> -->
                    <div class="form-group">
                      <div class='instance-label' style='margin-bottom: 8px;'>
                        <label class="control-label" for="attribute">Instances</label>
                      </div>
                      <!-- <div class="attributes-list col-md-6"></div> -->
                      <select class="form-control" name="item_instance" id="instance_select" multiple="multiple"></select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <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 m-l-5">
                <button type="button" class="btn btn-primary submit " data-dismiss="modal" id="submit">Submit</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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"];
    }else{
      var id = 1;
     }
    jQuery('.first_'+id).click();
  });

  $(document).ready(function () {
    $("#add_out_of_stock").attr("disabled","disabled");
    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 (category[ii]["code"].includes("SPL") != true) {
                category_list_template(category[ii]);
              }
            }
          }
        }
      }
    }
  });

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

      $('.my-toggle').removeClass('toggled');
      $('.menu_list').css('display', 'none');
      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 = "/origami/addorders/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);

        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 (category[ii]["code"].includes("SPL") != true) {
                          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);

        //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) {
                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

    //click menu sidebar menu category
    $(document).on('click', '.menu_category', function(e){
        e.preventDefault();
        $('.sub_category_list').addClass("hidden");
        var menu_id = $(this).attr("data-id");
        var url     = "/inventory/get_menu_category/"+menu_id;
        show_menu_item_list(url,menu_id);
        var sub_id  = $(this).attr("data-sub-id");
        if (sub_id == "true") {
          var sub_url = "/inventory/get_menu_sub_category/"+menu_id;
          sub_category = $(this).siblings('.sub_category_list');
          show_sub_category_list(sub_url,sub_category,menu_id);
        }
    });
    //End menu category Click

    //click menu sidebar menu category
    $(document).on('click', '.menu_sub_category', function(event){
    //   event.preventDefault();
    // $(".menu_sub_category").on("click", function(){
      $('.sub_category_list').addClass("hidden");
      var menu_id = $(this).attr("data-id");
      var url     = "/inventory/get_menu_category/"+menu_id;
      show_menu_item_list(url,menu_id);
    });
      //End menu category Click

    //show menu item list when click menu category
    function show_sub_category_list(url,sub_category,menu_id){

      var sub_category_list = $('.sub_category_list');
       sub_category_list.empty();

      menus = JSON.parse(localStorage.getItem("menus"));
      if (menus != null) {
        for(var j in menus) {
          var categories = menus[j]["categories"];
          for(var ii in categories) {
            if (menu_id == categories[ii]["parent_id"]) {
              $(sub_category).removeClass('hidden');
              row = '<li class="menu_sub_category fadeInTop" data-id="'+categories[ii].id+'">'
                +'<a class="nav-link" data-toggle="tab" href="" role="tab">'+ categories[ii].name+'</a>'
              +'</li>' ;
              $(sub_category).append(row);
            }
          }
        }
      }else{
        if (type != -1 && modify_order != -1) {
          var url = "../../../addorders/"+url;
        }if(modify_order== -1 && type != -1){
          var url = 'addorders/'+url;
        }
        if (type ==-1 && modify_order == -1){
          var url = url;
        }
        //Start Ajax
        $.ajax({
          type: "GET",
          url: url,
          data: {},
          dataType: "json",
          success: function(data) {
            var sub_category_list = $('.sub_category_list');
            sub_category_list.empty();
            data = data.sub_category;
            if (data.length > 0) {
              // if ((sub_category.hasClass('hidden'))) {
                $(sub_category).removeClass('hidden');
              // }else{
                // $(sub_category).addClass('hidden');
              // }
              for(var i in data) {

                    row = '<li class="menu_sub_category fadeInTop" data-id="'+data[i].id+'">'
                             +'<a class="nav-link" data-toggle="tab" href="" role="tab">'+ data[i].name+'</a>'
                           +'</li>' ;
                    $(sub_category).append(row);
                //end is_sub_item false
              }
            }
          }
        });
        //end Ajax
      }
    }

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

        menus = JSON.parse(localStorage.getItem("menus"));
        if (menus != null) {
          for(var i in menus) {
            var categories = menus[i]["categories"];
            for(var ii in categories) {
              if (categories[ii]["id"] == menu_id) {
                var menu_items = categories[ii]["items"];
                show_menu_list(menu_items);
              }
            }
          }
        }else{

          //Start Ajax
          $.ajax({
            type: "GET",
            url: url_item,
            data: {},
            dataType: "json",
            success: function(data) {
              var menu_items_list = $('.menu_items_list');
              menu_items_list.empty();
              menu_items = data.menu_items;
              show_menu_list(menu_items);
            }
          });
          //end Ajax
        }
      }
    //end show list function
    function show_menu_list(menu_items) {
      var menu_list = $('.menu_items_list');
      menu_list.empty();
      for(var field in menu_items) {
              if (menu_items[field].is_sub_item == false) {
                instances = menu_items[field].instances ;

                if (!instances.length > 0) {
                  swal("Hello Please Check!","Does not have instance item in this menu items ("+ menu_items[field].name+")","warning");
                }
                if (instances.length > 0) {
                  qty = 1;
                  options = [];
                  price = 0;

                    fa_plus = 'material-icons';
                    add = 'view_list'
                    menu_item_box = 'menu_item_box';
                    data_target = 'sx_item_detailModal';
                    data_modal  = 'modal'
                    add_icon = "add_icon"
                    menu_instances = [];

                    $(instances).each(function(i){
                      if (instances[i].is_default === true) {
                       code            = instances[i].code;
                       name            = instances[i].name;
                       price           = parseFloat(instances[i].price).toFixed(2);
                       is_available    = instances[i].is_available ;
                       is_on_promotion = instances[i].is_on_promotion;
                       item_attributes = instances[i].values;
                       promotion_price = instances[i].promotion_price;
                       code            = instances[i].code;
                       out_of_stock    = instances[i].out_of_stock;
                     }
                     menu_instances.push(item_attributes);
                    });

                  if (menu_items[field].image) {
                      image_path = menu_items[field].image;

                  }else{
                      image_path = "image/logo.png";
                  }

                  if (out_of_stock === true) {
                    oos_item = '<div class="card custom-card testimonial-card fadeInRight card-box"'
                       +'data-toggle="modal" data-target=".'+data_target+'" '
                       +'style="height:100%;background-image:url(../../'+image_path+');background-repeat: no-repeat; pointer-events: none;opacity: 0.4;">'
                  }else{
                    oos_item = '<div class="card custom-card testimonial-card fadeInRight card-box"'
                       +'data-toggle="modal" data-target=".'+data_target+'" '
                       +'style="height:100%;background-image:url(../../'+image_path+');background-repeat: no-repeat;">'
                  }

                  row = '<div class="col-md-3">'
                  + oos_item
                           +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;" style="">'
                            +'<div class="col-md-10 " style="padding:0px !important;">'+ menu_items[field].name +'</div>'
                            +"<div class='col-md-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  class='"+add_icon+" p-t-65 m-r-' 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)+"'>"

                          // +"<div class='card-block custom-card-block'>"
                          //   +"<img id='logo' height='' src='"+image_path+"'>"
                          // +"</div>"

                        +'</div>'
                        +'</div>'; ;
                  $('.menu_items_list').append(row);
                }
                //end instances in menu-items alest 1 instance
              }
              //end is_sub_item false
          }
       }

      $(document).on('click', '.menu_item_box, .add_icon, .set_item_box', function(event){
        if($(this).hasClass('product_item')) {
          $('.sx_item_detailModal').modal('hide');

          instance_code = $(this).data('instance-code')
          instance_name = $(this).data('instance')
          data = [{id: instance_code, text: instance_name}]

          attribute_arr = get_selected_attributes('selected-attribute');
          option_arr    = get_selected_attributes('selected-option');

          $(this).attr('data-item-code',$('#item_code').text());
          $(this).attr('data-instance-arr',JSON.stringify(data));
          $(this).attr('data-name',$(this).data('name'));
          $(this).attr('data-attributes',JSON.stringify(attribute_arr));
          $(this).attr('data-options',JSON.stringify(option_arr));
          $(this).attr('data-opt',JSON.stringify(option_arr));

          show_item_detail($(this));
          // autoScrollToItem(instance_code)

          return
        }
        if($(this).hasClass('add_icon') || $(this).hasClass('set_item_box')) {

          if ($(this).data('instances').length == 1) {
            $('.sx_item_detailModal').modal('hide')

            attribute_arr = get_selected_attributes('selected-attribute');
            option_arr    = get_selected_attributes('selected-option');

            instance_code = $(this).data('instance-code')
            instance_name = $(this).data('instance')
            data = [{id: instance_code, text: instance_name}]

            $(this).attr('data-item-code',$('#item_code').text());
            $(this).attr('data-instance-arr',JSON.stringify(data));
            $(this).attr('data-name',$(this).data('name'));
            $(this).attr('data-attributes',JSON.stringify(attribute_arr));
            $(this).attr('data-options',JSON.stringify(option_arr));
            $(this).attr('data-opt',JSON.stringify(option_arr));

            code = $(this).data('instance-code');

            show_item_detail($(this))
            autoScrollToItem(code)

            return

          } else {
            var item_data = $(this);
            console.log(item_data);  
          }
        }
        var instances  = $(this).data('menu-instances');
        var item_row = $('.summary-items tbody tr');
        if(instances.length == 1) {
          show_item_instance_modal(instances,item_row);
        }else{
          
        }
        show_item_instance_modal(instances,item_row);
      });

      function show_item_instance_modal(instances,item_row){
        $('#instance_select').empty();
        $('#instance_select').select2({placeholder: "Select Instance"});
        $('#instance_select').on('select2:select', function(e){
          $(this).select2('open');
        });

        if(item_row.length > 0){
          $(instances).each(function(i){
            var append = 0;
            if (instances[i][1] != ""){ instance_name = instances[i][1]; }else{ instance_name = instances[i][2][0]; };
            $(item_row).each(function(e){
              instance_code = $(item_row[e]).attr('data-instance-code');
              if(instances[i][0] == instance_code){
                append = 1;
              }
            });
            if(append == 0){
              $('#instance_select').append('<option class="instance_name"' + 'id=' + instances[i][0]  + ' value=' + instances[i][0]  + '>' + instance_name +  '</option>');
            }
          });
        }else{
          $(instances).each(function(i){
            if (instances[i][1] != ""){ instance_name = instances[i][1]; }else{ instance_name = instances[i][2][0]; };
            $('#instance_select').append('<option class="instance_name"' + 'id=' + instances[i][0]  + ' value=' + instances[i][0]  + '>' + instance_name +  '</option>');
          });
        }
      }

      $(document).on('click', '.delete_item', function(event){
         item       = $(this).parent('.item_box');
         item_name  = item.attr('data-item-name');
         tmp        = item.children().clone();
         item.remove();
         tmp.appendTo(item.parent());
         enable_item = $("div:contains("+item_name+")");
         $(enable_item).css({"pointer-events": "", "opacity": ""});
         if ($('.summary-items tbody tr').length == 0) {
           $('#add_out_of_stock').attr("disabled", true);
         }else{
           $('#add_out_of_stock').removeAttr("disabled", false);
         }
      });

      $(document).on('click', '#clear_all', function(event){
        item_row = $(".summary-items tbody tr");
        $(item_row).each(function(i){
          item_name = $(item_row[i]).attr('data-item-name');
          enable_item = $("div:contains("+item_name+")");
          $(enable_item).css({"pointer-events": "", "opacity": ""});
        });
        $(".summary-items tbody").empty();
        $("#add_out_of_stock").attr("disabled","disabled");
      });

      $('#add_out_of_stock').on('click', function () {
        $(this).attr('disabled', 'disabled');

        var oos_items = JSON.stringify(get_order_item_rows());
        console.log(oos_items);

        var params = {'item_instance_code': oos_items};
        var ajax_url = '../out_of_stock/update';
         $.ajax({
          type: "PATCH",
          url: ajax_url,
          data: params,
          dataType: "json",
           success:function(result){
             if (result.status) {
              setTimeout(function() {
                  swal({
                      title: "Success",
                      text: result.message,
                      type: "success"
                  }, function() {
                      window.location = "/settings/out_of_stock";
                  });
              }, 1000);
             }else{
              swal("Opps",result.message,"warning");
             }
           }
        });
      });

      function get_order_item_rows(){
        var order_items = [];
        var item_row    = $('.summary-items tbody tr');
        $(item_row).each(function(i){
          var order_item = {};

          // order_item.item_name    = $(item_row[i]).attr('data-item-name');
          order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');

          order_items.push(order_item);
        });
        return order_items;
      }

      // click select option icon for add
      $(document).on('click', '.attribute_btn', function(event){

        // $('.change_qty').val(1);
        value      = $(this).data('value');
        type       = $(this).data('type');
        instances  = $(this).data('instances');

        attributes = $(".attribute_btn");
        $(attributes).each(function(i){
          if ($(attributes[i]).attr('data-type')==type){
            $('.'+type).removeClass("selected-attribute");
          }
        });
        $(this).addClass('selected-attribute');

        var selected_attr = get_selected_attributes('selected-attribute');

        for(var field in instances) {
          item_attr = instances[field].values;

          if(JSON.stringify(item_attr) == JSON.stringify(selected_attr)){
            $('#instance_code').val(instances[field].code);
          }
        }

      }); //End selecct attribute buttom

       // Get Selected Class
      function get_selected_attributes(selected_class) {
        var item_row      = $('.'+selected_class);
        var attribute_arr = [];
        $(item_row).each(function(i){
          value = $(item_row[i]).attr('data-value');
          str = value;
          attribute_arr.push(str);
        });
        return attribute_arr;
      }

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

      // click select option icon for add
      $(document).on('click', '.submit', function(event){
        total_price   = $('#total_price').text();
        qty           = parseInt($('#count').val());

        var item_row  = $('.selected-attribute');
        attribute_arr = get_selected_attributes('selected-attribute');
        option_arr    = get_selected_attributes('selected-option');

        data = $("#instance_select").select2('data');
        console.log('data');
        console.log(data);
        if (data != null){
          instance_code = data[0].id;
          instance_name = data[0].text;
          code_name     = [instance_code,instance_name];
        }

        $('.submit').attr('data-item-code',$('#item_code').text());
        $('.submit').attr('data-instance-arr',JSON.stringify(data));
        $('.submit').attr('data-name',$('#title_name').text());
        $('.submit').attr('data-attributes',JSON.stringify(attribute_arr));
        $('.submit').attr('data-options',JSON.stringify(option_arr));
        $('.submit').attr('data-opt',JSON.stringify(option_arr));
        var item_data = $(this);
        console.log(item_data);
        show_item_detail(item_data);
      });

      function show_item_detail(data){
        testqty = parseInt($('.item_box').children('data_qty').text());
        qty           = parseInt(data.attr('data-qty'));
        append        = 0;
        price         = data.attr('data-price');
        instance_name = data.attr('data-instance');
        instance_arr  = JSON.parse(data.attr('data-instance-arr'));

        for(var i in instance_arr){
          if (instance_name == "undefined"){
            instance = '';
          }else{
            instance = "("+instance_arr[i].text+")";
          }

          var rowCount = $('.summary-items tbody tr').length+1;
          var item_row = $('.summary-items tbody tr');

          row ="<tr class='item_box' data-price ='"
              +price+ " 'data-toggle='modal' data-target='#sx_itemModal' data-instance ='"
              +instance+ "' data-qty='"+qty +"' data-code='"+data.attr('data-item-code')+"' data-instance-code='"
              +instance_arr[i].id+"' data-attributes='"
              +data.attr('data-attributes')
              +"' data-row ='"+rowCount+ "'>"
          +'<td class="item-cell-no">'+rowCount+'</td>'
          +'<td class="item-cell-name" id="item_name" >' + data.attr('data-name')+ ' ' + instance +'</td>'
          +"<td class='delete_item'> <i class='material-icons' style='cursor: pointer;'>delete</i> </td>"
          +'</tr>';
          $(".summary-items tbody").append(row);
        }
        if ($('.summary-items tbody tr').length == 0) {
          $('#add_out_of_stock').attr("disabled", true);
        }else{
          $('#add_out_of_stock').removeAttr("disabled", false);
        }
      }

      $('#back').on('click', function () {
        window.location.href = '/settings/out_of_stock';
      });
      $('#stock_taking').on('click', function () {
        window.location.href = '/inventory/stock_checks';
      });
  </script>
