telemor
/
THUTHACH


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


@using WebChallenge.Controllers;
@using WebChallenge.Extensions;
@using System.Globalization;
@using Newtonsoft.Json;

@{

}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="vi" lang="vi">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Dezafiu</title>

    <!--CSS-->
    <link rel="stylesheet" href="~/css/all.min.css" />
    <link rel="stylesheet" href="~/css/custom.css" />

    <!--JS-->
    <script src="~/lib/jquery/jquery.min.js"></script>
    <script src="~/js/input.js"></script>
</head>


<body>
    @Html.AntiForgeryToken()

    <div class="main-content logo-background game h-dvh login">
        <!-- Content -->
        <!-- Body content -->
        @RenderBody()

        <div id="dialogResult" data-open="false"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
            <!-- Modal Content -->
            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="modal-container">
                    <div class="modal mx-4">
                        <div class="popup-buy-error">
                            <p class="text-2xl font-bold uppercase" id="dialogHeader">

                            </p>

                            <img src="~/assets/icons/error.svg" alt="error" id="dialogIcon" />

                            <p class="text-center" id="dialogMessage">

                            </p>

                            <input type="hidden" id="reload" />
                            <input type="hidden" id="exit" />

                            <a href="#" onclick="closeDialog('dialogResult')" class="font-Alatsi text-2xl bg-[#F06522] rounded-[1.25rem] w-full max-w-[224px] px-[0.625rem] text-center">
                                @Lang.Close
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialogGameOver" data-open="false"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
            <!-- Modal Content -->
            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="modal-container">
                    <div class="modal mx-4">
                        <div class="popup-linear text-white flex flex-col items-center gap-5 pt-[2.65625rem] pr-[0.875rem] pb-[2.71875rem] pl-[0.875rem]">
                            <div class="text-center">
                                <p class="text-2xl font-bold uppercase leading-none">@Lang.GameOver</p>
                                <p class="text-[#FBFF00] text-xl font-black uppercase leading-none">
                                    @Lang.Challenge <span id="challengeOver">1</span>
                                </p>
                            </div>

                            <img src="../assets/icons/error.svg" alt="success" />

                            @*<p>
                                Total score: <span class="text-[#FBFF00] font-extrabold ml-5">200</span>
                            </p>*@

                            <p class="text-center w-full max-w-[250px]">
                                @Lang.PlayAgainOrClose
                            </p>

                            <div class="w-full flex gap-5 justify-between px-5">
                                <a href="/Home/CheckPlay"
                                   class="bg-4 h-[41px] w-full max-w-[136.5px] text-[#5A5A5A] font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                                    @Lang.PlayNow
                                </a>
                                <a href="#" onclick="hideModal('dialogGameOver')"
                                   class="bg-[#F06522] h-[41px] w-full max-w-[136.5px] text-white font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                                    @Lang.Close
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="exitModal"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
            <!-- Modal Content -->
            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="popup-buy-error">
                    <p class="text-center">
                        @Lang.ConfirmExit
                    </p>
                    <div class="w-full flex gap-5 justify-between px-5">
                        <a href="/Home/Logout"
                           class="bg-4 h-[41px] w-full max-w-[136.5px] text-[#5A5A5A] font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                            @Lang.Exit
                        </a>
                        <a href="#" onclick="hideModal('exitModal')"
                           id="closeModal"
                           class="bg-[#F06522] h-[41px] w-full max-w-[136.5px] text-white font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                            @Lang.Close
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialogCancel"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
            <!-- Modal Content -->
            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="popup-buy-error">
                    <p class="text-left">
                        @Html.Raw(Lang.CancelDetailInfo)
                    </p>
                    <div class="w-full flex gap-5 justify-center px-5">                        
                        <a href="#" onclick="hideModal('dialogCancel')"
                           id="closeModal"
                           class="bg-[#F06522] h-[41px] w-full max-w-[136.5px] text-white font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                            @Lang.Close
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div id="optionPayment" data-open="false"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
            <!-- Modal Content -->
            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="popup-buy-error">
                    <p class="text-center uppercase">
                        @Lang.SelectPaymentChannel
                    </p>

                    <div class="w-full">
                        <input type="hidden" id="packagePeriod"/>
                        <div>
                            <input type="radio" id="basicAccount" name="payment" value="MAIN_AUTO" checked=checked />
                            <label for="basicAccount">@Lang.PayBasic</label>
                        </div>
                        @* <div>
                            <input type="radio" id="eMola" name="payment" value="WALLET_AUTO" />
                            <label for="eMola">@Lang.PayEmola</label>
                        </div> *@
                        @*<div>
                            <input type="radio" id="eMolaReNew" name="payment" value="3" />
                            <label for="eMolaReNew">Pay via e-Mola auto renew</label>
                        </div>*@

                        <div class="w-full flex gap-5 justify-center px-5 mt-3">
                            <button type="button" onclick="hideModal('optionPayment')" class="bg-4 h-[41px] w-full max-w-[136.5px] text-[#5A5A5A] font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                                @Lang.Cancel
                            </button>
                            <button type="button" onclick="selectPayment();" class="bg-[#F06522] h-[41px] w-full max-w-[136.5px] text-white font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                                @Lang.Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialogOtp" data-open="false"
             class="modal-popup fixed top-0 left-0 inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">

            <div class="px-4 w-full content-modal overflow-auto max-h-dvh">
                <div class="popup-buy-error">
                    <p class="text-center">
                        @Lang.EnterOtp
                    </p>

                    <div class="enter-otp">
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp1" maxlength="1" placeholder="" />
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp2" maxlength="1" placeholder="" />
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp3" maxlength="1" placeholder="" />
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp4" maxlength="1" placeholder="" />
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp5" maxlength="1" placeholder="" />
                        <input class="input-otp font-roboto bg-transparent text-[18px] font-normal" id="otp6" maxlength="1" placeholder="" />
                    </div>
                    <p class="otp-error"></p>

                    <div class="w-full flex gap-5 justify-between px-5 ">
                        <button class="bg-4 h-[41px] w-full max-w-[136.5px] text-[#5A5A5A] font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center btn-confirm">
                            @Lang.Confirm
                        </button>
                        <a href="#" onclick="hideModal('dialogOtp')"
                           id="closeModal"
                           class="bg-[#F06522] h-[41px] w-full max-w-[136.5px] text-white font-Alatsi text-2xl rounded-[1.25rem] flex justify-center items-center text-center">
                            @Lang.Close
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>


    @*<script src="~/js/spin.js"></script>*@


    <script>

        var flag = false;
        var clicked = false;

    </script>

    <script>
        $('#dialogOtp').on('show', function () {
            console.log("open");
            $("#otp1").focus();
        });

        $("#dialogOtp .btn-confirm").click(function () {
            var otp = $("#otp1").val() + $("#otp2").val() + $("#otp3").val() + $("#otp4").val() + $("#otp5").val() + $("#otp6").val();
            if (otp.length < 6) {
                return;
            }
            $.ajax({
                url: "/Home/ConfirmOtp",
                data: {
                    otp: otp
                },
                type: "POST",
                success: function (data) {
                    if (data.error == "0") {
                        hideModal("dialogOtp");
                        hideModal("optionPayment");
                        // success
                        showDialog('dialogResult', "@Lang.Success", data.content, data.error);
                    } else {
                        // show error
                        $(".otp-error").html(data.content);
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

        function selectPayment() {
            var option = $("input[name='payment']:checked").val();
            var period = $("#packagePeriod").val();
            requestOtp(period + "_" + option);
        }

        function requestOtp(subServiceCode) {
            $.ajax({
                url: "/Home/RequestOtp",
                data: {
                    subServiceCode: subServiceCode
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error == "100") {
                        // otp
                        $(".input-otp").val('');                        
                        hideModal("optionPayment");
                        showModal("dialogOtp");
                    } else if (data.error == "0") {
                       // success
                       hideModal("optionPayment");
                       showDialog('dialogResult', "@Lang.Success", data.content, data.error);
                    } else if (data.error == "109") {
                       // waiting
                       hideModal("optionPayment");
                       showDialog('dialogResult', "@Lang.Result", data.content, data.error, 'warning');
                    } else {
                        // show dialog failed
                       hideModal("optionPayment");
                       showDialog('dialogResult', "@Lang.Error", data.content, data.error);
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        $(".input-otp").on('keydown', function (e) {
            if (e.which == 8 || e.which == 46) {
                $(this).val('');
                $(this).prev(".input-otp").focus();
            } else {
                var num = String.fromCharCode();
                $(this).val(num);
                //$(this).next(".input-otp").focus();
            }
        });

        $(".input-otp").on('keyup', function (e) {
            if (e.which == 8 || e.which == 46) {
            } else {
                $(this).next(".input-otp").focus();
            }
            //}
        });

        function buyMore(packg) {
            requestOtp(packg);
        }

        function register(packg) {
            $("#packagePeriod").val(packg);
            showModal('optionPayment');
            //requestOtp(packg);
        }

    </script>

    @RenderSection("scripts", required: false)
</body>

</html>