script.js

// VerifyMC Medical Admin - Notifications Page JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    lucide.createIcons();
    
    // Mobile menu toggle
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const sidebar = document.getElementById('sidebar');
    const sidebarOverlay = document.getElementById('sidebar-overlay');
    
    function toggleMobileMenu() {
        const isOpen = !sidebar.classList.contains('-translate-x-full');
        if (isOpen) {
            sidebar.classList.add('-translate-x-full');
            sidebarOverlay.classList.add('hidden');
            document.body.style.overflow = '';
        } else {
            sidebar.classList.remove('-translate-x-full');
            sidebarOverlay.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }
    }
    
    mobileMenuBtn?.addEventListener('click', toggleMobileMenu);
    sidebarOverlay?.addEventListener('click', toggleMobileMenu);
    
    // User dropdown toggle
    const userDropdownBtn = document.getElementById('user-dropdown-btn');
    const userDropdown = document.getElementById('user-dropdown');
    let dropdownOpen = false;
    
    userDropdownBtn?.addEventListener('click', function(e) {
        e.stopPropagation();
        dropdownOpen = !dropdownOpen;
        if (dropdownOpen) {
            userDropdown.classList.remove('hidden');
        } else {
            userDropdown.classList.add('hidden');
        }
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function() {
        if (dropdownOpen) {
            dropdownOpen = false;
            userDropdown?.classList.add('hidden');
        }
    });
    
    // Tab switching functionality
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Update button styles
            tabBtns.forEach(b => {
                b.classList.remove('bg-primary', 'text-white', 'shadow-sm');
                b.classList.add('text-gray-600', 'hover:bg-gray-50');
            });
            this.classList.remove('text-gray-600', 'hover:bg-gray-50');
            this.classList.add('bg-primary', 'text-white', 'shadow-sm');
            
            // Show corresponding content
            tabContents.forEach(content => {
                content.classList.add('hidden');
            });
            const activeContent = document.getElementById(`tab-${tabName}`);
            if (activeContent) {
                activeContent.classList.remove('hidden');
            }
        });
    });
    
    // Toggle switches functionality
    const toggleSwitches = document.querySelectorAll('.toggle-switch');
    
    toggleSwitches.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const isEnabled = this.classList.contains('bg-primary');
            const span = this.querySelector('span');
            
            if (isEnabled) {
                // Disable
                this.classList.remove('bg-primary');
                this.classList.add('bg-gray-200');
                span.classList.remove('translate-x-6');
                span.classList.add('translate-x-1');
            } else {
                // Enable
                this.classList.remove('bg-gray-200');
                this.classList.add('bg-primary');
                span.classList.remove('translate-x-1');
                span.classList.add('translate-x-6');
            }
        });
    });
    
    // Save Changes button interaction
    const saveBtn = document.querySelector('button:has([data-lucide="save"])');
    const cancelBtn = document.querySelector('button:contains("Cancel")') || 
                    Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Cancel'));
    
    saveBtn?.addEventListener('click', function() {
        // Show loading state
        const originalContent = this.innerHTML;
        this.disabled = true;
        this.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Saving...';
        lucide.createIcons();
        
        // Simulate API call
        setTimeout(() => {
            this.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> Saved!';
            lucide.createIcons();
            
            setTimeout(() => {
                this.innerHTML = originalContent;
                this.disabled = false;
                lucide.createIcons();
            }, 1500);
        }, 1000);
    });
    
    // Cancel button interaction
    if (cancelBtn) {
        cancelBtn.addEventListener('click', function() {
            // Reset all toggles to default state (all enabled)
            toggleSwitches.forEach(toggle => {
                toggle.classList.add('bg-primary');
                toggle.classList.remove('bg-gray-200');
                const span = toggle.querySelector('span');
                span.classList.add('translate-x-6');
                span.classList.remove('translate-x-1');
            });
        });
    }
    
    // Search functionality (basic implementation)
    const searchInput = document.querySelector('input[type="text"]');
    searchInput?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            console.log('Searching for:', this.value);
            // Implement search logic here
        }
    });
    
    // Handle window resize to reset mobile menu state
    window.addEventListener('resize', function() {
        if (window.innerWidth >= 1024) {
            sidebar.classList.remove('-translate-x-full');
            sidebarOverlay.classList.add('hidden');
            document.body.style.overflow = '';
        } else {
            sidebar.classList.add('-translate-x-full');
        }
    });
    
    // Keyboard navigation for tabs
    document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
            const activeTab = document.querySelector('.tab-btn.bg-primary');
            const tabs = Array.from(tabBtns);
            const currentIndex = tabs.indexOf(activeTab);
            
            let newIndex;
            if (e.key === 'ArrowLeft') {
                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
            } else {
                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
            }
            
            tabs[newIndex].click();
            tabs[newIndex].focus();
        }
    });
    
    // Notification badge animation
    const notificationBell = document.querySelector('[data-lucide="bell"]')?.parentElement;
    if (notificationBell) {
        notificationBell.addEventListener('click', function() {
            const badge = this.querySelector('span');
            if (badge) {
                badge.style.animation = 'pulse 0.5s ease-in-out';
                setTimeout(() => {
                    badge.style.animation = '';
                }, 500);
            }
        });
    }
});

// Add pulse animation keyframes dynamically
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
`;
document.head.appendChild(style);