4WDCSA.co.za/admin_members.php

<?php include_once('header02.php');
checkAdmin();
// SQL query to fetch data
$sql = "SELECT user_id, first_name, last_name, tel_cell, email, dob FROM membership_application";
$result = $conn->query($sql);
?>
<style>
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin: 10px 0;
    }

    thead th {
        cursor: pointer;
        text-align: left;
        padding: 10px;
        font-weight: bold;
        position: relative;
    }

    thead th::after {
        content: '\25B2';
        /* Up arrow */
        font-size: 0.8em;
        position: absolute;
        right: 10px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    thead th.asc::after {
        content: '\25B2';
        /* Up arrow */
        opacity: 1;
    }

    thead th.desc::after {
        content: '\25BC';
        /* Down arrow */
        opacity: 1;
    }

    tbody tr:nth-child(odd) {
        background-color: transparent;
    }

    tbody tr:nth-child(even) {
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
    }

    tbody td {
        padding: 5px;
    }

    tbody tr:nth-child(even) td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    tbody tr:nth-child(even) td:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .filter-input {
        width: 100%;
        padding: 5px;
        /* margin-bottom: 20px; */
        font-size: 16px;
        background-color: rgb(255, 255, 255);
        border-radius: 25px;
    }

    .infobox {
        color: #484848;
        background: #f9f9f7;
        border: 1px solid #d8d8d8;
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .theme-btn,
    a.theme-btn {
        padding: 0px 14px;
    }
    
</style>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const table = document.querySelector("table");
        const headers = table.querySelectorAll("thead th");
        const rows = Array.from(table.querySelectorAll("tbody tr"));
        const filterInput = document.getElementById("filterInput");

        headers.forEach((header, index) => {
            header.addEventListener("click", () => {
                const sortedRows = rows.sort((a, b) => {
                    const aText = a.cells[index].textContent.trim().toLowerCase();
                    const bText = b.cells[index].textContent.trim().toLowerCase();

                    if (aText < bText) return -1;
                    if (aText > bText) return 1;
                    return 0;
                });

                if (header.classList.contains("asc")) {
                    header.classList.remove("asc");
                    header.classList.add("desc");
                    sortedRows.reverse();
                } else {
                    headers.forEach(h => h.classList.remove("asc", "desc"));
                    header.classList.add("asc");
                }

                const tbody = table.querySelector("tbody");
                tbody.innerHTML = "";
                sortedRows.forEach(row => tbody.appendChild(row));
            });
        });

        filterInput.addEventListener("input", function() {
            const filterValue = filterInput.value.trim().toLowerCase();
            rows.forEach(row => {
                const rowText = row.textContent.trim().toLowerCase();
                row.style.display = rowText.includes(filterValue) ? "" : "none";
            });
        });
    });
</script>
<!-- Page Banner Start -->
<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);

$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
    $randomBanner = $bannerImages[array_rand($bannerImages)];
}
?>
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
    <div class="banner-overlay"></div>
    <div class="container">
        <div class="banner-inner text-white mb-50">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">4WDCSA Members</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">4WDCSA Members</li>
                </ol>
            </nav>
        </div>
    </div>
</section>

<!-- Tour List Area start -->
<section class="tour-list-page py-10 rel z-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class='infobox' data-aos='fade-up' data-aos-duration='1500' data-aos-offset='50'>
                    <div style='padding:10px;'>
                        <input type="text" id="filterInput" class="filter-input" placeholder="Filter results...">
                        <table>
                            <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Cell Number</th>
                                    <th>Email</th>
                                    <th>Date of Birth</th>
                                    <th>Membership</th>
                                    <th>View Info</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                if ($result->num_rows > 0) {
                                    // Output data of each row
                                    while ($row = $result->fetch_assoc()) {
                                        echo "<tr>
                                <td>" . htmlspecialchars($row['first_name']) . "</td>
                                <td>" . htmlspecialchars($row['last_name']) . "</td>
                                <td>" . htmlspecialchars($row['tel_cell']) . "</td>
                                <td>" . htmlspecialchars($row['email']) . "</td>
                                <td>" . htmlspecialchars($row['dob']) . "</td>
                                <td>";
                                        if (getUserMemberStatus($row['user_id'])) {
                                            echo 'ACTIVE';
                                        } else {
                                            echo 'INACTIVE';
                                        };
                                echo "</td>                                        
                                <td><a href='member_info.php?token=" . encryptData($row['user_id'], $salt) . "' class='theme-btn style-two style-three'><span data-hover='PAYMENT RECEIVED'>View Info</span></a></td>
                                </tr>";
                                    }
                                } else {
                                    echo '<tr><td colspan="5">No records found</td></tr>';
                                } ?>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Tour List Area end -->


<?php include_once("insta_footer.php"); ?>