<!-- footer.php -->
<footer class="bg-white border-t border-gray-200 mt-auto">
            <div class="container mx-auto px-6 py-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <div class="flex items-center justify-center md:justify-start mb-2">
                            <img src="../images/logo.png" alt="Color Access System Logo" class="h-6 mr-2">
                            <p class="text-gray-600 text-sm">
                                Color Access System &copy; <?php echo date('Y'); ?> - Sistem Approval Warna Furniture
                            </p>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">
                        Approval Panel
                    </div>
                </div>
            </div>
        </footer>

        <script>
            // Toggle sidebar on mobile
            document.getElementById('toggleSidebar').addEventListener('click', function() {
                const sidebar = document.getElementById('sidebar');
                sidebar.classList.toggle('-translate-x-full');
                sidebar.classList.toggle('translate-x-0');
            });
            
            document.getElementById('closeSidebar').addEventListener('click', function() {
                const sidebar = document.getElementById('sidebar');
                sidebar.classList.add('-translate-x-full');
                sidebar.classList.remove('translate-x-0');
            });
            
            // Toggle profile dropdown
            document.getElementById('profileDropdown').addEventListener('click', function() {
                document.getElementById('profileMenu').classList.toggle('hidden');
            });
            
            // Close dropdown when clicking outside
            document.addEventListener('click', function(event) {
                const profileDropdown = document.getElementById('profileDropdown');
                const profileMenu = document.getElementById('profileMenu');
                
                if (!profileDropdown.contains(event.target) && !profileMenu.contains(event.target)) {
                    profileMenu.classList.add('hidden');
                }
            });
            
            // Check screen size on load
            if (window.innerWidth < 1024) {
                document.getElementById('sidebar').classList.add('-translate-x-full');
            }
        </script>
    </div>
</body>
</html>