@foreach($scripts as $script)
    {!! $script !!}
@endforeach
@foreach ($styles as $style)
    {!! $style !!}
@endforeach
<div class="bankWire bankWirePayout">
    <h3>{{ _mt($moduleId,'BankWire.Please_select_the_account_to_withdraw') }}</h3>
    <div class="addressHolder owl-theme">
        <div class="address newAddress">
            <h4><i class="fa fa-plus"></i> {{ _mt($moduleId,'BankWire.Add_new') }}</h4>
        </div>
        @if($bankAccounts->count())
            @foreach($bankAccounts as $bankAccount)
                <div class="address @if($selectedAccount == $bankAccount->id) selected @endif"
                     data-id="{{  $bankAccount->id }}">
                    <div class="bankInfo">
                        <div class="addressInfo">
                            <div class="each">
                                <label>{{ _mt($moduleId,'BankWire.bank_name') }}</label>
                                <span>{{ $bankAccount->bank_name }}</span>
                            </div>
                            <div class="each">
                                <label>{{ _mt($moduleId,'BankWire.Account_Holder') }}</label>
                                <span>{{ $bankAccount->account_holder }}</span>
                            </div>
                            <div class="each">
                                <label>{{ _mt($moduleId,'BankWire.Account_no') }}</label>
                                <span>{{ $bankAccount->account_number }}</span>
                            </div>
                            <div class="each">
                                <label>{{ _mt($moduleId,'BankWire.branch') }}</label>
                                <span>{{ $bankAccount->branch }}</span>
                            </div>
                            <div class="each">
                                <label>{{ _mt($moduleId,'BankWire.ifsc') }}</label>
                                <span>{{ $bankAccount->ifsc }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
    <input type="hidden" name="account" id="account"
           @if($bankAccounts->count())value="{{ $bankAccounts[0]->id }}" @endif>
</div>
<form class="newBankAccount">
    <h3>{{ _mt($moduleId,'BankWire.New_account') }}</h3>
    <div class="eachField flex">
        <div class="inputHolder">
            <i class="fa fa-bank"></i>
            <input type="text" name="bank_name" placeholder="{{ _mt($moduleId,'BankWire.Bank_name') }}">
        </div>
    </div>
    <div class="eachField flex">
        <div class="inputHolder">
            <i class="fa fa-bank"></i>
            <input type="text" name="account_holder" placeholder="{{ _mt($moduleId,'BankWire.Account_Holder') }}">
        </div>
    </div>
    <div class="eachField flex">
        <div class="inputHolder">
            <i class="fa fa-sticky-note"></i>
            <input type="text" name="account_number" placeholder="{{ _mt($moduleId,'BankWire.Account_no') }}">
        </div>
    </div>
    <div class="eachField flex">
        <div class="inputHolder">
            <i class="fa fa-diamond"></i>
            <input type="text" name="branch" placeholder="{{ _mt($moduleId,'BankWire.branch') }}">
        </div>
    </div>
    <div class="eachField flex">
        <div class="inputHolder">
            <i class="fa fa-diamond"></i>
            <input type="text" name="ifsc" placeholder="{{ _mt($moduleId,'BankWire.ifsc') }}">
        </div>
    </div>
    <button class="backToPayout btn secondaryButton" type="button">
        <i class="fa fa-angle-left"></i>{{ _mt($moduleId,'BankWire.Back') }}
    </button>
    <button class="submitNewBank btn primaryButton ladda-button" type="button" data-style="contract">
        <i class="fa fa-check"></i>{{ _mt($moduleId,'BankWire.Save') }}
    </button>
</form>
<script type="text/javascript">
    $('.newBankAccount').slideUp().siblings().slideDown();
    $(function () {
        $('body')
            .off('click', '.submitPayout')
            .on('click', '.submitPayout', function (e) {
                e.preventDefault();
                simulateLoading('.bankWirePayout');
                let errorWrapper = $('.bankWirePayout .errorWrapper').slideUp().empty();

                return $.post('{{ scopeRoute('payment.handler') }}', {
                    context: 'payout',
                    gateway: '{{ $moduleId }}',
                    account: $('.bankWirePayout [name="account"]').val(),
                }, function (response) {
                    simulateLoading('.bankWirePayout', true);
                    $('.payoutSuccess').slideDown().siblings().slideUp();
                    $('button.previousStep').slideUp();
                    Ladda.stopAll();
                }).fail(function (response) {
                    Ladda.stopAll();

                    simulateLoading('.bankWirePayout', true);

                    let errors = response.responseJSON;

                    for (let key in errors)
                        errorWrapper.append('<div class="error">' + errors[key] + '</div>');

                    errorWrapper.slideDown();
                });
            });
    });

    Ladda.bind('.ladda-button');

    $('.bankWirePayout .addressHolder').owlCarousel({
        items: 2,
        margin: 5,
        nav: false,
        dots: true,
        center: true
    });

    $('.addressHolder .address').not('.newAddress').click(function () {
        $('.addressHolder .address').removeClass('selected');
        $(this).addClass('selected');
        $('#account').val($(this).attr('data-id'));
    });

    $('.addressHolder .newAddress').click(function () {
        $('.newBankAccount').slideDown().siblings().slideUp();
    });

    $('button.backToPayout').click(function () {
        $('.newBankAccount').slideUp().siblings().slideDown();
    });

    var form = $('.newBankAccount');

    $.validator.addMethod('ajaxValidate', function (value, element, param) {
        var isValid = !$(element).parent().hasClass('ajaxValidationError');
        return isValid; // return bool here if valid or not.
    }, function (param, element) {
        return $(element).siblings('.help-block-error').text();
    });

    var validator = form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {
            'bank_name': {
                required: true,
                ajaxValidate: true,
            },
            'account_holder': {
                required: true,
                ajaxValidate: true,
            },
            'account_number': {
                required: true,
                ajaxValidate: true,
            },
            'branch': {
                required: true,
                ajaxValidate: true,
            },
            'ifsc': {
                required: true,
                ajaxValidate: true,
            },
        },
        messages: {
            'bank_name': {
                required: "{{ _mt($moduleId,'BankWire.Please_enter_bank_name') }}",
            },
            'account_holder': {
                required: "{{ _mt($moduleId,'BankWire.Please_enter_account_holder_name') }}",
            },
            'account_number': {
                required: "{{ _mt($moduleId,'BankWire.Please_enter_account_number') }}",
            },
            'branch': {
                required: "{{ _mt($moduleId,'BankWire.Please_enter_branch') }}",
            },
            'ifsc': {
                required: "{{ _mt($moduleId,'BankWire.Please_enter_ifsc') }}",
            },
        },

        errorPlacement: function (error, element) {
            error.insertAfter(element.closest('.inputHolder')); // for other inputs, just perform default behavior
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group
        },
    });

    //Registration request

    $('.submitNewBank').click(function () {

        $('.ajaxValidationError').removeClass('ajaxValidationError');

        var successCallBack = function (response) {
            Ladda.stopAll();
            simulateLoading($('.bankWirePayout'));
            toastr.success("{{ _mt($moduleId,'BankWire.new_bank_account_added_successfully') }}");
            $('.newBankAccount')[0].reset();
            $('.newBankAccount .form-group').removeClass('has-error');
            $.get('{{ scopeRoute('loadPayoutView') }}', function (response) {
                $('.bankWirePayout').html(response);
                $('.address.newAddress').css('display', 'none');
                $('.address.newAddress').closest('.owl-item').css({
                    'width': '0',
                });
                $('.newBankAccount').slideUp().siblings().slideDown();
            });
        };

        if (!form.valid()) {
            setTimeout(function () {
                Ladda.stopAll();
            }, 500);
            return false;
        }

        var failCallBack = function (response) {
            Ladda.stopAll();
            var errors = response.responseJSON;

            for (var key in errors) {
                var elemKey = key;
                $('.newBankAccount [name="' + elemKey + '"]').parent().addClass('ajaxValidationError');
                var errorOption = {};
                errorOption[elemKey] = errors[key];
                validator.showErrors(errorOption);
            }
        };

        var options = {
            form: form,
            actionUrl: "{{ scopeRoute('addNewBankAccount') }}",
            successCallBack: successCallBack,
            failCallBack: failCallBack
        };
        sendForm(options);
    });
</script>