        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Custom Admin JS -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            const sidebarToggle = document.getElementById('sidebarToggle');
            
            // Sidebar toggle functionality
            sidebarToggle.addEventListener('click', function() {
                if (window.innerWidth <= 768) {
                    sidebar.classList.toggle('show');
                } else {
                    sidebar.classList.toggle('collapsed');
                    mainContent.style.marginLeft = sidebar.classList.contains('collapsed') 
                        ? 'var(--sidebar-collapsed-width)' 
                        : 'var(--sidebar-width)';
                }
            });

            // Close sidebar on mobile when clicking outside
            document.addEventListener('click', function(event) {
                if (window.innerWidth <= 768) {
                    const isClickInsideSidebar = sidebar.contains(event.target);
                    const isClickOnToggle = sidebarToggle.contains(event.target);
                    
                    if (!isClickInsideSidebar && !isClickOnToggle && sidebar.classList.contains('show')) {
                        sidebar.classList.remove('show');
                    }
                }
            });

            // Handle window resize
            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    sidebar.classList.remove('show');
                    mainContent.style.marginLeft = sidebar.classList.contains('collapsed') 
                        ? 'var(--sidebar-collapsed-width)' 
                        : 'var(--sidebar-width)';
                } else {
                    mainContent.style.marginLeft = '0';
                }
            });

            // Auto-hide alerts after 5 seconds
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                setTimeout(function() {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }, 5000);
            });

            // Smooth transitions for disabled links
            const disabledLinks = document.querySelectorAll('.nav-link.disabled');
            disabledLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    // Show tooltip or message about insufficient permissions
                    const tooltip = new bootstrap.Tooltip(link, {
                        title: 'Anda tidak memiliki akses ke halaman ini',
                        placement: 'right',
                        trigger: 'manual'
                    });
                    tooltip.show();
                    setTimeout(() => tooltip.hide(), 2000);
                });
            });

            // Loading states for forms
            const forms = document.querySelectorAll('form');
            forms.forEach(function(form) {
                form.addEventListener('submit', function() {
                    const submitBtn = form.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Loading...';
                        
                        // Re-enable after 5 seconds as fallback
                        setTimeout(function() {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = submitBtn.getAttribute('data-original-text') || 'Submit';
                        }, 5000);
                    }
                });
            });

            // Store original button text for loading states
            const submitButtons = document.querySelectorAll('button[type="submit"]');
            submitButtons.forEach(function(btn) {
                btn.setAttribute('data-original-text', btn.innerHTML);
            });

            // Enhanced table interactions
            const tables = document.querySelectorAll('.table');
            tables.forEach(function(table) {
                const rows = table.querySelectorAll('tbody tr');
                rows.forEach(function(row) {
                    row.addEventListener('mouseenter', function() {
                        this.style.backgroundColor = 'rgba(52, 152, 219, 0.05)';
                    });
                    row.addEventListener('mouseleave', function() {
                        this.style.backgroundColor = '';
                    });
                });
            });

            // Real-time clock update
            function updateClock() {
                const now = new Date();
                const timeString = now.toLocaleTimeString('id-ID', { 
                    hour: '2-digit', 
                    minute: '2-digit' 
                });
                const clockElement = document.querySelector('.badge.bg-primary');
                if (clockElement) {
                    clockElement.textContent = timeString;
                }
            }

            // Update clock every minute
            setInterval(updateClock, 60000);

            // Confirmation dialogs for dangerous actions
            const dangerousActions = document.querySelectorAll('[data-confirm]');
            dangerousActions.forEach(function(element) {
                element.addEventListener('click', function(e) {
                    const message = this.getAttribute('data-confirm') || 'Apakah Anda yakin?';
                    if (!confirm(message)) {
                        e.preventDefault();
                        return false;
                    }
                });
            });

            // Auto-save forms (for compatible forms)
            const autoSaveForms = document.querySelectorAll('[data-auto-save]');
            autoSaveForms.forEach(function(form) {
                const inputs = form.querySelectorAll('input, textarea, select');
                let timeout;

                inputs.forEach(function(input) {
                    input.addEventListener('input', function() {
                        clearTimeout(timeout);
                        timeout = setTimeout(function() {
                            // Auto-save logic here
                        }, 2000);
                    });
                });
            });
        });

        // Global notification function
        function showNotification(message, type = 'info') {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            
            alertDiv.innerHTML = `
                <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            
            document.body.appendChild(alertDiv);
            
            // Auto-remove after 5 seconds
            setTimeout(function() {
                if (alertDiv.parentNode) {
                    const bsAlert = new bootstrap.Alert(alertDiv);
                    bsAlert.close();
                }
            }, 5000);
        }

        // Global loading function
        function showLoading(show = true) {
            let loader = document.getElementById('globalLoader');
            
            if (show) {
                if (!loader) {
                    loader = document.createElement('div');
                    loader.id = 'globalLoader';
                    loader.className = 'position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center';
                    loader.style.cssText = 'background: rgba(255, 255, 255, 0.8); z-index: 9998;';
                    loader.innerHTML = `
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div class="mt-2">Loading...</div>
                        </div>
                    `;
                    document.body.appendChild(loader);
                }
                loader.style.display = 'flex';
            } else {
                if (loader) {
                    loader.style.display = 'none';
                }
            }
        }
    </script>

    <!-- Page-specific scripts can be included here -->
    <?php if (isset($additionalJS)): ?>
        <?php echo $additionalJS; ?>
    <?php endif; ?>

</body>
</html>