<?php
/**
 * Sidebar Menu Component
 * Include this in any admin page to render the sidebar
 */
?>
<div id="sidebar" class="fixed left-0 top-0 w-64 bg-gradient-to-b from-gray-900 to-gray-800 min-h-screen shadow-lg z-50 transform -translate-x-full md:translate-x-0 transition-transform duration-300">
    <!-- Sidebar Header -->
    <div class="p-6 border-b border-gray-700">
        <h1 class="text-2xl font-bold text-white">USSD System</h1>
        <p class="text-gray-400 text-sm mt-1">Admin Portal</p>
    </div>


    <!-- Navigation Menu -->
    <nav class="mt-8">
        <!-- Dashboard -->
        <a href="/ussd/admin/dashboard.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-3m0 0l7-4 7 4M5 9v10a1 1 0 001 1h12a1 1 0 001-1V9m-9 11l4-4m0 0l4 4m-4-4v4"></path>
            </svg>
            <span>Dashboard</span>
        </a>

        <!-- Resources Dropdown -->
        <button class="menu-dropdown w-full flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition" onclick="toggleDropdown(this)">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
            </svg>
            <span>Resources</span>
            <svg class="w-4 h-4 ml-auto transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
        </button>
        <div class="dropdown-menu hidden">
            <a href="/ussd/admin/update_paybills.php" class="menu-subitem flex items-center gap-3 px-6 py-2 text-gray-400 hover:bg-gray-700 hover:text-white transition">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                </svg>
                <span>Update Paybills</span>
            </a>
            <a href="/ussd/admin/export_phones.php" class="menu-subitem flex items-center gap-3 px-6 py-2 text-gray-400 hover:bg-gray-700 hover:text-white transition">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2zm3.172-5.828a1 1 0 11-1.414-1.414L9.172 9 4.757 4.586a1 1 0 111.414-1.414L10.586 7.758l4.415-4.414a1 1 0 111.414 1.414L12 9.172l4.414 4.414a1 1 0 11-1.414 1.414L10.586 10.586l-4.414 4.414z" clip-rule="evenodd"></path>
                </svg>
                <span>Export Contacts</span>
            </a>
        </div>

        <!-- Customers -->
        <a href="/ussd/admin/customers.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.856-1.487M15 10a3 3 0 11-6 0 3 3 0 016 0zM6 20h12a6 6 0 00-6-6 6 6 0 00-6 6z"></path>
            </svg>
            <span>Customers</span>
        </a>


        <!-- M-Pesa Transactions -->
        <a href="/ussd/admin/mpesa_transactions.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
            <span>M-Pesa Transactions</span>
        </a>

        <!-- STK Push Requests -->
        <a href="/ussd/admin/stk_requests.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>STK Push Requests</span>
        </a>

        <!-- Users -->
        <a href="/ussd/admin/users.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 8.048M12 4.354L8.646 7.708M12 4.354l3.354 3.354M9 20h6a2 2 0 002-2v-1a6 6 0 00-12 0v1a2 2 0 002 2z"></path>
            </svg>
            <span>Users</span>
        </a>

        <!-- Whitelist -->
        <a href="/ussd/admin/whitelist.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Whitelist</span>
        </a>

        <!-- Divider -->
        <div class="border-t border-gray-700 my-4"></div>

        <!-- Settings -->
        <a href="/ussd/admin/settings.php" class="menu-item flex items-center gap-3 px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            <span>Settings</span>
        </a>

        <!-- Logout -->
        <a href="ussd/admin/logout.php" class="menu-item flex items-center gap-3 px-6 py-3 text-red-400 hover:bg-red-900/20 hover:text-red-300 transition">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
            </svg>
            <span>Logout</span>
        </a>
    </nav>
</div>

<!-- Mobile Menu Toggle Button -->
<div id="sidebar-toggle" class="fixed bottom-6 right-6 md:hidden z-40 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg cursor-pointer" onclick="toggleSidebar()">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
</div>

<!-- Overlay for mobile -->
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 hidden md:hidden z-40" onclick="toggleSidebar()"></div>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    sidebar.classList.toggle('-translate-x-full');
    overlay.classList.toggle('hidden');
}

function toggleDropdown(button) {
    const menu = button.nextElementSibling;
    const icon = button.querySelector('svg:last-child');
    menu.classList.toggle('hidden');
    icon.classList.toggle('rotate-180');
}

// Highlight current page
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const menuItems = document.querySelectorAll('.menu-item, .menu-dropdown');
    
    menuItems.forEach(item => {
        if (item.getAttribute('href') === currentPath) {
            item.classList.add('bg-blue-600', 'text-white');
            
            // If it's in a dropdown, show the dropdown
            const parent = item.closest('.dropdown-menu');
            if (parent) {
                parent.classList.remove('hidden');
            }
        }
    });
});
</script>
