App.checkin = App.cable.subscriptions.create("SecondDisplayViewChannel", {
  //  App.messages = App.cable.subscriptions.create('MessagesChannel', {

  connected: function () {},

  disconnected: function () {},

  received: function (data) {
    var hostname = location.hostname.trim();
    if (data.from == "" || hostname == data.from) {
      var items = data.data;
      var tax = data.tax_profiles;
      var status = data.status;
      if (status == "reload") {
        jQuery("#s_reload").click();
      }
      // $('#second_display_slider').addClass("hidden")
      $("#second_display_items").removeClass("hidden");

      // append items
      if (status == "add") {
        for (var i in items) {
          qty = parseInt(items[i].qty);
          append = 0;
          price = items[i].price;

          instance_name = items[i].instance;
          if (instance_name == "undefined") {
            instance = "";
          } else {
            instance = "(" + items[i].instance + ")";
          }

          // d_option = items[i].options;
          // if (d_option){
          //   option_name = "-"+items[i].options;
          // }else{
          //   option_name = '';
          // }

          d_option = items[i].opt;
          console.log(d_option);
          if (items[i].click_type != "add_icon") {
            option_name = "-" + items[i].options;
            data_option = items[i].options;
          } else {
            option_name = " ";
            data_option = "[]";
          }

          var rowCount = $(".second_display_items tbody tr").length + 1;
          var item_row = $(".second_display_items tbody tr");

          $(item_row).each(function (j) {
            var item_code = $(item_row[j]).attr("data-code");
            var instance_code = $(item_row[j]).attr("data-instance-code");
            var r_option = $(item_row[j]).attr("data-opt");
            console.log(r_option);
            if (
              item_code == items[i].item_code &&
              instance_code == items[i].instance_code &&
              r_option == d_option
            ) {
              if (qty > 1) {
                qty =
                  parseInt($(item_row[j]).children("#item_qty").text()) + qty;
              } else {
                qty = parseInt($(item_row[j]).children("#item_qty").text()) + 1;
              }

              $(item_row[j]).children("#item_qty").text(qty);
              parseFloat(
                $(item_row[j])
                  .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_" +
              items[i].instance_code +
              "' data-price ='" +
              price +
              "' 'data-instance ='" +
              instance +
              "' data-code='" +
              items[i].item_code +
              "' data-instance-code='" +
              items[i].instance_code +
              "' data-attributes='" +
              items[i].attributes +
              "' data-options ='" +
              data_option +
              "' data-opt ='" +
              items[i].options +
              "' data-row ='" +
              rowCount +
              "'>" +
              '<td class="item-cell-no">' +
              rowCount +
              "</td>" +
              '<td class="item-cell-name" id="item_name" >' +
              items[i].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) +
              "</td>" +
              "</tr>";
            $(".second_display_items tbody").append(row);

            //slim scroll
            var scrollContainer = $("#order-detail-slimscroll");
            scrollContainer.slimScroll({
              scrollTo: scrollContainer[0].scrollHeight,
            });
          }
        }
      }
      if (status == "set_add") {
        // var option_arr = [];
        var attribute_arr = [];
        var rowCount = $(".second_display_items tbody tr").length + 1;
        for (var i in items) {
          code = items[i].code;
          item_code = items[i].item_code;
          name = items[i].name;
          item_name = items[i].item_name;
          qty = items[i].qty;
          price = items[i].price;
          option = items[i].option;
          sub_item = items[i].sub_item;
          total = qty * price;
          // option_arr.push(option);
          row =
            "<tr class='item_box_" +
            item_code +
            "' 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 +
            "' data-row ='" +
            rowCount +
            "' data-sub-item ='" +
            sub_item +
            "'>" +
            '<td class="item-cell-no">' +
            rowCount +
            "</td>" +
            '<td class="item-cell-name" id="item_name" >' +
            item_name +
            " " +
            name +
            "" +
            option +
            "</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>";
          $(".second_display_items tbody").append(row);

          var scrollContainer = $("#order-detail-slimscroll");
          scrollContainer.slimScroll({
            scrollTo: scrollContainer[0].scrollHeight,
          });
          rowCount = rowCount + 1;
        }
      }

      //remove item
      if (status == "remove") {
        for (var i in items) {
          var item_code = items[i].instance_code;
          $(
            "#order-items-table tbody > tr.item_box_" + item_code + "",
          ).remove();
        }
      }
      //remove item
      //update item qty
      if (status == "update_qty") {
        for (var i in items) {
          var item_code = items[i].instance_code;
          var item_qty = parseInt(items[i].qty);
          var item_price = parseFloat(items[i].price);
          var item_total = parseFloat(item_qty * item_price).toFixed(2);
          $("#order-items-table tbody > tr.item_box_" + item_code + "")
            .find("#item_qty")
            .text(item_qty);
          $("#order-items-table tbody > tr.item_box_" + item_code + "")
            .find("#item_price")
            .text(item_total);
        }
      }
      //update item qty
      //end apend items
      var total_price = 0;
      var taxable_amount = 0;
      var total_discount = 0;
      var total_tax_amount = 0;
      var item_row = $(".second_display_items tbody tr");
      //calculate Sub Total
      $(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;
      });
      //calculate Tax Amount
      for (var i in tax) {
        // substract , to give after discount
        var total_tax = total_price - total_discount;
        // include or execulive
        if (tax[i].inclusive) {
          rate = tax[i].rate;
          divided_value = (100 + rate) / rate;
          total_tax_amount = total_tax_amount + total_tax / divided_value;
        } else {
          total_tax_amount = total_tax_amount + (total_tax * tax[i].rate) / 100;
        }
      }
      //end calculate Tax amount
      var fixed_total_price = parseFloat(total_price).toFixed(2);
      var fixed_taxable_amount = parseFloat(total_tax_amount).toFixed(2);
      var fixed_grand_total = parseFloat(
        total_price + total_tax_amount,
      ).toFixed(2);

      $("#s_sub_total").empty();
      $("#s_sub_total").append(fixed_total_price);
      $("#s_tatal_tax").empty();
      $("#s_tatal_tax").append(fixed_taxable_amount);
      $("#s_grand_total").empty();
      $("#s_grand_total").append(fixed_grand_total);
    }

    if (data.qr_svg && data.grand_total && data.invoice_no) {
      console.log(data);
      const html = `
        <p class="mb-1"><strong>Amount:</strong> <span id="qr-amount">${new Intl.NumberFormat(
          "en-IN",
        ).format(Number(data.grand_total))} MMK</span></p>
        <p class="mb-1"><strong>Receipt NO:</strong> <span id="qr-invoice"> ${data.invoice_no} </span></p>
        `;
      document.querySelector("#qrpay_svg").innerHTML = data.qr_svg;
      document.querySelector(".payment-details").innerHTML = html;
      $("#mmqr_payment").removeClass("hidden");
      $("#second_display_order_items").addClass("hidden");
    }

    if (status == "pay_success") {
      $("#mmqr_payment").addClass("hidden");
      $("#payment_success").removeClass("hidden");
      console.log(data);
      const html = `
        <p class="mb-1"><strong>Amount Paid:</strong> <span id="success-amount">${new Intl.NumberFormat(
          "en-IN",
        ).format(Number(data.data.paid_amount))} MMK</span></p>
        <p class="mb-1"><strong>Receipt No:</strong> <span id="success-invoice">${data.data.receipt_no}</span></p>
      `;
      document.querySelector(".payment-summary").innerHTML = html;

      setTimeout(() => {
        jQuery("#s_reload").click();
      }, 3000);
    }
  },
});