@model NEducation.Models.WinnerMiniGameModel

<div class="body_first">
    <div class="container">
        <h1>MINIGAME</h1>
        <p>Let me know your answers!</p>
        <button class="play-now" onclick="redirectToGame()">PLAY NOW</button>
        <div class="tabs">
            <button class="tab" onclick="redirectToRank()">RANKING</button>
            <button class="tab" onclick="showHowToPlay()">HOW TO PLAY</button>
        </div>

        <!-- Placeholder for ranking content -->
        <div id="rankingContent"></div>
        <div id="howToPlayContent" style="display: none;">
            <div class="container_howtoplay">
                <ol>
                    <li>The mini-game starts at 10:00 AM every Sunday.</li>
                    <li>You have 15 seconds to think and give your answer.</li>
                    <li>Each person can only participate in the minigame once per day. If there is a system error during the minigame, the participant cannot play again, and it will be counted as one play.</li>
                    <li>Participants must be subscribers of the service.</li>
                    <li>The minigame consists of 20 questions.</li>
                    <li>Each question must be answered within 15 seconds.</li>
                    <li>If a participant answers incorrectly, the game will immediately end, and they will not be able to play again.</li>
                    <li>
                        Prizes:
                        <ul>
                            <li>There is only one prize for the participant who correctly answers all 20 questions the fastest. The prize is $20 added to Emoney.</li>
                            <li>If multiple participants answer correctly with the same time, the prize money will be evenly divided among them.</li>
                        </ul>
                    </li>
                    <li>Results will be sent to the participants via SMS at 09:00 AM on the following Monday.</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<style>
    .body_first {
        font-family: Arial, sans-serif;
        background: #D6641F;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .container {
        text-align: center;
        background: #D6641F;
        border-radius: 10px;
    }

    h1 {
        color: white;
    }

    button.play-now {
        background-color: #ff6347;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }

    button.play-now:hover {
        background-color: #ff4500;
    }

    .tabs {
        margin-top: 20px;
    }

    button.tab {
        background-color: #f0f0f0;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        border-radius: 5px;
    }

    button.tab:hover {
        background-color: #dcdcdc;
    }

    #rankingContent, #howToPlayContent {
        margin-top: 20px;
    }

    .container_howtoplay {
        font-family: Arial, sans-serif;
        background-color: #D6641F;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        text-align: left;
    }

        .container_howtoplay ol {
            padding-left: 20px;
            margin: 0;
            list-style-position: outside;
            line-height: 1.6; /* Tăng line-height để dễ đọc hơn */
        }

        .container_howtoplay li {
            margin-bottom: 10px;
            color: #ffffff;
            font-size: 14px; /* Đảm bảo kích thước chữ hợp lý */
        }

        .container_howtoplay ul {
            padding-left: 40px;
            list-style-type: disc;
            margin: 0;
            list-style-position: outside;
        }

            .container_howtoplay ul li {
                margin-bottom: 5px;
                font-size: 14px; /* Đảm bảo kích thước chữ hợp lý */
            }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
function redirectToGame() {
    window.location.href = '@Url.Action("Play", "MiniGame")';
}

function redirectToRank() {
    $.ajax({
        url: '@Url.Action("GetRanking", "MiniGame")',
        type: 'GET',
        success: function (result) {
            $('#rankingContent').html(result);
            $('#rankingContent').show();
            $('#howToPlayContent').hide();
        },
        error: function () {
            $('#rankingContent').html('<p>Error loading ranking.</p>');
        }
    });
}

    function showHowToPlay() {
        $('#rankingContent').hide();
        $('#howToPlayContent').css('display', 'block'); // Đảm bảo hiển thị đầy đủ
    }
</script>