App.checkin = App.cable.subscriptions.create('OutOfStockChannel', {

  connected: function() {},

  disconnected: function() {},

  received: function(data) {
    if (data && data.item_code) {
      item_code = data.item_code
      item_instance_code = data.item_instance_code;
      item_instance_code_id = '#' + item_instance_code;
      menus = localStorage.getItem('menus');

      if (menus) {
        menus = jQuery.parseJSON(menus);
        menus.forEach(m => {
          m.categories.forEach(c => {
            c.items.forEach(i => {
              i.instances.forEach(instance => {

                if (instance.code == item_instance_code) {
                  
                  card_header = $('.menu_items_list').find(`[data-item-code='${item_code}']`).first();
                  card_footer = $(card_header).parent('.card').find('.card-footer');
                  price_tag = $(card_footer).find('.price_tag')
                  item_box  = $(card_footer).find('.menu_item_box')

                  instance_list = $('.menu_items_list').find(`[data-item-code='${item_code}']`).data('instances')
                  
                  if (instance_list.length == 1) {

                    if (data.status == true) {
                      instance.out_of_stock = true;

                      $(card_header).css({"pointer-events": "none", "opacity": "0.4"});
                      $(item_box).css({"pointer-events": "none", "opacity": "0.4"});

                      $(price_tag).empty().addClass('text-danger').text('out of stock')

                    } else {
                      instance.out_of_stock = false;

                      $(card_header).css({"pointer-events": "auto", "opacity": ""});
                      $(item_box).css({"pointer-events": "auto", "opacity": ""});

                      price = $(card_header).data('price')
                      $(price_tag).removeClass('text-danger').empty().text(price)
                      
                    }
                  } else {
                    if (data.status == true) {
                      instance.out_of_stock = true;

                      oos_count = 0
                      data_instance_code = $(card_header).data('instance-code')
                      instance_list.forEach(i => {
                        if (i.code == item_instance_code) {
                          i.out_of_stock = true
                          name = $('.menu_items_list').find(`[data-item-code='${item_code}']`).data('name')
                          $('.summary-items').find(`tr[data-instance-code='${item_instance_code}']`).attr({'data-oos': true, 'data-name': name});
                        }
                        if (i.out_of_stock == true) {
                          oos_count += 1
                        }
                        if (data_instance_code == item_instance_code) {
                          console.log('Equal');
                          if (i.out_of_stock == false) {
                            code = i.code
                            price = parseFloat(i.price).toFixed(2);
                            name = i.name
                            item_attributes = i.values
                            promotion_price = i.promotion_price
                            $(card_header).removeAttr('data-price', 'data-instance-code', 'data-promotion-price', 'data-attributes', 'data-instance')
                            $(card_header).attr({'data-price': price, 
                                                'data-instance-code': code,
                                                'data-promotion-price': promotion_price,
                                                'data-attributes': JSON.stringify(item_attributes),
                                                'data-instance': name
                                              })

                            $(card_footer).find('.menu_item_box').removeAttr('data-item').attr('data-item', JSON.stringify(item_attributes))
                            $(price_tag).removeClass('text-danger').empty().text(price)
                          }
                        }
                      });

                      if (oos_count == instance_list.length) {
                        $(card_header).css({"pointer-events": "none", "opacity": "0.4"});
                        $(item_box).css({"pointer-events": "none", "opacity": "0.4"});
                        $(price_tag).empty().addClass('text-danger').text('out of stock')
                      }

                    } else { // status == false
                      instance.out_of_stock = false;

                      instance_list.forEach(i => {
                        if (i.code == item_instance_code) {
                          i.out_of_stock = false
                          code = i.code
                          price = parseFloat(i.price).toFixed(2);
                          name = i.name
                          item_attributes = i.values
                          promotion_price = i.promotion_price
                        }
                      })
                      
                      $(card_header).removeAttr('data-price', 'data-instance-code', 'data-promotion-price', 'data-attributes', 'data-instance')
                      $(card_header).attr({'data-price': price, 
                                          'data-instance-code': code,
                                          'data-promotion-price': promotion_price,
                                          'data-attributes': JSON.stringify(item_attributes),
                                          'data-instance': name
                                        })

                      $(card_footer).find('.menu_item_box').removeAttr('data-item').attr('data-item', JSON.stringify(item_attributes))

                      $(card_header).css({"pointer-events": "auto", "opacity": ""});
                      $(item_box).css({"pointer-events": "auto", "opacity": ""});

                      $(price_tag).removeClass('text-danger').empty().text(price)

                    }

                    // update data-attribute
                    $(card_header).removeData('instances').attr('data-instances', JSON.stringify(instance_list));
                    $(card_footer).find('.menu_item_box').removeData('instance').attr('data-instance', JSON.stringify(instance_list));
                  }
                }
              })
            })
          })
        });
        localStorage.setItem('menus', JSON.stringify(menus));
      }
    }
  }
});