// Initialize Swiper

const swiper = new Swiper(".mySwiper", {
  spaceBetween: 10,
  slidesPerView: 3,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});
const swiper2 = new Swiper(".mySwiper2", {
  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: true,
  },
  thumbs: {
    swiper: swiper,
  },
  breakpoints: {
    768: {
      pagination: false,
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    },
  },
});

// Tabs

const tabLabels = document.querySelectorAll("#tabs li");
const tabPanes = document.getElementsByClassName("tab-contents");

function activateTab(e) {
  e.preventDefault();

  // Deactivate all tabs
  tabLabels.forEach(function (label, index) {
    label.classList.remove("active");
  });
  [].forEach.call(tabPanes, function (pane, index) {
    pane.classList.remove("active");
  });

  // Activate current tab
  e.target.parentNode.classList.add("active");
  var clickedTab = e.target.getAttribute("href");
  document.querySelector(clickedTab).classList.add("active");
}

// Apply event listeners
tabLabels.forEach(function (label, index) {
  label.addEventListener("click", activateTab);
});

// helpers

const regMoney = (item) => {
  return  "₱ " +String(item).replace(/\B(?=(\d{3})+(?!\d))/g, " ") ;
};

const regMoneyMonth = (item) => {
  return "₱ " +String(item).replace(/\B(?=(\d{3})+(?!\d))/g, " ") + "  / per month";
};

// global vars

const step1 = $(".step1");
const step2 = $(".step2");
const step3 = $(".step3");
const step4 = $(".step4");
const sammary = $(".sammary");
const startBtn = $(".js-start-btn");
let selectAccessories = 0;
let selectOption;
let selectMobile;
let selectConditions;
const price = 24650;

step1.hide();
step2.hide();
step3.hide();
step4.hide();
sammary.hide();

startBtn.click(function () {
  step1.show();
  $(this).text("Place Order");

  $("html, body").animate(
    {
      scrollTop: $(".step1").offset().top,
    },
    500
  );

  dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      items: [
        {
          item_name: "Galaxy A5 6/128GB, Graphite, dual Sim",
          item_id: "3161",
          price: 24000,
          item_brand: "Samsung",
          item_category: "Smartphone",
          quantity: 1,
        },
      ],
    },
  });
});

// step 1 block vars

const option1 = $("#option1");
const option2 = $("#option2");
const option3 = $("#option3");
const option4 = $("#option4");

const switcher = $("#form-checkbox");

const optionsLabels = document.querySelectorAll(".option");
const optionsInputs = document.querySelectorAll(".input-option");

// step 2 block vars

const accessory1 = $("#accessory1");
const accessory2 = $("#accessory2");
const accessory3 = $("#accessory3");
const accessory4 = $("#accessory4");

const accessoriesLabels = document.querySelectorAll(".accessory");
const accessoriesInputs = document.querySelectorAll(".input-accessory");

// step 3 block vars

const mobile1 = $("#mobile1");
const mobile2 = $("#mobile2");
const mobile3 = $("#mobile3");
const mobile4 = $("#mobile4");

const mobiliesLabels = document.querySelectorAll(".mobile-item");
const mobiliesInputs = document.querySelectorAll(".input-mobile");

// step 4 block vars

const app1 = $("#condition1");
const app2 = $("#condition2");
const app3 = $("#condition3");
const app4 = $("#condition4");

const appsLabels = document.querySelectorAll(".condition");
const appsInputs = document.querySelectorAll(".input-condition");

// sammary block

const samsungPrice = $(".js-options-price");
const nowPrice = $(".js-now-price");
const laterPrice = $(".js-count-payment");
const accessoriesItems = document.querySelector(".finish-item__wrapper");
const accessoriesItemsCash = document.querySelector(".finish-item__wrapper-cash");
const tarifName = $(".js-mob-tarif-name");
const tarifPrice = $(".js-mob-tarif-price");
const appName = $(".js-condition-name");
const appPrice = $(".js-condition-price");

const appNameCash = $(".js-condition-name-cash");
const appPriceCash = $(".js-condition-price-cash");

const afterYearName = $(".js-after-year-name");
const afterYearPrice = $(".js-after-year-price");

const insuranceName = $(".js-insurance-name");
const insurancePrice = $(".js-insurance-price");
const countPayment = $(".js-count-payment");
const monthPrice = $(".js-month-price");
const smartName = $(".js-smart-name");
const smartPrice = $(".js-smart-price");

// steps opening

