<?php
require __DIR__ . '/../layout/header.php';
require __DIR__ . '/../layout/sidebar.php';

// =========================
// PISAH DATA BERDASARKAN ROLE
// =========================
$ketua = null;
$sekretaris = null;
$bendahara = null;
$others = [];

foreach ($members as $m) {

    $role = strtolower($m['nama_role'] ?? '');

    if ($role == 'ketua') {
        $ketua = $m;
    } elseif ($role == 'sekretaris') {
        $sekretaris = $m;
    } elseif ($role == 'bendahara') {
        $bendahara = $m;
    } else {
        $others[] = $m;
    }
}
?>

<div class="main">

    <div class="header">Daftar Member</div>

    <!-- 🔥 PENGURUS INTI -->
    <div class="grid-inti">

        <?php foreach ([$ketua, $sekretaris, $bendahara] as $m): ?>
            <?php if ($m): ?>
                <div class="card text-center">

                    <!-- AVATAR -->
                    <div class="avatar-lg">
                        <?php if (!empty($m['foto'])): ?>
                            <img src="/membership/public/assets/uploads/<?= $m['foto'] ?>">
                        <?php else: ?>
                            <span><?= strtoupper(substr($m['nama'],0,1)) ?></span>
                        <?php endif; ?>
                    </div>

                    <!-- NAMA -->
                    <h3><?= $m['nama'] ?></h3>

                    <!-- ROLE -->
                    <p><strong><?= $m['nama_role'] ?? '-' ?></strong></p>

                    <!-- NO HP -->
                    <p class="hp"><?= $m['no_hp'] ?? '-' ?></p>

                    <!-- PERUSAHAAN -->
                    <small><?= $m['perusahaan'] ?? '-' ?></small>

                </div>
            <?php endif; ?>
        <?php endforeach; ?>

    </div>

    <!-- 🔽 MEMBER LAIN -->
    <div class="grid" style="margin-top:20px;">

        <?php foreach ($others as $m): ?>

            <div class="card text-center">

                <!-- AVATAR -->
                <div class="avatar-lg">
                    <?php if (!empty($m['foto'])): ?>
                        <img src="/membership/public/assets/uploads/<?= $m['foto'] ?>">
                    <?php else: ?>
                        <span><?= strtoupper(substr($m['nama'],0,1)) ?></span>
                    <?php endif; ?>
                </div>

                <!-- NAMA -->
                <h3><?= $m['nama'] ?></h3>

                <!-- ROLE -->
                <p><?= $m['nama_role'] ?? '-' ?></p>

                <!-- NO HP -->
                <p class="hp"><?= $m['no_hp'] ?? '-' ?></p>

                <!-- PERUSAHAAN -->
                <small><?= $m['perusahaan'] ?? '-' ?></small>

            </div>

        <?php endforeach; ?>

    </div>

</div>

<?php require __DIR__ . '/../layout/footer.php'; ?>