lottery/website/Views/BuyTicket/Payment.cshtml

@{
    ViewData["Title"] = "ChooseNumber";
    Layout = "~/Views/Shared/_NothingLayout.cshtml";
}

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

@model BuyTicketPayment_ViewModel


<div class="app-content content" style="position:relative">
    <div class="card-title text-center ">
        <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
            @await Component.InvokeAsync("SmallHeader", new { title = @Lang.review_payment.ToUpper(), url ="BuyTicket"})
        </div>
    </div>

    <div class="content-wrapper" style="margin-top:80px; margin-bottom:60px;">
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 align-items-center justify-content-center">

                    @{
                        if (Model.step == Constants.PAYMENT_SHOW)
                        {
                            <input type="hidden" value="1" id="payment-status" />
                            <div class="header-choose-container">
                                <div class="row">
                                    <div class="col-6 date-choose-box date-choose-box">
                                        <span>@Lang.your_number</span>
                                    </div>
                                    <div class="col-6 date-choose-box text-style-end-2">
                                        <span>@Lang.money (@Lang.curency)</span>
                                    </div>
                                </div>
                            </div>

                            <div>
                                @{
                                    string[] ticketNumber = Model.tickets.Split(",");
                                    for (int i = 0; i < ticketNumber.Length; i++)
                                    {
                                        <div>
                                            @await Component.InvokeAsync("PaymentForm", new {data= ticketNumber[i], ticketType=Model.ticketType})
                                        </div>
                                    }
                                }
                            </div>


                            <hr class="line2" />

                            <div >
                                <div class="row">
                                    <div class="col-6 date-choose-box">
                                        <span>@Lang.term</span>
                                    </div>
                                    <div class="col-6 date-choose-box">
                                        <div class="date-choose-confirm">
                                            <span class="text-bold-700 text-blue">@DateTime.Now.ToString("dd/MM/yyyy")</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="line2" />

                            <div>
                                <div class="row">
                                    <div class="col-6 date-choose-box">
                                        <span>@Lang.total_ticket</span>
                                    </div>
                                    <div class="col-6 text-style-end-2">
                                        <span class="text-bold-700 text-blue">@Model.tickets.Split(",").Length</span>
                                    </div>
                                </div>

                                <hr class="line2" />

                                <div class="row">
                                    <div class="col-6 date-choose-box">
                                        <span>@Lang.channel_buy</span>
                                    </div>
                                    <div class="col-6 text-style-end-2">
                                        <select id="channel-payment" class="text-blue select-box">
                                            <option>@Lang.MainBalance</option>
                                        </select>
                                    </div>
                                </div>

                                <hr class="line2" />

                                <div class="row">
                                    <div class="col-6 text-style-start-3">
                                        <span>@Lang.total_money: </span>
                                    </div>
                                    <div class="col-6 text-style-end-3">
                                        <span id="total-money" class="text-bold-700">@(Model.tickets.Split(",").Length * 100) @Lang.curency</span>
                                    </div>
                                </div>
                            </div>

                            <div class="row button-on-footer" style="margin-top:50px;">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-primary btn-block button-style-2"
                                        onclick="reorderButton_Click()">
                                        <i class="ft-unlock"></i> @Lang.reorder.ToUpper()
                                    </button>
                                </div>
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-primary btn-block login-button payment-button"
                                        onclick="paymentSendOTPButton_Click('@Lang.enter_amount_1_1000')">
                                        <i class="ft-unlock"></i> @Lang.payment.ToUpper()
                                    </button>
                                </div>
                            </div>

                        }
                        else if (Model.step == Constants.PAYMENT_RESULT)
                        {
                            <div class="card-header border-0 card-box">
                                <div class="card-title text-center ">
                                    <div>
                                        <div style="margin-top: 50px;">
                                            <img class="logo-app" src="~/img/Group854.png" />
                                        </div>
                                         

                                        <div style="position: relative; margin-top: 10px;">
                                            <h4 class="text-style-normal">
                                                @Lang.brought_success
                                            </h4>
                                        </div>


                                        <div style="margin-top: 30px;">
                                            <div class="row text-box-row">
                                                <div class="col-5 text-start">
                                                    <span>@Lang.number</span>
                                                </div>
                                                <div class="col-7 text-end-bold">
                                                    @Model.profile.users
                                                </div>
                                            </div>
                                            <hr class="line-2" style="margin: 0px 15px 20px 15px; top:0px;">

                                            <div class="row text-box-row">
                                                <div class="col-5 text-start">
                                                    <span>@Lang.ticket_code</span>
                                                </div>
                                                <div class="col-7 text-end-bold">
                                                    @Model.confirmBuyingTicketResponse.listTiketId
                                                </div>
                                            </div>
                                            <hr class="line-2" style="margin: 0px 15px 20px 15px; top:0px;">

                                            <div class="row text-box-row">
                                                <div class="col-5 text-start">
                                                    <span>@Lang.order_code</span>
                                                </div>
                                                <div class="col-7 text-end-bold">
                                                    #@Model.confirmBuyingTicketResponse.orderId
                                                </div>
                                            </div>
                                            <hr class="line-2" style="margin: 0px 15px 20px 15px; top:0px;">


                                            <div class="row text-box-row">
                                                <div class="col-5 text-start">
                                                    <span>@Lang.payment</span>
                                                </div>
                                                <div class="col-7 text-end-bold">
                                                    @Functions.FormatNumber(Model.confirmTicketDataResponse.totalMoneyPayment) @Lang.curency
                                                </div>
                                            </div>

                                            <hr class="line-2" style="margin: 0px 15px 20px 15px; top:0px;">
                                            <div class="row text-box-row">
                                                <div class="col-5 text-start">
                                                    <span>@Lang.content</span>
                                                </div>

                                                @{
                                                    string content = Lang.buy_ticket_content;
                                                    content = content.Replace("%gameName%", BaseController.ConvertGameIdToName(Model.ticketType));
                                                    content = content.Replace("%drawDate%", Model.confirmTicketDataResponse.termObj.randomDate.Substring(0,10));

                                                    <div class="col-7 text-end-bold">
                                                        @content
                                                    </div>
                                                }
                                            </div>
                                            <hr class="line-2" style="margin: 0px 15px 20px 15px; top:0px;">

                                        </div>
                                    </div>

                                    <div class="row button-on-footer" style="margin-top:50px;">
                                        <div class="col-12">
                                            <form class="form-horizontal" action="@ViewBag.MyConfig.MyValue/Home" method="get">
                                                <button type="submit" class="btn btn-outline-primary btn-block login-button">
                                                    <i class="ft-unlock"></i> @Lang.return_home_page
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    }
                </div>
            </section>
        </div>
    </div>
</div>

<script>
    stopLoading();
</script>


<script>
    var moneyEach = 1;

    $(".ticket-money").on("keyup", function(event) {
        let totalMoney = 0;
        var elements = document.getElementsByClassName("ticket-money");
        for (let i = 0; i < elements.length; i++) {
            let val = elements[i].value;
            console.log("val: " + val);
            if (val == "" || val == null || val == undefined || val == "0") {
            } else {
                totalMoney += parseInt(elements[i].value);
            }
        }
        $("#total-money").text(totalMoney + " @Lang.curency");
    });

    $(".ticket-money").on("change", function(event) {

        console.log("change money");

        // check current money
        if($(this).val() != null && $(this).val() != "") {
            let curMoney = parseInt($(this).val());
            if (curMoney > 10000 || curMoney < 25) {
                $("#payment-status").val("0");
                $(".payment-button").addClass("inactive");
                toastr.error('@Lang.over_1000HTG_transfer');
                $(this).focus();
                return;
            }
        }

        let totalMoney = 0;
        let check = 1;
        var elements = document.getElementsByClassName("ticket-money");
        for (let i = 0; i < elements.length; i++) {
            let val = elements[i].value;
            console.log("val: " + val);
            if (val == "" || val == null || val == undefined || val == "0") {
                check *= 0;
            } else {
                totalMoney += parseInt(elements[i].value);
            }
        }
        console.log("totalMoney: " + totalMoney + " check: " + check);        

        var selectElement = event.target;
        if (check == 0) {
            $("#payment-status").val("0");
            let old = $(this).attr("oldvalue");

            $(".payment-button").addClass("inactive");
            //selectElement.value = old;
        } else {
            $(".payment-button").removeClass("inactive");
            $("#payment-status").val("1");

            moneyEach = selectElement.value;

            $(this).attr("oldvalue").value = moneyEach;

            console.log("money each: " + moneyEach);
            //$("#total-money").text(totalMoney + " @Lang.curency");
        }
    })
</script>