THUTHACH/WebChallenge/WebChallenge/Views/Home/Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}
@using WebChallenge.Extensions
@using WebChallenge.Controllers

@{
    UserInfo userInfo = Context.Session.GetComplexData<UserInfo>("userInfo");
    string isdn = userInfo.msisdn.Substring(3);
}

<div class="main-content logo-background glass-background h-dvh relative z-0">
    <div class="h-full">
        <div class="h-full flex flex-col">
            <div class="overflow-auto flex-grow-1 relative z-10 h-full flex flex-col">
                <div class="mt-4 mx-4 px-1 rounded-3xl">
                    <div class="flex justify-between">
                        <button id="exitBtn" onclick="showModal('exitModal')"
                                class="w-10 h-10 rounded-full flex justify-center items-center bg-[#F20] border border-white">
                            <img src="../assets/icons/exit.svg" alt="exit" />
                        </button>
                        <a href="/Home/Setting"
                           class="w-10 h-10 rounded-full flex justify-center items-center bg-[#2EA929] border border-white">
                            <img src="../assets/icons/setting.svg" alt="setting" />
                        </a>
                    </div>
                </div>

                <div class="flex flex-col flex-grow justify-center">
                    <div class="flex flex-col items-center gap-[5px] justify-center -mt-1 h-full max-h-[175px]">
                        <img src="../assets/icons/logo.svg" alt="movitel_challenges.png" class="max-w-[40px] max-h-[45px]" />
                        <img src="../assets/images/movitel_challenges.png" alt="movitel_challenges.png"
                             class="max-w-[14.125rem] max-h-[7.5625rem]" />
                    </div>
                    @if (userInfo.isactive == "0")
                    {
                        <div class="flex justify-between pt-[2px]">
                            <div onclick="register('DAILY')"
                                 class="text-white uppercase relative z-10 h-[55px] w-[147px] hover:cursor-pointer pulse-animation">
                                <div class="absolute w-full h-full z-0">
                                    <img src="../assets/images/image_1.png" alt="image 1" class="w-full"
                                         style="height: calc(100% + 11px)">
                                </div>
                                <div class="relative z-10 h-full flex flex-col justify-end pl-2 pb-[3px]">
                                    <p class="text-[2rem] italic font-black leading-none">@Lang.Daily</p>
                                    <p class="text-[0.6875rem] italic font-black leading-none flex items-center gap-2">
                                        @Lang.package <img src="../assets/icons/arrow-to-right.svg" alt="arrow" />
                                    </p>
                                </div>
                            </div>
                            <div onclick="register('WEEKLY')"
                                 class="text-white uppercase relative z-10 h-[55px] w-[147px] hover:cursor-pointer pulse-animation">
                                <div class="absolute w-full h-full z-0">
                                    <img src="../assets/images/image_3.png" alt="image 1" class="w-full"
                                         style="height: calc(100% + 11px)">
                                </div>
                                <div class="relative z-10 h-full flex flex-col justify-end pr-2 pb-[3px]">
                                    <p class="text-[1.5625rem] italic font-black leading-none text-end">@Lang.Weekly</p>
                                    <p class="text-[0.6875rem] italic font-black leading-none flex items-center justify-end gap-2">
                                        <img src="../assets/icons/arrow-to-left.svg" alt="arrow" class="translate-y-[180deg]" />
                                        @Lang.package
                                    </p>
                                </div>
                            </div>
                        </div>
                    }

                    <div class="mt-[2.31rem] flex flex-col gap-5 items-center">
                        @if (userInfo.remain_turn > 0)
                        {
                            <a href="/Home/CheckPlay"
                               class="play-button max-w-[17.375rem] w-full py-5 text-[#5A5A5A] text-[2.5rem] leading-[2.025rem] font-Alatsi text-center pulse-animation">
                                @Lang.Play
                            </a>
                        }
                        <a href="/Home/BuyTurn"
                           class="max-w-[17.375rem] w-full py-1 px-[0.625rem] rounded-[1.25rem] border border-white bg-1 font-Alatsi text-white text-2xl text-center pulse-animation">
                            @Lang.BuyTurn
                        </a>
                    </div>

                    <div class="mb-[2.07rem]">
                        <div class="flex justify-center items-center relative mt-10">
                            <img src="../assets/icons/arrow_1.svg" alt="arrow 1"
                                 class="absolute left-0 w-[81.7px] h-[129.2px] z-10" />
                            <a href="/Home/Ranking" class="relative w-full h-full">
                                <img src="../assets/images/Group-35.png" alt="arrow 2"
                                     class="z-0 overflow-hidden absolute top-0 h-full w-full" />
                                <p class="relative w-full text-center uppercase text-white font-Alatsi text-[2rem] font-normal py-[0.53rem] px-[0.625rem] z-10 pulse-animation">
                                    @Lang.RankingCoin
                                </p>
                            </a>
                            <img src="../assets/icons/arrow_2.svg" alt="arrow 2"
                                 class="absolute right-0 w-[81.7px] h-[129.2px] overflow-hidden" />
                        </div>

                        <div class="mt-[1.38rem] px-16">
                            <div class="flex items-center gap-3">
                                <img src="../assets/icons/coin.svg" alt="icons" />
                                <div class="flex justify-between flex-grow">
                                    <p class="text-white text-2xl">@Lang.MyCoin</p>
                                    <p class="text-[#FDB514] text-end font-black text-2xl">@userInfo.score</p>
                                </div>
                            </div>
                            <hr class="my-3 h-[0.5px]" />
                            <div class="flex items-center gap-3">
                                <img src="../assets/icons/start-fill.svg" alt="icons" />
                                <div class="flex justify-between flex-grow">
                                    <p class="text-white text-2xl">@Lang.turns</p>
                                    <p class="text-[#FDB514] text-end font-black text-2xl" id="remainTurn">@userInfo.remain_turn</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @Html.Partial("_Navigation")
</div>


@section Scripts {
    <script>

        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }
            return false;
        };

        //function hideModal(modalName) {
        //    $("#" + modalName).modal('hide');
        //}
        //function showModal(id) {
        //    $("#" + id).modal('show');
        //}


        $(document).ready(function () {
            var gameOver = getUrlParameter("gameover");
            var stage = getUrlParameter("stage");
            if (gameOver == '1' && stage != null && stage != '0') {
                // show game over & score
                $("#challengeOver").html(stage);
                showModal('dialogGameOver');
            }
        });


        function homepage() {
            location.href = "/Home/Index";
        }
                //$(".play-now").click(function () {
                //    // start play
                //});

                //$(".btn-register").click(function () {
                //    //showModal('confirm-otp');
                //});

                //function checkPlay() {
                //    let remainTurn = parseInt($("#remainTurn").html());
                //    if (remainTurn <= 0) {
                //        // show dialog
                //        $("#dialog-failed-message").html('Lang.OutOfTurn');
                //        showModal("failed-register");
                //    } else {
                //        // send check play
                //        $.ajax({
                //            url: "/Home/CheckPlay",
                //            data: {
                //            },
                //            type: "POST",
                //            success: function (data) {
                //                if (data.error == "0") {
                //                    // redirect to play
                //                    location.href = data.href;
                //                } else {
                //                    // show dialog
                //                    $("#dialog-info-message").html(data.content);
                //                    showModal("dialog-info");
                //                }
                //            },
                //            error: function (data) {
                //                console.log(data);
                //            }
                //        });
                //    }
                //}

    </script>
}