const rechargeOptionsArray = [
{
    "text": "6-Diamantes",
    "price": "30"
  },
{
    "text": "45-Diamantes",
    "price": "220"
  },
{
    "text": "90-Diamantes",
    "price": "435"
  },
{
    "text": "225-Diamantes",
    "price": "1080"
  },
{
    "text": "375-Diamantes",
    "price": "1800"
  },
{
    "text": "900-Diamantes",
    "price": "4320"
  },
{
    "text": "1650-Diamantes",
    "price": "7915"
  },
{
    "text": "3300-Diamantes",
    "price": "15830"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray1 = [
{
    "text": "6-Diamantes",
    "price": "30"
  },
{
    "text": "45-Diamantes",
    "price": "220"
  },
{
    "text": "90-Diamantes",
    "price": "435"
  },
{
    "text": "225-Diamantes",
    "price": "1080"
  },
{
    "text": "375-Diamantes",
    "price": "1800"
  },
{
    "text": "900-Diamantes",
    "price": "4320"
  },
{
    "text": "1650-Diamantes",
    "price": "7915"
  },
{
    "text": "3300-Diamantes",
    "price": "15830"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray2 = [
{
    "text": "6-Diamantes",
    "price": "30"
  },
{
    "text": "45-Diamantes",
    "price": "220"
  },
{
    "text": "90-Diamantes",
    "price": "435"
  },
{
    "text": "225-Diamantes",
    "price": "1080"
  },
{
    "text": "375-Diamantes",
    "price": "1800"
  },
{
    "text": "900-Diamantes",
    "price": "4320"
  },
{
    "text": "1650-Diamantes",
    "price": "7915"
  },
{
    "text": "3300-Diamantes",
    "price": "15830"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray3 = [
{
    "text": "6-Diamantes",
    "price": "30"
  },
{
    "text": "45-Diamantes",
    "price": "220"
  },
{
    "text": "90-Diamantes",
    "price": "435"
  },
{
    "text": "225-Diamantes",
    "price": "1080"
  },
{
    "text": "375-Diamantes",
    "price": "1800"
  },
{
    "text": "900-Diamantes",
    "price": "4320"
  },
{
    "text": "1650-Diamantes",
    "price": "7915"
  },
{
    "text": "3300-Diamantes",
    "price": "15830"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray4 = [
{
    "text": "6-Diamantes",
    "price": "35"
  },
{
    "text": "45-Diamantes",
    "price": "245"
  },
{
    "text": "90-Diamantes",
    "price": "485"
  },
{
    "text": "225-Diamantes",
    "price": "1200"
  },
{
    "text": "375-Diamantes",
    "price": "2000"
  },
{
    "text": "900-Diamantes",
    "price": "4795"
  },
{
    "text": "1650-Diamantes",
    "price": "8785"
  },
{
    "text": "3300-Diamantes",
    "price": "17575"
  },
  {
    "text": "",
    "price": ""
  }
];

const rechargeOptionsArray5 = [
{
    "text": "6-Diamantes",
    "price": "35"
  },
{
    "text": "45-Diamantes",
    "price": "250"
  },
{
    "text": "90-Diamantes",
    "price": "495"
  },
{
    "text": "225-Diamantes",
    "price": "1220"
  },
{
    "text": "375-Diamantes",
    "price": "2035"
  },
{
    "text": "900-Diamantes",
    "price": "4885"
  },
{
    "text": "1650-Diamantes",
    "price": "8945"
  },
{
    "text": "3300-Diamantes",
    "price": "17890"
  },
  {
    "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/hago/compra.php?id=${userId}&recarga=${rechargeOption1}&formapago=${paymentOption}`)
}