<%= stylesheet_link_tag    'addorder', media: 'all', 'data-turbolinks-track': 'reload' %>

  <div class="container-fluid " 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">
      <div class="col-lg-2 col-md-2 col-sm-2" id="">
        <div id="menu1-slimscroll" data-height="0">
          <ul class="nav nav-tabs flex-column category_list m-t-10" role="tablist" id="ul-navbar">
            <% @category.each do |cat| %>
              <li class="nav-item ">
                <p class="hidden cat-id"><%= cat.id  %></p>
                  <a class="nav-link menu_category sub_click first_46" data-toggle="tab" href="" role="tab" data-id="<%=cat.id%>" ><%= cat.name%>
                  </a>
              </li>
            <%end %>
          </ul>
        </div>
      </div>

      <div class="col-md-7 col-lg-7 col-sm-7 m-t-10" >
        <div class="card">
          <div class="card-block" style="">
            <div class="card-text" id="custom-slimscroll">
              <div class="row menu_items_list" style="margin:0px 1px 0px 1px ;">
             <!-- append data -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3 col-lg-3 col-sm-3">
        <button type="button" class="btn btn-lg btn-block btn-default waves-effect m-t-5" id='back'>
          <i class="material-icons">reply</i>Back
        </button>
        <br>
        <div class="card-block">
          <div class="card-text" id="order-detail-slimscroll" data-height="140">
           <table class="table table-striped summary-items" id="order-items-table" >
              <thead>
               <tr>
                 <th>#</th>
                 <th class="item-name">Items</th>
                 <th class="item-qty">QTY</th>
                 <th class="item-attr"></th>
               </tr>
              </thead>
              <tbody class="font-13" >

              </tbody>
            </table>
          </div>
        </div>
        <div class="inventory card-footer">
          <button type="button" class="btn btn-lg btn-block btn-primary waves-effect m-t-5" id='finish'>Finish
        </button>
        </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="form-group">

                <div class="form-group">
                    <label class="control-label" for="attribute">Item</label>
                    <input type='text' id='item' class='form-control' readonly="true" value=''/>
                </div>
                <div class="form-group">
                    <label class="control-label" for="attribute">Qty</label>
                  <input type='text' class='form-control keypress_qty' placeholder="Qty" id='product_qty' value="1" />
                </div>
                <input type="hidden" id="instance_code" value="">
                <input type="hidden" id="item_code" value="">
                <input type="hidden" id="item_name" value="">
                <input type="hidden" id="instance_name" value="">

                <div class="form-group">
                    <label class="control-label" for="attribute">Stock Check Reason</label>
                     <input type='text' id='stock_check_reason' class='form-control' placeholder="Set Stock Check Reason" value=''/>
                </div>

                <div class="form-actions">
                  <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_to_stock_check">Save</button>
                  <button type="button" class="btn btn-primary add_to_order " data-dismiss="modal" id="add_to_order">Add to Order<div class="ripple-container"></div></button>
                </div>

              </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class=" modal sx_item_detailModal" id="sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true" style="">
     <div class="modal-dialog custom-modal-dialog" role="document">
       <div class="modal-content">

         <div class="modal-body">
           <table width="100%" class="table table-striped">
            <thead>
              <tr>
                <th style="">Item Name</th>
                <th style="">Quantity</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <!-- <td type='text' id='item' class='form-control' readonly="true" value=''></td> -->
                <td class="item_name" id="item"></td>
                <!-- <td> -->
                  <div class="form-group">
                      <!-- <label class="control-label" for="attribute">Item</label> -->
                       <!-- <input type='text' id='item' class='form-control' readonly="true" value=''/> -->
                  </div>
                <!-- </td> -->
                <td>
                  <input type="number" name="qty" class="form-control col-md-12 input-number keypress_qty" placeholder="Qty" data-value="0" id="product_qty" value="" min="1" max="10000">
                  <!-- <input type='text' class='form-control keypress_qty' placeholder="Qty" id='product_qty' value="1" /> -->
                  <input type="hidden" id="instance_code" value="">
                  <input type="hidden" id="item_code" value="">
                  <input type="hidden" id="item_name" value="">
                  <input type="hidden" id="instance_name" value="">
                </td>
                <td>
                  <button type="button" id="remove" class="btn btn-danger" data-dismiss="modal">Remove</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row bottom p-l-15 p-r-15 m-t-10">
            <div class="col-md-3 qty_number border-top border-left" data-value="1" data-type="num">1</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="2" data-type="num">2</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="3" data-type="num">3</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="4" data-type="num">4</div>
          </div>
          <div class="row bottom p-l-15 p-r-15">
            <div class="col-md-3 qty_number border-top border-left" data-value="5" data-type="num">5</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="6" data-type="num">6</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="7" data-type="num">7</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="8" data-type="num">8</div>
          </div>
          <div class="row bottom p-l-15 p-r-15">
            <div class="col-md-3 qty_number border-top border-left" data-value="9" data-type="num">9</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="0" data-type="num">0</div>
            <div class="col-md-3 qty_number border-top border-left" data-value="00" data-type="num">00</div>
            <div class="col-md-3 qty_number border-top border-left  bg-orange" data-type="clr">Clr</div>
          </div>
        </div>
        <div class="modal-footer">
         <div class="row">
           <div class="col-md-5">
             <button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
           </div>
           <div class="col-md-5">
             <!-- <button type="button" class="btn btn-primary " data-dismiss="modal" id="save">Update</button> -->
             <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_to_stock_check">Save</button>
           </div>
         </div>
       </div>
     </div>
   </div>
  </div>




    <!-- Modal -->
     <div class=" modal" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true" style="">
      <div class="modal-dialog custom-modal-dialog" role="document">
        <div class="modal-content">

          <div class="modal-body">
            <table width="100%" class="table table-striped">
             <thead>
               <tr>
                 <th style="">Item Name</th>
                 <th style="">Quantity</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td class="item_name" id="modal-item-name"></td>
                 <td>
                   <input type="number" name="qty" class="form-control col-md-12 input-number" data-value="0" id="modal-qty" value="" min="1" max="10000">
                 </td>
                 <td>
                   <button type="button" id="remove" class="btn btn-danger" data-dismiss="modal">Remove</button>
                 </td>
               </tr>
             </tbody>
           </table>
           <div class="row bottom p-l-15 p-r-15 m-t-10">
             <div class="col-md-3 cashier_number border-top border-left" data-value="1" data-type="num">1</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="2" data-type="num">2</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="3" data-type="num">3</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="4" data-type="num">4</div>
           </div>
           <div class="row bottom p-l-15 p-r-15">
             <div class="col-md-3 cashier_number border-top border-left" data-value="5" data-type="num">5</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="6" data-type="num">6</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="7" data-type="num">7</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="8" data-type="num">8</div>
           </div>
           <div class="row bottom p-l-15 p-r-15">
             <div class="col-md-3 cashier_number border-top border-left" data-value="9" data-type="num">9</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="0" data-type="num">0</div>
             <div class="col-md-3 cashier_number border-top border-left" data-value="00" data-type="num">00</div>
             <div class="col-md-3 cashier_number border-top border-left  bg-orange" data-type="clr">Clr</div>
           </div>
         </div>
         <div class="modal-footer">
          <div class="row">
            <div class="col-md-5">
              <button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
            </div>
            <div class="col-md-5">
              <button type="button" class="btn btn-primary " data-dismiss="modal" id="save">Update</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Menu Item modal -->

