{% extends "base.html" %}

{% block body %}
  <main class="container-fluid">
    <h1 class="text-center">Quiz The Word</h1>
    <div class="row justify-content-center tab-content">
      <div id="easy-question" class="col-md col-lg-7 align-content-center question fade tab-pane show active" role="tabpanel">
        <div class="card question-text">
          <h5 id="easy-question">{{ easy.question_text }}</h5>
          {% for answer in easy.answer_list %}
            <button id="{{ easy.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
                    onclick="checkAnswer({{ easy.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
          {% endfor %}
        </div>
      </div>
      <div id="medium-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
        <div class="card question-text">
          <h5 id="medium-question">{{ medium.question_text }}</h5>
          {% for answer in medium.answer_list %}
            <button id="{{ medium.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
                    onclick="checkAnswer({{ medium.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
          {% endfor %}
        </div>
      </div>
      <div id="hard-question" class="col-md col-lg-7 align-content-center question fade tab-pane" role="tabpanel">
        <div class="card question-text">
          <h5 id="hard-question">{{ hard.question_text }}</h5>
          {% for answer in hard.answer_list %}
            <button id="{{ hard.question_id }}-{{ loop.index0 }}" class="btn btn-secondary m-1"
                    onclick="checkAnswer({{ hard.question_id }}, {{ loop.index0 }}, '{{ answer }}')">{{ answer }}</button>
          {% endfor %}
        </div>
      </div>
    </div>

    <ul class="nav nav-pills justify-content-center mt-2" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="pill" data-bs-target="#easy-question"
                type="button" role="tab" aria-controls="easy" aria-selected="true">Easy
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="pill" data-bs-target="#medium-question" type="button"
                role="tab" aria-controls="medium" aria-selected="false">Medium
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#hard-question" type="button"
                role="tab" aria-controls="hard" aria-selected="false">Hard
        </button>
      </li>
    </ul>

  </main>
{% endblock %}

{% block scripts %}
  <script>
      function checkAnswer(question_id, button_index, answer) {
          let loading_spinner = $("<div>")
              .attr("id", "check-answer")
              .addClass("text-center")
              .text("Checking answer")
              .append($("<div>")
                  .addClass("spinner-border thin-border ml-1")
                  .attr("role", "status"));
          $(".question-text:visible").append(loading_spinner);
          $(`button[id*='${question_id}']`).attr("disabled", true);
          $.ajax(`{{ url_for("check_answer") }}?question_id=${question_id}&answer=${answer}`, {
              method: "GET",
              datatype: "json",
              success: (data) => {
                  $("#check-answer").remove();
                  if (data[0] === true) {
                      console.log("answer correct");
                      $("#" + question_id + "-" + button_index).addClass("btn-success");
                  } else {
                      console.log("answer wrong");
                      $("#" + question_id + "-" + button_index).addClass("btn-danger");
                      $(`button[id*='${question_id}']`).each((i, element) => {
                          element = $(element);
                          if (element.text() === data[1]) {
                              element.addClass("btn-success");
                          }
                      })
                  }
              }
          });
      }
  </script>
{% endblock %}