</div> <!-- End of content area -->
        </div> <!-- End of main content -->
    </div> <!-- End of flex -->

    <!-- Notification Container -->
    <div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div>

    <script>
        // Mobile menu toggle
        const sidebarToggle = document.getElementById('sidebarToggle');
        if (sidebarToggle) {
            sidebarToggle.addEventListener('click', function() {
                const sidebar = document.getElementById('sidebar');
                sidebar.classList.toggle('hidden');
            });
        }

        // Mobile sidebar close
        const sidebarClose = document.getElementById('sidebarClose');
        if (sidebarClose) {
            sidebarClose.addEventListener('click', function() {
                const sidebar = document.getElementById('sidebar');
                sidebar.classList.add('hidden');
            });
        }

        // Close sidebar on mobile when clicking outside
        document.addEventListener('click', function(event) {
            const sidebar = document.getElementById('sidebar');
            const menuToggle = document.getElementById('sidebarToggle');
            
            if (window.innerWidth < 768 && !sidebar.classList.contains('hidden')) {
                if (!sidebar.contains(event.target) && (!menuToggle || !menuToggle.contains(event.target))) {
                    sidebar.classList.add('hidden');
                }
            }
        });

        // Auto refresh notifications
        function refreshNotifications() {
            $.ajax({
                url: '../api/admin-notifications.php',
                method: 'GET',
                success: function(data) {
                    try {
                        const response = typeof data === 'string' ? JSON.parse(data) : data;
                        if (response.success) {
                            if (response.count > 0) {
                                $('.notification-count').text(response.count).show();
                            } else {
                                $('.notification-count').hide();
                            }
                            $('#admin-notification-list').html(response.html);
                        }
                    } catch (e) {
                        console.error("Failed to parse notification response:", data);
                    }
                }
            });
        }

        // Refresh every 30 seconds
        setInterval(refreshNotifications, 30000);

        // Confirm delete actions
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('confirm-action')) {
                if (!confirm('Are you sure you want to perform this action?')) {
                    e.preventDefault();
                }
            }
        });

        // Initialize tooltips
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });

        // Auto logout after 30 minutes of inactivity
        let idleTime = 0;
        setInterval(function() {
            idleTime++;
            if (idleTime > 30) { // 30 minutes
                window.location.href = 'logout.php?timeout=1';
            }
        }, 60000); // 1 minute

        // Reset idle time on user activity
        document.addEventListener('mousemove', resetIdleTime);
        document.addEventListener('keypress', resetIdleTime);
        function resetIdleTime() {
            idleTime = 0;
        }

        // Notification function (Tailwind style)
        function showNotification(message, type = 'info') {
            const container = document.getElementById('notification-container');
            const notification = document.createElement('div');
            
            // Tailwind classes for styling
            const baseClasses = 'transform transition-all duration-300 ease-in-out translate-x-full bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3 min-w-[300px] border-l-4';
            const typeClasses = type === 'success' ? 'border-green-500' : (type === 'error' ? 'border-red-500' : 'border-blue-500');
            const iconClass = type === 'success' ? 'fa-check-circle text-green-500' : (type === 'error' ? 'fa-exclamation-circle text-red-500' : 'fa-info-circle text-blue-500');
            
            notification.className = `${baseClasses} ${typeClasses}`;
            notification.innerHTML = `
                <i class="fas ${iconClass} text-xl"></i>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-900">${message}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            `;

            container.appendChild(notification);

            // Animate in
            requestAnimationFrame(() => {
                notification.classList.remove('translate-x-full');
            });

            // Auto dismiss
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
        }
    </script>
    <!-- Alpine.js for reactive components -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</body>
</html>