<?php
$exercises = [
    [
        'id' => 'Bai01',
        'title' => 'Bài 1: JavaScript Cơ bản',
        'desc' => 'Hiển thị "Hello JavaScript", in biến ra Console và HTML, kiểm tra tuổi nhập vào (đủ 18 tuổi hay chưa).',
        'path' => 'Bai01/index.html',
        'badge' => 'JS Basic',
        'color' => 'primary'
    ],
    [
        'id' => 'Bai02',
        'title' => 'Bài 2: Thao tác với DOM (DOM Manipulation)',
        'desc' => 'Đổi màu nền trang ngẫu nhiên, lấy nội dung từ ô input hiển thị ra div, thêm phần tử li vào danh sách ul.',
        'path' => 'Bai02/index.html',
        'badge' => 'DOM',
        'color' => 'success'
    ],
    [
        'id' => 'Bai03',
        'title' => 'Bài 3: Xử lý Sự kiện (Event Handling)',
        'desc' => 'Đổi ảnh khi di chuột vào/ra (mouseover/mouseout), kiểm tra email bằng Regex khi submit form, đồng hồ thời gian thực (setInterval).',
        'path' => 'Bai03/index.html',
        'badge' => 'Events',
        'color' => 'info'
    ],
    [
        'id' => 'Bai04',
        'title' => 'Bài 4: AJAX Cơ bản - Giờ Server',
        'desc' => 'Sử dụng Fetch API gọi time.php để lấy giờ hiện tại từ máy chủ và tự động cập nhật lên trang mỗi 5 giây.',
        'path' => 'Bai04/index.html',
        'badge' => 'Fetch + PHP',
        'color' => 'warning'
    ],
    [
        'id' => 'Bai05',
        'title' => 'Bài 5: Gửi dữ liệu từ Form bằng AJAX',
        'desc' => 'Nhập tên vào form, gửi qua Fetch API tới hello.php và hiển thị lời chào "Xin chào, [tên]" không cần tải lại trang.',
        'path' => 'Bai05/index.html',
        'badge' => 'AJAX Form',
        'color' => 'danger'
    ],
    [
        'id' => 'Bai06',
        'title' => 'Bài 6: Làm việc với JSON',
        'desc' => 'Tải danh sách sản phẩm từ file products.json bằng Fetch API và hiển thị dưới dạng bảng HTML định dạng đẹp.',
        'path' => 'Bai06/index.html',
        'badge' => 'JSON',
        'color' => 'secondary'
    ],
    [
        'id' => 'Bai07',
        'title' => 'Bài 7: Tìm kiếm Sản phẩm bằng AJAX',
        'desc' => 'Tìm kiếm sản phẩm theo thời gian thực: JS gửi từ khóa tới search.php, lọc dữ liệu JSON và trả kết quả hiển thị ngay.',
        'path' => 'Bai07/index.html',
        'badge' => 'Live Search',
        'color' => 'primary'
    ],
    [
        'id' => 'Bai08',
        'title' => 'Bài 8: Ứng dụng Chat đơn giản',
        'desc' => 'Gửi tin nhắn qua AJAX lưu vào chat.txt bằng chat.php, tự động tải và cập nhật lịch sử trò chuyện mỗi 2 giây.',
        'path' => 'Bai08/index.html',
        'badge' => 'Polling Chat',
        'color' => 'success'
    ],
    [
        'id' => 'Bai09',
        'title' => 'Bài 9: Ứng dụng Dự báo Thời tiết (Fake Data)',
        'desc' => 'Chọn hoặc nhập tên thành phố, gửi yêu cầu tới weather.php để nhận dữ liệu nhiệt độ, độ ẩm, tốc độ gió dạng JSON.',
        'path' => 'Bai09/index.html',
        'badge' => 'Weather API',
        'color' => 'info'
    ],
    [
        'id' => 'Bai10',
        'title' => 'Bài 10: Ứng dụng Quản lý Công việc (To-do List)',
        'desc' => 'Thêm, xóa, đánh dấu hoàn thành công việc và lưu trữ bền vững vào file todos.json trên server thông qua todo.php.',
        'path' => 'Bai10/index.html',
        'badge' => 'CRUD JSON',
        'color' => 'warning'
    ],
    [
        'id' => 'Bai11',
        'title' => 'Bài 11: Hiển thị Tỷ giá Ngoại tệ định kỳ',
        'desc' => 'Lấy bảng tỷ giá ngoại tệ (USD, EUR, JPY, GBP...) từ rates.php bằng Fetch API, tự động cập nhật định kỳ 10 phút.',
        'path' => 'Bai11/index.html',
        'badge' => 'Auto Refresh',
        'color' => 'danger'
    ],
    [
        'id' => 'Bai12',
        'title' => 'Bài 12: Form Đăng ký Tài khoản với AJAX & MySQL',
        'desc' => 'Validate dữ liệu bằng JS, gửi AJAX tới register.php lưu vào bảng users trong MySQL (PDO + password_hash).',
        'path' => 'Bai12/index.html',
        'badge' => 'AJAX + MySQL',
        'color' => 'dark'
    ]
];
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chương 2 - Lab 3: Giới thiệu JavaScript và Tương tác với PHP</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f4f6f9;
        }
        .card-lab {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: none;
            border-radius: 12px;
        }
        .card-lab:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        }
        .hero-header {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: white;
            border-radius: 14px;
        }
    </style>
</head>
<body>
<div class="container py-4">
    <div class="hero-header p-4 mb-4 shadow-sm d-flex flex-column flex-md-row justify-content-between align-items-md-center">
        <div>
            <span class="badge bg-light text-primary mb-2">CHƯƠNG 2 / LAB 3</span>
            <h1 class="h3 fw-bold mb-1">Giới thiệu JavaScript và Tương tác với PHP (AJAX / Fetch API)</h1>
            <p class="mb-0 opacity-75">Tổng hợp 12 bài thực hành từ JavaScript cơ bản, DOM, Event đến AJAX, JSON và MySQL</p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="../index.php" class="btn btn-light fw-semibold shadow-sm">
                &larr; Trang chủ hệ thống
            </a>
        </div>
    </div>

    <div class="row g-4">
        <?php foreach ($exercises as $ex): ?>
            <div class="col-md-6 col-lg-4">
                <div class="card card-lab h-100 shadow-sm">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge bg-<?= htmlspecialchars($ex['color']) ?>"><?= htmlspecialchars($ex['badge']) ?></span>
                            <small class="text-muted fw-semibold"><?= htmlspecialchars($ex['id']) ?></small>
                        </div>
                        <h5 class="card-title fw-bold text-dark"><?= htmlspecialchars($ex['title']) ?></h5>
                        <p class="card-text text-secondary flex-grow-1 small"><?= htmlspecialchars($ex['desc']) ?></p>
                        <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                            <a href="<?= htmlspecialchars($ex['path']) ?>" class="btn btn-sm btn-outline-primary w-100 fw-semibold">
                                Mở bài thực hành &rarr;
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
</body>
</html>