$(document).on("click", ".option", function (e) {
  if ($(e.target).hasClass("option-spoiler-button")) {
    e.preventDefault();
    $(this).find(".option-spoiler-button").hide();
    $(this).find(".option-spoiler").toggle();
  } else if ($(e.target).hasClass("close-spoiler")) {
    e.preventDefault();
    $(this).find(".option-spoiler").toggle();
    $(this).find(".option-spoiler").prev().show();
  } else if ($(e.target).hasClass("js-more-info")) {
    $("html, body").animate(
      {
        scrollTop: $(".js-faq").offset().top, // класс объекта к которому приезжаем
      },
      500
    );
  } else {
    optionsInputs.forEach((item) => {
      item.addEventListener("click", (e) => {
        reset();
        step2.show();
        setSamsungPrice(item);
        nowCalculatePrice(item);
        renderAfterYear(item);
        renderInsurance(item);
        renderCountPayment(item);
        renderMonthPrice(item);

        $("html, body").animate(
          {
            scrollTop: $(".step2").offset().top,
          },
          500
        );

        dataLayer.push({
          event: "select_program",
          content: item.getAttribute("data-name"), // переменная, если заселекчено без, то передаем значение without
        });
      });
    });
  }
});

accessoriesInputs.forEach((item) => {
  item.addEventListener("click", () => {
    step3.show();
    calculateAccessories(item);
    renderAccessories(item);
    calcMonthPrice();
    calcAllCash();

    dataLayer.push({
      event: "select_accessories",
      content: item.getAttribute("data-accessory-name"),
    });
  });
});

mobiliesInputs.forEach((item) => {
  item.addEventListener("click", () => {
    step4.show();
    renderMobile(item);
    calcMonthPrice();
    calcAllCash();
    $("html, body").animate(
      {
        scrollTop: $(".step4").offset().top,
      },
      500
    );

    dataLayer.push({
      event: "select_sim",
      content: item.getAttribute("data-tarif"),
    });
  });
});

appsInputs.forEach((item) => {
  item.addEventListener("click", () => {
    sammary.show();
    renderApps(item);
    calcMonthPrice();

    calcAllCash();

    $("html, body").animate(
      {
        scrollTop: $(".sammary").offset().top,
      },
      500
    );

    dataLayer.push({
      event: "select_app_pack",
      content: item.getAttribute("data-condition"),
    });
  });
});

$(document).on("click", ".finish-button", function (e) {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "purchase",
    content_program: "name_of_program",
    content_access: accessoriesName.textContent,
    content_sim: mobileName.textContent,
    content_app_pack: conditionName.textContent,
    ecommerce: {
      transaction_id: "177758",
      affiliation: "Online Store",
      value: "24000.",
      shipping: "0",
      currency: "RUB",
      items: [
        {
          item_name: "Galaxy A5 6/128GB, Graphite, dual Sim",
          item_id: "3161",
          price: 24000,
          item_brand: "Samsung",
          item_category: "Smartphone",
          quantity: 1,
        },
      ],
    },
  });
});

// sammary block logic

const renderMonthPrice = (item) => {
  console.log(item.value);
  if (item.value == "13993") {
    $(".js-acc1-price-24").text("+ ₱ 541 to your monthly payment");
    $(".js-acc2-price-24").text("+ ₱ 55 to your monthly payment");
    $(".js-acc3-price-24").text("+ ₱ 130 to your monthly payment");
    $(".js-condition1-price-24").text("+ ₱ 21");
    $(".js-condition2-price-24").text("+ ₱ 30");
    $(".js-condition3-price-24").text("+ ₱ 34");
  } else {
    $(".js-acc1-price-24").text("+ ₱ 1 082 to your monthly payment");
    $(".js-acc2-price-24").text("+ ₱ 109 to your monthly payment");
    $(".js-acc3-price-24").text("+ ₱ 259 to your monthly payment");
    $(".js-condition1-price-24").text("+ ₱ 42");
    $(".js-condition2-price-24").text("+ ₱ 59");
    $(".js-condition3-price-24").text("+ ₱ 67");
  }
};

$(".noaccessory").click(() => {
  $("#accessory1").prop("checked", false);
  $("#accessory2").prop("checked", false);
  $("#accessory3").prop("checked", false);
  selectAccessories = 0;
});

$("#accessory1, #accessory2, #accessory3").click(() => {
  $("#accessory4").prop("checked", false);
});

const calculateAccessories = (item) => {
  if (item.checked) {
    selectAccessories += Number(item.value);
  } else {
    selectAccessories -= Number(item.value);
  }
  if ($("#option4").prop("checked")) {
    nowPrice.text(regMoney(selectAccessories));
  }
};

