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

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

@model HomeTransfer_ViewModel

@{
    if (Model.transferData != null)
    {

    }
}

<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.transfer.ToUpper()})
        </div>
    </div>

    <div class="content-wrapper transfer-container" style="">
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 align-items-center justify-content-center">
                    <div class="">

                        @{
                            if (Model.step != Constants.TRANSFER_RESULT)
                            {
                                <div class="row">
                                    <div class="col-6">
                                       @Lang.bee_account
                                    </div>
                                    <div class="col-6" style="text-align:end;">
                                        @Functions.FormatNumber(Model.userStatus.bet_coin) @Lang.curency
                                    </div>
                                </div>
                                <hr class="line2" style="margin-top:0px;" />

                            }
                        }


                        <form class="form-horizontal" action="@ViewBag.MyConfig.MyValue/Home/Transfer" method="post">

                            @Html.AntiForgeryToken()
                            <input type="hidden" name="walletType" class="walletType" id="walletType" value="@Model.walletType" />
                            <input type="hidden" name="content" class="content" id="content" value="" />

                            @{
                                if (Model.step == Constants.TRANSFER_SHOW || Model.step == Constants.TRANSFER_CONFIRM)
                                {
                                // for choosing
                                    <div>
                                       @Lang.select_an_account
                                    </div>
                                    if (Model.step == Constants.TRANSFER_SHOW)
                                    {
                                        <div class="scroll-item-container" style="margin-bottom:20px;">
                                            <div class="">
                                                <a class="@(Model.walletType == Constants.NATCASH_WALLET_TRANSFER ? "active": "")" href="#">
                                                    <img style="" src="~/img/mosan.png" />
                                                </a>
                                            </div>
                                        </div>
                                    }
                                    else
                                    {
                                        if (Model.walletType == Constants.BASIC_WALLET_TRANSFER)
                                        { 
                                        }
                                        else
                                        {
                                            <div class="scroll-item-container" style="margin-bottom:20px;">
                                                <div class="">
                                                    <a class="active" href="#" style="padding-top: 5px;">
                                                        <img style="" src="~/img/mosan.png" />
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                    }

                                    <fieldset class="form-group position-relative has-icon-left">
                                        <label>@Lang.money_on</label>
                                        <input type="text" class="data-input-line form-control" id="moneyon" placeholder="@Lang.enter_amount" name="moneyon" required
                                           @(Model.step == Constants.TRANSFER_CONFIRM ? "disabled" : "") value="@(Model.transferData != null ? Model.transferData.money : "")">
                                    </fieldset>

                                    if (Model.step == Constants.TRANSFER_SHOW)
                                    {
                                         @Lang.or_select

                                        <div class="row">
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(25)">
                                                    25
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(100)">
                                                    100
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(1000)">
                                                    1,000
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(50000)">
                                                    50,000
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(100000)">
                                                    100,000
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(150000)">
                                                    150,000
                                                </div>
                                            </div>
                                        </div>

                                        <script>
                                            function chooseBox_Click(value){
                                                $("#moneyon").val(value);
                                            }
                                        </script>
                                    }
                                    else if (Model.step == Constants.TRANSFER_CONFIRM)
                                    {
                                        <div>
                                            @Lang.fee_tranfer
                                        </div>
                                        <div>
                                            @Lang.free
                                        </div>
                                    }
                                }
                                else if (Model.step == Constants.TRANSFER_RESULT)
                                {

                                    <div class="card-header border-0 card-box">
                                        <div class="card-title text-center ">
                                            @if(Model.code == Code.SUCCESS) { 
                                                <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="">
                                                            @Lang.transfer_success
                                                        </h4>
                                                    </div> 
                                                </div>
                                            } else
                                            {
                                                <div>
                                                    <div style="margin-top: 50px;">
                                                        <img class="logo-app" src="~/img/fail.png" />
                                                    </div>

                                                    <div style="position: relative; margin-top: 10px;">
                                                        <h2 class="text-style-main-large">
                                                            @Lang.fail
                                                        </h2>
                                                    </div>

                                                    <div style="position: relative; margin-top: 10px;">
                                                        <h4 class="">
                                                            @Model.message
                                                        </h4>
                                                    </div> 
                                                </div>
                                            }
                                        </div>
                                    </div>
                                }
                            }

                            <div class="row button-on-footer" style="margin-top:50px;">
                                <div class="col-12">
                                    <button type="button" class="btn btn-outline-primary btn-block login-button"
                                            onclick="@(Model.step == Constants.TRANSFER_SHOW ? "transactionConfirmButtonAction_Click(" + Model.walletType + ")" :
                                            Model.step == Constants.TRANSFER_CONFIRM ? "transactionConfirmOtpButtonAction_Click()": "transactionRedirectButtonAction_Click()")">
                                        <i class="ft-unlock"></i> @(Model.step == Constants.TRANSFER_SHOW ? Lang._continue.ToUpper() :
                                        Model.step == Constants.TRANSFER_CONFIRM ? Lang.confirm : Lang.return_home_page)
                                    </button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<script>
    stopLoading();
</script>

<script>
    var walletTypeG = null;
function transactionConfirmButtonAction_Click(walletType) {
    let check = 1;
    let receivernumber = null;
    walletTypeG = walletType;

    let moneyon = $("#moneyon").val();
    if (moneyon == null || moneyon == "" || moneyon > 150000) {
        check *= 0;
        $("#moneyon").addClass("error-note-line");

        if (moneyon > 150000) {
            toastr.error('@Lang.max_transfer_1000HTG');
        }
    }

    if (check == 1) {
        let subDomain = $("#subDomain").val();
        // show modal to enter otp
        let otpUrl = subDomain + '/Home/TransactionConfirm_Action'
        startLoading();
        $.ajax({
            type: "POST",
            url: otpUrl,
            headers: { 'RequestVerificationToken': $('input[name=__RequestVerificationToken]').val() },
            data: {
                "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
                walletType: walletType,
                receivernumber: receivernumber,
                moneyon: moneyon
            },
            success: function (data) {
                stopLoading();
                if (data.code == success) {
                    // redirect to success 
                    window.location.href = subDomain + '/Home/Transfer?step=2&walletType=' + walletType;
                } else if (data.code == session_expired) {
                    window.location.href = subDomain + '/Account/Login';
                } else {
                    toastr.error(data.message);
                }
            },
            failure: function (data) {
                stopLoading();
            },
            error: function (data) {
                stopLoading();
            }
        });
    }
}
</script>