<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>Admin Panel - SafeStudy & FocusPrep AI</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .admin-table th, .admin-table td {
            padding: 14px 18px;
            text-align: left;
            border-bottom: 1px solid var(--border-glass);
        }
        .admin-table th {
            background: rgba(255, 255, 255, 0.08);
            color: var(--accent-cyan);
            font-weight: 700;
        }
        .role-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
        }
        .badge-student { background: rgba(0, 255, 135, 0.2); color: #00FF87; border: 1px solid #00FF87; }
        .badge-father { background: rgba(0, 229, 255, 0.2); color: #00E5FF; border: 1px solid #00E5FF; }
        .badge-mother { background: rgba(255, 105, 180, 0.2); color: #FF69B4; border: 1px solid #FF69B4; }
        .stat-card {
            padding: 20px;
            text-align: center;
        }
        .stat-card h4 { color: var(--text-muted); font-size: 13px; margin-bottom: 6px; }
        .stat-card .val { font-size: 28px; font-weight: 800; color: var(--text-white); }
    </style>
</head>
<body>

    <header>
        <a href="index.php" class="logo">
            🧠 Safe<span>Study</span> Admin Panel
        </a>
        <a href="index.php" class="btn-primary">← Saytga Qaytish</a>
    </header>

    <div class="section" style="padding-top: 120px;">
        <div class="section-header">
            <h2 class="section-title">Ro'yxatdan O'tgan Foydalanuvchilar</h2>
            <p class="section-subtitle">Hosting ma'lumotlar bazasiga saqlangan barcha akkountlar</p>
        </div>

        <!-- Stat Cards -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px;">
            <a href="admin.php" class="glass-panel stat-card" style="text-decoration: none;">
                <h4>Jami Foydalanuvchilar</h4>
                <div class="val">2</div>
            </a>
            <a href="admin.php?role=STUDENT" class="glass-panel stat-card" style="text-decoration: none;">
                <h4>👨‍🎓 O'quvchilar</h4>
                <div class="val" style="color: #00FF87;">0</div>
            </a>
            <a href="admin.php?role=PARENT" class="glass-panel stat-card" style="text-decoration: none;">
                <h4>👪 Ota-onalar</h4>
                <div class="val" style="color: #00E5FF;">2</div>
            </a>
        </div>

        <!-- Users Table -->
        <div class="glass-panel" style="padding: 24px; overflow-x: auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Email Manzil</th>
                        <th>Telefon / Son</th>
                        <th>Foydalanuvchi Roli</th>
                        <th>Parent Kodi</th>
                        <th>Ro'yxatdan O'tgan Vaqti</th>
                    </tr>
                </thead>
                <tbody>
                                                                        <tr>
                                <td>#2</td>
                                <td><strong>umarxojamaxsudov08@gmail.com</strong></td>
                                <td>998970117520</td>
                                <td>
                                    <span class="role-badge badge-father">👪 Ota-ona</span>                                </td>
                                <td><code>OTA-2736</code></td>
                                <td>2026-07-25 18:01:45</td>
                            </tr>
                                                    <tr>
                                <td>#1</td>
                                <td><strong>ota@gmail.com</strong></td>
                                <td>+998901234567</td>
                                <td>
                                    <span class="role-badge badge-father">👪 Ota-ona</span>                                </td>
                                <td><code>OTA-8841</code></td>
                                <td>2026-07-25 17:43:11</td>
                            </tr>
                                                            </tbody>
            </table>
        </div>
    </div>

</body>
</html>
