@{
    ViewData["Title"] = "Transfer amount";
}

<div class="container">
    <div class="row">
        <aside class="col-sm-4">
        </aside>
        <aside class="col-sm-4">
            <div class="card">
                <article class="card-body">
                    <h4 class="card-title mb-4 mt-1">@ViewData["Title"]</h4>
                    <div class="form-group mt-2">
                        <label for="UserId">UserId</label>
                        <input name="UserId" id="UserId" class="form-control" />
                        <span id="ValidationMessage" class="text-danger"></span>
                    </div>
                    <div class="form-group mt-2">
                        <button type="button" onclick="goToTransfer()" class="btn btn-primary btn-block">Transfer amount</button>
                    </div>
                </article>
            </div>

        </aside>
    </div>
</div>

<script>
    function goToTransfer(){
        var userId = $("#UserId").val();
        if(userId == "" || userId == null){
            $("#ValidationMessage").html("UserId is required");
            return;
        }

        $("#ValidationMessage").html("");
        var url = `/Transfer/TransferAmount?userId=${userId}`;
        window.location.href = url;
    }
</script>