@php use App\Eloquents\Module; @endphp
@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-Ewallet', $transferGateways) || getModule('Payment-Ewallet')->getRegistry()['active'] == 0)
            <div class="enableWalletMsg">
                <div class="enableWalletMsg">
                    <i class="icon-wallet"></i>
                    <p>{{ _mt($moduleId,'Ewallet.please_activate_ewallet') }}</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,'Ewallet.successfully_sent') }}</h3>
                    </div>
                    <div class="inputs">
                        <h2 class="heading"><i class="icon-paper-plane"></i>{{ _mt($moduleId,'Ewallet.send') }}</h2>
                        <div class="errorNotice">
                            {{--                <h3>{{ _mt($moduleId, 'Ewallet.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,'Ewallet.select_user') }}"
                                               class="userFiller field username">
                                    </div>
                                    <div id="errorUsername" style="color: red"></div>
                                    <div class="fieldCover">
                                        <span class="icon">{{ currencySymbol() }}</span>
                                        <input type="number" name="amount" id="amount" min="0"
                                               onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 46 && event.charCode <= 57"
                                               placeholder="{{ _mt($moduleId,'Ewallet.enter_amount') }}"
                                               class="syncWithAmount field amount">
                                    </div>
                                    <div id="errorNotice1" style="color: red"></div>
                                    @if($walletConfig->get('cross_transfer'))
                                        <div class="fieldCover">
                                            <i class="fa fa-google-wallet"></i>
                                            <select class="walletSelect field wallet" name="to_wallet">
                                                @foreach($wallets as $wallet)
                                                    @if(in_array($wallet->moduleId,$walletConfig->get('cross_wallets')))
                                                        <option
                                                            value="{{ $wallet->moduleId }}">{{ $wallet->registry['name'] }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="to_wallet" id="to_wallet" value="{{ $moduleId }}">
                                    @endif
                                    <div class="fieldCover">
                                <textarea name="remarks" placeholder="{{ _mt($moduleId,'Ewallet.remarks') }}"
                                          class="field remarks"></textarea>
                                    </div>
                                    <div class="row actions" style="margin: 0px 0px 10px 0px;">
                                        <button class="addPayee transactionDetails btn secondaryButton" type="button">
                                            <i class="fa fa-user-plus"></i>{{ _mt($moduleId,'Ewallet.add_payee') }}
                                        </button>
                                        <button class="transferInit ladda-button btn primaryButton"
                                                data-style="contract" type="button">
                                            {{ _mt($moduleId,'Ewallet.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,'Ewallet.total_amount') }}</label>
                                    <span class="amount">{{ currency(0) }}</span>
                                    <div class="transactionFee"></div>
                                    <div class="payee">
                                        <span class="amountToPay"></span>
                                        <span><i class="fa fa-angle-double-right"></i> </span>
                                        <label></label>
                                    </div>
                                </div>
                                @if(isset($walletConfig['minimum_transfer']) && $walletConfig['minimum_transfer'] == true && isset($walletConfig['minimum_amount']) || isset($walletConfig['maximum_transfer']) && $walletConfig['maximum_transfer'] == true && isset($walletConfig['maximum_amount']))
                                    <div class="settingsNote" id="AmountNoteDiv">
                                        @if($walletConfig['minimum_transfer'] && $walletConfig['minimum_transfer'] == true && isset($walletConfig['minimum_amount']))
                                            <p>{{ _mt($moduleId,'Ewallet.minimum_transfer_amount') }} :
                                                <strong>{{ currency($walletConfig['minimum_amount']) }}</strong></p>
                                        @endif
                                        @if(isset($walletConfig['maximum_transfer']) && $walletConfig['maximum_transfer'] == true && isset($walletConfig['maximum_amount']))
                                            <p>{{ _mt($moduleId, 'Ewallet.maximum_transfer_amount') }} :
                                                <strong>{{ currency($walletConfig['maximum_amount']) }}</strong></p>
                                        @endif
                                    </div>
                                @endif
                            </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',
            @if ($walletConfig->get('fund_transfer_restricted_to') != 'all')
            ajaxData: {downlineRelation: "{{ $walletConfig->get('fund_transfer_restricted_to') }}", includeSelf: false},
            @endif
            selectedCallback: selectedCallback
        };
        $('.userFiller').ajaxFetch(options);

        window.transactionPassSuccessCallback = function (response) {
            $('form.transferWizard').slideDown().siblings().slideUp();
            postPayment(response);
            //$('.transferInit').trigger('click');
        };
        //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 name = target.text();
        var loggedUsername = "{{ loggedUser()->member_id }}";
        var module = {{ Module::where('slug','Wallet-Ewallet')->first()->id }};
        if (name == "") {
            addPaymentError({addPayee: "{{_mt($moduleId,'Ewallet.please_add_payee') }}"});
            return false;
        } else {
            $('.errorNotice').slideDown().find('.errorWrapper').empty();
            $('.errorNotice').hide();
        }

        if (amount == "") {
            addPaymentError({addPayee: "{{_mt($moduleId,'Ewallet.please_add_amount') }}"});
            return false;
        } else {
            $('.errorNotice').slideDown().find('.errorWrapper').empty();
            $('.errorNotice').hide();
        }

        if (loggedUsername == name && (wallet ? module == wallet : true)) {
            addPaymentError({addPayee: "{{_mt($moduleId,'Ewallet.cannot_send_money_to_your_own_account') }}"});
            return false;
        } else {
            $('.errorNotice').slideDown().find('.errorWrapper').empty();
            $('.errorNotice').hide();
        }


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

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

    });

    $('.transactionDetails').click(function () {
        $.post('{{ scopeRoute("eWallet.transactionCharge") }}', $('.transferWizard').serialize(), function (response) {
            $('.transactionFee').html(response);
            Ladda.stopAll();
        });
    });

    $('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;">';
        @if ($walletConfig->get('cross_transfer'))
            html += '       <select name="payee[' + user + '][to_wallet]">';
        @foreach($wallets as $wallet)
            @if(in_array($wallet->moduleId, $walletConfig->get('cross_wallets')))
            html += '<option value="{{ $wallet->moduleId }}">{{ $wallet->registry['name']}}</option>';
        @endif
            @endforeach
            html += '       </select>';
        @else
            html += '   <input type="hidden" name="payee[' + user + '][to_wallet]" value="{{$moduleId}}" >';
        @endif
            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, 'Ewallet.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 () {
        $(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 = $('.transferWizard').serialize();
        var post = $.post('{{ scopeRoute("eWallet.validate.transfer") }}', formData, function (response) {
            //postPayment(response);
            Ladda.stopAll();

            $('#AmountNoteDiv').addClass('hiddenDiv');
            // $('#maximumAmountDiv').addClass('hiddenDiv');
            $('.transferWizard').slideUp().siblings().slideDown();
            window.targetForm = $('.transferWizard');
            window.paymentSuccessCallback = function (response, wallet) {
                if (
                    Array.isArray(response.result) &&
                    response.result[0]?.original?.errors
                ) {
                    toastr.error(response.result[0].original.errors);
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000)
                    return;
                }
                if (wallet != 'ewallet') return;
                postPayment(response);
            };
            refreshAjaxData($('.transactionPassLoader'), '{{ scopeRoute("eWallet.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();
            $('#AmountNoteDiv').removeClass('hiddenDiv');
            // $('#maximumAmountDiv').removeClass('hiddenDiv');
            $('.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 .payee > label').text('').data('id', '');
        $('.transferWizard .amountInfo .payee').slideUp();
        syncSumToDisplay();
    }

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

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

        if (found) {
            addPaymentError({amountMissing: "{{_mt($moduleId,'Ewallet.amount_missing_fields') }}"});
            return false;
        }
        if (!$('.eachUser').length) {
            addPaymentError({payeeMissing: "{{_mt($moduleId,'Ewallet.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) {
        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,'Ewallet.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, 'Ewallet.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>
<style>
    .hiddenDiv {
        display: none !important;
    }

    .transferWizard .amountInfo .settingsNote {
        background-color: #fff;
        border: solid 1px #e1dada;
        /*border-left: solid 3px #6fd7ed;*/
        padding: 0px 10px;
        margin: 5px;
    }

    .transferWizard .amountInfo .settingsNote p {
        margin: 5px 0px;
    }
</style>