<?php
require_once 'auth.php';
include 'db.php';
requireLogin($conn, ['superadmin']);
$role = $_SESSION['role'] ?? 'superadmin';

// Statistik ringkas
$total_users = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM users"))['c'];
$active_users = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM users WHERE status='approved'"))['c'];
$inactive_users = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM users WHERE status IN ('pending','rejected')"))['c'];
$admin_count = mysqli_fetch_assoc(mysqli_query($conn, "SELECT COUNT(*) as c FROM users WHERE role='admin'"))['c'];
?>
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengurusan Pengguna | Superadmin</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <?php renderAppShellAssets(); ?>
    <style>
        :root { --primary:#0077b6; --secondary:#00b4d8; --superadmin:#6c5ce7; --bg:#f8fbfd; --card:#fff; --text:#1a3a5c; --border:#e0e8f0; --success:#1a9955; --danger:#dc3545; --warning:#ffc107; }
        * { box-sizing:border-box; margin:0; padding:0; font-family:'Segoe UI','Inter',Tahoma,Geneva,Verdana,sans-serif; }
        body { background:linear-gradient(135deg,#e0f7fa,#f1f8e9); min-height:100vh; color:var(--text); }
        
        /* Sidebar sama seperti dashboard.php */        .sidebar { width:240px; background:linear-gradient(180deg,#fff,#f8fbfd); border-right:1px solid var(--border); position:fixed; height:100vh; padding:20px 0; overflow-y:auto; overflow-x:hidden; z-index:1000; box-shadow:2px 0 10px rgba(0,0,0,0.03); transition:width 0.3s ease; display:flex; flex-direction:column; }
        .sidebar.collapsed { width:70px; }
        .sidebar-header { text-align:center; padding:0 20px 20px; border-bottom:1px solid var(--border); margin-bottom:20px; white-space:nowrap; overflow:hidden; }
        .sidebar.collapsed .sidebar-header h3, .sidebar.collapsed .sidebar-header p, .sidebar.collapsed .menu-text { display:none; }
        .sidebar-header img { width:50px; margin-bottom:10px; transition:margin 0.3s ease; }
        .sidebar.collapsed .sidebar-header img { margin:0 auto 10px; }
        .sidebar-header h3 { font-size:1rem; font-weight:700; color:var(--superadmin); margin-bottom:4px; }
        .sidebar-header p { font-size:0.75rem; color:#6c757d; }
        .role-badge { background:linear-gradient(90deg,var(--superadmin),#5b4cdb); color:#fff; padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:600; margin-left:8px; }
        .sidebar-menu { list-style:none; padding:0 10px; display:flex; flex-direction:column; flex:1; }
        .sidebar-section { padding:10px 18px 6px; color:#6c757d; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
        .sidebar-menu li a { display:flex; align-items:center; gap:12px; padding:12px 18px; color:var(--text); text-decoration:none; border-radius:8px; margin-bottom:4px; transition:all 0.2s ease; font-size:0.9rem; white-space:nowrap; }
        .sidebar-menu li a:hover, .sidebar-menu li a.active { background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff; }
        .sidebar-menu li a i { width:20px; text-align:center; }
        .dropdown { position:relative; }
        .dropdown-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 18px; color:var(--text); background:none; border:none; border-radius:8px; cursor:pointer; font-size:0.9rem; text-align:left; transition:all 0.2s ease; }
        .dropdown-toggle:hover, .dropdown-toggle.active { background:linear-gradient(90deg,var(--primary),var(--secondary)); color:#fff; }
        .dropdown-toggle i.chevron { transition:transform 0.3s; font-size:0.8rem; }
        .dropdown.active .dropdown-toggle i.chevron { transform:rotate(180deg); }
        .dropdown-menu { display:flex; flex-direction:column; padding-left:42px; margin-top:4px; max-height:0; opacity:0; overflow:hidden; transition:max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }
        .dropdown.active .dropdown-menu { max-height:260px; opacity:1; }
        .dropdown-menu a { padding:8px 18px; color:var(--text); text-decoration:none; border-radius:6px; font-size:0.85rem; display:flex; align-items:center; gap:8px; }
        .dropdown-menu a:hover, .dropdown-menu a.active { background:#e6f4ff; color:var(--primary); }
        .sidebar.collapsed + .main { margin-left:70px; }
        .sidebar-toggle { position:absolute; right:-12px; top:20px; width:24px; height:24px; background:var(--primary); color:#fff; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.7rem; box-shadow:0 2px 6px rgba(0,0,0,0.15); transition:transform 0.3s ease; z-index:1001; }
        .sidebar.collapsed .sidebar-toggle { transform:rotate(180deg); }
        .main { margin-left:240px; padding:25px 30px; transition:margin-left 0.3s ease; }
        .top-bar { background:var(--card); padding:15px 25px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.04); margin-bottom:25px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); }
        .top-bar h2 { color:var(--superadmin); font-size:1.3rem; display:flex; align-items:center; gap:8px; }
        .user-info { display:flex; align-items:center; gap:15px; font-size:0.9rem; color:#6c757d; }
        .user-info span { color:var(--primary); font-weight:600; }
        .user-info a { color:var(--danger); text-decoration:none; }
        
        /* Stats */
        .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px; margin-bottom:25px; }
        .stat-card { background:var(--card); padding:18px; border-radius:12px; text-align:center; border-top:4px solid var(--primary); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
        .stat-card h3 { font-size:1.8rem; margin:8px 0; color:var(--text); }
        .stat-card p { font-size:0.85rem; color:#6c757d; }
        
        /* Content Placeholder */
        .content-placeholder { background:var(--card); padding:40px; border-radius:12px; text-align:center; color:#6c757d; border:2px dashed var(--border); }
        .content-placeholder i { font-size:3rem; margin-bottom:15px; opacity:0.5; }
        .content-placeholder h3 { color:var(--text); margin-bottom:10px; }
        
        .page-footer { text-align:center; padding:20px; color:#6c757d; font-size:0.8rem; margin-top:30px; }
        @media (max-width:992px) {
            .sidebar { width:70px; }
            .sidebar .sidebar-header h3, .sidebar .sidebar-header p, .sidebar .menu-text, .sidebar .role-badge, .sidebar .dropdown-menu, .sidebar .sidebar-section { display:none; }
            .main { margin-left:70px; }
            .sidebar-toggle { display:none; }
        }
    
        /* Button hover animation */
        .main .btn,
        .main .tab-btn,
        .main .action-btn,
        .main .btn-action,
        .main .filter-btn,
        .main .button,
        .main .generate-closing-btn,
        .main .attachment-remove-btn,
        .main .page-add-btn,
        .main .page-delete-btn,
        .main .delete-current-page-btn,
        .main .form-actions a,
        .main .form-actions button,
        .main .filter-actions a,
        .main .filter-actions button,
        .main .document-command a,
        .main .document-command button,
        .main table a[class*="btn"],
        .main table button[class*="btn"],
        .main input[type="submit"],
        .main input[type="button"] {
            transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
            will-change: transform;
        }

        .main .btn:hover:not(:disabled),
        .main .tab-btn:hover:not(:disabled),
        .main .action-btn:hover:not(:disabled),
        .main .btn-action:hover:not(:disabled),
        .main .filter-btn:hover:not(:disabled),
        .main .button:hover:not(:disabled),
        .main .generate-closing-btn:hover:not(:disabled),
        .main .attachment-remove-btn:hover:not(:disabled),
        .main .page-add-btn:hover:not(:disabled),
        .main .page-delete-btn:hover:not(:disabled),
        .main .delete-current-page-btn:hover:not(:disabled),
        .main .form-actions a:hover,
        .main .form-actions button:hover:not(:disabled),
        .main .filter-actions a:hover,
        .main .filter-actions button:hover:not(:disabled),
        .main .document-command a:hover,
        .main .document-command button:hover:not(:disabled),
        .main table a[class*="btn"]:hover,
        .main table button[class*="btn"]:hover:not(:disabled),
        .main input[type="submit"]:hover:not(:disabled),
        .main input[type="button"]:hover:not(:disabled) {
            transform: translateY(-1px);
            filter: brightness(1.04);
            box-shadow: 0 14px 28px rgba(0, 119, 182, 0.18);
        }

        .main .btn:active:not(:disabled),
        .main .tab-btn:active:not(:disabled),
        .main .action-btn:active:not(:disabled),
        .main .btn-action:active:not(:disabled),
        .main .filter-btn:active:not(:disabled),
        .main .button:active:not(:disabled),
        .main .generate-closing-btn:active:not(:disabled),
        .main .attachment-remove-btn:active:not(:disabled),
        .main .page-add-btn:active:not(:disabled),
        .main .page-delete-btn:active:not(:disabled),
        .main .delete-current-page-btn:active:not(:disabled),
        .main .form-actions a:active,
        .main .form-actions button:active:not(:disabled),
        .main .filter-actions a:active,
        .main .filter-actions button:active:not(:disabled),
        .main .document-command a:active,
        .main .document-command button:active:not(:disabled),
        .main table a[class*="btn"]:active,
        .main table button[class*="btn"]:active:not(:disabled),
        .main input[type="submit"]:active:not(:disabled),
        .main input[type="button"]:active:not(:disabled) {
            transform: translateY(0);
            filter: brightness(0.98);
        }</style>
</head>
<body class="role-<?= htmlspecialchars($role) ?>">

    <!-- SIDEBAR -->
    <aside class="sidebar" id="sidebar">
        <button class="sidebar-toggle" id="sidebarToggle" title="Tutup/Buka Menu">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div class="sidebar-header">
            <img src="mainpp.png" alt="Logo">
            <h3>SUPERADMIN <span class="role-badge">UTAMA</span></h3>
            <p>Pengurusan Pengguna</p>
        </div>
        <ul class="sidebar-menu">
            <?php renderUnifiedSidebarMenu($conn, $role, 'user_management.php'); ?>
        </ul>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="main">
        <div class="top-bar">
            <h2><i class="fas fa-users-cog"></i> Pengurusan Pengguna</h2>
            <?php renderTopBarUserMenu($conn, $role, 'user_management.php'); ?>
        </div>

        <?php
        renderBreadcrumb([
            ['label' => 'Dashboard', 'url' => 'dashboard.php'],
            ['label' => 'Pengurusan Pengguna', 'url' => 'user_management.php', 'current' => true]
        ]);
        ?>

        <!-- STATISTICS -->
        <div class="stats-grid">
            <div class="stat-card">
                <i class="fas fa-users" style="font-size:1.5rem;color:var(--primary);"></i>
                <h3><?= $total_users ?></h3>
                <p>Jumlah Pengguna</p>
            </div>
            <div class="stat-card" style="border-top-color:var(--success);">
                <i class="fas fa-user-check" style="font-size:1.5rem;color:var(--success);"></i>
                <h3><?= $active_users ?></h3>
                <p>Aktif</p>
            </div>
            <div class="stat-card" style="border-top-color:var(--warning);">
                <i class="fas fa-user-clock" style="font-size:1.5rem;color:var(--warning);"></i>
                <h3><?= $inactive_users ?></h3>
                <p>Tidak Aktif</p>
            </div>
            <div class="stat-card" style="border-top-color:var(--superadmin);">
                <i class="fas fa-user-tie" style="font-size:1.5rem;color:var(--superadmin);"></i>
                <h3><?= $admin_count ?></h3>
                <p>Admin</p>
            </div>
        </div>

        <!-- CONTENT PLACEHOLDER -->
        <div class="content-placeholder">
            <i class="fas fa-arrow-left"></i>
            <h3>Pilih Menu di Sebelah</h3>
            <p>Sila pilih <strong>"Daftar / Tukar Role"</strong> atau <strong>"Senarai Pengguna"</strong> dari menu dropdown untuk meneruskan.</p>
        </div>

        <div class="page-footer">
            Hakcipta Terpelihara &copy; <?= date('Y') ?> MAINPP.
        </div>
    </main>

    <script>
                const sidebar = document.getElementById('sidebar');
        const toggleBtn = document.getElementById('sidebarToggle');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', () => sidebar.classList.toggle('collapsed'));
        }
        if (window.innerWidth < 992) sidebar.classList.add('collapsed');

        document.querySelectorAll('.sidebar-menu .dropdown-toggle, .dropdown-toggle').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const dropdown = this.parentElement;
                const isActive = dropdown.classList.contains('active');
                document.querySelectorAll('.sidebar-menu .dropdown, .dropdown').forEach(item => {
                    if (item !== dropdown) item.classList.remove('active');
                });
                dropdown.classList.toggle('active', !isActive);
            });
        });
    </script>
    <?php renderSessionTimeoutScript(); ?>
</body>
</html>



