const inputs = Array.from(document.querySelectorAll(`input[type="text"]`));
const submits = Array.from(document.querySelectorAll(`input[type="submit"]`));
const alert = document.getElementById("alert");
const svg = Array.from(document.querySelectorAll(".carousel-caption svg"));

const answers = [
  [
    "ΠΑΡΑΓΩΓΗΣ",
    "ΧΑΡΤΗΣ ΠΑΡΑΓΩΓΗΣ",
    "ΓΕΩΡΓΙΚΟΣ ΧΑΡΤΗΣ ΠΑΡΑΓΩΓΗΣ",
    "ΓΕΩΡΓΙΚΗΣ ΠΑΡΑΓΩΓΗΣ",
    "ΧΑΡΤΗΣ ΑΓΡΟΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ",
    "ΑΓΡΟΤΙΚΗΣ ΠΑΡΑΓΩΓΗΣ",
  ],
  [
    "ΒΡΟΧΟΠΤΩΣΗΣ",
    "ΧΑΡΤΗΣ ΒΡΟΧΟΠΤΩΣΗΣ",
    "ΜΕΣΗΣ ΕΤΗΣΙΑΣ ΒΡΟΧΟΠΤΩΣΗΣ",
    "ΧΑΡΤΗΣ ΜΕΣΗΣ ΕΤΗΣΙΑΣ ΒΡΟΧΟΠΤΩΣΗΣ",
    "ΜΕΣΟ ΕΤΗΣΙΟ ΥΨΟΣ ΒΡΟΧΗΣ",
  ],
  [
    "ΤΟΥΡΙΣΤΙΚΟΣ",
    "ΤΟΥΡΙΣΤΙΚΟΣ ΧΑΡΤΗΣ",
    "ΟΔΙΚΟΣ",
    "ΟΔΙΚΟΣ ΧΑΡΤΗΣ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΩΝ ΠΡΟΟΡΙΣΜΩΝ",
    "ΤΟΥΡΙΣΤΙΚΩΝ ΠΡΟΟΡΙΣΜΩΝ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΩΝ ΠΕΡΙΟΧΩΝ",
    "ΤΟΥΡΙΣΤΙΚΩΝ ΠΕΡΙΟΧΩΝ",
    "ΧΑΡΤΗΣ ΑΞΙΟΘΕΑΤΩΝ",
    "ΑΞΙΟΘΕΑΤΩΝ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΩΝ ΑΞΙΟΘΕΑΤΩΝ",
    "ΤΟΥΡΙΣΤΙΚΩΝ ΑΞΙΟΘΕΑΤΩΝ",
    "ΧΑΡΤΗΣ ΤΑΞΙΔΙΩΤΙΚΩΝ ΠΡΟΟΡΙΣΜΩΝ",
    "ΤΑΞΙΔΙΩΤΙΚΩΝ ΠΡΟΟΡΙΣΜΩΝ",
    "ΧΑΡΤΗΣ ΤΑΞΙΔΙΩΤΙΚΩΝ ΠΕΡΙΟΧΩΝ",
    "ΤΑΞΙΔΙΩΤΙΚΩΝ ΠΕΡΙΟΧΩΝ",
    "ΤΟΥΡΙΣΤΙΚΟΣ ΟΔΗΓΟΣ ΧΑΡΤΗΣ",
    "ΤΟΥΡΙΣΤΙΚΟΣ ΟΔΗΓΟΣ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΟΥ ΟΔΗΓΟΥ",
    "ΤΟΥΡΙΣΤΙΚΟΥ ΟΔΗΓΟΥ",
    "ΧΑΡΤΗΣ ΠΡΟΟΡΙΣΜΩΝ ΔΙΑΚΟΠΩΝ",
    "ΠΡΟΟΡΙΣΜΩΝ ΔΙΑΚΟΠΩΝ",
    "ΧΑΡΤΗΣ ΑΞΙΟΘΕΑΤΩΝ",
    "ΑΞΙΟΘΕΑΤΩΝ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΗΣ ΔΙΑΔΡΟΜΗΣ",
    "ΤΟΥΡΙΣΤΙΚΗΣ ΔΙΑΔΡΟΜΗΣ",
    "ΧΑΡΤΗΣ ΤΑΞΙΔΙΩΤΙΚΗΣ ΔΙΑΔΡΟΜΗΣ",
    "ΤΑΞΙΔΙΩΤΙΚΗΣ ΔΙΑΔΡΟΜΗΣ",
    "ΧΑΡΤΗΣ ΤΟΥΡΙΣΤΙΚΩΝ ΕΚΔΡΟΜΩΝ",
    "ΤΟΥΡΙΣΤΙΚΩΝ ΕΚΔΡΟΜΩΝ",
  ],
];
submits.forEach((submit, index) => {
  submit.addEventListener("click", () => {
    if (inputs[index].value == "") {
      $(".answer-" + index)
        .empty()
        .html('<div class="error">Δεν έχεις απαντήσει.</div>')
        .removeClass("d-none");
      setTimeout(() => {
        $(".answer-" + index).addClass("d-none");
      }, 3000);
    } else {
      let userInput = inputs[index].value
        .toUpperCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "");
      if (answers[index].includes(userInput)) {
        submit.value = "✓ Μπράβο!";
        submit.classList.add("btn-success");
        submit.classList.remove("btn-primary");
        svg[index].style.visibility = "visible";
        alert.innerHTML = "Μπράβο, το βρήκες";
        $(".answer-" + index)
          .empty()
          .html('<div class="success">Μπράβο! Η απάντηση είναι σωστή!</div>')
          .removeClass("d-none");
        setTimeout(() => {
          $("#carousel").carousel("next");
        }, 900);
      } else {
        submit.value = `✕ Λάθος!`;
        submit.classList.add("btn-danger");
        submit.classList.remove("btn-primary");
        submit.style.pointerEvents = "none";
        submit.disabled = true;
        alert.innerHTML = "Λάθος, προσπάθησε ξανά";
        $(".answer-" + index)
          .empty()
          .html(
            '<div class="error">Λάθος. Η σωστή απάντηση είναι "' +
              answers[index][0] +
              '"</div>',
          )
          .removeClass("d-none");

        setTimeout(() => {
          alert.innerHTML = "";
          // submit.style.backgroundColor = 'rgb(0, 89, 255)'
          // submit.style.pointerEvents = 'auto';
        }, 3000);
      }
    }
  });
});
