Aquarius.component.define('Frontend/TableAccordion', function ($element, options) {

    var defaults = {};

    function TableAccordion() {
    }

    TableAccordion.prototype = {
        init: function () {
            var self = this;

            this.$element = $element;
            this.TableAccordionek = [];
            this.defaults = defaults;
            this.options = Aquarius.extend(this.defaults, options);

            this.events();
            this.populate();
        },
        events: function () {
            const self = this;


        },
        populate: function () {
            const self = this;

            $.each(this.$element.find('table'), function (e, f) {

                let headerItem = $(f).find('tbody > tr:nth-child(1)');

                $(f).prepend('<thead></thead>');
                $(headerItem).clone().appendTo($(f).find('thead'));
                $(f).find('thead td').attr('style','').attr('colspan','');
                $(headerItem).remove();
                $(f).css('display', 'block');

                $(f).addClass('show');

                self.opener($(f));
            });
        },
        opener: function (elem) {
            const self = this;

            $(elem).off('click').on('click', function () {
                $(this).toggleClass('active');
            });
        }
    };

    return TableAccordion;
});