$(function(){

  //click menu sidebar menu category
  $(".menu_category").on("click", function(){
    var menu_id = $(this).find(".menu-id").text();
    var url = $(this).attr('data-ref');
    show_menu_item_list(url); 
  }); 
  //End menu category Click

  $(".change_qty").change(function(){
    qty = $(this).val();
    price = $("#unit_price").text();
    $("#total_price").text(qty*price);
  });

  $("#set_change_qty").change(function(){
    qty = $(this).val();
    price = $("#set_total_price").text();
    $("#set_total_price").text(qty*price);
  }); 

  //show menu item list when click menu category
  function show_menu_item_list(url_item){ 
    var menu_list = $('.menu_items_list');
    menu_list.empty();
    //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;

        for(var field in menu_items) {  
          if (menu_items[field].is_sub_item == false) {
            instances = menu_items[field].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;
             }
            }); 
            
            qty = 1;
            options = [];

            if (JSON.stringify(menu_items[field].item_sets)!='[]') {
              fa_plus = '';
              menu_item_box = 'set_item_box';
              data_target = 'sx_item_set_detailModal';
            }else{
              fa_plus = 'fa-plus';
              menu_item_box = 'menu_item_box';
              data_target = 'sx_item_detailModal'
            }

            row = '<div class="card custom-card">'
            +'<div class="custom-card-head card-head" style="line-height:14px;">'
            +'<small class="col-md-9">'+ menu_items[field].name +'</small>'
            +"<div class='col-md-3 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 = '"
              + options +"'>"
            +"<i class='fa "+fa_plus+" '"
            + 'style="margin-top:4px;">'
            +'</i></div>'
            +'</div>'

            +"<div class='"+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-item-sets = '"
              +JSON.stringify(menu_items[field].item_sets)+"' data-toggle='modal' data-target='."+data_target+"'>"

            +"<div class='card-block custom-card-block'>"
            +"<img id='logo' src='/image/logo.png'>"

            +"</div>"

            +'<div class="card-footer custom-card-footer">'
            +'<small>'+ price +'</small>'
            +'</div>'
            +'</div>'; 
            $('.menu_items_list').append(row);
          }
        }
      }
    });
    //end Ajax 
  }
  //end show list function
  //click item row for item set
   $(document).on('click', '.set_item_box', function(event){ 
     $(".instance-list").empty();
     $(".options-list").empty();
    
    data =  $(this).parent().children().children('.add_icon');

    instances          = $(this).data('instance');
    item_sets          = $(this).data('item-sets');

    for(var field in item_sets) { 
      value = item_sets[field]["instances"];
      $(value).each(function(i){
        $.ajax({
          type: "GET",
            url: '../../api/restaurant/menu_item_instances/'+value[i]["id"],
            data: {id:value[i]},
            success:function(result){

                row = '<div class="col-md-4 " >'
                        +"<div class='card custom-card instance_box' data-name='"+result["name"]
                            +"' data-code='"+result["code"]
                            +"' data-price='"+result["price"]
                            +"' data-option='"+JSON.stringify(result["options"])
                            +"'>"
                          +'<div class="custom-card-head card-head" style="line-height:14px;">'
                             +'<small class="">'+result["name"]+'</small>'
                          +'</div>'
                          +'<div class="card-block custom-card-block">'
                            +'<img id="" src="/image/logo.png" height="40px">'
                            +' <small style="float:" id="instance_option"></small>'
                          +'</div>'
                          +'<div class="card-footer custom-card-footer">'
                             +' <small>'+result["price"]+'</small>'
                             // +' <small style="float:right" id="instance_option"></small>'
                          +'</div>'
                        +'</div>'
                      +' </div>'

              $(".instance-list").append(row);             
            }
        });
      });
    }

    $('#set_change_qty').val(1);
    $('#set_item_instances').text(instances);
    $('#set_name').text(data.attr('data-name'));
    $('#set_item_code').text(data.attr('data-item-code'));
    $('#set_total_price').text(data.attr('data-price'));
    $('#set_unit_price').text(data.attr('data-price'));
  });
  // click instance for add item set 
  $(document).on('click', '.instance_box', function(event){ 

      $(".options-list").empty();

      item_options = $(this).data('option');
      code = $(this).data('code');
      
      for(var field in item_options) { 
          value = item_options[field]["values"];
          type  = item_options[field]["type"];
          row = "<p style='font-size:16px;margin-bottom:3px'>"+type+"</p>"
          $(value).each(function(i){
            row +="<button class='btn btn-default btn-sm option_btn "+ type +"' data-type='"
            +type+"' data-value='"+value[i]+"' data-code='"+code+"' data-group='set_menu'>"
            +value[i]+"</button>";   
          });
          $(".options-list").append(row); 
      }

    if($(this).hasClass('selected-instance') == true){
      sub_total       = $('#set_total_price').text();
      name            = $(this).data('name');
      price           = $(this).data('price');
      qty             = $('#set_change_qty').val();
      total           = qty*price;
      var total_price = +sub_total - +total;
      $(this).removeClass('selected-instance');
      $(".options-list").empty();
      $(this).removeAttr('data-options');
      $('#instance_option').text('')
    }else {
      sub_total       = $('#set_total_price').text();
      name            = $(this).data('name');
      price           = $(this).data('price');
      qty             = $('#set_change_qty').val();
      total           = qty*price;
      var total_price = +sub_total + +total;
      $(this).addClass('selected-instance');
    }
    $('#set_total_price').text(total_price);
  }); //End selecct attribute buttom

  // click add order 
  $(document).on('click', '.set_order', function(event){ 
    total_price   = $('#set_total_price').text();
    qty           = parseInt($('#set_change_qty').val());
    item_code     = $('#set_item_code').text();
    item_name     = $('#set_name').text();

    var items  = $('.selected-instance');

    attribute_arr = []
    option_arr = []
    var rowCount = $('.summary-items tbody tr').length+1;
    $(items).each(function(i){
      code          = $(items[i]).attr('data-code');
      name          = $(items[i]).attr('data-name');
      price         = $(items[i]).attr('data-price');
      option        = $(items[i]).attr('data-options');
      total         = qty * price ;
      option_arr.push(option);
      row ="<tr class='item_box' data-price ='"
            +price+ "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"
            +name+ "' data-code='"+item_code+"' data-instance-code='"
            +code+"' data-attributes='"
            +attribute_arr+"' data-options ='"
            +option_arr+"' data-row ='"+rowCount+ "'>"
        +'<td class="item-cell-no">'+rowCount+'</td>'
        +'<td class="item-cell-name" id="item_name" >' + item_name+ ' ' + name +'</td>'
        +'<td class="item-cell-qty" id="item_qty">' + qty + '</td>'
        +'<td class="item-cell-price" id="item_price">' 
        + parseFloat(total).toFixed(2)
        +'</td>' 
        +'</tr>';
        $(".summary-items tbody").append(row);
      rowCount = rowCount + 1;
    });
    calculate_sub_total();
      
  }); //End add order  Click

  //click item row for add order
  $(document).on('click', '.menu_item_box', function(event){ 
    $('.attributes-list').empty();
    $('.options-list').empty();
    $('.attr-alert').addClass('hide');
    $('.add_to_order').removeAttr('data-instance-code');
    $('.add_to_order').removeAttr('data-instance');
    $('.add_to_order').removeAttr('data-price');
    $('.add_to_order').removeAttr('data-promotion-price');
    $('.add_to_order').removeAttr('data-item-code');
    $('.add_to_order').removeAttr('data-qty');
    $('.add_to_order').removeAttr('data-name');
    $('.add_to_order').removeAttr('data-attributes');
    $('.add_to_order').removeAttr('data-options');

    data =  $(this).parent().children().children('.add_icon');
    attributes         = $(this).data('id');
    selected_item      = $(this).data('item');
    instances          = $(this).data('instance');
    item_options       = $(this).data('option');

    instance_attributes = []
    for(var field in instances) { 
      value = instances[field].values;
      $(value).each(function(i){
        options = value[i];
        instance_attributes.push(options);
      });
    }

    for(var field in attributes) { 
      value = attributes[field]["values"];
      type  = attributes[field]["type"]
      row = "<h4>"+attributes[field]["type"]+"</h4>"
      $(value).each(function(i){
        disabled = ""
        status ="";
        
        
        if(parseInt(jQuery.inArray(value[i], selected_item))!== -1){
          status = "selected-attribute";
        }
        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-default attribute_btn "
        + status +" "+ type +" "+ disabled +" '>"
        +value[i]
        +"</button>";   
      });
      $(".attributes-list").append(row); 
    }

    for(var field in item_options) { 
      value = item_options[field]["values"];
      type  = item_options[field]["type"];
      row = "<h4>"+type+"</h4>"
      $(value).each(function(i){
        row +="<button class='btn btn-default option_btn "+ type +"' data-type='"
        +type+"' data-value='"+value[i]+"' data-group='simple_menu'>"+value[i]+"</button>";   
      });
      $(".options-list").append(row); 
    }

    $('#change_qty').val(1);
    $('#item_instances').text(instances);
    $('#title_name').text(data.attr('data-name'));
    $('#item_code').text(data.attr('data-item-code'));
    $('#total_price').text(data.attr('data-price'));
    $('#unit_price').text(data.attr('data-price'));
  });

  // click select option icon for add 
  $(document).on('click', '.attribute_btn', function(event){ 
    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');

    // if ($(".attribute_btn").attr("data-type")==type){
    //   $('.'+type).removeClass("selected-attribute");
    // }
    // $(this).addClass('selected-attribute');
    
    var selected_attr = get_selected_attributes('selected-attribute');

    qty = $('#change_qty').val();

    for(var field in instances) { 
      item_attr = instances[field].values;
      
      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);
      }     
    }
    
  }); //End selecct attribute buttom

  // click select option icon for add 
  $(document).on('click', '.option_btn', function(event){ 
    value      = $(this).data('value');
    type       = $(this).data('type');
    group      = $(this).data('group');
    options    = $(".option_btn");
    $(options).each(function(i){
      if ($(options[i]).attr('data-type')==type){
        $('.'+type).removeClass("selected-option");
      }
    });
    $(this).addClass('selected-option');

    if(group == "set_menu"){
      code = $(this).data('code');
      value = $(this).data('value');

      instance    = $(".selected-instance");
      $(instance).each(function(i){
        if ($(instance[i]).attr('data-code')==code){
          option_arr    = get_selected_attributes('selected-option');
          $(instance[i]).attr('data-options',JSON.stringify(option_arr));
          $(instance[i]).children().children('#instance_option').text(option_arr);
        }
      });
    }
    
  }); //End selecct attribute buttom

  // click add order 
  $(document).on('click', '.add_to_order', function(event){ 
    total_price   = $('#total_price').text();
    qty           = parseInt($('#change_qty').val());

    var item_row  = $('.selected-attribute');
    var instances = jQuery.parseJSON(item_row.attr('data-instances'));
    
    attribute_arr = get_selected_attributes('selected-attribute');
    option_arr    = get_selected_attributes('selected-option');

    for(var field in instances) {           
      if (JSON.stringify(attribute_arr) === JSON.stringify(instances[field].values)) {

        $('.add_to_order').attr('data-instance-code',instances[field].code);
        $('.add_to_order').attr('data-instance',instances[field].name);
        $('.add_to_order').attr('data-price',instances[field].price);
        $('.add_to_order').attr('data-promotion-price',instances[field].promotion_price);
      }
    }
    $('.add_to_order').attr('data-item-code',$('#item_code').text());
    $('.add_to_order').attr('data-qty',qty);
    $('.add_to_order').attr('data-name',$('#title_name').text());
    $('.add_to_order').attr('data-attributes',JSON.stringify(attribute_arr));
    $('.add_to_order').attr('data-options',JSON.stringify(option_arr));
    var item_data = $(this);
    show_item_detail(item_data);
    calculate_sub_total();
      
  }); //End add order  Click
  
  // click plus icon for add 
  $(document).on('click', '.add_icon', function(event){ 
    var item_data = $(this);
    show_item_detail(item_data);
    calculate_sub_total(); 
  }); //End Add Icon Click

  function show_item_detail(data){
    
    qty           = parseInt(data.attr('data-qty'));
    append        = 0;
    price         = parseFloat(data.attr('data-price')).toFixed(2);
    instance_name = data.attr('data-instance');
    if (instance_name == "undefined"){
      instance = '';
    }else{
      instance = "("+data.attr('data-instance')+")";
    }

    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');

      if (item_code == data.attr('data-item-code') && instance_code == data.attr('data-instance-code')) {
        if (qty > 1) {            
          qty = parseInt($(item_row[i]).children('#item_qty').text()) + qty;
        }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(price*qty)).toFixed(2);
        append =1;
      }else{
        if (qty > 1) {            
          qty = qty;
        }else{            
          qty = 1;
        }
      }  
    }); 
    if (append===0) {
      row ="<tr class='item_box' data-price ='"
          +price+ "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"
          +instance+ "' data-code='"+data.attr('data-item-code')+"' data-instance-code='"
          +data.attr('data-instance-code')+"' data-attributes='"
          +data.attr('data-attributes')+"' data-options ='"
          +data.attr('data-options')+"' 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="item-cell-qty" id="item_qty">' + qty + '</td>'
      +'<td class="item-cell-price" id="item_price">' 
      + parseFloat(price).toFixed(2)
      +'</td>' 
      +'</tr>';
      $(".summary-items tbody").append(row);
    }
  }

  // Pay Discount for Payment
  $("#create_order").on('click', function(e){
    e.preventDefault();
    $("#loading_wrapper").show();
    var table_id   = $('#table_id').text();
    var booking_id = $('#booking_id').text();
    if (!booking_id.length > 0) {
      
      var params = {'order_source': "cashier", 'order_type': "dine_in",
                  'customer_id': "", 'guest_info': "",'booking_id':booking_id,
                  'table_id': table_id, 
                  'order_items': order_items };
    }
    var table_type = $('#table_type').text();
    var order_items = JSON.stringify(get_order_item_rows());

    var ajax_url = '../addorders/create'; 
    

    var params = {'order_source': "cashier", 'order_type': "dine_in",
                  'customer_id': "", 'guest_info': "",
                  'table_id': table_id, 
                  'order_items': order_items };

    $.ajax({
      type: "POST",
      url: ajax_url,
      data: params,
      dataType: "json",
      success:function(result){ 
        $("#loading_wrapper").hide();                         
        $.confirm({
          title: 'Infomation!',
          content: "Order has been successfully created",
          buttons: {
            confirm: {
              text: 'Ok',
              btnClass: 'btn-green',
              action: function(){
                if(table_type == "Table"){
                  window.location.href = "/origami/table/" + table_id
                }
                else {
                  window.location.href = "/origami/room/" + table_id
                }
              }
            }
          }
        });                   
      }
    });
  });

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

  //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(){  
    summary_items_filter(); 
    calculate_sub_total();
  });

  //calculate subtotal
  function calculate_sub_total(){ 
    var total_price    = 0;
    var taxable_amount = 0;
    var item_row       = $('.summary-items tbody tr');

    $(item_row).each(function(i){
      var unit_price = parseFloat($(item_row[i]).attr('data-price'));
      var qty        = parseFloat($(item_row[i]).children('#item_qty').text());
      total_price += qty*unit_price;    
    }); 
    var fixed_total_price    = parseFloat(total_price).toFixed(2);
    var fixed_taxable_amount = parseFloat(taxable_amount).toFixed(2);

    $('#sub_total').empty(); 
    $('#sub_total').append(fixed_total_price);

    if (fixed_total_price > 0) {
      $('.create').removeAttr("disabled", false);
    }else{
      $('.create').attr("disabled", true);
    }
  }

  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 order_items = [];  
    var item_row    = $('.summary-items tbody tr');
    $(item_row).each(function(i){
      var order_item = {};
      
      order_item.order_item_id      = $(item_row[i]).attr('data-row');
      order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
      order_item.quantity           = $(item_row[i]).children('#item_qty').text();
      order_item.options            = $(item_row[i]).attr('data-options');
      order_items.push(order_item);
    }); 
    return order_items;
  }
  // 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;
  }

});