<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
</style>
<div class="modal fade " data-backdrop="static" id="add_AccountBank" tabindex="-1" role="dialog" aria-hidden="true" style="width: 60%; margin: 0 auto;">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
                <h5><span class="semi-bold"><?php print CommonLanguage::getMessage('add_bank_account'); ?> </span></h5>
            </div>                    <input type="text" style="display: none;" id="Bank_Account_ID" name="Bank_Account_ID" class="form-control " >

            <div class="modal-body">
                <form id="AddAccountBankPostForm" method="POST" onsubmit="return false">
                    <div class="row">
                        <div class="col-md-12" style="margin:15px;">
                            <div class="col-md-6">
                                <div class="input-group ">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-university"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('bank_name'); ?>" id="Bank_Name" name="Bank_Name" class="form-control " required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group required">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-ship"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('bank_account_name'); ?>" id="Bank_Account_Name" name="Bank_Account_Name" class="form-control " required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="margin:10px;">
                            <div class="col-md-6">
                                <div class="input-group required">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-sort-numeric-asc"></i>
                                    </span>
                                    <input type="number" placeholder="<?php print CommonLanguage::getMessage('bank_account_number'); ?>" id="Bank_Account_Number" name="Bank_Account_Number" class="form-control " required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group required">
                                    <span class="input-group-addon complete">
                                        <i class="fa fa-credit-card"></i>
                                    </span>
                                    <input type="text" placeholder="<?php print CommonLanguage::getMessage('credit_card_number'); ?>" id="Credit_Card_Number" name="Credit_Card_Number" class="form-control " required>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" style="margin:10px;">
                            <div class="col-md-6">
                                <?php echo Forms::CurrencyDropDown(1, 'complete'); ?>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" id="CloseAccountBank"   > <?php print CommonLanguage::getMessage('Close'); ?> </button>
                            <button style="opacity:1;" class="btn btn-complete disabled" id="SubmitAccountBank"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button>
                            <button style="opacity:1;" class="btn btn-complete disabled" id="UpdateAccountBank"  > <?php print CommonLanguage::getMessage('Update'); ?>   </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
                isadding = <?php echo $IsAdding; ?>;
                $(function () {
                    $("body").addClass("NoSearch")
                    $("#UpdateAccountBank").hide()
                            $("#SubmitAccountBank").show()


                    $("#SubmitAccountBank").on("click", function () {
                        $("#AccountBankValidationAlert").remove();
                        var AlertBox = $('<div id="AccountBankValidationAlert" class="WizardValidationAlert alert"></div>');
                        AlertBox.insertAfter($("#add_AccountBank").find(".modal-dialog .modal-header").find("h5"))
                        $("#BankAccountIsBusy").remove();
                        $("#add_AccountBank").append('<div id="BankAccountIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                        $("#BankAccountIsBusy").animate({opacity: 1});
                        var BankName = $("#Bank_Name").val();
                        $("#Bank_Account_ID").val(BankName);
                        var Data = {
                            Bank_Name: $("#Bank_Name").val(),
                            Bank_Account_Name: $("#Bank_Account_Name").val(),
                            Bank_Account_Number: $("#Bank_Account_Number").val(),
                            Currency_ID: $("#CurrencyDropDown button  input").val(),
                            Credit_Card_Number: $("#Credit_Card_Number").val()
                        }
                        $.ajax({
                            url: "ACCAjax/addBankAccountAjax",
                            method: "POST",
                            dataType:'json',
                            data: Data,
                            complete: function (v1, v2) {
                                if (v2 == 'success' && v1.responseJSON == 'OK') {
                                    if (isadding == 1) {
                                        RebuildDataTable(title, [0, 1, 2, 3, 4], 'ACCAjax/viewBankAccountRequest', 1);
                                    }
                                    $("#BankAccountIsBusy").remove();
                                    $("#AccountBankValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                                    setTimeout(function () {
                                        $("#add_AccountBank").modal('hide')
                                        $("#AccountBankValidationAlert").hide()
                                    }, 1500)
                                } else {
                                    $("#AccountBankValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                                }
                                $("#BankAccountIsBusy").remove();
                            }
                        });
                    });
                    $("#UpdateAccountBank").on("click", function () {
                        $("#AccountBankValidationAlert").remove();
                        var AlertBox = $('<div id="AccountBankValidationAlert" class="WizardValidationAlert alert"></div>');
                        AlertBox.insertAfter($("#add_AccountBank").find(".modal-dialog .modal-header").find("h5"))
                        $("#BankAccountIsBusy").remove();
                        $("#add_AccountBank").append('<div id="BankAccountIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>');
                        $("#BankAccountIsBusy").animate({opacity: 1});
                        var Data = {
                            Bank_Name: $("#Bank_Name").val(),
                            Bank_Account_ID: $("#Bank_Account_ID").val(),
                            Bank_Account_Name: $("#Bank_Account_Name").val(),
                            Bank_Account_Number: $("#Bank_Account_Number").val(),
                            Currency_ID: $("#CurrencyDropDown button  input").val(),
                            Credit_Card_Number: $("#Credit_Card_Number").val()
                        }
                        $.ajax({
                            url: "ACCAjax/updateBankAccountAjax",
                            method: "POST",
                            dataType:'json',
                            data: Data,
                            complete: function (v1, v2) {
                                if (v2 == 'success' && v1.responseJSON == 'OK') {
                                    if (isadding == 1) {
                                        RebuildDataTable(title, [0, 1, 2, 3, 4], 'ACCAjax/viewBankAccountRequest', 1);
                                    }
                                    $("#BankAccountIsBusy").remove();
                                    $("#AccountBankValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                                    setTimeout(function () {
                                        $("#add_AccountBank").modal('hide')
                                        $("#AccountBankValidationAlert").hide()
                                    }, 1500)
                                    $("#UpdateAccountBank").hide()
                                    $("#UpdateAccountBank").removeClass('disabled')
                                    $("#SubmitAccountBank").show()

                                } else {
                                    $("#AccountBankValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                                }
                                $("#BankAccountIsBusy").remove();
                            }
                        });
                    });
                    $("#add_AccountBank input").val("");
                })
    $("#CloseAccountBank").on("click", function () {
        $("#add_AccountBank input").val("");
        $("#UpdateAccountBank").hide()
        $("#UpdateAccountBank").removeClass('disabled')
        $("#SubmitAccountBank").show()
        $("#add_AccountBank ").modal("hide");
    })
    function DisableSubmitButtonStatus(){
        var IsValidated=true;
        if($("#Bank_Name").val() ===  "" || $("#Bank_Account_Name").val() ===  "" || ($("#Bank_Account_Number").val() ===  "" && $("#Credit_Card_Number").val() ===  "") ){
            IsValidated = false;
        }
        if(!IsValidated){
            $("#SubmitAccountBank").addClass("disabled")
            $("#UpdateAccountBank").addClass("disabled")
        }
        else{$("#SubmitAccountBank").removeClass("disabled")
            $("#UpdateAccountBank").removeClass("disabled")

        }
    }
    $("#add_AccountBank").on("keyup","input",function(){
        DisableSubmitButtonStatus()
    })
</script>
