Group Custom Field by Tab about pods HOT 3 OPEN

<?php
/**
 * Plugin Name: Dev Draft
 * Version: 1.0.0
 */

add_action( 'admin_enqueue_scripts', '__enqueue_pods_tabs_assets' );

function __enqueue_pods_tabs_assets(): void {

	wp_enqueue_style( 'pods-tabs-style',
		plugin_dir_url( __FILE__ ) . 'dev.css',
		null,
		null );

	wp_enqueue_script( 'pods-tabs-script',
		plugin_dir_url( __FILE__ ) . 'dev.js',
		null,
		null );
}

/**-----------------------------------------------------**/


add_filter('pods_form_ui_field_row', 'custom_tabbed_interface', 10000, 6);

function custom_tabbed_interface($output, $name, $value, $options, $pod, $id) {
	$custom_class = $options['class'] ?? '';

	if (preg_match('/tab-(\d+)/', $custom_class, $matches)) {
		$tab_index = $matches[1];

		static $current_tab = 0;
		if ($tab_index !== $current_tab) {
			if ($current_tab !== 0) {
				$output = '</div>' . $output;
			}
			$output = '<div class="pods-tab" id="tab-' . $tab_index . '">' . $output;
			$current_tab = $tab_index;
		}
	}

	add_action('pods_form_pre_footer', function() use ($current_tab) {
		if ($current_tab !== 0) {
			echo '</div>';
		}
	});

	return $output;
}

document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.pods-tab-nav li');
    const tabPanels = document.querySelectorAll('.pods-tab');

    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            tabs.forEach(node => node.classList.remove('active'));
            tabPanels.forEach(panel => panel.classList.remove('active'));

            tab.classList.add('active');
            tabPanels[index].classList.add('active');
        });
    });
    
    const defaultTab = document.querySelector('.pods-tab-nav li:first-child');
    if (defaultTab) {
        defaultTab.click();
    }
});

.pods-tab {
    display: none;
}

.pods-tab.active {
    display: block;
}

.pods-tab-nav {
    display: flex;
    list-style-type: none;
    padding: 0;
}

.pods-tab-nav li {
    margin-right: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f9f9f9;
}

.pods-tab-nav li.active {
    background-color: #e2e2e2;
    border-color: #888;
}