<?php
// เชื่อมต่อฐานข้อมูล (ปรับให้ตรงกับฐานข้อมูลจริงของคุณ)
$host = 'localhost';
$dbname = 'ksdacth_lesson_plan_db';
$username = 'ksdacth_admin';
$password = 'Abc9988771';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
die("Error: " . $e->getMessage());
}
// ดึงข้อมูลบุคลากรแยกตามกลุ่มสาระ/แผนก
$stmt = $pdo->query("SELECT * FROM users WHERE role IN ('admin', 'teacher') ORDER BY department ASC, id ASC");
$personnel = $stmt->fetchAll(PDO::FETCH_ASSOC);
// จัดกลุ่มข้อมูลตามแผนก
$grouped = [];
foreach ($personnel as $p) {
$dept = $p['department'] ?: 'ไม่ระบุกลุ่มสาระ';
$grouped[$dept][] = $p;
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ทำเนียบส่วนบุคลากร | KSD System</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sarabun', sans-serif; background-color: #f4f7f6; color: #444; }
.hero-section { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); color: white; padding: 60px 0; margin-bottom: 40px; text-align: center; }
.dept-title { border-left: 5px solid #4e73df; padding-left: 15px; margin-bottom: 30px; font-weight: 600; color: #2e59d9; }
.person-card { border: none; border-radius: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; background: white; text-align: center; padding: 20px; height: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.person-card:hover { transform: translateY(-10px); box-shadow: 0 12px 20px rgba(0,0,0,0.1); }
.profile-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 5px solid #f8f9fc; margin-bottom: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.name { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; color: #333; }
.position { font-size: 0.9rem; color: #4e73df; font-weight: 500; margin-bottom: 10px; }
.contact-info { font-size: 0.8rem; color: #888; border-top: 1px solid #eee; pt-2; }
</style>
</head>
<body>
<div class="hero-section">
<div class="container">
<h1>บุคลากรทางการศึกษา</h1>
<p class="lead">วิทยาลัยเทคนิคสารภี (KSD) - มุ่งมั่นสร้างสรรค์ พัฒนาฝีมือ</p>
</div>
</div>
<div class="container mb-5">
<?php foreach ($grouped as $deptName => $members): ?>
<h3 class="dept-title mt-5"><?php echo htmlspecialchars($deptName); ?></h3>
<div class="row g-4">
<?php foreach ($members as $m): ?>
<div class="col-6 col-md-4 col-lg-3">
<div class="person-card">
<?php
$img = $m['image_path'] ?: 'https://ui-avatars.com/api/?name=' . urlencode($m['full_name']) . '&size=200&background=4e73df&color=fff';
?>
<img src="<?php echo $img; ?>" class="profile-img" alt="Profile">
<div class="name"><?php echo htmlspecialchars($m['full_name']); ?></div>
<div class="position"><?php echo htmlspecialchars($m['position']); ?></div>
<div class="contact-info mt-2">
<div><i class="bi bi-envelope"></i> <?php echo htmlspecialchars($m['email'] ?: '-'); ?></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<footer class="text-center py-4 bg-white border-top">
<p class="text-muted mb-0">© 2026 Personnel Information System - KSD</p>
</footer>
</body>
</html>