const rechargeOptionsArray = [
{
    "text": "14-Tokens",
    "price": "385"
  },
{
    "text": "37-Tokens",
    "price": "965"
  },
{
    "text": "80-Tokens",
    "price": "1925"
  },
{
    "text": "176-Tokens",
    "price": "3835"
  },
{
    "text": "500-Tokens",
    "price": "9585"
  },
{
    "text": "1031-Tokens",
    "price": "19170"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray1 = [
{
    "text": "14-Tokens",
    "price": "385"
  },
{
    "text": "37-Tokens",
    "price": "965"
  },
{
    "text": "80-Tokens",
    "price": "1925"
  },
{
    "text": "176-Tokens",
    "price": "3835"
  },
{
    "text": "500-Tokens",
    "price": "9585"
  },
{
    "text": "1031-Tokens",
    "price": "19170"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray2 = [
{
    "text": "14-Tokens",
    "price": "385"
  },
{
    "text": "37-Tokens",
    "price": "965"
  },
{
    "text": "80-Tokens",
    "price": "1925"
  },
{
    "text": "176-Tokens",
    "price": "3835"
  },
{
    "text": "500-Tokens",
    "price": "9585"
  },
{
    "text": "1031-Tokens",
    "price": "19170"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray3 = [
{
    "text": "14-Tokens",
    "price": "385"
  },
{
    "text": "37-Tokens",
    "price": "965"
  },
{
    "text": "80-Tokens",
    "price": "1925"
  },
{
    "text": "176-Tokens",
    "price": "3835"
  },
{
    "text": "500-Tokens",
    "price": "9585"
  },
{
    "text": "1031-Tokens",
    "price": "19170"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray4 = [
{
    "text": "14-Tokens",
    "price": "430"
  },
{
    "text": "37-Tokens",
    "price": "1075"
  },
{
    "text": "80-Tokens",
    "price": "2140"
  },
{
    "text": "176-Tokens",
    "price": "4260"
  },
{
    "text": "500-Tokens",
    "price": "10640"
  },
{
    "text": "1031-Tokens",
    "price": "21280"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray5 = [
{
    "text": "14-Tokens",
    "price": "435"
  },
{
    "text": "37-Tokens",
    "price": "1090"
  },
{
    "text": "80-Tokens",
    "price": "2175"
  },
{
    "text": "176-Tokens",
    "price": "4335"
  },
{
    "text": "500-Tokens",
    "price": "10835"
  },
{
    "text": "1031-Tokens",
    "price": "21665"
  },
  {
    "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/top-eleven/compra.php?id=${userId}&recarga=${rechargeOption1}&formapago=${paymentOption}`)
}