const reset = () => {
  $("#accessory1").prop("checked", false);
  $("#accessory2").prop("checked", false);
  $("#accessory3").prop("checked", false);
  $("#accessory4").prop("checked", false);
  selectAccessories = 0;
  nowPrice.text("");
  if (document.querySelector(".acc1")) {
    document.querySelector(".acc1").remove();
  }
  if (document.querySelector(".acc2")) {
    document.querySelector(".acc2").remove();
  }
  if (document.querySelector(".acc3")) {
    document.querySelector(".acc3").remove();
  }

  $("#mobile1").prop("checked", false);
  $("#mobile2").prop("checked", false);
  $("#mobile3").prop("checked", false);
  $("#mobile4").prop("checked", false);

  $("#condition1").prop("checked", false);
  $("#condition2").prop("checked", false);
  $("#condition3").prop("checked", false);
  $("#condition4").prop("checked", false);

  step2.hide();
  step3.hide();
  step4.hide();
  sammary.hide();

  smartName.text("");
  smartPrice.text("");

  appNameCash.text("");
  appPriceCash.text("");

  appName.text("");
  appPrice.text("");
};

$(document).on("click", ".form-checkbox", function (e) {
  reset();
  $("#option4").click();
  step2.show();

  $("html, body").animate(
    {
      scrollTop: $(".step2").offset().top,
    },
    500
  );

  if (document.querySelector(".form-checkbox").checked) {
    $("#option4").attr("value", "19990");
    $(".js-card-pay-price").text("₱ 19 990");
    samsungPrice.text(
      $("#option4")
        .prop("value")
        .replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " "
    );
  } else {
    $("#option4").attr("value", "19990");
    $(".js-card-pay-price").text("₱ 19 990");
    samsungPrice.text(
      $("#option4")
        .prop("value")
        .replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " "
    );
  }
});

const setSamsungPrice = (item) => {
  if (item.value == "1266") {
    samsungPrice.html("<small>₱ 15 192 </small>");
  } else {
    samsungPrice.text(regMoney(item.value));
  }
};

const nowCalculatePrice = (item) => {
  if (item.value == "11994") {
    nowPrice.text(regMoney(item.value));
  }
  if (item.value == "13993") {
    nowPrice.text(regMoney(item.value));
  }
  if (item.value == "1266") {
    nowPrice.text(regMoney(0));
  }

};

// render accessory

const renderAccessories = (item) => {
  const div = document.createElement("div");
  const divName = document.createElement("div");
  const divValue = document.createElement("div");

  if ($("#accessory1").prop("checked")) {
    if (!document.querySelector(".acc1")) {
      div.className = "finish-item acc1";
      divName.className = "finish-text";
      divName.innerText = item.getAttribute("data-accessory-name");
      divValue.className = "finish-value";

      if ($("#option4").prop("checked")) {
        divValue.innerText = regMoney(Number(item.value).toFixed(0));
      }
      if ($("#option1").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option3").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option2").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 2 / 12)).toFixed(0));
      }

      div.append(divName);
      div.append(divValue);
      if ($("#option4").prop("checked")) {
        accessoriesItemsCash.append(div);
      } else {
        accessoriesItems.append(div);
      }
    }
  } else {
    if (document.querySelector(".acc1")) {
      document.querySelector(".acc1").remove();
    }
  }

  if ($("#accessory2").prop("checked")) {
    if (!document.querySelector(".acc2")) {
      div.className = "finish-item acc2";
      divName.className = "finish-text";
      divName.innerText = item.getAttribute("data-accessory-name");
      divValue.className = "finish-value";
      if ($("#option4").prop("checked")) {
        divValue.innerText = regMoney(Number(item.value).toFixed(0));
      }
      if ($("#option1").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option3").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option2").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 2 / 12)).toFixed(0));
      }
      div.append(divName);
      div.append(divValue);
      if ($("#option4").prop("checked")) {
        accessoriesItemsCash.append(div);
      } else {
        accessoriesItems.append(div);
      }
    }
  } else {
    if (document.querySelector(".acc2")) {
      document.querySelector(".acc2").remove();
    }
  }

  if ($("#accessory3").prop("checked")) {
    if (!document.querySelector(".acc3")) {
      div.className = "finish-item acc3";
      divName.className = "finish-text";
      divName.innerText = item.getAttribute("data-accessory-name");
      divValue.className = "finish-value";
      if ($("#option4").prop("checked")) {
        divValue.innerText = regMoney(Number(item.value).toFixed(0));
      }
      if ($("#option1").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option3").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0));
      }
      if ($("#option2").prop("checked")) {
        divValue.innerText = regMoneyMonth(Math.ceil((Number(item.value) / 2 / 12)).toFixed(0));
      }
      div.append(divName);
      div.append(divValue);
      if ($("#option4").prop("checked")) {
        accessoriesItemsCash.append(div);
      } else {
        accessoriesItems.append(div);
      }
    }
  } else {
    if (document.querySelector(".acc3")) {
      document.querySelector(".acc3").remove();
    }
  }
};

