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

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

@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" style="margin-top:80px; padding-bottom: 60px !important;">
        <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">
                                        <a>
                                            <h5>
                                                @Lang.bee_account
                                            </h5>
                                        </a>
                                    </div>
                                    <div class="col-6" style="text-align:end;">
                                        <h4 class="text-bold-700 text-cash">
                                            @double.Parse(Model.userStatus.bet_coin).ToString("N0",new CultureInfo("en-US")) HTG
                                        </h4>
                                    </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>
                                        <h6>@Lang.select_an_account</h6>
                                    </div>
                                    if (Model.step == Constants.TRANSFER_SHOW)
                                    {
                                        <div class="scroll-item-container" style="margin-bottom:20px;">
                                            <div class="item-box-large">
                                                <a class="@(Model.walletType == Constants.BASIC_WALLET_TRANSFER ? "active": "")"
                                           href="@ViewBag.MyConfig.MyValue/Home/Transfer?walletType=@Constants.BASIC_WALLET_TRANSFER">
                                                    <img style="    width: 100px;" src="~/img/natcom.png" />
                                                </a>
                                            </div>
                                            <div class="item-box-large">
                                                <a class="@(Model.walletType == Constants.NATCASH_WALLET_TRANSFER ? "active": "")"
                                           href="@ViewBag.MyConfig.MyValue/Home/Transfer?walletType=@Constants.NATCASH_WALLET_TRANSFER">
                                                    <img style="    width: 100px;" src="~/img/Logo Natcash.png" />
                                                </a>
                                            </div>
                                        </div>
                                    }
                                    else
                                    {
                                        if (Model.walletType == Constants.BASIC_WALLET_TRANSFER)
                                        {
                                            <div class="scroll-item-container" style="margin-bottom:20px;">
                                                <div class="item-box-large">
                                                    <a class="active"
                                           href="@ViewBag.MyConfig.MyValue/Home/Transfer?walletType=@Constants.BASIC_WALLET_TRANSFER">
                                                        <img style="    width: 100px;" src="~/img/natcom.png" />
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="scroll-item-container" style="margin-bottom:20px;">
                                                <div class="item-box-large">
                                                    <a class="active"
                                           href="@ViewBag.MyConfig.MyValue/Home/Transfer?walletType=@Constants.NATCASH_WALLET_TRANSFER"
                                           style="padding-top: 5px;">
                                                        <img style="    width: 100px;" src="~/img/Logo Natcash.png" />
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                    }

                                    //<fieldset class="form-group position-relative has-icon-left">
                                    //    <label>@Lang.sender_phone</label>
                                    //    <input type="number" class="data-input-box form-control" id="sendernumber" placeholder="@Lang.from_your_number" name="sendernumber" required disabled value="@Model.profile.users">

                                    //    <div class="form-control-position" style="top: 32px;">
                                    //        <img src="~/img/icons8-user-30.png" style="width:20px;" />
                                    //    </div>
                                    //</fieldset>

                                    //if (Model.walletType == Constants.NATCASH_WALLET_TRANSFER)
                                    //{
                                    //    <fieldset class="form-group position-relative has-icon-left">
                                    //        <label>@Lang.receiver_phone</label>
                                    //        <input type="number" class="data-input-box form-control" id="receivernumber" placeholder="@Lang.to_other_natcom_number" name="receivernumber" required
                                    //       @(Model.step == Constants.TRANSFER_CONFIRM ? "disabled" : "") value="@(Model.transferData != null ? Model.transferData.msisdnReceive : "")">
                                    //        <div class="form-control-position" style="top: 35px;">
                                    //            <i class="fa fa-key"></i>
                                    //        </div>
                                    //    </fieldset>
                                    //}


                                    <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)
                                    {
                                        //<div class="scroll-item-container" style="margin-bottom:20px;">
                                        //    <div class="item-box">
                                        //        <a href="#" class="value-10" onclick="chooseBox_Click(20)">
                                        //            20
                                        //        </a>
                                        //    </div>
                                        //    <div class="item-box">
                                        //        <a href="#" class="value-10" onclick="chooseBox_Click(50)">
                                        //            50
                                        //        </a>
                                        //    </div>
                                        //    <div class="item-box">
                                        //        <a href="#" class="value-10" onclick="chooseBox_Click(100)">
                                        //            100
                                        //        </a>
                                        //    </div>
                                        //    <div class="item-box">
                                        //        <a href="#" class="value-1000" onclick="chooseBox_Click(200)">
                                        //            200
                                        //        </a>
                                        //    </div>
                                        //    <div class="item-box">
                                        //        <a href="#" class="value-5000" onclick="chooseBox_Click(500)">
                                        //            500
                                        //        </a>
                                        //    </div>
                                        //</div>

                                        <h6>
                                            @Lang.or_select
                                        </h6>

                                        <div class="row">
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(20)">
                                                    20
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(50)">
                                                    50
                                                </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(200)">
                                                    200
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(300)">
                                                    300
                                                </div>
                                            </div>
                                            <div class="col-4">
                                                <div class="box-coin-choose" onclick="chooseBox_Click(500)">
                                                    500
                                                </div>
                                            </div>
                                        </div>

                                        <script>
                                            function chooseBox_Click(value){
                                                $("#moneyon").val(value);
                                            }
                                        </script>
                                    }
                                    else if (Model.step == Constants.TRANSFER_CONFIRM)
                                    {
                                        <div>
                                            <h6>@Lang.fee_tranfer</h6>
                                            <h5>@Lang.free</h5>
                                        </div>
                                    }
                                }
                                else if (Model.step == Constants.TRANSFER_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.transfer_success
                                                    </h4>
                                                </div>

                                                <hr class="line-2">

                                                <div>
                                                    <div class="row text-box-row">
                                                        <div class="col-6 text-start">
                                                            <h6>@Lang.amount_transfered</h6>
                                                        </div>
                                                        <div class="col-6 text-end-bold">
                                                            @double.Parse(Model.transaction.money).ToString("N0",new CultureInfo("en-US")) HTG
                                                        </div>
                                                    </div>

                                                    <div class="row text-box-row">
                                                        <div class="col-6 text-start">
                                                            <h6>@Lang.transfer_method</h6>
                                                        </div>
                                                        @{
                                                            if (Model.walletType == Constants.BASIC_WALLET_TRANSFER)
                                                            {
                                                                <div class="col-6 text-end-bold">
                                                                    @Lang.basic_account
                                                                </div>
                                                            }
                                                            else
                                                            {
                                                                <div class="col-6 text-end-bold">
                                                                    @Lang.NatCash
                                                                </div>
                                                            }
                                                        }
                                                    </div>

                                                    <div class="row text-box-row">
                                                        <div class="col-4 text-start">
                                                            <h6>@Lang.sender</h6>
                                                        </div>
                                                        <div class="col-8 text-end-bold">
                                                            @Model.transaction.acountSend
                                                        </div>
                                                    </div>

                                                    <div class="row text-box-row">
                                                        <div class="col-4 text-start">
                                                            <h6>@Lang.receiver</h6>
                                                        </div>
                                                        <div class="col-8 text-end-bold">
                                                            @Model.transaction.acountRecieve
                                                        </div>
                                                    </div>

                                                    <div class="row text-box-row">
                                                        <div class="col-4 text-start">
                                                            <h6>@Lang.fee</h6>
                                                        </div>
                                                        <div class="col-8 text-end-bold">
                                                            0 HTG
                                                        </div>
                                                    </div>

                                                    <hr class="line-2">

                                                    <div class="row text-box-row">
                                                        <div class="col-4 text-start">
                                                            <h6>@Lang.time</h6>
                                                        </div>
                                                        <div class="col-8 text-end-bold">
                                                            @Model.transaction.timeRequest
                                                        </div>
                                                    </div>
                                                </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;
    //if (walletType == natcash_wallet_transfer) {
    //    receivernumber = $("#receivernumber").val();
    //    if (receivernumber == null || receivernumber == "") {
    //        check *= 0;
    //        $("#receivernumber").addClass("error-note-box");
    //    }
    //}
    let moneyon = $("#moneyon").val();
    if (moneyon == null || moneyon == "" || moneyon > 10000) {
        check *= 0;
        $("#moneyon").addClass("error-note-line");

        if (moneyon > 10000) {
            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>