crie uma aparencia moderna interativa,dinamica,chamativa de acordo CEFR,botoes dianmicos: <?php
session_start();

// Apenas professores podem acessar
if (!isset($_SESSION['user']) || $_SESSION['user']['role'] !== 'teacher') {
    header("Location: login.php");
    exit;
}

include 'includes/db.php';

// ID do professor logado
$teacher_id = $_SESSION['user']['id'];

// Carrega alunos do professor
$stmt_students = $pdo->prepare("SELECT * FROM students WHERE teacher_id = ?");
$stmt_students->execute([$teacher_id]);
$students = $stmt_students->fetchAll(PDO::FETCH_ASSOC);

// Carrega turmas para dropdown
$stmt_classes = $pdo->query("SELECT id, name FROM classes ORDER BY name ASC");
$classes = $stmt_classes->fetchAll(PDO::FETCH_ASSOC);

// Média de progresso por nível
$avg_data = [];
try {
    $stmt_avg = $pdo->query("
        SELECT l.name AS level_name, AVG(slp.score) AS avg_score 
        FROM student_level_progress slp
        JOIN levels l ON slp.level_id = l.id
        GROUP BY l.name
    ");
    while ($row = $stmt_avg->fetch(PDO::FETCH_ASSOC)) {
        $avg_data[] = $row;
    }
} catch (PDOException $e) {
    // Dados simulados se der erro
    $avg_data = [
        ['level_name' => 'A1', 'avg_score' => 90],
        ['level_name' => 'A2', 'avg_score' => 75],
        ['level_name' => 'B1', 'avg_score' => 60]
    ];
}
?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
    <title>FluentImmersion - CEFR</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=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .progress-fill {
            height: 100%;
            background-color: #3B82F6;
            width: <?= count($students) ? array_sum(array_column($students, 'score')) / count($students) : 0 ?>%;
            transition: width 0.5s ease;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-900 min-h-screen">

<!-- Sidebar -->
<div class="fixed top-0 left-0 w-64 h-full bg-indigo-700 text-white p-6 shadow-lg overflow-y-auto">
    <div class="flex items-center gap-3 mb-8">
        <div class="w-10 h-10 rounded-full bg-white text-indigo-700 flex items-center justify-center font-bold">
            F
        </div>
        <div>
            <h2 class="font-semibold"><?= htmlspecialchars($_SESSION['user']['name']) ?></h2>
            <p class="text-xs">Professor</p>
        </div>
    </div>
    <nav class="space-y-2">
        <a href="#" onclick="showTab('overview')" class="block px-3 py-2 rounded hover:bg-indigo-800 transition duration-200">
            <i class="fas fa-chart-pie mr-2"></i> Overview
        </a>
        <a href="#" onclick="showTab('students')" class="block px-3 py-2 rounded hover:bg-indigo-800 transition duration-200">
            <i class="fas fa-users mr-2"></i> Students
        </a>
        <a href="#" onclick="showTab('classes')" class="block px-3 py-2 rounded hover:bg-indigo-800 transition duration-200">
            <i class="fas fa-book mr-2"></i> Classes
        </a>
        <a href="#" onclick="showTab('progress')" class="block px-3 py-2 rounded hover:bg-indigo-800 transition duration-200">
            <i class="fas fa-tachometer-alt mr-2"></i> Progress
        </a>
        <a href="logout.php" class="mt-6 block px-3 py-2 rounded bg-red-600 hover:bg-red-700 text-white text-center font-medium transition duration-200">
            <i class="fas fa-sign-out-alt mr-2"></i> Logout
        </a>
    </nav>
</div>

<!-- Conteúdo Principal -->
<div class="ml-64 p-6 max-w-6xl mx-auto w-full">

    <!-- Header -->
    <header class="mb-6">
        <h1 class="text-3xl font-extrabold text-gray-800">FluentImmersion - CEFR</h1>
        <p class="text-sm text-gray-500">Teacher Dashboard</p>
    </header>

    <!-- Aba: Overview -->
    <section id="overview" class="tab-content active">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow card-hover">
                <h3 class="text-sm font-medium text-gray-500">Total de Alunos</h3>
                <p class="text-2xl font-bold"><?= count($students) ?></p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow card-hover">
                <h3 class="text-sm font-medium text-gray-500">Turmas Criadas</h3>
                <p class="text-2xl font-bold"><?= count($classes) ?></p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow card-hover">
                <h3 class="text-sm font-medium text-gray-500">Progresso Médio</h3>
                <p class="text-2xl font-bold">82%</p>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow mt-6">
            <h2 class="text-xl font-bold mb-4">Alunos Registrados</h2>
            <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">Nome</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-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (!empty($students)): ?>
                        <?php foreach ($students as $s): ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"><?= htmlspecialchars($s['name']) ?></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 text-sm text-right space-x-3">
                                    <a href="student-profile.php?id=<?= $s['id'] ?>" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-eye"></i></a>
                                    <a href="edit-student.php?id=<?= $s['id'] ?>" class="text-blue-600 hover:text-blue-900"><i class="fas fa-edit"></i></a>
                                    <a href="remove-student.php?id=<?= $s['id'] ?>" onclick="return confirm('Tem certeza?');" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr><td colspan="3" class="px-6 py-4 text-center text-gray-500">Nenhum aluno registrado ainda.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </section>

    <!-- Aba: Students -->
    <section id="students" class="tab-content">
        <h1 class="text-2xl font-bold mb-6">Gerenciar Alunos</h1>

        <!-- Formulário para Registrar Aluno -->
        <div class="bg-white p-6 rounded-lg shadow mb-6 card-hover">
            <h2 class="text-lg font-semibold mb-4">Registrar Novo Aluno</h2>
            <form method="POST" action="process-register-student.php" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Nome Completo</label>
                    <input type="text" name="name" required class="w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" name="email" required class="w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Senha</label>
                    <input type="password" name="password" required class="w-full border border-gray-300 rounded px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
                </div>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition duration-200">
                    <i class="fas fa-user-plus mr-2"></i>Registrar Aluno
                </button>
            </form>
        </div>

        <!-- Tabela de Alunos -->
        <div class="bg-white p-6 rounded-lg shadow overflow-hidden">
            <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">Nome</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-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <?php if (!empty($students)): ?>
                        <?php foreach ($students as $s): ?>
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"><?= htmlspecialchars($s['name']) ?></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 text-sm text-right space-x-3">
                                    <a href="student-profile.php?id=<?= $s['id'] ?>" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-eye"></i></a>
                                    <a href="edit-student.php?id=<?= $s['id'] ?>" class="text-blue-600 hover:text-blue-900"><i class="fas fa-edit"></i></a>
                                    <a href="remove-student.php?id=<?= $s['id'] ?>" onclick="return confirm('Tem certeza?');" class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr><td colspan="3" class="px-6 py-4 text-center text-gray-500">Nenhum aluno encontrado.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </section>

    <!-- Aba: Classes -->
    <section id="classes" class="tab-content">
        <h1 class="text-2xl font-bold mb-6">Gerenciar Turmas</h1>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
            <?php foreach ($classes as $c): ?>
                <div class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                    <div class="bg-indigo-50 p-4 border-b border-indigo-100">
                        <h3 class="font-medium text-indigo-800"><?= htmlspecialchars($c['name']) ?></h3>
                    </div>
                    <div class="p-4">
                        <p><?= htmlspecialchars($c['description'] ?? 'Sem descrição') ?></p>
                    </div>
                </div>
            <?php endforeach; ?>

            <!-- Botão Nova Turma -->
            <div class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center min-h-[200px] cursor-pointer hover:border-indigo-500 transition-all">
                <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">Criar Nova Turma</h3>
                    <p class="text-gray-500 text-sm">Adicionar nova turma ao sistema</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Aba: Progress -->
    <section id="progress" class="tab-content">
        <h1 class="text-2xl font-bold mb-6">Progresso dos Alunos</h3>
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <canvas id="progressChart" height="100"></canvas>
        </div>

        <!-- Detalhes por Nível -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
            <?php foreach ($avg_data as $d): ?>
                <div class="bg-white p-6 rounded-lg shadow">
                    <h3 class="text-lg font-semibold mb-2"><?= htmlspecialchars($d['level_name']) ?></h3>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: <?= $d['avg_score'] ?>%"></div>
                    </div>
                    <p class="mt-2 text-right"><?= number_format($d['avg_score'] ?: 0, 2) ?>%</p>
                </div>
            <?php endforeach; ?>
        </div>
    </section>

</div>

<script>
function showTab(tabId) {
    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
    document.getElementById(tabId).classList.add('active');

    // Atualiza gráfico quando aba for exibida
    if (tabId === 'progress') {
        window.dispatchEvent(new Event('resize')); // Atualiza gráfico se estiver oculto
    }
}
</script>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('progressChart').getContext('2d');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            <?php foreach ($avg_data as $d): ?>'<?= $d['level_name'] ?>',<?php endforeach; ?>
        ],
        datasets: [{
            label: 'Média (%)',
            data: [
                <?php foreach ($avg_data as $d): ?>'<?= $d['avg_score'] ?>',<?php endforeach; ?>
            ],
            backgroundColor: '#6366F1'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true, max: 100 }
        }
    }
});
</script>

</body>
</html>