<div class="card-body card-info" id="main-card-body" style="">
    <div class="row">
        <div class="col-md-18">

        </div>
    </div>

    <br>

</div>




<div class="card" id="secondary-card">
    <div class="card-header ui-sortable-handle" style="cursor: move;">
        <div class="row">
            <div class="col">
                <h4 class="card-title">Transfer My Credit</h4>
            </div>
            <div class="col">

            </div>

        </div>

        <div class="card-tools">

        </div>
    </div>
    <div class="card-body " id="credit-amount-request-form">

        <div class="row">
            <div class="col-6">
                <input class="form-control" type="number" id="transfer-credit-amount-field"
                    placeholder="Amount to Transfer">
            </div>

            <div class="col-6">
                <button value="Transfer" id="Transfer-credit-initial-button" class=" form-control btn btn-primary"
                    onclick="CreateAndShowModalTransferMyCreditConfirmation()">Transfer Credit</button>
            </div>



        </div>

    </div>
</div>



<script>






    function CreateAndShowModalTransferMyCreditConfirmation() {
        if (!$('#transfer-credit-amount-field').val()) { return false; }

        const modalid = "modal-credit-transfer-confirmation";
        const modaltitle = "Continue?";
        const modalbody = `
    <p>You are sending credit from your account to the target User?</p>

`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button"  class="btn btn-primary" onclick="TransferMyCreditNow();" id="transfer-credit-now">Continue</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');


    }

    function SuccessCreditTransferResponse() {

        const modalid = "modal-credit-transfer-success";
        const modaltitle = "Success";
        const modalbody = `
    <p>Transfer has been sucessful.</p>

`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body', modalheaderclass = 'modal-header');
        $("#modal-credit-transfer-confirmation").modal('hide');
        Backkey();
    }

    function ErrorCreditTransferResponse() {

        const modalid = "modal-credit-transfer-failed";
        const modaltitle = "Failed";
        const modalbody = `
    <p>Failed to transfer credit. Try Again Later.</p>

`;
        const modalfooter = `<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>`;


        CreateAndShowModal(modalid, modaltitle, modalbody, modalfooter, modalfooterclose = false, topclosebutton = true, modalbodyclass = 'modal-body ', modalheaderclass = 'modal-header bg-danger');
        $("#modal-credit-transfer-confirmation").modal('hide');

    }


    function TransferMyCreditNow() {


        function TransferCreditToUserNow(response) {
            if (response === true) {
                SuccessCreditTransferResponse();

            }
            else if (response === false) {
                ErrorCreditTransferResponse();


            }

        }

        AjaxDo('/user/sendmycredit', { amount: $("#transfer-credit-amount-field").val().trim(), target_user: currenttarget }, TransferCreditToUserNow, null, reqtype = 'POST');


    }