{% extends "base.html" %}

{% block body %}
<main class="flex-shrink-0">
    <h1 class="title">Quiz The Word</h1>
    <div id="easy-question" class="container-md align-content-center question">
        <div class="card question-text">
            <p id="easy-question">{{ easy.question }}</p>
            <button id="{{ easy.question_id }}-0" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 0, '{{ easy.answer_list[0] }}')">{{ easy.answer_list[0] }}</button>
            <button id="{{ easy.question_id }}-1" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 1, '{{ easy.answer_list[1] }}')">{{ easy.answer_list[1] }}</button>
            <button id="{{ easy.question_id }}-2" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 2, '{{ easy.answer_list[2] }}')">{{ easy.answer_list[2] }}</button>
            <button id="{{ easy.question_id }}-3" class="btn btn-secondary m-1" onclick="checkAnswer({{ easy.question_id }}, 3, '{{ easy.answer_list[3] }}')">{{ easy.answer_list[3] }}</button>
{#            <button class="btn btn-secondary show-answer" onclick="showAnswer()">Show Answer</button>#}
{#            <p id="easy-answer" class="answer">{{ easy.answer }}</p>#}
{#            <div id="easy-bible-verses">{{ easy.addresses }}</div>#}
        </div>
    </div>

    <div class="text-center difficulty">
        <div class="btn-group btn-group-toggle" data-toggle="buttons" onclick="change_difficulty()">
            <label class="btn btn-secondary active">
                <input type="radio" name="difficulty" id="easy" autocomplete="off" value="easy" checked>Easy
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="difficulty" id="medium" autocomplete="off" value="medium">Medium
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="difficulty" id="hard" autocomplete="off" value="hard">Hard
            </label>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script>
    function change_difficulty() {
        let difficulty = $("input[name='difficulty']:checked").val();
        console.log(difficulty);
        $(".question").css("display", "none");
        if (difficulty === "easy") {
            $("#easy-question").css("display", "block");
        } else if (difficulty === "medium") {
            $("#medium-question").css("display", "block");
        } else if (difficulty === "hard") {
            $("#hard-question").css("display", "block");
        }
    }

    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");
                    }
                })
            }
        }
    });
    }

    /*function showAnswer() {
        $(".question:visible").find(".answer").css("display", "block");
        $(".show-answer:visible").css("display", "none");
    }*/
</script>
{% endblock %}