EDU/Website/NEducation/Views/MiniGame/play.cshtml

@using NEducation.Models;
@using NEducation.Controllers;

@model NEducation.Models.GrammarModel
@{
    ViewBag.Title = "MiniGame";
    Layout = "~/Views/Shared/_LayoutMiniGame.cshtml";
    GrammarModel model = Session["model"] as GrammarModel;

    int questionIndex = model.currentQuestionIndex-1;

}
<style>
    .countdown-wrapper {
        display: flex;
        justify-content: center;
    }

    .countdown-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: conic-gradient(#E6871D 100%, transparent 0);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

        .countdown-circle::before {
            content: '';
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
        }

    #countdown {
        position: relative;
        font-size: 1em;
        font-weight: bold;
        z-index: 10;
    }

    .error-message, .summary-message {
        font-size: 1.5em;
        text-align: center;
        color: red;
    }
</style>

<div class="main minigame" id="open_play">
    <div class="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-screen max-h-full z-[99999] backdrop-filter-1">
        <div class="fixed z-[1] w-full blend-mode top-[5%] left-[40%]">
            <div class="countdown-wrapper">
                <div class="countdown-circle">
                    <span id="countdown">@Model.remainTime</span>
                </div>
            </div>
        </div>

        <div class="minigame_content">
            <div>
                <!-- Hidden question container for storing question ID -->
                <div class="question-container" data-question-id="@Model.question.id" hidden></div>
                <div class="text-c-1 text-s-32 justify-center top-100 text-black-color">
                    @if (Model.questions != null && Model.questions.Count > 0)
                    {
                        <text>@NEducation.Content.Texts.Lang.Question @(questionIndex)/@(Model.questions.Count): @NEducation.Content.Texts.Lang.ContentQuestions</text>
                    }
                </div>

                @if (Model.questions != null && Model.questions.Count > 0)
                {
                    <div class="pb-[10px]">
                        <div class="text-c-2 w-full justify-center font-z-10 top-30 bottom-30 text-s-15 text-black-color">
                            @Model.question.content
                        </div>
                    </div>

                    <div class="answer-box">
                        <button onclick="selectAnswer(this, '1')">
                            @Model.question.answer1
                        </button>
                    </div>

                    <div class="answer-box">
                        <button onclick="selectAnswer(this, '2')">
                            @Model.question.answer2
                        </button>
                    </div>

                    <div class="answer-box">
                        <button onclick="selectAnswer(this, '3')">
                            @Model.question.answer3
                        </button>
                    </div>

                    <div class="answer-box">
                        <button onclick="selectAnswer(this, '4')">
                            @Model.question.answer4
                        </button>
                    </div>
                }
                else
                {
                    <div>Không có câu hỏi nào để hiển thị.</div>
                }

                <div class="flex justify-center items-center gap-[20px] top-50">
                    <button onclick="submitAnswer()">
                        <div class="btn-c-2">
                            <div class="text-c-1 font-z-18 button-box" >
                                @NEducation.Content.Texts.Lang.Confirm
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@*<script src="~/Content/assets/mini_game/js/minigame_main.js"></script>*@
<script>
    var totalTime = @UtilsController.questionTimeout;
    let selectedAnswer = null;
    let questionIndex = @questionIndex;
    var countdownNumber = @Model.remainTime;
    const countdownElement = document.getElementById('countdown');
    const countdownCircle = document.querySelector('.countdown-circle');
    let countdownInterval;
    
     startCountdown();
    
    function selectAnswer(button, answer) {
        selectedAnswer = answer;

        const buttons = document.querySelectorAll('.answer-box button');
        buttons.forEach(btn => {
            btn.classList.remove('selected');
        });
        console.log("selectAnswer:" + answer);
        button.classList.add('selected');
    }

    function sendAnswersToServer(answerData) {
        console.log("Sending data:", JSON.stringify(answerData));

        $.ajax({
            url: '/MiniGame/SendAnswer',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(answerData),
            success: function (result) {
                console.log("Server response:", result);
                if (result.error === "0") {
                    if (result.finish === "1") {
                        console.log("Game finished, redirecting to result page...");
                        window.location.href = "/MiniGame/Result?check=1";

                    } else if (result.question) {
                        console.log("Loading next question...");
                        location.reload();
                        startCountdown();
                        updateQuestionUI(result.question);
                        
                    }
                } else if (result.error === "1" || result.error === "2") {
                    console.log("Error occurred, redirecting to result page...");
                    window.location.href = "/MiniGame/Result?check=0";
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX request failed:", status, error);
                $('#open_play').html('<p>Error loading Play.</p>');
            }
        });
    }


    function updateQuestionUI(newQuestion) {
        document.querySelector('.text-c-2').textContent = newQuestion.content;

        document.querySelector('.question-container').setAttribute('data-question-id', newQuestion.id);

        const buttons = document.querySelectorAll('.answer-box button');
        buttons.forEach((btn, index) => {
            btn.textContent = newQuestion[`answer${index + 1}`];
            btn.onclick = () => selectAnswer(btn, index + 1);
        });

        selectedAnswer = null;
        countdownNumber = totalTime; // Reset the countdown for the new question
        startCountdown();
    }

    function stopGame(message) {
        clearInterval(countdownInterval);
        //document.querySelector('.minigame_content').innerHTML = `<div class="error-message">${message}</div>`;
    }

    function showSummary() {
        clearInterval(countdownInterval);
        document.querySelector('.minigame_content').innerHTML = '<div class="summary-message">Congratulations! You have completed 20 questions.</div>';
    }

    function startCountdown() {
        if (countdownNumber <= 0) {
            let questionId = document.querySelector('.question-container').getAttribute('data-question-id');
            let answerData = {
                QUESTION_ID: questionId,
                ANSWER: selectedAnswer
            };
            sendAnswersToServer(answerData);
        } else {

            countdownInterval = setInterval(() => {
                countdownNumber--;
                console.log("countdownNumber:" + countdownNumber);

                if (countdownNumber <= 0) {
                    countdownNumber = 0; // Ensure it doesn't go below 0
                    clearInterval(countdownInterval);
                    let questionId = document.querySelector('.question-container').getAttribute('data-question-id');
                    let answerData = {
                        QUESTION_ID: questionId,
                        ANSWER: selectedAnswer
                    };
                    console.log("countdownNumber <= 0:" + countdownNumber);
                    sendAnswersToServer(answerData);
                }

                countdownElement.textContent = countdownNumber;
                countdownCircle.style.background = `conic-gradient(#E6871D ${360 - ((totalTime - countdownNumber) / totalTime) * 360}deg, lightgray 0)`;

            }, 1000);
        }
    }


    function submitAnswer() {
        if (selectedAnswer) {
            let questionId = document.querySelector('.question-container').getAttribute('data-question-id');
            console.log("selectedAnswer:" + selectedAnswer);

            let answerData = {
                 QUESTION_ID: questionId,
                 ANSWER: selectedAnswer
            };
            console.log("answerData:" + answerData);
            sendAnswersToServer(answerData);
         //answerList.push(answerData);

     } else {
         alert("Please select an answer before submitting!");
     }
    }

</script>