@using NEducation.Content.Texts;

@model NEducation.Models.CheckMiniGameModel
@{
    ViewBag.Title = "MiniGame";
    Layout = "~/Views/Shared/_LayoutMiniGame.cshtml";
}

<div class="main minigame">
    <div class="minigame-container 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 bottom-[0%] left-[0%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_2.png" class="" />
        </div>

        <div class="fixed z-[1] blend-mode bottom-[0%] right-[0px] flex flex-col">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_3.png" class="" />
        </div>

        <div class="fixed z-[1] blend-mode top-[-20%] left-[-30%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_4.png" class="" />
        </div>

        <div class="minigame_content">
            <div class="text-c-1 text-s-36 justify-center top-50">
                @*"ហ្គេមតូច"*@
                @Lang.Tille_minigame
            </div>
            <div class="pb-[10px]">
                <div class="text-c-2 w-full justify-center font-z-10 top-30 bottom-30 text-s-15">
                    @Lang.LetMeKnowYourAnsWers
                    @*"អនុញ្ញាតឱ្យខ្ញុំដឹងពីចម្លើយរបស់អ្នក!"*@
                </div>
            </div>
            <div class="w-full min-h-[200px] flex relative mb-[10px]" id="div_clock" style="display: @(ViewBag.ShowClock ? "block" : "none")">
                <div class="absolute right-[-10px] top-[10px] w-[100%] h-full card-monthly">
                    <div class="px-[30px]">
                        <div class="flex justify-between items-center">
                            <div class="relative">
                                <img src="~/Content/assets/mini_game/assets/images/Clender.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="days" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    @Lang.Days
                                </div>
                            </div>
                            <div class="relative">
                                <img src="~/Content/assets/mini_game/assets/images/Clock.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="hours" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    @Lang.Hours
                                </div>
                            </div>
                            <div class="relative mt-[5px]">
                                <img src="~/Content/assets/mini_game/assets/images/Clock.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="minutes" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    @Lang.Minutes
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center gap-[20px] top-50" id="div_play" style="display: @(ViewBag.ShowPlayButton ? "flex" : "none")">
                <a href="javascript:void(0);" id="playNowButton" style="z-index: 10;">
                    <div class="btn-c-2">
                        <div>
                            <img src="~/Content/assets/mini_game/assets/images/cup_icon.png" />
                        </div>
                        <div class="text-c-1 font-z-18">
                            @Lang.PlayNow
                        </div>
                    </div>
                </a>
            </div>

            <div class="relative content-history">
                <div class="w-full justify-center gap-[1rem] items-center mb-[2px] pt-[10px] relative z-[999]">
                    <a onclick="redirectToRank()">
                        <div class="btn-option active_predict">
                            @Lang.Ranking
                        </div>
                    </a>
                    <a onclick="ruleClick()">
                        <div class="btn-option">
                            @Lang.HowToPlay
                        </div>
                    </a>
                </div>
            </div>
            <div id="minigame-ranking-data-box" class="">
                <div class="ranking-box" id="winner-infomation">
                    <div class="h-full w-full flex justify-center items-center box">
                        <div class="max-w-[350px] w-full min-h-[20px] rounded-[20px] relative p-[10px] box-item">
                            <div class="pt-[35px]">
                                <div class="ranking-box-header">
                                    <div class="flex justify-center items-center pb-1">
                                        <div class="text-c-1">@Lang.ListOfSpecialPrizeWinners</div>
                                    </div>
                                </div>
                                <div class="ranking-data" id="ranking_data"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="minigame-rule-data-box" class="hide" style="border-radius: 0px 24px 24px 24px;">
                <div class="rule-box">
                    <p>1. @Lang.TheMiniGameStartsAt</p>
                    <p>2. @Lang.YouHave15Seconds</p>
                    <p>3. @Lang.EachPersonCanOnly<br /> 4. @Lang.ParticipantsMustBe.</p>
                    <p>5. @Lang.TheMinigameConsists </p>
                    <p>6. @Lang.EachQuestionMustBe.</p>
                    <p>7. @Lang.IfaParticipantAnswers.</p>
                    <p>8. @Lang.Prizes:</p>
                    <p>- @Lang.ThereIsOnlyOnePrizeFor.</p>
                    <p>- @Lang.IfPultipleParticipantsAnswerCorrectly.</p>
                    <p>- @Lang.ResultsWillBeSentToTheParticipants.</p>
                </div>
            </div>

            <!-- Popup container -->
            <div id="popup-container" class="popup-container hidden">
                <div class="popup-content">
                    <!-- Close button -->
                    <button id="close-popup" class="close-popup-button">✕</button>
                    @*<h2>Oops...!</h2>*@
                    <p id="popup-message"></p>
                    <div class="flex justify-center items-center gap-[20px] top-50">
                        <a href="/Home" style="z-index:10">
                            <div class="btn-c-2">
                                <div class="text-c-1 font-z-18 button-box">
                                    @Lang.Home
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        redirectToRank();
        if (checkOPP == "NO_SUB") {
            popupMessageElement.innerText = '@Lang.YouHaven_tRegisteredMEDU'
            showPopup();
        }
    });

    var sysdateString = '@ViewBag.Sysdate';
    var startDateString = '@ViewBag.StartDate';
    var endDateString = '@ViewBag.EndDate';
    var sysdate = new Date(sysdateString);
    var startDate = new Date(startDateString);
    var endDate = new Date(endDateString);

    var mShowClock = '@ViewBag.ShowClock';
    var ShowPlayButton = '@ViewBag.ShowPlayButton';

    var checkOPP = '@ViewBag.checkOPP';

    var countDownDate;

    function showPopup() {
        document.getElementById('popup-container').classList.remove('hidden');
    }

    document.getElementById('close-popup').onclick = function() {
        document.getElementById('popup-container').classList.add('hidden');
    };

    document.getElementById("playNowButton").onclick = function () {
        var popupMessageElement = document.getElementById('popup-message');

        if (checkOPP == "NO_SUB") {
            popupMessageElement.innerText = '@Lang.YouHaven_tRegisteredMEDU'
            showPopup();
        }
        else if (checkOPP == "DA_CHOI") {
             popupMessageElement.innerText = '@Lang.YouHaveOutOfTurnToPlayMinigame';
             showPopup();
        }
        else {

            window.location.href = '@Url.Action("StartPlay", "MiniGame")';
        }
    };
    countDownDate = startDate.getTime();
    if (mShowClock) {
        $("#div_clock").show();
    }
    if (ShowPlayButton) {
        $("#div_play").show();
    }
    //if (isPlay) {
    //    $("#div_clock").hide();
    //    $("#div_play").show();
    //} else {
    //    $("#div_clock").show();
    //    $("#div_play").show();
    //}
    //if (sysdate < startDate) {
    //    countDownDate = startDate.getTime();
    //    $("#div_play").show();
    //    $("#div_clock").show();
    //    //if (isSubscribed == "1" && isPlay) {
    //    //    $("#div_play").show();
    //    //    $("#div_clock").hide();
    //    //} else {
    //    //    $("#div_clock").show();
    //    //    $("#div_play").hide();
    //    //}

    //} else if (sysdate >= startDate && sysdate <= endDate) {
    //    countDownDate = endDate.getTime();
    //    if (isPlay) {
    //        $("#div_play").show();
    //        $("#div_clock").hide();
    //    } else {
    //        $("#div_clock").show();
    //        $("#div_play").hide();
    //    }

    //} else {
    //    $("#div_clock").hide();
    //    $("#div_play").show();
    //}

    if (countDownDate) {
        $("#div_clock").show();
        var x = setInterval(function () {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("days").innerHTML = '0';
                document.getElementById("hours").innerHTML = '0';
                document.getElementById("minutes").innerHTML = '0';
            }
        }, 1000);
    } else {
        $("#div_clock").hide();
    }

    function redirectToRank() {
        document.getElementById('minigame-ranking-data-box').style.display = 'block';
        document.getElementById('minigame-rule-data-box').style.display = 'none';
    }

    function ruleClick() {
        document.getElementById('minigame-ranking-data-box').style.display = 'none';
        document.getElementById('minigame-rule-data-box').style.display = 'block';
    }
</script>