@{
    ViewData["Title"] = "Home Page";
}
@using WebChallenge.Extensions;
@using WebChallenge.Texts;
@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 max-h-[750px]">
                    <div class="flex justify-center -mt-1">
                        <img src="../assets/images/movitel_challenges.png" alt="movitel_challenges.png"
                             class="max-w-[14.125rem] max-h-[7.5625rem]" />
                    </div>

                    <div class="mt-[2.31rem] flex flex-col gap-5 items-center">
                        <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>
                    </div>

                    <div class="buy-turn h-[41px] flex items-center justify-center mt-5">
                        <p class="text-2xl font-Alatsi text-white">@Lang.BuyTurn</p>
                    </div>

                    <div class="mt-[2.87rem] grid grid-cols-3 gap-[0.72rem] max-w-[393px] px-5 mx-auto">
                        <div class="buy-turn-btn buy-turn-btn-1 " packg="THUTHACH_CHARGE">
                            <p class="text-[1875rem] font-black uppercase">5Cents</p>
                            <p class="text-xl font-extrabold">2 @Lang.turn</p>
                        </div>
                        <div class="buy-turn-btn buy-turn-btn-2 active" packg="THUTHACH_CHARGE_10">
                            <p class="text-[1875rem] font-black uppercase">10Cents</p>
                            <p class="text-xl font-extrabold">5 @Lang.turns</p>
                        </div>
                        <div class="buy-turn-btn buy-turn-btn-3" packg="THUTHACH_CHARGE_20">
                            <p class="text-[1875rem] font-black uppercase">20Cents</p>
                            <p class="text-xl font-extrabold">10 @Lang.turns</p>
                        </div>
                    </div>

                    <div class="mt-[2.62rem] flex justify-between mx-5 mb-2">
                        <button onclick="BuyTurn();"
                                class="btn-confirm font-Alatsi text-xl text-center w-full max-w-[137px] px-2 text-white">
                            @Lang.Confirm
                        </button>
                        <a href="/Home/Index"
                           class="btn-close font-Alatsi text-xl text-center w-full max-w-[137px] px-2 text-white">
                            @Lang.Close
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Bottom Navigation -->
    @Html.Partial("_Navigation")
</div>

@section Scripts {
    <script>
        $(".buy-turn-btn").click(function () {
            $(".buy-turn-btn").removeClass('active');
            $(this).addClass('active');
        });

        function BuyTurn() {
            var packg = $(".buy-turn-btn.active").attr("packg");
            console.log(packg);
            buyMore(packg);
        }
    </script>
}