<style type="text/css">
  .fadeInRight{
  -webkit-animation-duration: 350ms !important;
  }
</style>
<script>

  jQuery(function(){
    id = "<%=@category_id%>";
    console.log(id)
    jQuery('.first_46').click();
  });

  $(document).ready(function () {
    var count = 0;
    //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);
    });
    //End menu category Click

    //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();
        console.log(url_item);
          //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;
              console.log(menu_items)
              show_menu_list(menu_items);
            }
          });
          //end Ajax
      }
    //end show list function
    function show_menu_list(items) {
      var menu_list = $('.menu_items_list');
      menu_list.empty();

      for(var i in items) {

        fa_plus       = 'material-icons';
        add           = 'view_list'
        menu_item_box = 'menu_item_box';
        data_target   = 'sx_item_detailModal';
        data_modal    = ''
        add_icon      = "add_icon"
        if (items[i].image) {
          image_path  = items[i].image;

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

        row = '<div class="col-md-3">'
          +'<div class="card custom-card testimonial-card fadeInRight card-box"'
          +'item_name="'+items[i]["item_name"]+'"'
          +'item_code="'+items[i]["item_code"]+'"'
          +'instance_name="'+items[i]["instance_name"]+'" '
          +'instance_code="'+items[i]["instance_code"]+'"'
          +'data-toggle="modal" data-target=".'+data_target+'" '
          +'style="height:100%;background-image:url(../../'+image_path+');background-repeat: no-repeat;">'
          +'<div class="custom-card-head card-head row" style="line-height:14px;margin:0px;" style="">'
          +'<div class="col-md-10 " style="padding:0px !important;">'+ items[i]["item_name"] +"-" +items[i]["instance_name"]+'</div>'
          +"<div class='col-md-2 "+menu_item_box+" ' 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-' >"
          +'</div>'
          +'</div>';
        $('.menu_items_list').append(row);
      }
    }

    //click item row for add order
    $(document).on('click', '.card-box', function(event){
      $("#product_qty").val(1);
        $('#product_qty').empty();
        $("#stock_check_reason").val('');
        $('#item_code').val($(this).attr('item_code'));
        $('#instance_code').val($(this).attr('instance_code'));
        // $('#item').val($(this).attr('item_name')+"-"+$(this).attr('instance_name'));
        $('#item').text($(this).attr('item_name'));
        $('#instance_name').val($(this).attr('instance_name'));
        $('#item_name').val($(this).attr('item_name'));
    });


    $('#save_to_stock_check').on('click', function() {
      if ($("#product_qty").val()>0) {
          item_name     = $('#item_name').val();
          instance_name = $('#instance_name').val();
          qty           = $('#product_qty').val();
          product_name  = $("#item").val();

          append        = 0;
          itemCode     = $("#item_code").val();
          instanceCode = $("#instance_code").val();

          reason =  $("#stock_check_reason").val();

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


          $(item_row).each(function(i){
            item_code = $(item_row[i]).attr('data-code');
            instance_code = $(item_row[i]).attr('data-instance-code');
            r_option = $(item_row[i]).attr('data-opt');

            if (item_code == itemCode && instance_code == instanceCode) {
              if (qty > 1) {
                qty = parseInt($(item_row[i]).children('#item_qty').text()) + parseInt(qty);
                test_qty = parseInt($(item_row[i]).children('#item_qty').text());
              }else{
                qty = parseInt($(item_row[i]).children('#item_qty').text()) + 1;
              }

              $(item_row[i]).children('#item_qty').text(qty);
              // parseFloat($(item_row[i]).children('#item_price').text(parseFloat(price*qty).toFixed(2)));
              append =1;
            }else{
              if (qty > 1) {
                qty = qty;
              }else{
                qty = 1;
              }
            }
          });
          if (append===0) {
            row ="<tr class='item_box' data-toggle='modal' data-target='#sx_itemModal' data-code ='"
                    +itemCode+ "' data-instance-code='"+instanceCode+"' data-row ='"+rowCount+ "' data-reason ='"+reason+ "'>"
                    +'<td class="item-cell-no">'+rowCount+'</td>'
                    +'<td class="item-cell-name" id="item_name" >' + item_name+ ' ' + instance_name +'</td>'
                    +'<td class="item-cell-qty" id="item_qty">' + qty + '</td>'
                    +'<td class="" id="remove"><i class="material-icons" id="remove_row" style="cursor:pointer;">delete_forever</i></td>'
                +'</tr>';
          $(".summary-items tbody").append(row);
        }
      }else{
         swal("Opps", "Please enter number for qty ","warning");
      }
    });

    //click item row for update qty
    $('.summary-items').on('click', '.item_box', function(){
      $(this).attr('data-active',true);
      name =  $(this).children('#item_name').text();
      qty  =  $(this).children('#item_qty').text();
      $('#modal-item-name').text(name);
      $('#modal-qty').val(qty);
    });

    //click remove buttom in modal box
    $('#sx_itemModal').on('click','#remove', function(){
      $('.summary-items tr').filter(function(){
        if ($(this).attr('data-active') == 'true'){
          $(this).remove();
        }
      });
    });

    //click close
    $('#sx_itemModal').on('click','#close', function(){
      $(".item_box").removeAttr("data-active");
    });
  //click save buttom after change qty
    $('#sx_itemModal').on('click','#save', function(){
      if ($('#modal-qty').val()>0) {
        summary_items_filter();
      }else{
        swal("Opps", "Please enter number for qty ","warning");
      }
    });

    // $(document).on('click', '#remove_row', function(event){
    //   console.log( $(this).parent().parent())
    //   $($(this).parent().parent()).attr('data-active',true);
    //    $('.summary-items tr').filter(function(){
    //       if ($(this).attr('data-active') == 'true'){
    //         $(this).remove();
    //       }
    //     });
    //   });

    $(".keypress_qty").on('keyup change', function (){
        value = $(this).val();
        if ($.isNumeric(value)) {
          $('#product_qty').val(value);
        }else{
          // swal("Opps","Please enter number for qty","warning");
        }
    });


    $('#finish').on('click', function () {
        var reason = $('#stock_check_reason').val();
        var arr = [];
        var jsonStr = '';

        var jsonStr = JSON.stringify(get_order_item_rows());
        console.log(jsonStr);
        if (jsonStr) {
          $.ajax({
              type: 'Post',
              url: '<%= inventory_stock_check_save_path %>',
              data: 'stock_item=' + jsonStr + '&reason=' + reason,
              success: function (data) {
                if (data['stock_id']) {
                  check_id = data['stock_id'];
                   $.ajax({
                      type: 'post',
                      url: '<%= inventory_save_to_journal_path %>',
                      data: 'data=' + check_id,
                      success: function () {
                        swal({
                          title: "Information!",
                          text: "Successfully saved to journal",
                          html: true,
                          closeOnConfirm: false,
                          closeOnCancel: false,
                          allowOutsideClick: false
                          }, function () {
                            // window.location.href = '/inventory';
                            window.location.href = '/inventory/stock_checks/' + check_id;
                        });
                      }
                  })
                   // window.location.href = '/inventory/stock_checks/' + data['stock_id'];
                }

              }
          })
        }else{
           swal("Opps","Please add item ","warning");
        }
    });

    $(document).on('click', '.cashier_number', function(event){
      if(event.handled !== true) {
        var original_value;
        original_value = $('#modal-qty').attr('data-value');
        original_qty   = $('#modal-qty').val();
        var input_type = $(this).attr("data-type");

        switch (input_type) {
          case 'num':
            var input_value = $(this).attr("data-value");
            if (original_value == "0"){
              $('#modal-qty').val(input_value);
              $('#modal-qty').attr('data-value',input_value);
                // update_total_amount();
            }else{
              $('#modal-qty').val(original_qty + input_value);
              $('#modal-qty').attr('data-value',original_qty + input_value);
              // update_total_amount();
            }
          break;
          case 'add':

          case 'del' :

          case 'clr':
            $('#modal-qty').val(1);
            $('#modal-qty').attr('data-value',0);
            // update_total_amount();
          break;
          }
          event.handled = true;
      } else {
        return false;
      }
    });

    $(document).on('click', '.qty_number', function(event){
      if(event.handled !== true) {
        var original_value;
        original_value = $('#product_qty').attr('data-value');
        original_qty   = $('#product_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"){
              $('#product_qty').val(input_value);
              $('#product_qty').attr('data-value',input_value);
                // update_total_amount();
            }else{
              $('#product_qty').val(original_qty + input_value);
              $('#product_qty').attr('data-value',original_qty + input_value);
              // update_total_amount();
            }
          break;
          case 'add':

          case 'del' :

          case 'clr':
            $('#product_qty').val(1);
            $('#product_qty').attr('data-value',0);
            // update_total_amount();
          break;
          }
          event.handled = true;
      } else {
        return false;
      }
    });

    $("#back").on("click", function(){
      window.location.href = "/inventory";
    });



    function summary_items_filter(){
      $('.summary-items tr').filter(function(){
        if ($(this).attr('data-active') == 'true'){
          qty   = $('#modal-qty').val();
          price = parseFloat($(this).attr('data-price'));
          total_price = parseFloat(price*qty).toFixed(2);

          $(this).find('#item_qty').text(qty);
          $(this).find('.item-cell-price').text(total_price);

          $(this).removeAttr('data-active');
        }
      });
    }

    /* Get Item rows */
    function get_order_item_rows(){
      var items = [];
      var item_row    = $('.summary-items tbody tr');
      $(item_row).each(function(i){
        var item_list = {};

        item_list.remark = $(item_row[i]).attr('data-reason');
        item_list.sku    = $(item_row[i]).attr('data-instance-code');
        item_list.qty    = $(item_row[i]).children('#item_qty').text();

        items.push(item_list);
      });
      return items;
    }

  });
</script>
