@foreach($styles as $style)
    <link href="{{ $style }}" rel="stylesheet" type="text/css"/>
@endforeach
<style>
    .errorAlert {
        border: 1px solid red !important;
    }
</style>
<div class="transferWrap eSend col-md-12">
    <form class="transferWizard depositForm">
        @php
            $depositGateways = getConfig('payment_gateway', 'deposit');
        @endphp
        @if(!in_array('Payment-BusinessWallet', $depositGateways) || getModule('Payment-BusinessWallet')->getRegistry()['active'] == 0)
            <div class="enableWalletMsg">
                <i class="icon-wallet"></i>
                <p>{{ _mt($moduleId,'BusinessWallet.please_activate_business_wallet') }}</p>
            </div>
        @else
            <input type="hidden" name="context" value="deposit">
            <input type="hidden" name="gateway" value="{{ $gateway }}">
            <input type="hidden" name="wallet" value="{{ $moduleId }}">
            <div class="successNotice">
                <i class="fa fa-check"></i>
                <h3>{{ _mt($moduleId,'BusinessWallet.successfully_deposited') }}</h3>
            </div>
            <div class="inputs row" style="padding: 15px 0px;">
                <div class="firstPart col-md-12">
                    <div class="errorNotice">
                        <h3>{{ _mt($moduleId,'BusinessWallet.something_went_wrong') }}</h3>
                        <div class="errorWrapper"></div>
                    </div>
                    <h2 class="heading">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
                            <!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ -->
                            <path fill="currentColor" fill-rule="evenodd"
                                  d="M7.945 4.25h5.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.554.555.817 1.242.95 2.05c.809.132 1.495.396 2.05.95c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v.11c0 1.367 0 2.47-.116 3.337c-.121.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-5.11c-1.367 0-2.47 0-3.336-.116c-.9-.122-1.658-.38-2.26-.982c-.555-.555-.818-1.242-.95-2.05c-.81-.133-1.496-.396-2.05-.95c-.603-.602-.861-1.36-.982-2.26c-.117-.867-.117-1.97-.117-3.337v-.11c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117m-1.99 13.482c.106.402.255.66.454.859c.277.277.666.457 1.4.556c.755.102 1.756.103 3.191.103h5c1.436 0 2.437-.002 3.192-.103c.734-.099 1.122-.28 1.4-.556c.276-.277.457-.665.555-1.4c.102-.754.103-1.755.103-3.19s-.001-2.437-.103-3.193c-.098-.734-.279-1.122-.556-1.399c-.2-.2-.456-.349-.86-.454c.019.59.019 1.251.019 1.99v.11c0 1.367 0 2.47-.116 3.337c-.122.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-5.11c-.739 0-1.4 0-1.99-.018M4.809 5.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4c-.101.754-.103 1.756-.103 3.191s.002 2.437.103 3.192c.099.734.28 1.122.556 1.399c.277.277.665.457 1.4.556c.754.101 1.756.103 3.191.103h5c1.435 0 2.437-.002 3.192-.103c.734-.099 1.122-.28 1.399-.556c.277-.277.457-.665.556-1.4c.101-.755.103-1.756.103-3.191s-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.754-.101-1.756-.103-3.191-.103H8c-1.435 0-2.437.002-3.192.103M10.5 9.25a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5M7.25 11a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0M5 8.25a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9A.75.75 0 0 1 5 8.25m11 0a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75"
                                  clip-rule="evenodd"/>
                        </svg>
                        {{-- <i class="icon-paper-plane"></i>--}}
                        <span>{{ _mt($moduleId,'BusinessWallet.deposit') }}</span>
                    </h2>
                    <div class="eachRow row">
                        <div class="remarks col-md-8">
                        <textarea name="remarks" id="remarks"
                                  placeholder="{{ _mt($moduleId,'BusinessWallet.remark') }}"></textarea>
                        </div>
                    </div>
                </div>
                <div class="secondPart col-md-12">
                    <div class="eachRow primary row">
                        <div class="eachInput col-md-8">
                            <div class="fieldCover">
                                <span class="icon">{{ currencySymbol() }}</span>
                                <input type="number" name="amount" id="amount" value="10"
                                       placeholder="{{ _mt($moduleId,'BusinessWallet.enter_amount') }}" min="1"
                                       onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 46 && event.charCode <= 57"
                                       style="border: 0px;"/>
                            </div>
                        </div>
                        <div class="eachInput col-md-8">

                            <div class="depositInit">
                                <i class="fa fa-spin icon-refresh"></i>
                                {{ _mt($moduleId,'BusinessWallet.deposit') }}
                                <i class="fa fa-angle-double-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </form>
    <div class="transactionPassLoader" data-unit="transactionPassView"></div>
