converta para php,sem faltar item:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teacher Dashboard | EnglishHub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
       
        :root {
            --primary: #4F46E5;
            --primary-dark: #4338CA;
            --secondary: #10B981;
            --dark: #1F2937;
            --light: #F9FAFB;
            --danger: #EF4444;
        }
       
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #F3F4F6;
            margin: 0;
            display: flex;
            min-height: 100vh;
        }
       
        .sidebar {
            width: 280px;
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
            z-index: 10;
        }
       
        .tab-link {
            padding: 14px 20px;
            cursor: pointer;
            color: var(--dark);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 12px;
            border-radius: 8px;
            margin: 0 12px;
            transition: all 0.2s ease;
        }
       
        .tab-link:hover {
            background-color: #E5E7EB;
            color: var(--primary);
        }
       
        .tab-link.active {
            background-color: #E0E7FF;
            color: var(--primary);
            font-weight: 500;
        }
       
        .tab-link i {
            width: 20px;
            text-align: center;
        }
       
        .content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background-color: #F3F4F6;
        }
       
        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }
       
        .tab-content.active {
            display: block;
        }
       
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 24px;
            margin-bottom: 24px;
        }
       
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
       
        .badge-primary {
            background-color: #E0E7FF;
            color: var(--primary);
        }
       
        .badge-success {
            background-color: #D1FAE5;
            color: var(--secondary);
        }
       
        .badge-danger {
            background-color: #FEE2E2;
            color: var(--danger);
        }
       
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dark);
            font-weight: 600;
        }
       
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #E5E7EB;
            overflow: hidden;
        }
       
        .progress-fill {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;
            transition: width 0.5s ease;
        }
       
        .dropdown {
            position: relative;
            display: inline-block;
        }
       
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            z-index: 1;
            padding: 8px 0;
        }
       
        .dropdown:hover .dropdown-content {
            display: block;
        }
       
        .dropdown-item {
            padding: 8px 16px;
            display: block;
            color: var(--dark);
            text-decoration: none;
            transition: background-color 0.2s;
        }
       
        .dropdown-item:hover {
            background-color: #F3F4F6;
        }
       
        .hamburger {
            display: none;
            cursor: pointer;
            padding: 10px;
        }
       
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: -280px;
                height: 100vh;
            }
           
            .sidebar.active {
                left: 0;
            }
           
            .content {
                margin-left: 0;
                padding: 20px;
            }
           
            .hamburger {
                display: block;
                position: fixed;
                top: 10px;
                left: 10px;
                z-index: 20;
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body>
    <!-- Mobile Menu Button -->
    <div class="hamburger lg:hidden">
        <i class="fas fa-bars text-xl"></i>
    </div>
   
    <!-- Sidebar Navigation -->
    <div class="sidebar">
        <div class="p-6 border-b">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                    <i class="fas fa-chalkboard-teacher"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-800"><?= htmlspecialchars($user['name']) ?></h3>
                    <span class="text-xs text-gray-500">Professor</span>
                </div>
            </div>
        </div>
       
        <div class="p-4 flex-1 overflow-y-auto">
            <a class="tab-link active" data-tab="overview">
                <i class="fas fa-chart-pie"></i>
                <span>Overview</span>
            </a>
            <a class="tab-link" data-tab="students">
                <i class="fas fa-users"></i>
                <span>Students</span>
            </a>
            <a class="tab-link" data-tab="classes">
                <i class="fas fa-book"></i>
                <span>Classes</span>
            </a>
            <a class="tab-link" data-tab="progress">
                <i class="fas fa-chart-line"></i>
                <span>Progress</span>
            </a>
            <a class="tab-link" data-tab="certificates">
                <i class="fas fa-certificate"></i>
                <span>Certificates</span>
            </a>
            <a class="tab-link" data-tab="messages">
                <i class="fas fa-envelope"></i>
                <span>Messages</span>
                <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
            </a>
        </div>
       
        <div class="p-4 border-t">
            <a class="tab-link" data-tab="settings">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </a>
            <a href="logout.php" class="tab-link text-red-500">
                <i class="fas fa-sign-out-alt"></i>
                <span>Logout</span>
            </a>
        </div>
    </div>
   
    <!-- Main Content -->
    <div class="content">
        <!-- Overview Tab -->
        <section id="overview" class="tab-content active">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1>
                <div class="flex items-center gap-3">
                    <div class="relative">
                        <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                    <div class="dropdown">
                        <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                            <span class="text-sm font-medium">This Week</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="#" class="dropdown-item">Today</a>
                            <a href="#" class="dropdown-item">This Week</a>
                            <a href="#" class="dropdown-item">This Month</a>
                            <a href="#" class="dropdown-item">This Year</a>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                <div class="card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Total Students</p>
                            <h3 class="text-2xl font-bold"><?= count($students) ?></h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fas fa-users text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-green-600 font-medium">+12%</span>
                            <span class="text-gray-500">vs last month</span>
                        </div>
                    </div>
                </div>
               
                <div class="card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Active Classes</p>
                            <h3 class="text-2xl font-bold"><?= count($classes) ?></h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <i class="fas fa-book text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-green-600 font-medium">+5%</span>
                            <span class="text-gray-500">vs last month</span>
                        </div>
                    </div>
                </div>
               
                <div class="card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Assignments Due</p>
                            <h3 class="text-2xl font-bold">8</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
                            <i class="fas fa-tasks text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-red-600 font-medium">-2%</span>
                            <span class="text-gray-500">vs last month</span>
                        </div>
                    </div>
                </div>
               
                <div class="card">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-500">Messages</p>
                            <h3 class="text-2xl font-bold">3</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                            <i class="fas fa-envelope text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-green-600 font-medium">+25%</span>
                            <span class="text-gray-500">vs last month</span>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="card">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold">Recent Students</h2>
                        <a href="#" class="text-sm text-indigo-600 hover:underline">View All</a>
                    </div>
                    <div class="space-y-4">
                        <?php foreach(array_slice($students, 0, 5) as $s): ?>
                        <div class="flex items-center gap-4">
                            <div class="avatar">
                                <?= strtoupper(substr($s['name'], 0, 1)) ?>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium"><?= htmlspecialchars($s['name']) ?></h4>
                                <p class="text-sm text-gray-500"><?= htmlspecialchars($s['email']) ?></p>
                            </div>
                            <span class="badge badge-primary">Active</span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
               
                <div class="card">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold">Your Classes</h2>
                        <a href="#" class="text-sm text-indigo-600 hover:underline">View All</a>
                    </div>
                    <div class="space-y-4">
                        <?php foreach($classes as $c): ?>
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                                <i class="fas fa-book"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium"><?= htmlspecialchars($c['name']) ?></h4>
                                <p class="text-sm text-gray-500"><?= htmlspecialchars($c['description']) ?></p>
                            </div>
                            <span class="badge badge-success">Active</span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Students Tab -->
        <section id="students" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Student Management</h1>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>Add Student</span>
                </button>
            </div>
           
            <div class="card">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                    <div class="relative mb-4 md:mb-0">
                        <input type="text" placeholder="Search students..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-64">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="dropdown">
                            <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                                <span class="text-sm font-medium">All Status</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <div class="dropdown-content">
                                <a href="#" class="dropdown-item">All Status</a>
                                <a href="#" class="dropdown-item">Active</a>
                                <a href="#" class="dropdown-item">Inactive</a>
                            </div>
                        </div>
                        <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                            <i class="fas fa-filter"></i>
                            <span class="text-sm font-medium">Filter</span>
                        </button>
                    </div>
                </div>
               
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <?php foreach ($students as $s): ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="avatar mr-3">
                                            <?= strtoupper(substr($s['name'], 0, 1)) ?>
                                        </div>
                                        <div>
                                            <div class="font-medium text-gray-900"><?= htmlspecialchars($s['name']) ?></div>
                                            <div class="text-sm text-gray-500">Student</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <?= htmlspecialchars($s['email']) ?>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="badge badge-primary">Active</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                                        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="student_detail.php?id=<?= $s['id'] ?>" class="text-indigo-600 hover:text-indigo-900 mr-3">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form method="POST" action="remove_student.php" onsubmit="return confirm('Are you sure you want to remove this student?');">
                                            <input type="hidden" name="student_id" value="<?= $s['id'] ?>">
                                            <button type="submit" class="text-red-600 hover:text-red-900">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
               
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-gray-500">
                        Showing <span class="font-medium">1</span> to <span class="font-medium"><?= count($students) ?></span> of <span class="font-medium"><?= count($students) ?></span> results
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            Previous
                        </button>
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                            1
                        </button>
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            Next
                        </button>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Classes Tab -->
        <section id="classes" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Class Management</h1>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>Create Class</span>
                </button>
            </div>
           
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <?php foreach($classes as $c): ?>
                <div class="card hover:shadow-lg transition-shadow duration-300">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                            <i class="fas fa-book text-xl"></i>
                        </div>
                        <div class="dropdown">
                            <button class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <div class="dropdown-content">
                                <a href="#" class="dropdown-item"><i class="fas fa-edit mr-2"></i> Edit</a>
                                <a href="#" class="dropdown-item"><i class="fas fa-users mr-2"></i> View Students</a>
                                <a href="#" class="dropdown-item text-red-500"><i class="fas fa-trash mr-2"></i> Delete</a>
                            </div>
                        </div>
                    </div>
                    <h3 class="text-lg font-semibold mb-2"><?= htmlspecialchars($c['name']) ?></h3>
                    <p class="text-gray-500 text-sm mb-4"><?= htmlspecialchars($c['description']) ?></p>
                    <div class="flex items-center justify-between text-sm">
                        <div>
                            <span class="font-medium">12</span> Students
                        </div>
                        <span class="badge badge-success">Active</span>
                    </div>
                </div>
                <?php endforeach; ?>
               
                <div class="card border-2 border-dashed border-gray-300 hover:border-indigo-500 flex items-center justify-center min-h-[200px] cursor-pointer">
                    <div class="text-center">
                        <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mx-auto mb-3">
                            <i class="fas fa-plus"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-700">Create New Class</h3>
                        <p class="text-gray-500 text-sm">Add a new class to your curriculum</p>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Progress Tab -->
        <section id="progress" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Student Progress</h1>
                <div class="flex items-center gap-3">
                    <div class="dropdown">
                        <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                            <span class="text-sm font-medium">All Classes</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="#" class="dropdown-item">All Classes</a>
                            <?php foreach($classes as $c): ?>
                            <a href="#" class="dropdown-item"><?= htmlspecialchars($c['name']) ?></a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                        <i class="fas fa-download"></i>
                        <span class="text-sm font-medium">Export</span>
                    </button>
                </div>
            </div>
           
            <div class="card">
                <div class="mb-6">
                    <h2 class="text-lg font-semibold mb-4">Overall Completion Rate</h2>
                    <div class="h-64">
                        <!-- Chart Placeholder -->
                        <div class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
                            <i class="fas fa-chart-bar text-4xl mr-3"></i>
                            <span>Progress Chart</span>
                        </div>
                    </div>
                </div>
               
                <div>
                    <h2 class="text-lg font-semibold mb-4">Student Progress Details</h2>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lessons</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assignments</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Overall</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <?php foreach(array_slice($students, 0, 5) as $s): ?>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="avatar mr-3">
                                                <?= strtoupper(substr($s['name'], 0, 1)) ?>
                                            </div>
                                            <div class="font-medium text-gray-900"><?= htmlspecialchars($s['name']) ?></div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <?= htmlspecialchars($classes[0]['name'] ?? 'No Class') ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-16 mr-2">
                                                <div class="text-sm text-gray-500">75%</div>
                                            </div>
                                            <div class="w-full">
                                                <div class="progress-bar">
                                                    <div class="progress-fill" style="width: 75%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-16 mr-2">
                                                <div class="text-sm text-gray-500">60%</div>
                                            </div>
                                            <div class="w-full">
                                                <div class="progress-bar">
                                                    <div class="progress-fill" style="width: 60%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-16 mr-2">
                                                <div class="text-sm font-medium">68%</div>
                                            </div>
                                            <div class="w-full">
                                                <div class="progress-bar">
                                                    <div class="progress-fill" style="width: 68%"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Certificates Tab -->
        <section id="certificates" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Certificate Management</h1>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>Issue Certificate</span>
                </button>
            </div>
           
            <div class="card">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                    <div class="relative mb-4 md:mb-0">
                        <input type="text" placeholder="Search certificates..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-64">
                        <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="dropdown">
                            <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                                <span class="text-sm font-medium">All Status</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <div class="dropdown-content">
                                <a href="#" class="dropdown-item">All Status</a>
                                <a href="#" class="dropdown-item">Issued</a>
                                <a href="#" class="dropdown-item">Pending</a>
                                <a href="#" class="dropdown-item">Revoked</a>
                            </div>
                        </div>
                        <button class="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border">
                            <i class="fas fa-filter"></i>
                            <span class="text-sm font-medium">Filter</span>
                        </button>
                    </div>
                </div>
               
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <?php for($i = 0; $i < 6; $i++): ?>
                    <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                        <div class="bg-indigo-50 p-4 border-b">
                            <div class="flex items-center justify-between">
                                <h3 class="font-medium">Certificate of Completion</h3>
                                <span class="badge badge-success">Issued</span>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center gap-4 mb-4">
                                <div class="avatar">
                                    <?= strtoupper(substr($students[0]['name'], 0, 1)) ?>
                                </div>
                                <div>
                                    <h4 class="font-medium"><?= htmlspecialchars($students[0]['name']) ?></h4>
                                    <p class="text-sm text-gray-500"><?= htmlspecialchars($classes[0]['name'] ?? 'English Course') ?></p>
                                </div>
                            </div>
                            <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                                <div>
                                    <i class="fas fa-calendar-alt mr-1"></i>
                                    <span>Jun 15, 2023</span>
                                </div>
                                <div>
                                    <i class="fas fa-id-card mr-1"></i>
                                    <span>#CER-<?= rand(1000, 9999) ?></span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between">
                                <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium flex items-center gap-1">
                                    <i class="fas fa-eye"></i>
                                    <span>View</span>
                                </button>
                                <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center gap-1">
                                    <i class="fas fa-download"></i>
                                    <span>Download</span>
                                </button>
                                <button class="text-red-600 hover:text-red-900 text-sm font-medium flex items-center gap-1">
                                    <i class="fas fa-trash"></i>
                                    <span>Revoke</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <?php endfor; ?>
                </div>
               
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-gray-500">
                        Showing <span class="font-medium">1</span> to <span class="font-medium">6</span> of <span class="font-medium">12</span> results
                    </div>
                    <div class="flex items-center gap-2">
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            Previous
                        </button>
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                            1
                        </button>
                        <button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            Next
                        </button>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Messages Tab -->
        <section id="messages" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Messages</h1>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>New Message</span>
                </button>
            </div>
           
            <div class="card">
                <div class="flex flex-col md:flex-row">
                    <div class="w-full md:w-1/3 border-r">
                        <div class="p-4 border-b">
                            <div class="relative">
                                <input type="text" placeholder="Search messages..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full">
                                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                            </div>
                        </div>
                        <div class="overflow-y-auto" style="max-height: 600px;">
                            <?php for($i = 0; $i < 8; $i++): ?>
                            <div class="p-4 border-b hover:bg-gray-50 cursor-pointer <?= $i === 0 ? 'bg-indigo-50' : '' ?>">
                                <div class="flex items-center gap-3">
                                    <div class="avatar">
                                        <?= strtoupper(substr($students[$i % count($students)]['name'], 0, 1)) ?>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h4 class="font-medium"><?= htmlspecialchars($students[$i % count($students)]['name']) ?></h4>
                                            <span class="text-xs text-gray-500"><?= $i === 0 ? 'Today' : ($i === 1 ? 'Yesterday' : ($i+1).' days ago') ?></span>
                                        </div>
                                        <p class="text-sm text-gray-500 truncate"><?= $i === 0 ? 'Hello teacher, I have a question about the last assignment...' : 'Thank you for your feedback on my essay...' ?></p>
                                    </div>
                                    <?php if($i < 3): ?>
                                    <div class="w-2 h-2 rounded-full bg-indigo-600"></div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php endfor; ?>
                        </div>
                    </div>
                    <div class="w-full md:w-2/3">
                        <div class="p-4 border-b flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="avatar">
                                    <?= strtoupper(substr($students[0]['name'], 0, 1)) ?>
                                </div>
                                <div>
                                    <h4 class="font-medium"><?= htmlspecialchars($students[0]['name']) ?></h4>
                                    <p class="text-sm text-gray-500">Active now</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center">
                                    <i class="fas fa-phone text-gray-500"></i>
                                </button>
                                <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center">
                                    <i class="fas fa-video text-gray-500"></i>
                                </button>
                                <button class="w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center">
                                    <i class="fas fa-ellipsis-v text-gray-500"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-4 overflow-y-auto" style="height: 500px;">
                            <div class="space-y-4">
                                <div class="flex justify-start">
                                    <div class="max-w-xs md:max-w-md bg-indigo-100 rounded-lg p-3">
                                        <p class="text-sm">Hello teacher, I have a question about the last assignment. I'm not sure I understand the requirements for the essay.</p>
                                        <p class="text-xs text-gray-500 mt-1">10:30 AM</p>
                                    </div>
                                </div>
                                <div class="flex justify-end">
                                    <div class="max-w-xs md:max-w-md bg-indigo-600 text-white rounded-lg p-3">
                                        <p class="text-sm">Hi <?= htmlspecialchars($students[0]['name']) ?>, what specifically are you having trouble with? The requirements are listed in detail on page 3 of the assignment sheet.</p>
                                        <p class="text-xs text-indigo-200 mt-1">10:35 AM</p>
                                    </div>
                                </div>
                                <div class="flex justify-start">
                                    <div class="max-w-xs md:max-w-md bg-indigo-100 rounded-lg p-3">
                                        <p class="text-sm">I'm confused about the word count. The assignment sheet says 1000 words minimum, but in class you mentioned 800 would be acceptable.</p>
                                        <p class="text-xs text-gray-500 mt-1">10:37 AM</p>
                                    </div>
                                </div>
                                <div class="flex justify-end">
                                    <div class="max-w-xs md:max-w-md bg-indigo-600 text-white rounded-lg p-3">
                                        <p class="text-sm">Ah, good question! I've updated the requirements - 800 words is the new minimum. I'll update the assignment sheet to avoid confusion. Thanks for catching that!</p>
                                        <p class="text-xs text-indigo-200 mt-1">10:40 AM</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4 border-t">
                            <div class="flex items-center gap-3">
                                <button class="w-10 h-10 rounded-full hover:bg-gray-100 flex items-center justify-center">
                                    <i class="fas fa-paperclip text-gray-500"></i>
                                </button>
                                <input type="text" placeholder="Type a message..." class="flex-1 border rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <button class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white flex items-center justify-center">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
       
        <!-- Settings Tab -->
        <section id="settings" class="tab-content">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold text-gray-800">Account Settings</h1>
            </div>
           
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2">
                    <div class="card mb-6">
                        <h2 class="text-lg font-semibold mb-4">Profile Information</h2>
                        <form>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                                    <input type="text" value="<?= htmlspecialchars(explode(' ', $user['name'])[0]) ?>" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                                    <input type="text" value="<?= htmlspecialchars(explode(' ', $user['name'])[1] ?? '') ?>" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                    <input type="email" value="<?= htmlspecialchars($user['email']) ?>" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                                    <input type="tel" placeholder="+1 (555) 000-0000" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                </div>
                            </div>
                            <div class="mb-6">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                                <textarea rows="3" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Tell us about yourself...">English teacher with 10 years of experience specializing in ESL and business English.</textarea>
                            </div>
                            <div class="flex justify-end">
                                <button type="button" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
                                    Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                   
                    <div class="card">
                        <h2 class="text-lg font-semibold mb-4">Change Password</h2>
                        <form>
                            <div class="space-y-4 mb-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
                                    <div class="relative">
                                        <input type="password" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                                    <div class="relative">
                                        <input type="password" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
                                    <div class="relative">
                                        <input type="password" class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <button type="button" class="absolute right-3 top-3 text-gray-400 hover:text-gray-600">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-end">
                                <button type="button" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg">
                                    Update Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
               
                <div>
                    <div class="card mb-6">
                        <h2 class="text-lg font-semibold mb-4">Profile Picture</h2>
                        <div class="flex flex-col items-center">
                            <div class="w-32 h-32 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 text-4xl font-bold mb-4">
                                <?= strtoupper(substr($user['name'], 0, 1)) ?>
                            </div>
                            <div class="flex items-center gap-3">
                                <button class="bg-white border text-indigo-600 hover:bg-indigo-50 px-4 py-2 rounded-lg">
                                    Upload New
                                </button>
                                <button class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg">
                                    Remove
                                </button>
                            </div>
                        </div>
                    </div>
                   
                    <div class="card">
                        <h2 class="text-lg font-semibold mb-4">Notification Preferences</h2>
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">Email Notifications</h4>
                                    <p class="text-sm text-gray-500">Receive email notifications</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" value="" class="sr-only peer" checked>
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">SMS Notifications</h4>
                                    <p class="text-sm text-gray-500">Receive text notifications</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" value="" class="sr-only peer">
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">Assignment Alerts</h4>
                                    <p class="text-sm text-gray-500">Get notified about new assignments</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" value="" class="sr-only peer" checked>
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="font-medium">Message Alerts</h4>
                                    <p class="text-sm text-gray-500">Get notified about new messages</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" value="" class="sr-only peer" checked>
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
   
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Tab switching functionality
            const tabs = document.querySelectorAll(".tab-link");
            const contents = document.querySelectorAll(".tab-content");
           
            tabs.forEach(tab => {
                tab.addEventListener("click", () => {
                    tabs.forEach(t => t.classList.remove("active"));
                    contents.forEach(c => c.classList.remove("active"));
                   
                    tab.classList.add("active");
                    const target = tab.getAttribute("data-tab");
                    document.getElementById(target).classList.add("active");
                });
            });
           
            // Mobile menu toggle
            const hamburger = document.querySelector(".hamburger");
            const sidebar = document.querySelector(".sidebar");
           
            hamburger.addEventListener("click", () => {
                sidebar.classList.toggle("active");
            });
           
            // Close mobile menu when clicking outside
            document.addEventListener("click", (e) => {
                if (!sidebar.contains(e.target) && !hamburger.contains(e.target)) {
                    sidebar.classList.remove("active");
                }
            });
           
            // Password visibility toggle
            document.querySelectorAll(".fa-eye").forEach(icon => {
                icon.addEventListener("click", function() {
                    const input = this.parentElement.previousElementSibling;
                    if (input.type === "password") {
                        input.type = "text";
                        this.classList.replace("fa-eye", "fa-eye-slash");
                    } else {
                        input.type = "password";
                        this.classList.replace("fa-eye-slash", "fa-eye");
                    }
                });
            });
           
            // Simulate loading for progress bars
            setTimeout(() => {
                document.querySelectorAll(".progress-fill").forEach(bar => {
                    const width = bar.style.width;
                    bar.style.width = "0";
                    setTimeout(() => {
                        bar.style.width = width;
                    }, 100);
                });
            }, 500);
           
            // Dropdown menus
            document.querySelectorAll(".dropdown").forEach(dropdown => {
                const button = dropdown.querySelector("button");
                const content = dropdown.querySelector(".dropdown-content");
               
                button.addEventListener("click", (e) => {
                    e.stopPropagation();
                    content.style.display = content.style.display === "block" ? "none" : "block";
                });
               
                // Close when clicking outside
                document.addEventListener("click", () => {
                    content.style.display = "none";
                });
            });
        });
    </script>
</body>
</html>