<?php $currentPage = basename($_SERVER['PHP_SELF']); ?>

<nav style="width:220px;min-width:220px;flex-shrink:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,#0f172a,#0b1220);color:#e6eef8;padding:24px 16px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;">

    <div>
        <!-- Brand -->
        <div class="text-center mb-7">
            <div class="text-base font-bold tracking-wide text-white">Mei Hotel Penang</div>
            <div class="text-xs text-gray-500 mt-0.5">Purchasing System</div>
        </div>

        <!-- Navigation — single list -->
        <ul class="space-y-1">
            <li>
                <a href="transaction_details.php"
                   class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition
                          <?= $currentPage === 'transaction_details.php' ? 'bg-white/10 text-white font-medium' : 'text-gray-400 hover:bg-white/5 hover:text-white' ?>">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                    Transactions
                </a>
            </li>
            <li>
                <a href="summary_report.php"
                   class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition
                          <?= $currentPage === 'summary_report.php' ? 'bg-white/10 text-white font-medium' : 'text-gray-400 hover:bg-white/5 hover:text-white' ?>">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                    Summary Report
                </a>
            </li>
            <li>
                <a href="export_report.php"
                   class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition
                          <?= $currentPage === 'export_report.php' ? 'bg-white/10 text-white font-medium' : 'text-gray-400 hover:bg-white/5 hover:text-white' ?>">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    Export Report
                </a>
            </li>
        </ul>
    </div>

    <!-- Logout -->
    <div>
        <div class="border-t border-white/10 pt-4 mb-3">
            <div class="text-xs text-gray-500 px-3">Logged in as</div>
            <div class="text-xs text-gray-300 px-3 font-medium truncate">
                <?= htmlspecialchars($_SESSION['username'] ?? 'Staff') ?>
            </div>
        </div>
        <button id="logoutBtn"
                class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-red-700 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1"/>
            </svg>
            Log Out
        </button>
    </div>
</nav>

<!-- ── Logout Confirmation Modal (shared across all pages) ── -->
<div id="sidebarLogoutModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:360px;padding:28px 28px 24px;text-align:center;margin:16px;">
        <h2 style="font-size:18px;font-weight:700;color:#111827;margin:0 0 10px;">Log out</h2>
        <p style="font-size:14px;color:#6b7280;margin:0 0 24px;">Are you sure you want to log out?</p>
        <div style="display:flex;justify-content:center;gap:12px;">
            <button id="sidebarLogoutCancel"
                style="padding:9px 22px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:500;color:#374151;background:#fff;cursor:pointer;">
                Cancel
            </button>
            <button id="sidebarLogoutConfirm"
                style="padding:9px 22px;border:none;border-radius:8px;font-size:14px;font-weight:600;color:#fff;background:#dc2626;cursor:pointer;">
                Yes, proceed
            </button>
        </div>
    </div>
</div>

<script>
(function() {
    var modal   = document.getElementById('sidebarLogoutModal');
    var btn     = document.getElementById('logoutBtn');
    var cancel  = document.getElementById('sidebarLogoutCancel');
    var confirm = document.getElementById('sidebarLogoutConfirm');

    if (!btn || !modal) return;

    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        modal.style.display = 'flex';
    });
    cancel.addEventListener('click', function() {
        modal.style.display = 'none';
    });
    confirm.addEventListener('click', function() {
        window.location.href = 'logout.php';
    });
    modal.addEventListener('click', function(e) {
        if (e.target === modal) modal.style.display = 'none';
    });
})();
</script>
