const container = document.getElementById("container");
const loading = document.getElementById("f-loading");
const btnSub = document.getElementById("btn-sub");
const phone = document.getElementById("phone");
const username = document.getElementById("name");
const codmeli = document.getElementById("codmeli");
const errorPhone = document.getElementById("errorPhone");
const errorMeli = document.getElementById("errorMeli");
const errorName = document.getElementById("errorName");
const itemListTable = document.getElementsByClassName("item-table");
const dot = document.getElementsByClassName("dot");
const titleCode = document.getElementById("title-code");
const nameTitle = document.getElementById("nameChange");
let flag = false;
btnSub.style.width = phone.offsetWidth + "px";

window.onload = function () {
  container.style.display = "block";
  loading.style.display = "none";
};

itemListTable[0].addEventListener("click", () => {
  itemListTable[0].classList.add("item-table-select");
  for (let index = 0; index < itemListTable.length; index++) {
    if (
      itemListTable[index].classList.contains("item-table-select") &&
      itemListTable[0] != itemListTable[index]
    ) {
      itemListTable[index].classList.remove("item-table-select");
    }
  }
  dot[0].style.opacity = 1;
  dot[1].style.opacity = 0;
  dot[2].style.opacity = 0;
  dot[3].style.opacity = 0;
  let parantez = "<span>( کدملی )</span>";
  titleCode.innerHTML = " شماره ملی " + parantez;
  nameTitle.innerHTML = "نام و نام خانوادگی";
});
itemListTable[1].addEventListener("click", () => {
  itemListTable[1].classList.add("item-table-select");
  for (let index = 0; index < itemListTable.length; index++) {
    if (
      itemListTable[index].classList.contains("item-table-select") &&
      itemListTable[1] != itemListTable[index]
    ) {
      itemListTable[index].classList.remove("item-table-select");
    }
  }
  dot[0].style.opacity = 0;
  dot[1].style.opacity = 1;
  dot[2].style.opacity = 0;
  dot[3].style.opacity = 0;
  let parantez = "<span>( کد اتباع )</span>";
  titleCode.innerHTML = " شناسه فیدا " + parantez;
  nameTitle.innerHTML = "نام و نام خانوادگی";
});
itemListTable[2].addEventListener("click", () => {
  itemListTable[2].classList.add("item-table-select");
  for (let index = 0; index < itemListTable.length; index++) {
    if (
      itemListTable[index].classList.contains("item-table-select") &&
      itemListTable[2] != itemListTable[index]
    ) {
      itemListTable[index].classList.remove("item-table-select");
    }
  }
  dot[0].style.opacity = 0;
  dot[1].style.opacity = 0;
  dot[2].style.opacity = 1;
  dot[3].style.opacity = 0;
  
});
itemListTable[3].addEventListener("click", () => {
  itemListTable[3].classList.add("item-table-select");
  for (let index = 0; index < itemListTable.length; index++) {
    if (
      itemListTable[index].classList.contains("item-table-select") &&
      itemListTable[3] != itemListTable[index]
    ) {
      itemListTable[index].classList.remove("item-table-select");
    }
  }
  dot[0].style.opacity = 0;
  dot[1].style.opacity = 0;
  dot[2].style.opacity = 0;
  dot[3].style.opacity = 1;

});

username.addEventListener("keypress", (e) => {
  const farsi = /^[\u0600-\u06FF\s]$/;
  if (!farsi.test(String.fromCharCode(e.which))) {
    e.preventDefault();
  }
});

function changeType() {
  if (phone.value.length > 11) {
    phone.value = phone.value.slice(0, 11);
  }
  if (codmeli.value.length > 10) {
    codmeli.value = codmeli.value.slice(0, 10);
  }
  if (
    phone.value.length == "11" &&
    codmeli.value.length == "10" &&
    phone.value[0] + phone.value[1] == "09" &&
    username.value.length > 5
  ) {
    btnSub.setAttribute("type", "submit");
    flag = true;
  } else {
    btnSub.setAttribute("type", "button");
    flag = false;
  }
}

function erorHand() {
  if (phone.value.length != "11" || phone.value[0] + phone.value[1] != "09") {
    errorPhone.style.display = "block";
    btnSub.setAttribute("type", "button");
  } else {
    errorPhone.style.display = "none";
  }

  if (codmeli.value.length != "10") {
    errorMeli.style.display = "block";
    btnSub.setAttribute("type", "button");
  } else {
    errorMeli.style.display = "none";
  }

  if (username.value.length < 5) {
    errorName.style.display = "block";
    btnSub.setAttribute("type", "button");
  } else {
    errorName.style.display = "none";
  }
}

phone.addEventListener("input", changeType);
codmeli.addEventListener("input", changeType);
btnSub.addEventListener("click", erorHand);
