// Tab functionality for notifications and messages
document.addEventListener('DOMContentLoaded', function() {
    // start: Tab
    document.querySelectorAll('[data-tab]').forEach(function (item) {
        item.addEventListener('click', function (e) {
            e.preventDefault();
            const tab = item.dataset.tab;
            const page = item.dataset.tabPage;
            const target = document.querySelector('[data-tab-for="' + tab + '"][data-page="' + page + '"]');
            
            // Remove active class from all tab buttons
            document.querySelectorAll('[data-tab="' + tab + '"]').forEach(function (i) {
                i.classList.remove('active');
            });
            
            // Hide all tab content
            document.querySelectorAll('[data-tab-for="' + tab + '"]').forEach(function (i) {
                i.classList.add('hidden');
            });
            
            // Add active class to clicked tab button and show its content
            item.classList.add('active');
            if (target) {
                target.classList.remove('hidden');
            }
        });
    });
    // end: Tab
});