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

<div class="main">

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

    <!-- 🔥 TAB BUTTON -->
    <div class="tab-menu">
        <button class="tab-btn active" onclick="showTab('pending')">Approve Member</button>
        <button class="tab-btn" onclick="showTab('approved')">List Member</button>
    </div>

    <!-- ========================= -->
    <!-- 🔥 TAB 1: PENDING -->
    <!-- ========================= -->
    <div id="pending" class="tab-content active">

        <div class="card">

            <table class="table-modern">

                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Perusahaan</th>
                        <th>Tanggal Daftar</th>
                        <th>Aksi</th>
                    </tr>
                </thead>

                <tbody>

                <?php if (!empty($members_pending)): ?>
                    <?php foreach ($members_pending as $m): ?>
                        <tr>

                            <td><?= htmlspecialchars($m['nama']) ?></td>
                            <td><?= htmlspecialchars($m['email']) ?></td>
                            <td><?= htmlspecialchars($m['perusahaan'] ?? '-') ?></td>
                            <td><?= $m['created_at'] ?></td>

                            <td>
                                <a href="/membership/approve-member-action?id=<?= $m['id'] ?>" 
                                   class="btn-sm success">✔</a>

                                <a href="/membership/reject-member-action?id=<?= $m['id'] ?>" 
                                   class="btn-sm danger">✖</a>
                            </td>

                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5">Tidak ada member menunggu</td>
                    </tr>
                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

    <!-- ========================= -->
    <!-- 🔥 TAB 2: APPROVED -->
    <!-- ========================= -->
    <div id="approved" class="tab-content">

        <div class="card">

            <table class="table-modern">

                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Perusahaan</th>
                        <th>No HP</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody>

                <?php if (!empty($members_approved)): ?>
                <?php $no = 1; ?>
                    <?php foreach ($members_approved as $m): ?>
                        <tr>
                            <td><?= $no++ ?></td>
                            <td><?= htmlspecialchars($m['nama']) ?></td>
                            <td><?= htmlspecialchars($m['email']) ?></td>
                            <td><?= htmlspecialchars($m['perusahaan'] ?? '-') ?></td>
                            <td><?= htmlspecialchars($m['no_hp'] ?? '-') ?></td>

                            <td>
                                <span class="badge success">Approved</span>
                            </td>

                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5">Belum ada member</td>
                    </tr>
                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

</div>

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

<!-- 🔥 SCRIPT TAB -->
<script>
function showTab(tab) {

    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));

    document.getElementById(tab).classList.add('active');

    event.target.classList.add('active');
}
</script>