const renderMobile = (item) => {
  tarifName.text(item.getAttribute("data-tarif"));
  tarifPrice.text(regMoneyMonth(item.value));
};

const renderApps = (item) => {
  if ($("#option4").prop("checked")) {
    appNameCash.text(item.getAttribute("data-condition"));
    if ($("#option4").prop("checked")) {
      appPriceCash.text(regMoney(Number(item.value).toFixed(0)));
    } else {
      appPriceCash.text(regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0)));
    }
  } else {
    appName.text(item.getAttribute("data-condition"));
    if ($("#option4").prop("checked")) {
      appPrice.text(regMoney(Number(item.value).toFixed(0)));
    } else {
      appPrice.text(regMoneyMonth(Math.ceil((Number(item.value) / 12)).toFixed(0)));
    }
  }
  if ($("#option2").prop("checked")) {
    appPrice.text(regMoneyMonth(Math.ceil((Number(item.value) / 2 / 12)).toFixed(0)));
  }
};

const renderAfterYear = (item) => {
  if (item.getAttribute("data-month") == "12") {
    afterYearName.text("After 1 Year");
    afterYearPrice.text("₱ 7 796  or ₱ 0, if you want to update your smartphone by returning it and getting a new one using our program");
  }

  if (item.getAttribute("data-month") == "24") {
    afterYearName.text("After 2 years");
    afterYearPrice.text("₱ 5 997 or ₱ 0, if you want to update your smartphone by returning it and getting a new one using our program");
  }
};

const renderInsurance = (item) => {
  console.log($("#option4").prop("checked"));
  if ($("#option4").prop("checked")) {
    insuranceName.text("");
    insurancePrice.text("");
  } else {
    insuranceName.text("Smartphone insurance");
    insurancePrice.text(regMoneyMonth(item.getAttribute("data-insurance")));
  }
};

const renderCountPayment = (item) => {
  countPayment.text(item.getAttribute("data-count"));
};

const calcAllCash = () => {
  resultCash = Number(selectOption)  +Number(selectAccessories) + Number(selectConditions);

  if ($("#option4").prop("checked")) {
    nowPrice.text(regMoney(resultCash.toFixed(0)));
  }
};

const calcMonthPrice = () => {
  optionsInputs.forEach((el) => {
    if (el.checked) {
      selectOption = el.value;
    }
  });

  mobiliesInputs.forEach((el) => {
    if (el.checked) {
      selectMobile = el.value;
    }
  });

  appsInputs.forEach((el) => {
    if (el.checked) {
      selectConditions = el.value;
    }
  });

  let resultMonth;

  if (selectOption == "11994") {
    resultMonth = 164 + Math.ceil(Number(selectAccessories) / 12) + Number(selectMobile) + Math.ceil(Number(selectConditions) / 12);

    monthPrice.text(regMoneyMonth(resultMonth.toFixed(0)));
  }
  if (selectOption == "13993") {
    resultMonth = 164 + Math.ceil(Number(selectAccessories) / 24) + Number(selectMobile) + Math.ceil(Number(selectConditions) / 24);

    monthPrice.text(regMoneyMonth(resultMonth.toFixed(0)));
  }
  if (selectOption == "1266") {
    resultMonth =
    Math.ceil(15192 / 12) + 329 + Math.ceil(Number(selectAccessories) / 12) + Number(selectMobile) + Math.ceil(Number(selectConditions) / 12);
    smartName.text("Smartphone");
    smartPrice.text(regMoneyMonth(Math.ceil((15192 / 12)).toFixed(0)));

    monthPrice.text(regMoneyMonth(resultMonth.toFixed(0)));
  }
  if (selectOption == "Smartphone") {
    resultMonth = Number(selectMobile);

    monthPrice.text(regMoneyMonth(resultMonth.toFixed(0)));
  }
  if (selectOption == "Smartphone") {
    resultMonth = Number(selectMobile);

    monthPrice.text(regMoneyMonth(resultMonth.toFixed(0)));
  }
};