script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize the dashboard as the default active section
    document.getElementById('dashboard').classList.add('active');
    
    // Handle navigation clicks in the sidebar
    document.addEventListener('click', function(e) {
        if (e.target.closest('[data-section]')) {
            const sectionId = e.target.closest('[data-section]').getAttribute('data-section');
            showSection(sectionId);
        }
    });
    
    // Function to show a specific section and hide others
    function showSection(sectionId) {
        // Hide all content sections
        document.querySelectorAll('.content-section').forEach(section => {
            section.classList.remove('active');
            section.classList.add('hidden');
        });
        
        // Show the selected section
        const targetSection = document.getElementById(sectionId);
        if (targetSection) {
            targetSection.classList.remove('hidden');
            targetSection.classList.add('active');
        }
    }
    
    // Initialize audio player functionality
    const audioPlayers = document.querySelectorAll('.audio-player');
    audioPlayers.forEach(player => {
        const playBtn = player.querySelector('.play-btn');
        const progress = player.querySelector('.progress');
        
        playBtn.addEventListener('click', function() {
            const isPlaying = player.classList.contains('playing');
            
            if (isPlaying) {
                player.classList.remove('playing');
                playBtn.innerHTML = '<i data-feather="play"></i>';
            } else {
                player.classList.add('playing');
                playBtn.innerHTML = '<i data-feather="pause"></i>';
            }
            
            feather.replace();
        });
        
        // Simulate progress
        if (progress) {
            let progressValue = 0;
            const progressInterval = setInterval(() => {
                if (progressValue >= 100) {
                    progressValue = 0;
                    player.classList.remove('playing');
                    playBtn.innerHTML = '<i data-feather="play"></i>';
                    feather.replace();
                } else if (player.classList.contains('playing')) {
                    progressValue += 0.5;
                    progress.style.width = `${progressValue}%`;
                }
            }, 100);
        }
    });
    
    // Initialize modal functionality for user management
    const modalTriggers = document.querySelectorAll('.modal-trigger');
    modalTriggers.forEach(trigger => {
        trigger.addEventListener('click', function() {
            const modalId = this.getAttribute('data-modal');
            const modal = document.getElementById(modalId);
            if (modal) {
                modal.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
            }
        });
    });
    
    // Close modals when clicking the close button or outside
    document.querySelectorAll('.modal-close, .modal-overlay').forEach(closeBtn => {
        closeBtn.addEventListener('click', function() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.classList.add('hidden');
            });
            document.body.classList.remove('overflow-hidden');
        });
    });
    
    // Prevent modal content clicks from closing the modal
    document.querySelectorAll('.modal-content').forEach(content => {
        content.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
});