<?php
require_once 'includes/auth.php';
requireLogin();

require_once 'includes/config.php';

// ดึงข้อมูลสมาชิกทั้งหมด
$sql = "SELECT * FROM members ORDER BY id DESC";
$result = $conn->query($sql);

// นับจำนวนสมาชิก
$totalMembers = 0;
$count = $conn->query("SELECT COUNT(*) AS total FROM members");
if ($count && $rowCount = $count->fetch_assoc()) {
    $totalMembers = $rowCount['total'];
}
?>
<!DOCTYPE html>
<html lang="th">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ทำเนียบสมาชิก</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="<?= BASE_URL ?>/css/style.css">

</head>

<body>

<?php include 'includes/header.php'; ?>

<section class="member-section">

    <div class="container">

        <div class="text-center mb-5">

            <h2 class="display-5 fw-bold">
                👥 ทำเนียบสมาชิก
            </h2>

            <p class="text-muted">
                ระบบสารสนเทศทำเนียบสมาชิก ชมรมศิษย์ มจร วัดสุวรรณ
            </p>

            <span class="badge bg-primary fs-6">
                สมาชิกทั้งหมด <?= $totalMembers ?> คน
            </span>

        </div>

        <div class="search-box">

            <input
                type="text"
                id="searchInput"
                placeholder="🔍 ค้นหาชื่อ รหัสนักศึกษา หรือสาขาวิชา">

        </div>

        <div class="member-grid">

            <?php if ($result->num_rows > 0): ?>

                <?php while ($row = $result->fetch_assoc()): ?>

                    <div class="member-card">

                        <div class="member-avatar">

<?php
$photoPath = "uploads/profiles/" . $row['photo'];

if (!empty($row['photo']) && file_exists(__DIR__ . "/" . $photoPath)) {
?>

    <img
        src="<?= $photoPath; ?>"
        alt="รูปสมาชิก"
        style="width:120px;height:120px;border-radius:50%;object-fit:cover;">

<?php } else { ?>

    <img
        src="https://via.placeholder.com/120x120?text=Profile"
        alt="Profile"
        style="width:120px;height:120px;border-radius:50%;object-fit:cover;">

<?php } ?>

</div>


                        <h3 class="member-name">
                            <?= htmlspecialchars($row['prefix'] . " " . $row['first_name'] . " " . $row['last_name']) ?>
                        </h3>

                        <div class="badge-major">
                            <?= htmlspecialchars($row['major']) ?>
                        </div>

                        <div class="member-info">

                            <p><strong>รหัสนักศึกษา</strong><br>
                                <?= htmlspecialchars($row['student_id']) ?>
                            </p>

                            <p><strong>คณะ</strong><br>
                                <?= htmlspecialchars($row['faculty']) ?>
                            </p>

                            <p><strong>ปีที่จบ</strong><br>
                                <?= htmlspecialchars($row['graduation_year']) ?>
                            </p>

                            <p><strong>โทรศัพท์</strong><br>
                                <?= htmlspecialchars($row['phone']) ?>
                            </p>

                            <p><strong>Email</strong><br>
                                <?= htmlspecialchars($row['email']) ?>
                            </p>

                        </div>

                        <a href="member_detail.php?id=<?= $row['id']; ?>" class="detail-btn">
                            ดูรายละเอียด
                        </a>

                    </div>

                <?php endwhile; ?>

            <?php else: ?>

                <div class="alert alert-warning text-center">
                    ยังไม่มีสมาชิกในระบบ
                </div>

            <?php endif; ?>

        </div>

    </div>

</section>

<?php include 'includes/footer.php'; ?>

<script>

const searchInput = document.getElementById("searchInput");

searchInput.addEventListener("keyup", function () {

    const keyword = this.value.toLowerCase();

    const cards = document.querySelectorAll(".member-card");

    cards.forEach(function (card) {

        const text = card.innerText.toLowerCase();

        card.style.display = text.includes(keyword) ? "" : "none";

    });

});

</script>

</body>

</html>
