jQuery(document).ready(function($) {
    $('.didak-tabs').each(function() {
        var $tabSet = $(this);
        var $tabsNav = $tabSet.find('.didak-tabs-nav');
        var $tabsContent = $tabSet.find('.didak-tabs-content');

        // Set first tab as active by default
        $tabsNav.find('a:first').addClass('active');
        $tabsContent.find('.tab-content:first').addClass('active');

        $tabsNav.on('click', 'a', function(e) {
            e.preventDefault();
            var $this = $(this);
            var target = $this.attr('href');

            // Update active states
            $this.addClass('active').parent().siblings().find('a').removeClass('active');
            $(target).addClass('active').siblings('.tab-content').removeClass('active');

            // Apply active styles
            updateTabStyle($this, true);
            $this.parent().siblings().find('a').each(function() {
                updateTabStyle($(this), false);
            });
        });

        function updateTabStyle($tab, isActive) {
            var bgColor = isActive ? $tab.data('active-bg-color') : $tab.data('bg-color');
            var textColor = isActive ? $tab.data('active-text-color') : $tab.data('text-color');
            var borderColor = isActive ? $tab.data('active-border-color') : $tab.data('border-color');
            var borderWidth = isActive ? $tab.data('active-border-width') : $tab.data('border-width');
            var innerShadowSize = isActive ? $tab.data('active-inner-shadow-size') : $tab.data('inner-shadow-size');
            var innerShadowColor = isActive ? $tab.data('active-inner-shadow-color') : $tab.data('inner-shadow-color');

            $tab.css({
                'background-color': bgColor,
                'color': textColor,
                'border-color': borderColor,
                'border-width': borderWidth,
                'box-shadow': 'inset 0 0 ' + innerShadowSize + ' ' + innerShadowColor
            });
        }

        // Initialize styles for all tabs
        $tabsNav.find('a').each(function() {
            updateTabStyle($(this), $(this).hasClass('active'));
        });
    });
});