<div class="flag-wrapper020" id="flagSlider020">
  <div class="flag-slider" id="flagSliderContent020" style="transform: translateX(-50%); transition: transform 0.3s;">
  <img class="flag020" src="https://flagcdn.com/w320/ru.png" alt="RU">
  <img class="flag020" src="https://flagcdn.com/w320/gb.png" alt="EN">
  </div>
  <input type="checkbox" id="geoKeys_inp020" style="display:none;">
</div>

<script>
var isLocked = false;
var lastLanguage = null;
var tooltipTimeout020 = null;

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector("#geoKeys_inp020").checked = false; // ნაგულისხმევად ინგლისური
  toggleLanguage020();

  const tooltip = document.getElementById("customTooltip020");
  if (tooltip) {
  tooltip.classList.remove("show");
  tooltip.textContent = "";
  }
});

function convertToRussian020(t, e) {
  var element = document.querySelector("#geoKeys_inp020");
  var translations = {
  a: "а", A: "А", b: "б", B: "Б", v: "в", V: "В", g: "г", G: "Г",
  d: "д", D: "Д", e: "е", E: "Е", yo: "ё", Yo: "Ё", zh: "ж", Zh: "Ж",
  z: "з", Z: "З", i: "и", I: "И", j: "й", J: "Й", k: "к", K: "К",
  l: "л", L: "Л", m: "м", M: "М", n: "н", N: "Н", o: "о", O: "О",
  p: "п", P: "П", r: "р", R: "Р", s: "с", S: "С", t: "т", T: "Т",
  u: "у", U: "У", f: "ф", F: "Ф", h: "х", H: "Х", c: "ц", C: "Ц",
  ch: "ч", Ch: "Ч", sh: "ш", Sh: "Ш", shch: "щ", Shch: "Щ", y: "ы", Y: "Ы",
  ye: "э", Ye: "Э", yu: "ю", Yu: "Ю", ya: "я", Ya: "Я"
  };

  var e = e || event;
  var charCode = e.which || e.keyCode;
  var charStr = String.fromCharCode(charCode);
  if (charCode === 8) return true;
  if (charCode === 96) return false;
  if (translations.hasOwnProperty(charStr) && element.checked) {
  var start = t.selectionStart;
  var end = t.selectionEnd;
  t.value = t.value.substring(0, start) + translations[charStr] + t.value.substring(end);
  t.selectionStart = t.selectionEnd = start + 1;
  return false;
  }
  return true;
}

function toggleLanguage020() {
  var element = document.querySelector("#geoKeys_inp020");
  var flagSlider = document.querySelector("#flagSliderContent020");

  if (element.checked) {
  lastLanguage = 'russian';
  flagSlider.style.transform = "translateX(0%)";
  } else {
  lastLanguage = 'english';
  flagSlider.style.transform = "translateX(-50%)";
  }
}

function showTooltip020(text, autoHide = false) {
  clearTimeout(tooltipTimeout020);
  const tooltip = document.getElementById("customTooltip020");
  const target = document.getElementById("flagSlider020");
  if (!tooltip || !target) return;

  tooltip.textContent = text;
  tooltip.classList.add("show");

  const rect = target.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

  const top = rect.top + scrollTop - tooltip.offsetHeight - 10;
  const left = rect.left + scrollLeft + rect.width / 2 - tooltip.offsetWidth / 2;

  tooltip.style.top = `${top}px`;
  tooltip.style.left = `${left}px`;

  if (autoHide) {
  tooltipTimeout020 = setTimeout(() => {
  hideTooltip020();
  }, 1500);
  }
}

function hideTooltip020() {
  const tooltip = document.getElementById("customTooltip020");
  if (!tooltip) return;
  tooltip.classList.remove("show");
  tooltip.textContent = "";
}

const flagSlider020 = document.querySelector("#flagSlider020");

if (flagSlider020) {
  flagSlider020.addEventListener("click", function () {
  if (!isLocked) {
  const element = document.querySelector("#geoKeys_inp020");
  element.checked = !element.checked;
  toggleLanguage020();

  const text = element.checked
  ? "Выключить русскую клавиатуру"
  : "Включить русскую клавиатуру";
  showTooltip020(text);

  isLocked = true;
  setTimeout(() => {
  isLocked = false;
  }, 200);
  }
  });

  flagSlider020.addEventListener("mouseenter", function () {
  const element = document.querySelector("#geoKeys_inp020");
  const text = element.checked
  ? "Выключить русскую клавиатуру"
  : "Включить русскую клавиатуру";
  showTooltip020(text);
  });

  flagSlider020.addEventListener("mouseleave", function () {
  hideTooltip020();
  });
}

$(document).ready(function () {
  $("[onkeypress*=convertToRussian020]").keypress(function (e) {
  if (e.which == 96) {
  e.preventDefault();
  if (isLocked) return;

  const element = document.querySelector("#geoKeys_inp020");
  element.checked = !element.checked;
  toggleLanguage020();

  const text = element.checked
  ? "Выключить русскую клавиатуру"
  : "Включить русскую клавиатуру";
  showTooltip020(text, true);

  isLocked = true;
  setTimeout(() => {
  isLocked = false;
  }, 300);
  }
  });
});
</script>