(function ($) {
    $.field_paymentsimage = function (element, options) {
        var defaults = {
            field_name: 0
        }
        var plugin = this;
        plugin.settings = {}
        var $element = $(element),
            element = element;

        plugin.init = function () {
            plugin.settings = $.extend({}, defaults, options);
            let field_name = plugin.settings.field_name;
            $element.find('.wrapper-payment').click(function (e) {
                let $self = $(this);
                $element.find('.wrapper-payment').removeClass('active');
                $element.find('.wrapper-payment .selected').hide();
                $element.find('.wrapper-payment .payment-name').removeClass('active');
                let payment_id = $self.data('payment_id');
                $self.addClass('active');
                $self.find('.selected').show();
                $self.find('.payment-name').addClass('active');
                $element.find(`input[name="${field_name}"]`).val(payment_id);
                $element.find('label.error').hide();
            });
        };
        plugin.hide_payment_online = function (hidden) {
            let field_name = plugin.settings.field_name;
            $element.find('.list-payment li.payment-online').each(function (e) {
                if (hidden === true || hidden === 1) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            });
            $element.find(`input[name="${field_name}"]`).val("");
        };
        plugin.example_function = function () {
        };
        plugin.init();
    }
    $.fn.field_paymentsimage = function (options) {
        return this.each(function () {
            if (undefined == $(this).data('field_paymentsimage')) {
                var plugin = new $.field_paymentsimage(this, options);
                $(this).data('field_paymentsimage', plugin);
            }
        });
    }
})(jQuery);
