jQuery(document).ready(function ($) {
  const tickSVG = `
  <svg class="svg-inline--fa fa-check fa-w-16 fa-lg mt-2 mb-2" style="width:20px;height:20px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#56cc9d">
      <path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-12.497-12.497-12.497-32.758 0-45.255l45.255-45.255c12.497-12.497 32.758-12.497 45.255 0L192 312.69l264.092-264.092c12.497-12.497 32.758-12.497 45.255 0l45.255 45.255c12.497 12.497 12.497 32.758 0 45.255l-341.347 341.347c-12.497 12.497-32.758 12.497-45.255 0z"></path>
  </svg>
`;

  const xSVG = `
  <svg class="svg-inline--fa fa-times fa-w-10 fa-lg mt-2 mb-2" style="width:20px;height:20px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" color="rgb(255, 99, 71)">
      <path fill="currentColor" d="M310.6 361.4c12.5-12.5 12.5-32.8 0-45.3L233.4 256l77.2-77.1c12.5-12.5 12.5-32.8 0-45.3l-22.6-22.6c-12.5-12.5-32.8-12.5-45.3 0L160 188.7 82.8 111.6c-12.5-12.5-32.8-12.5-45.3 0L15 134.2c-12.5 12.5-12.5 32.8 0 45.3L92.2 256 15 333.1c-12.5 12.5-12.5 32.8 0 45.3l22.6 22.6c12.5 12.5 32.8 12.5 45.3 0L160 323.3l77.2 77.1c12.5 12.5 32.8 12.5 45.3 0l22.6-22.6z"></path>
  </svg>
`;

  $("#restart-quiz").click(function () {
    localStorage.setItem("correct", 0);
    location.reload();
  });

  function getIsExamMode() {
    try {
      const examModeInput = $("#examModeHiddenInput");

      if (examModeInput) {
        return examModeInput.val() === "true";
      }
    } catch (error) {
      console.error("Error getting exam mode", error);
    }
    return false;
  }

  $("#btn-next").click(function () {
    $("#btn-next").addClass("disabled");
    $("#loading-spinner").removeClass("hide-content");
  });

  $(".complete-quiz").click(function () {
    let correct = localStorage.getItem("correct");
    let count = parseInt($("#count").val());

    $("#attained-text").text("You have completed " + correct + " / " + count);

    var modal = new bootstrap.Modal(document.getElementById("staticBackdrop"));
    modal.show();

    document.cookie.split(";").forEach(function (c) {
      document.cookie = c
        .replace(/^ +/, "")
        .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
    });
  });

  $(".question-row").click(function (event) {
    if ($(this).hasClass("disabled")) {
      return;
    }

    const isExamMode = getIsExamMode();
    const isMultipleChoiceMode = !isExamMode;

    let selection = event.target.id
      .replace("radio-row-", "")
      .replace("radio-col2-", "")
      .replace("radio-svg-", "")
      .replace("radio-path-", "")
      .replace("radio-col10-", "")
      .replace("radio-p-", "");
    let choice = parseInt(selection);

    let answer = parseInt($("#answer").val());

    if (choice === answer) {
      let correct = localStorage.getItem("correct");

      if (correct == null || correct == undefined || correct.length < 1) {
        correct = 0;
      }

      correct = parseInt(correct) + 1;

      localStorage.setItem("correct", correct);

      if (isMultipleChoiceMode) {
        $("#radio-row-" + answer).addClass("animate__animated animate__tada");
        $("#radio-svg-" + choice).replaceWith(tickSVG);
      }
    } else {
      if (isMultipleChoiceMode) {
        $("#radio-row-" + selection).addClass(
          "animate__animated animate__headShake"
        );
        $("#radio-svg-" + choice).replaceWith(xSVG);
        $("#explanation-div").addClass("animate__animated animate__flash");
      }
    }

    if (isMultipleChoiceMode) {
      $("#radio-row-" + answer).removeClass("default-question-row");

      $(".default-question-row").css({
        "border-color": "#FF6347",
        "background-color": "rgba(243, 166, 131, 0.3)",
      });
      $("#radio-row-" + answer).addClass("correct-question-row");

      $("#explanation-div").removeClass("explanation-hide");
    } else {
      $("#radio-row-" + choice).addClass("exam-mode-selected-answer-row ");
    }

    for (let i = 0; i <= 10; i++) {
      $(`#radio-row-${i}`).removeClass("question-row");
      $(`#radio-row-${i}`).addClass("disabled");
    }

    $(".question-row").addClass("disabled");
    $(".question-row").off("click");

    $("#btn-next").removeClass("disabled");
  });
});