</div>
@endif
<script type="text/javascript">
    //Transfer Init
    $(function () {
        window.paymentSuccessCallback = function (response) {
            if (response.result && response.result.original && response.result.original.errors) {
                toastr.error(response.result.original.errors);
                setTimeout(function () {
                    window.location.reload();
                }, 1000)
                return;
            }
            postPayment(response);
        };
    });

    $('body').off('click', '.depositInit').on('click', '.depositInit', function () {
        var me = $(this);
        me.addClass('loading');

        if ($('#amount').val() == '') {
            $('#amount').addClass('errorAlert');
        } else {
            $('#amount').removeClass('errorAlert');
        }

        if (!$('#remarks').val()) {
            $('#remarks').addClass('errorAlert');
        } else {
            $('#remarks').removeClass('errorAlert');
        }

        if ($('#amount').val() == 0) {
            $('#amount').addClass('errorAlert');
        } else {
            $('#amount').removeClass('errorAlert');
        }

        if (validatePaymentForm() === false) {
            me.removeClass('loading');
            return false;
        }
        var formDatas = $('form.transferWizard').serialize();
        var post = $.post('{{ scopeRoute("businessWallet.validate.deposit") }}', formDatas, function (response) {
            //postPayment(response);
            $('.transferWizard').slideUp().siblings().slideDown();
            window.targetForm = $('.transferWizard');
            refreshAjaxData($('.transactionPassLoader'), '{!! scopeRoute("businessWallet.initPayment") !!}', {'verifyOnly': false});
        }).fail(function (response) {
            switch (response.status) {
                case 422:
                    var errors = response.responseJSON;
                    addPaymentError(errors);
                    break;

                case 403:
                    $('.transferWizard').slideUp().siblings().slideDown();
                    refreshAjaxData($('.transactionPassLoader'), '{!! scopeRoute("businessWallet.unit") !!}', {
                        'verifyOnly': false,
                        'action': 'deposit'
                    });
            }
            me.removeClass('loading');
        });
    });

    //Payment form validation
    function validatePaymentForm() {

        {{--if (!$('#amount').val()) {--}}
        {{--    $('#amount').addClass('errorAlert');--}}
        {{--    addPaymentError({amountMissing: "{{ _mt($moduleId, 'BusinessWallet.please_set_amount') }}"});--}}
        {{--    return false;--}}
        {{--}--}}
        {{--else{--}}
        {{--    $('#amount').removeClass('errorAlert');--}}
        {{--}--}}

        {{--if (!$('#remarks').val()) {--}}
        {{--    $('#remarks').addClass('errorAlert');--}}
        {{--    addPaymentError({remarkMissing: "{{ _mt($moduleId, 'BusinessWallet.please_enter_remark') }}"});--}}
        {{--    return false;--}}
        {{--}--}}
        {{--else{--}}
        {{--    $('#remarks').removeClass('errorAlert');--}}
        {{--}--}}

        {{--if ($('#amount').val() == 0) {--}}
        {{--    $('#amount').addClass('errorAlert');--}}
        {{--    addPaymentError({zeroAmount: "{{ _mt($moduleId, 'BusinessWallet.transaction_amount_zero_not_allowed') }}"});--}}
        {{--    return false;--}}
        {{--}--}}
        {{--else{--}}
        {{--    $('#amount').removeClass('errorAlert');--}}
        {{--}--}}

        resetPaymentErrors();

        return true;
    }

    //Reset all payment errors
    function resetPaymentErrors() {
        $('.errorNotice').slideUp().find('.errorWrapper').empty().slideUp();
    }

    //Add payment errors
    function addPaymentError(errors) {
        //console.log(errors);
        $('.errorNotice').slideDown().find('.errorWrapper').slideDown();

        for (var key in errors) {
            var message = $.isArray(errors[key]) ? errors[key][0] : errors[key];
            var outPut = '<div class="eachError">';
            // outPut += '<span class="key">' + key + '</span><i>-</i>';
            outPut += '<span class="message">' + message + '</span>';
            outPut += '</div>';
            $('.errorNotice .errorWrapper').append(outPut);
        }
    }

    //Post payment actions
    function postPayment(response) {
        var balance = response.balance;
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            formattingFn: function (number) {
                return '{{ currencySymbol() }}' + number;
            },
        };

        var counter = new CountUp("balanceAmount", Number($('#balanceAmount').attr('data-amount')), balance, 3, 2.5, options);
        counter.start();
        $('.transferWizard').slideDown().siblings().slideUp().promise().done(function () {
            $('.successNotice').slideDown().next().slideUp();
            $('.depositInit').removeClass('loading');
            setTimeout(function () {
                $('.successNotice').slideUp().next().slideDown();
                $('.transferWizard input[type="text"],textarea').val('');
            }, 5000);
        });
    }
</script>