@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
            $transferGateways = getConfig('payment_gateway', 'transfer');
        @endphp
        @if(!in_array('Payment-BusinessWallet', $transferGateways) || getModule('Payment-BusinessWallet')->getRegistry()['active'] == 0)
            <div class="enableWalletMsg">
            <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="transfer">
            <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_sent') }}</h3>
            </div>
            <div class="inputs">
                <h2 class="heading"><i class="icon-paper-plane"></i>{{ _mt($moduleId,'BusinessWallet.send') }}</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" id="amount" 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="to_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="addPayee btn blue" type="button">
                                    <i class="fa fa-user-plus"></i>{{ _mt($moduleId,'BusinessWallet.add_payee') }}
                                </button>
                                <button class="transferInit ladda-button btn primaryButton" data-style="contract" type="button">
                                    {{ _mt($moduleId,'BusinessWallet.pay') }}<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, true) }}</span>
                            <div class="payee">
                                <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>
@endif
    </form>
    <div class="transactionPassLoader" data-unit="transactionPassView"></div>
</div>
<script type="text/javascript">
    //Document ready
    $(function () {
        //User fetcher
        var selectedCallback = function (target, id, name) {
            target.val(name);
            $('.transferWizard .amountInfo .payee').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);
        };
        //Select2
        $(".walletSelect").select2({
            width: '100%'
        });
        Ladda.bind('.ladda-button');
    });

    $('button.addPayee').click(function () {
        var target = $('.transferWizard .amountInfo .payee > label');
        var wallet = $('.transferWizard .dataHolder .walletSelect').val();
        var amount = $('#amount').val();
        var username = $('.transferWizard .amountInfo .payee').slideDown()
            .find('label').attr('data-id');

        if (username == undefined) {
            addPaymentError({addPayee: "{{_mt($moduleId,'BusinessWallet.please_add_payee') }}"});
            $('.userFiller').attr('style', 'border: 1px solid red !important');
            return false;
        } else {
            $('.userFiller').attr('style', 'border: none !important');
            $('.errorNotice').slideDown().find('.errorWrapper').empty();
            $('.errorNotice').hide();
        }
        if (amount == "") {
            addPaymentError({addPayee: "{{_mt($moduleId,'BusinessWallet.please_add_amount') }}"});
            return false;
        } else {
            $('.errorNotice').slideDown().find('.errorWrapper').empty();
            $('.errorNotice').hide();
        }

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

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

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

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

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

        if (exists) return false;

        var user = id + '_' + wallet;

        var html = '<div class="eachUser" data-username="' + name + '" data-id="' + id + '" data-code="' + wallet + '">';
        html += '   <div class="col-md-3" style="margin-bottom: 5px;"><span class="name">' + name + '</span></div>';
        html += '   <input type="hidden" name="payee[' + user + '][id]" value="' + id + '">';
        html += '   <div class="col-md-4" style="margin-bottom: 5px;">';
        html += '       <select name="payee[' + user + '][to_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" value="' + $('[name="amount"]').val() + '" name="payee[' + user + '][amount]" placeholder="{{ _mt($moduleId, 'BusinessWallet.amount') }}" class="syncWithAmount" min="0" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 46 && 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 .payee > label').removeAttr('data-id');
        $(this).closest('.eachUser').remove().promise().done(function () {
            syncSumToDisplay();
        });
    });

    //Transfer Init
    $('body').off('click', '.transferInit').on('click', '.transferInit', function () {
        var me = $(this);
        if (validatePaymentForm() === false) {
            Ladda.stopAll();
            return false;
        }
        var formData = $('form.transferWizard').serialize();
        var post = $.post('{{ scopeRoute("businessWallet.validate.transfer") }}', formData, function (response) {
            Ladda.stopAll();
            $('.transferWizard').slideUp().siblings().slideDown();
            window.targetForm = $('.transferWizard');
            window.paymentSuccessCallback = function (response, wallet) {
                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', '.backToTransfer')
        .on('click', '.backToTransfer', function () {
            $('.txnSummary').remove();
            $('.transferWizard .amountInfo').removeClass('done');
            $('.dataPrepare').slideDown();
            $('.transferWizard .amountInfo .amount').text('{{ _currency(0.00, true) }}').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 .payee > label').text('').data('id', '');
        $('.transferWizard .amountInfo .payee').slideUp();
        syncSumToDisplay();
    }

    //Payment form validation
    function validatePaymentForm() {
        var found = false;
        var username = $('.username').val();
        var amount = $('[name="amount"]').val();
        $('.eachUser .amount input[type="number"]').each(function () {
            if (!$(this).val()) found = true;
        });

        if (username) {
            addPaymentError({addPayee: "{{_mt($moduleId,'BusinessWallet.please_add_payee') }}"});
            return false;
        }

        if (amount) {
            addPaymentError({addPayee: "{{_mt($moduleId,'BusinessWallet.please_add_amount') }}"});
            return false;
        }

        if (found) {
            addPaymentError({amountMissing: "{{_mt($moduleId,'BusinessWallet.amount_missing_fields') }}"});
            return false;
        }
        if (!$('.eachUser').length) {
            addPaymentError({payeeMissing: "{{_mt($moduleId,'BusinessWallet.add_at_least_one_payee') }}"});
            return false;
        }
        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').empty().slideDown();

        for (var key in errors) {
            var message = $.isArray(errors[key]) ? errors[key][0] : errors[key];
            let keyParts = key.split('.');
            let newKey = keyParts[1] ? keyParts[0] + ' ' + $('.eachUser[data-id="' + keyParts[1] + '"]').data('username') + ' ' + keyParts[2] : keyParts[0];
            var outPut = '<div class="eachError">';
            // outPut += '<span class="key">' + newKey + '</span><i>-</i>';
            outPut += '<span class="message">' + message + '</span>';
            outPut += '</div>';

            $('.errorNotice .errorWrapper').append(outPut);
        }
    }

    //Post payment actions
    function postPayment(response) {
        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
        }
        resetPaymentErrors();
        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="payee">' + $('.eachUser[data-id="' + txn['payee'] + '"] .name').first().text() + '</span>';
            transactionOutput += '</div>';
        }
        transactionOutput += '</div><button class="btn blue backToTransfer"><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>