script.js

let genderTouched = false;
let passwordTouched = false;

const form = document.getElementById("registrationForm");
const submitBtn = document.getElementById("submitBtn");

const email = document.getElementById("email");
const emailError = document.getElementById("emailError");

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");
const passwordError = document.getElementById("passwordError");
const confirmPasswordError = document.getElementById("confirmPasswordError");

const strengthBar = document.getElementById("strengthBar");
const strengthText = document.getElementById("strengthText");

const country = document.getElementById("country");
const state = document.getElementById("state");
const city = document.getElementById("city");
const phone = document.getElementById("phone");

const terms = document.getElementById("terms");
const genderError = document.getElementById("genderError");
const formMessage = document.getElementById("formMessage");

/* ---------------- INITIAL UI STATE ---------------- */
strengthText.style.display = "none";
passwordError.style.display = "none";
strengthBar.className = "strength-bar";
genderError.style.display = "none";

/* ---------------- EMAIL VALIDATION ---------------- */
email.addEventListener("input", () => {
  const blockedDomains = ["tempmail.com", "mailinator.com"];
  const domain = email.value.split("@")[1];

  if (!email.value.includes("@") || blockedDomains.includes(domain)) {
    emailError.textContent = "Disposable or invalid email not allowed";
    email.classList.add("input-error");
  } else {
    emailError.textContent = "";
    email.classList.remove("input-error");
  }
});

