@foreach($styles as $style)
    <link href="{{ $style }}" rel="stylesheet" type="text/css"/>
@endforeach
<div class="transferWrap wallet eSend col-md-12">
    <form class="transferWizard">
        @php
            $deductionGateways = getConfig('payment_gateway', 'deduct');
        @endphp
        @if(!in_array('Payment-BusinessWallet', $deductionGateways) || 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="deduct">
            <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_deducted') }}</h3>
            </div>
            <div class="inputs">
                <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="M9.944 3.25h4.112c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238c.748.749 1.08 1.698 1.238 2.87c.09.673.127 1.456.142 2.363a.8.8 0 0 1 .004.23q.009.848.007 1.84V12a.75.75 0 0 1-1.5 0q0-.668-.002-1.25H2.752q-.003.582-.002 1.25c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h4a.75.75 0 0 1 0 1.5H9.944c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433v-.112q-.002-.992.007-1.84a.8.8 0 0 1 .003-.23c.016-.907.053-1.69.143-2.363c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153m-7.168 6h18.448a16 16 0 0 0-.114-1.54c-.135-1.005-.389-1.585-.812-2.008s-1.003-.677-2.009-.812c-1.027-.138-2.382-.14-4.289-.14h-4c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S3.025 6.705 2.89 7.71c-.06.445-.094.952-.114 1.539m16.224 4a.75.75 0 0 1 .75.75v4.19l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l.72.72V14a.75.75 0 0 1 .75-.75M5.25 16a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75m6.5 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75" clip-rule="evenodd"/></svg>
                    {{--<i class="icon-paper-plane"></i>--}}
                   <span>{{ _mt($moduleId,'BusinessWallet.deduct') }}</span> </h2>
                <div class="errorNotice">
                    <h3>{{ _mt($moduleId, 'BusinessWallet.something_went_wrong') }}</h3>
                    <div class="errorWrapper"></div>
                </div>
                <div class="row">
                    <div class="dataPrepare col-md-6">
                        <div class="dataHolder">
                            <div class="fieldCover">
                                <i class="fa fa-user"></i>
                                <input type="text" placeholder="{{ _mt($moduleId,'BusinessWallet.select_user') }}"
                                       class="userFiller field username">
                            </div>
                            <div class="fieldCover">
                                <span class="icon">{{ currencySymbol() }}</span>
                                <input type="number" name="amount"
                                       placeholder="{{ _mt($moduleId,'BusinessWallet.enter_amount') }}"
                                       class="syncWithAmount field amount" min="0"
                                       onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 46 && event.charCode <= 57">
                            </div>
                            <div class="fieldCover">
                                <i class="fa fa-google-wallet"></i>
                                <select class="walletSelect field wallet" name="from_wallet">
                                    @foreach($wallets as $wallet)
                                        @if($wallet->moduleId != $moduleId)
                                            <option
                                                value="{{ $wallet->moduleId }}">{{ $wallet->registry['name'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="fieldCover">
                                <textarea name="remarks" placeholder="{{ _mt($moduleId,'BusinessWallet.remarks') }}"
                                          class="field remarks"></textarea>
                            </div>
                            <div class="row actions" style="margin: 0px 0px 10px 0px;">
                                <button class="addUser btn blue" type="button">
                                    <i class="fa fa-user-plus"></i>{{ _mt($moduleId,'BusinessWallet.add_user') }}
                                </button>
                                <button class="deductInit ladda-button btn green" data-style="contract" type="button">
                                    {{ _mt($moduleId,'BusinessWallet.deduct') }}<i class="fa fa-angle-double-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 amountInfo">
                        <div class="content">
                            <label>{{ _mt($moduleId,'BusinessWallet.total_amount') }}</label>
                            <span class="amount">{{ currency(0) }}</span>
                            <div class="payer" style="display: none!important">
                                <span class="amountToPay"></span>
                                <span><i class="fa fa-angle-double-right"></i> </span>
                                <label></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="userHolder"></div>
    </form>
    <div class="transactionPassLoader" data-unit="transactionPassView"></div>
</div>
@endif
<script type="text/javascript">
    $(function () {
        //User fetcher
        var selectedCallback = function (target, id, name) {
            target.val(name);
            $('.transferWizard .amountInfo .payer').slideDown()
                .find('label').attr('data-id', id).text(name)
                .siblings('span.amountToPay').html('{{ currencySymbol() }}' + ($('.dataHolder .field.amount').val() ? $('.dataHolder .field.amount').val() : 0));
        };
        var options = {
            target: '.userFiller',
            route: '{{ route("user.api") }}',
            action: 'getUsersByMemberId',
            name: 'member_id',
            selectedCallback: selectedCallback
        };
        $('.userFiller').ajaxFetch(options);

        window.transactionPassSuccessCallback = function (response) {
            $('form.transferWizard').slideDown().siblings().slideUp();
            postPayment(response);
            //$('.deductInit').trigger('click');
        };
        //Select2
        $(".walletSelect").select2({
            width: '100%'
        });
        Ladda.bind('.ladda-button');
    });

    $('button.addUser').click(function () {
        var target = $('.transferWizard .amountInfo .payer > label');

        var username = $('.transferWizard .amountInfo .payer').slideDown()
            .find('label').attr('data-id');

        if (username == undefined) {
            addPaymentError({addPayee: "{{_mt($moduleId,'BusinessWallet.please_add_payer') }}"});
            $('.userFiller').attr('style', 'border: 1px solid red !important');
            return false;
        } else {
            $('.userFiller').attr('style', 'border: none !important');
        }

        if (!target.attr('data-id')) return;

        addUser(target.attr('data-id'), target.text());
    });

    $('input.syncWithAmount.field.amount').keyup(function () {
        $('.transferWizard .amountInfo .payer > span.amountToPay').text('{{ currencySymbol() }}' + $(this).val());
    });

    function addUser(id, name) {
        $('.eachUser.success').remove();
        var exists = false;

        $('.userHolder .eachUser').each(function () {
            if ($(this).attr('data-id') === id) exists = true;
        });

        if (exists) return false;

        var post = $.post('{{ scopeRoute("businessWallet.balance") }}', {
            user_id: id,
            wallet: $('[name="from_wallet"]').val()
        }, function (response) {
            if (Number(response) < Number($('[name="amount"]').val())) {
                addPaymentError({inSufficientBalance: "{{ _mt($moduleId, 'BusinessWallet.no_sufficient_balance_for_the_user') }}"});
                return false;
            }
            if ($('[name="amount"]').val() <= 0) {
                addPaymentError({zeroAmount: "{{ _mt($moduleId, 'BusinessWallet.transaction_amount_zero_not_allowed') }}"});
                return false;
            } else {
                resetPaymentErrors();
                var html = '<div class="eachUser" data-id="' + id + '">';
                html += '   <div class="col-md-3" style="margin-bottom: 5px;"><span class="name">' + name + '</span></div>';
                html += '   <input type="hidden" name="payer[' + id + '][id]" value="' + id + '">';
                html += '   <div class="col-md-4" style="margin-bottom: 5px;">';
                html += '       <select name="payer[' + id + '][from_wallet]">';
                @foreach($wallets as $wallet)
                    @if($wallet->moduleId != $moduleId)
                    html += '<option value="{{ $wallet->moduleId }}">{{ $wallet->registry['name']}}</option>';
                @endif
                    @endforeach
                    html += '       </select>';
                html += '   </div>';
                html += '   <div class="col-md-3 col-xs-4" style="margin-bottom: 5px;"><span class="amount"><input type="number" min="0" value="' + $('[name="amount"]').val() + '" name="payer[' + id + '][amount]" placeholder="{{ _mt($moduleId, 'BusinessWallet.amount') }}" class="syncWithAmount"  onkeypress="return event.charCode >= 48 && event.charCode <= 57"/></span></div>';
                html += '   <div class="col-md-2 col-xs-3" style="margin-bottom: 5px;"><button class="btn red remove"><i class="fa fa-close"></i></button></div>';
                html += '</div>';

                $('.transferWrap .userHolder').slideDown().append(html).promise().done(function () {
                    syncSumToDisplay();
                    $('.userHolder .eachUser').last().find('select').val($('.walletSelect').val());
                    $('.userHolder .eachUser select').select2({
                        width: '100%',
                    });
                    resetPayeeForm();
                });
            }
        });
    }

    //Remove user from list
    $('body').on('click', '.eachUser .remove', function () {
        $('.transferWizard .amountInfo .payer').find('label').removeAttr('data-id');
        $(this).closest('.eachUser').remove().promise().done(function () {
            syncSumToDisplay();
        });
    });

    //Transfer Init
    $('body').off('click', '.deductInit').on('click', '.deductInit', function () {
        var me = $(this);
        if (validatePaymentForm() === false) {
            Ladda.stopAll();
            return false;
        }
        var formData = $('form.transferWizard').serialize();
        var post = $.post('{{ scopeRoute("businessWallet.validate.deduct") }}', formData, function (response) {
            // postPayment(response);
            Ladda.stopAll();

            $('.transferWizard').slideUp().siblings().slideDown();
            window.targetForm = $('.transferWizard');
            window.paymentSuccessCallback = function (response, wallet) {
                if (
                    Array.isArray(response.result) &&
                    response.result.length > 0 &&
                    response.result[0].original &&
                    response.result[0].original.errors
                ) {
                    toastr.error(response.result[0].original.errors);
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000)
                    return;
                }
                if (wallet != 'businessWallet') return;
                postPayment(response);
            };
            refreshAjaxData($('.transactionPassLoader'), '{!! scopeRoute("businessWallet.initPayment") !!}', {'verifyOnly': false});
        }).fail(function (response) {
            Ladda.stopAll();
            var errors = response.responseJSON;
            addPaymentError(errors);
            me.removeClass('loading');
        });
    });

    $('body').off('click', '.backToDeduct')
        .on('click', '.backToDeduct', function () {
            $('.txnSummary').remove();
            $('.transferWizard .amountInfo').removeClass('done');
            $('.dataPrepare').slideDown();
            $('.transferWizard .amountInfo .amount').text('{{ currency(0.00) }}').find('i').remove();
            $('.field.remarks').val('');
        });

    function paymentAmountCounter(target, total) {
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            formattingFn: function (number) {
                return '{{ currencySymbol() }}' + number;
            }
        };
        var target = $('.wallet .transferWizard .amountInfo .amount');
        var counter = new CountUp(target[0], Number(Number(target.text().replace('{{ currencySymbol() }}', ''))), total, 3, 2.5, options);

        counter.start();
    }

    function syncSumToDisplay() {
        var total = 0;

        $('.wallet .userHolder .eachUser').each(function () {
            total += Number($(this).find('span.amount input[type="number"]').val());
        });

        total += Number($('.transferWizard .inputs .syncWithAmount').val());
        var target = $('.wallet .transferWizard .amountInfo .amount');

        paymentAmountCounter(target, total);
    }

    $('.syncWithAmount').dynamicBindWithDelay('keyup', function () {
        syncSumToDisplay();
    }, 200);

    function resetPayeeForm() {
        $('.dataHolder .field.username, .dataHolder .field.amount, .dataHolder').val('');
        $('.dataHolder .field.wallet').select2('val', '');
        $('.transferWizard .amountInfo .payer > label').text('').data('id', '');
        $('.transferWizard .amountInfo .payer').slideUp();
        syncSumToDisplay();
    }

    //Payment form validation
    function validatePaymentForm() {
        var found = false;
        $('.eachUser .amount input[type="number"]').each(function () {
            if (!$(this).val()) found = true;
        });
        if (found) {
            addPaymentError({amountMissing: "{{_mt($moduleId,'BusinessWallet.amount_missing_fields') }}"});
            return false;
        }
        if (!$('.eachUser').length) {
            addPaymentError({payerMissing: "{{_mt($moduleId,'BusinessWallet.add_at_least_one_user') }}"});
            return false;
        }
        resetPaymentErrors();

        return true;
    }

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

    //Add payment errors
    function addPaymentError(errors) {
        $('.errorNotice').slideDown().find('.errorWrapper').empty().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 transactions = (response.multiPayment == true) ? response.result : [response.result];
        var balance = response.balance;
        var transactionOutput = '<div class="txnSummary"><div class="inner">';
        var total = 0;

        for (var key in transactions) {
            var txn = transactions[key]['transaction'];
            total += Number(txn['convertedAmount']);
            transactionOutput += '<div class="eachTxn">';
            transactionOutput += '<span class="transactionId">{{ _mt($moduleId, 'BusinessWallet.txn_id') }} : #' + txn['id'] + '</span>';
            transactionOutput += '<span class="amount">' + txn['convertedAmount'] + '</span>';
            transactionOutput += '<span class="toIcon"><i class="fa fa-angle-double-right"></i></span>';
            transactionOutput += '<span class="payer">' + $('.eachUser[data-id="' + txn['payer'] + '"] .name').text() + '</span>';
            transactionOutput += '</div>';
        }
        transactionOutput += '</div><button class="btn blue backToDeduct"><i class="fa fa-angle-left"></i>' + '{{ _mt($moduleId, "BusinessWallet.back") }}' + '</button></div>';

        var target = $('.wallet .transferWizard .amountInfo .amount');
        paymentAmountCounter(target, total);

        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();

        $('.transactionPassLoader').slideUp().siblings('.transferWizard').slideDown().promise().done(function () {
            $(".userHolder").empty().fadeOut();
            $('.dataPrepare').hide();
            $('.transferWizard .amountInfo .amount').prepend('<i class="fa fa-check"></i>');
            setTimeout(function () {
                $('.transferWizard .amountInfo').addClass('done').append(transactionOutput);
            }, 500);
        });
    }
</script>