@{
    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 text-style-start-2">
                                        <h6>@Lang.your_number</h6>
                                    </div>
                                    <div class="col-6 button-choose-box text-style-end-2">
                                        <h6>@Lang.money (HTG)</h6>
                                    </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 style="margin:30px 0;">
                                <div class="row">
                                    <div class="col-6 text-style-start-2">
                                        <h6>@Lang.term</h6>
                                    </div>
                                    <div class="col-6 date-choose-box">
                                        <div class="date-choose-confirm">
                                            <h5 class="text-bold-700">@DateTime.Now.ToString("dd/MM/yyyy")</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="line2" />

                            <div style="margin:30px 0;">
                                <div class="row">
                                    <div class="col-6 text-style-start-2">
                                        <h6>@Lang.total_ticket</h6>
                                    </div>
                                    <div class="col-6 text-style-end-2">
                                        <h5 class="text-bold-700">@Model.tickets.Split(",").Length</h5>
                                    </div>
                                </div>

                                <hr class="line2" />

                                <div class="row">
                                    <div class="col-6 text-style-start-3">
                                        <h6>@Lang.total_money: </h6>
                                    </div>
                                    <div class="col-6 text-style-end-3">
                                        <h5 id="total-money" class="text-bold-700">@(Model.tickets.Split(",").Length * 10) HTG</h5>
                                    </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;">
                                            <h2 class="text-style-main-large">
                                                @Lang.success
                                            </h2>
                                        </div>

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


                                        <div style="    margin-top: 30px;">
                                            <div class="row text-box-row">
                                                <div class="col-6 text-start">
                                                    <h6>@Lang.number</h6>
                                                </div>
                                                <div class="col-6 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-6 text-start">
                                                    <h6>@Lang.ticket_code</h6>
                                                </div>
                                                <div class="col-6 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-6 text-start">
                                                    <h6>@Lang.order_code</h6>
                                                </div>
                                                <div class="col-6 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-6 text-start">
                                                    <h6>@Lang.payment</h6>
                                                </div>
                                                <div class="col-6 text-end-bold">
                                                    @string.Format("{0:#,0}", double.Parse(Model.confirmTicketDataResponse.totalMoney)) HTG
                                                </div>
                                            </div>

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

                                                @{
                                                    string content = Lang.buy;
                                                    if (Model.ticketType == Constants.BOLET_CODE)
                                                    {
                                                        content += " Bolet of ";
                                                    }
                                                    else if (Model.ticketType == Constants.MAYRAJ_CODE)
                                                    {
                                                        content += " Mayraj of ";
                                                    }
                                                    else if (Model.ticketType == Constants.BOULCHANS_CODE)
                                                    {
                                                        content += " Boulchans of ";
                                                    }
                                                    else
                                                    {
                                                        content += " Lotto3 of ";
                                                    }

                                                    if (Model.termType == Constants.NEW_YORK_BOLET_CODE || Model.termType == Constants.NEW_YORK_MAYRAJ_CODE || Model.termType == Constants.NEW_YORK_LOTTO3_CODE)
                                                    {
                                                        content += " - New York ";
                                                    }
                                                    else if (Model.ticketType == Constants.BOULCHANS_CODE)
                                                    {
                                                        content += " Natcom Loto ";
                                                    }
                                                    else
                                                    {
                                                        content += " - Florida ";
                                                    }
                                                    content += Model.confirmTicketDataResponse.termObj.endDate;

                                                    <div class="col-6 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("change", function(event) {

        console.log("change money");
        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 (totalMoney > 5000 || check == 0) {
            $("#payment-status").val("0");
            let old = $(this).attr("oldvalue");

            $(".payment-button").addClass("inactive");
            //selectElement.value = old;

            if (check == 0) {
                //console.log("money error: " + old);
                //toastr.error("Your money must be in range from 1 to 1000 HTG. Please check again.");
            } else {
                //console.log("money each over: " + old);
                toastr.error('@Lang.over_1000HTG_transfer');
            }
        } 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 + " HTG");
        }
    })
</script>