/* ---------------- PASSWORD STRENGTH ---------------- */
confirmPasswordError.textContent = "";
confirmPassword.classList.remove("input-error", "input-success");
password.addEventListener("input", () => {
  strengthBar.style.display = "block";
  passwordTouched = true;

  if (!password.value) {
    strengthBar.className = "strength-bar";
    strengthText.style.display = "none";
    return;
  }

  strengthText.style.display = "block";

  const val = password.value;

  if (val.length < 6) {
    strengthBar.className = "strength-bar weak";
    strengthText.textContent = "Weak";
    strengthText.style.color = "red";
  } 
  else if (!val.match(/[0-9]/) || !val.match(/[!@#$%^&*]/)) {
    strengthBar.className = "strength-bar medium";
    strengthText.textContent = "Medium";
    strengthText.style.color = "orange";
  } 
  else {
    strengthBar.className = "strength-bar strong";
    strengthText.textContent = "Strong";
    strengthText.style.color = "green";
  }
});

/* ---------------- CONFIRM PASSWORD ---------------- */
confirmPassword.addEventListener("input", () => {
  if (!confirmPassword.value) {
    confirmPasswordError.textContent = "";
    confirmPassword.classList.remove("input-error", "input-success");
    return;
  }

  if (confirmPassword.value !== password.value) {
    confirmPasswordError.textContent = "Passwords do not match";
    confirmPasswordError.style.display = "block";
    confirmPassword.classList.add("input-error");
    confirmPassword.classList.remove("input-success");
  } else {
    confirmPasswordError.textContent = "Passwords match";
    confirmPasswordError.style.display = "block";
    confirmPasswordError.style.color = "var(--success-color)";
    confirmPassword.classList.remove("input-error");
    confirmPassword.classList.add("input-success");
  }
});

/* ---------------- GENDER VALIDATION ---------------- */
function isGenderSelected() {
  return (
    document.getElementById("genderMale").checked ||
    document.getElementById("genderFemale").checked ||
    document.getElementById("genderOther").checked
  );
}

document.querySelectorAll('input[name="gender"]').forEach(radio => {
  radio.addEventListener("change", () => {
    genderTouched = true;
  });
});

/* ---------------- PHONE VALIDATION ---------------- */
phone.addEventListener("input", () => {
  if (country.value === "India" && !phone.value.startsWith("+91")) {
    phone.setCustomValidity("Phone number must start with +91");
  } else {
    phone.setCustomValidity("");
  }
});

/* ---------------- DROPDOWNS ---------------- */

// Country → State → City Data
const countryStateCityData = {
  "India": {
    "Punjab": ["Patiala", "Ludhiana", "Amritsar", "Chandigarh", "Jalandhar"],
    "Maharashtra": ["Mumbai", "Pune", "Nagpur", "Nashik", "Aurangabad"],
    "Karnataka": ["Bangalore", "Mysore", "Hubli", "Mangalore", "Belgaum"],
    "Tamil Nadu": ["Chennai", "Coimbatore", "Madurai", "Tiruchirappalli", "Salem"],
    "Delhi": ["New Delhi", "North Delhi", "South Delhi", "East Delhi", "West Delhi"]
  },
  "United States": {
    "California": ["Los Angeles", "San Francisco", "San Diego", "Sacramento", "San Jose"],
    "New York": ["New York City", "Buffalo", "Rochester", "Albany", "Syracuse"],
    "Texas": ["Houston", "Dallas", "Austin", "San Antonio", "Fort Worth"],
    "Florida": ["Miami", "Orlando", "Tampa", "Jacksonville", "Tallahassee"],
    "Illinois": ["Chicago", "Aurora", "Naperville", "Joliet", "Rockford"]
  },
  "United Kingdom": {
    "England": ["London", "Manchester", "Birmingham", "Liverpool", "Leeds"],
    "Scotland": ["Edinburgh", "Glasgow", "Aberdeen", "Dundee", "Inverness"],
    "Wales": ["Cardiff", "Swansea", "Newport", "Wrexham", "Bangor"],
    "Northern Ireland": ["Belfast", "Derry", "Lisburn", "Newry", "Armagh"]
  },
  "Canada": {
    "Ontario": ["Toronto", "Ottawa", "Hamilton", "London", "Windsor"],
    "Quebec": ["Montreal", "Quebec City", "Laval", "Gatineau", "Longueuil"],
    "British Columbia": ["Vancouver", "Victoria", "Surrey", "Burnaby", "Richmond"],
    "Alberta": ["Calgary", "Edmonton", "Red Deer", "Lethbridge", "St. Albert"]
  },
  "Australia": {
    "New South Wales": ["Sydney", "Newcastle", "Wollongong", "Albury", "Wagga Wagga"],
    "Victoria": ["Melbourne", "Geelong", "Ballarat", "Bendigo", "Latrobe"],
    "Queensland": ["Brisbane", "Gold Coast", "Cairns", "Townsville", "Toowoomba"],
    "Western Australia": ["Perth", "Fremantle", "Bunbury", "Geraldton", "Kalgoorlie"]
  },
  "Germany": {
    "Bavaria": ["Munich", "Nuremberg", "Augsburg", "Regensburg", "Würzburg"],
    "North Rhine-Westphalia": ["Cologne", "Düsseldorf", "Dortmund", "Essen", "Duisburg"],
    "Berlin": ["Berlin"],
    "Hamburg": ["Hamburg"],
    "Baden-Württemberg": ["Stuttgart", "Mannheim", "Karlsruhe", "Freiburg", "Heidelberg"]
  },
  "France": {
    "Île-de-France": ["Paris", "Boulogne-Billancourt", "Saint-Denis", "Argenteuil", "Montreuil"],
    "Provence-Alpes-Côte d'Azur": ["Marseille", "Nice", "Toulon", "Aix-en-Provence", "Cannes"],
    "Auvergne-Rhône-Alpes": ["Lyon", "Grenoble", "Saint-Étienne", "Villeurbanne", "Chambéry"],
    "Nouvelle-Aquitaine": ["Bordeaux", "Limoges", "Poitiers", "La Rochelle", "Pau"]
  },
  "Japan": {
    "Tokyo": ["Tokyo", "Shibuya", "Shinjuku", "Chiyoda", "Minato"],
    "Osaka": ["Osaka", "Sakai", "Higashiosaka", "Hirakata", "Suita"],
    "Kyoto": ["Kyoto", "Uji", "Kameoka", "Joyo", "Muko"],
    "Kanagawa": ["Yokohama", "Kawasaki", "Sagamihara", "Fujisawa", "Yokosuka"]
  },
  "China": {
    "Beijing": ["Beijing", "Chaoyang", "Haidian", "Xicheng", "Dongcheng"],
    "Shanghai": ["Shanghai", "Pudong", "Huangpu", "Xuhui", "Changning"],
    "Guangdong": ["Guangzhou", "Shenzhen", "Dongguan", "Foshan", "Zhuhai"],
    "Jiangsu": ["Nanjing", "Suzhou", "Wuxi", "Changzhou", "Xuzhou"]
  },
  "Brazil": {
    "São Paulo": ["São Paulo", "Guarulhos", "Campinas", "São Bernardo do Campo", "Santo André"],
    "Rio de Janeiro": ["Rio de Janeiro", "Niterói", "Duque de Caxias", "Nova Iguaçu", "São Gonçalo"],
    "Minas Gerais": ["Belo Horizonte", "Uberlândia", "Contagem", "Juiz de Fora", "Betim"],
    "Rio Grande do Sul": ["Porto Alegre", "Caxias do Sul", "Pelotas", "Canoas", "Santa Maria"]
  }
};

// Populate Country dropdown on page load
(function populateCountries() {
  const countries = Object.keys(countryStateCityData).sort();
  country.innerHTML = '<option value="">Select Country</option>';
  countries.forEach(countryName => {
    country.innerHTML += `<option value="${countryName}">${countryName}</option>`;
  });
})();

// Country → State
country.addEventListener("change", () => {
  state.disabled = true;
  city.disabled = true;

  state.innerHTML = '<option value="">Select State</option>';
  city.innerHTML = '<option value="">Select City</option>';

  if (country.value && countryStateCityData[country.value]) {
    state.disabled = false;
    const states = Object.keys(countryStateCityData[country.value]).sort();
    states.forEach(stateName => {
      state.innerHTML += `<option value="${stateName}">${stateName}</option>`;
    });
  }

  // ✅ FIX: revalidate phone after country change
  phone.dispatchEvent(new Event("input"));
});

// State → City
state.addEventListener("change", () => {
  city.innerHTML = '<option value="">Select City</option>';
  city.disabled = true;

  if (country.value && state.value && countryStateCityData[country.value] && countryStateCityData[country.value][state.value]) {
    city.disabled = false;
    const cities = countryStateCityData[country.value][state.value].sort();
    cities.forEach(cityName => {
      city.innerHTML += `<option value="${cityName}">${cityName}</option>`;
    });
  }
});

/* ---------------- FORM VALIDATION ---------------- */
["input", "change"].forEach(eventType => {
  form.addEventListener(eventType, () => {
    if (
      form.checkValidity() &&
      isGenderSelected() &&
      terms.checked &&
      !emailError.textContent &&
      confirmPassword.value === password.value
    ) {
      submitBtn.disabled = false;
    } else {
      submitBtn.disabled = true;
    }
  });
});

/* ---------------- SUBMIT ---------------- */
form.addEventListener("submit", (e) => {
  e.preventDefault();

  genderTouched = true;
  passwordTouched = true;

  if (!form.checkValidity() || !isGenderSelected() || !terms.checked) {
    formMessage.textContent =
      "Please fix the errors highlighted below before submitting the form.";
    formMessage.className = "form-message error";
    formMessage.style.display = "block";
    return;
  }

  formMessage.innerHTML = `
    <strong>Registration Successful!</strong><br/>
    Your profile has been submitted successfully.
  `;
  formMessage.className = "form-message success";
  formMessage.style.display = "block";

  form.reset();
  submitBtn.disabled = true;
});