const rechargeOptionsArray = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray1 = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray2 = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray3 = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray4 = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray5 = [
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "27-Diamantes",
    "price": "0"
  },
{
    "text": "90-Diamantes",
    "price": "0"
  },
{
    "text": "139-Diamantes",
    "price": "0"
  },
{
    "text": "349-Diamantes",
    "price": "0"
  },
{
    "text": "450-Diamantes",
    "price": "0"
  },
{
    "text": "699-Diamantes",
    "price": "0"
  },
{
    "text": "689-Diamantes",
    "price": "0"
  },
{
    "text": "1350-Diamantes",
    "price": "0"
  },
{
    "text": "2758-Diamantes",
    "price": "0"
  },
{
    "text": "3499-Diamantes",
    "price": "0"
  },
{
    "text": "4500-Diamantes",
    "price": "0"
  },
{
    "text": "6999-Diamantes",
    "price": "0"
  },
{
    "text": "6896-Diamantes",
    "price": "0"
  },
{
    "text": "9000-Diamantes",
    "price": "0"
  },
{
    "text": "27586-Diamantes",
    "price": "0"
  },
{
    "text": "45000-Diamantes",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
{
    "text": "",
    "price": "0"
  },
  {
    "text": "",
    "price": ""
  }
];

let menuOpen = false;
var rechargeOption = "";
var paymentOption = "";
var userId = "";
var userEmail = "";
var amount = "";

const allRechargeOptions = document.querySelectorAll(".rechargeOptionDiv");
const allPaymentOptions = document.querySelectorAll(".eachPaymentDiv");

const errorMessage = document.querySelectorAll(".errorMsg");

const userIdInput = document.querySelector(".userIdInput");



const idErrorElement = document.querySelector(".idError");



const rechargeAmountElements = document.querySelectorAll(".rechargeAmt");
const rechargeAmountElements1 = document.querySelectorAll(".rechargeAmt1");
const rechargeAmountElements2 = document.querySelectorAll(".rechargeAmt2");
const rechargeAmountElements3 = document.querySelectorAll(".rechargeAmt3");
const rechargeAmountElements4 = document.querySelectorAll(".rechargeAmt4");
const rechargeAmountElements5 = document.querySelectorAll(".rechargeAmt5");


allRechargeOptions.forEach((option) => {
  option.addEventListener("click", function(event) {
    // remove selected class from all elements
    [].forEach.call(allRechargeOptions, function(el) {
      el.classList.remove("rechargeOptionDivSelected");
    });
    

    const idValue = option.getAttribute("id");







amount = rechargeOptionsArray.filter((recharge) => recharge.text === idValue)[0].price;
amount1 = rechargeOptionsArray1.filter((recharge) => recharge.text === idValue)[0].price;
amount2 = rechargeOptionsArray2.filter((recharge) => recharge.text === idValue)[0].price;
amount3 = rechargeOptionsArray3.filter((recharge) => recharge.text === idValue)[0].price;
amount4 = rechargeOptionsArray4.filter((recharge) => recharge.text === idValue)[0].price;
amount5 = rechargeOptionsArray5.filter((recharge) => recharge.text === idValue)[0].price;


 rechargeAmountElements.forEach(element => {
      element.innerHTML = amount;
    });

 rechargeAmountElements1.forEach(element => {
      element.innerHTML = amount1;
    });

 rechargeAmountElements2.forEach(element => {
      element.innerHTML = amount2;
    });

 rechargeAmountElements3.forEach(element => {
      element.innerHTML = amount3;
    });

 rechargeAmountElements4.forEach(element => {
      element.innerHTML = amount4;
    });

 rechargeAmountElements5.forEach(element => {
      element.innerHTML = amount5;
    });














    document.getElementById(idValue).classList.add("rechargeOptionDivSelected");
    rechargeOption1 = idValue;



  });
});

allPaymentOptions.forEach((option) => {
  option.addEventListener("click", function(event) {
    // remove selected class from all elements
    [].forEach.call(allPaymentOptions, function(el) {
      el.classList.remove("selectedPaymentDiv");
      el.querySelector(".paymentSubtext").style.display = "none";
    });
    
    const idValue = option.getAttribute("id");
    paymentOption = idValue;
    document.getElementById(idValue).classList.add("selectedPaymentDiv");
    document.getElementById(idValue).querySelector(".paymentSubtext").style.display = "block";
    rechargeOption = idValue;


    




  });
});

function handleBuyButton() {




//////////////////////////////////////////////////////////////////////





const idErrorElement = document.querySelector(".idError");
/////////////////////////////////////////////////////////////////////////







  userId = userIdInput.value;







  const idBlock = document.getElementById("userIdBlock");



  if(!userId) {
    idErrorElement.style.display = "block";
    idBlock.scrollIntoView();
    return;
  }else {
    idErrorElement.style.display = "none";
  }





  

  window.open(`https://shop.evirnet.ar/nimo-tv/compra.php?id=${userId}&recarga=${rechargeOption1}&formapago=${paymentOption}`)
}