<?php

$url="http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

  if(strpos($url, 'error') == true){


 echo '<script>
    setTimeout(function() {
        swal({
            title: "Error!",
            text: "Error Occured",
            type: "error"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
  </script>';
  

    }elseif (strpos($url, 'added') == true) {
        
 echo '<script>
    setTimeout(function() {
        swal({
            title: "Success!",
            text: "New Enrollee added successfully",
            type: "success"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
</script>';

    } elseif (strpos($url, 'depadd') == true) {
        
 echo '<script>
    setTimeout(function() {
        swal({
            title: "Success!",
            text: "New Dependant added successfully",
            type: "success"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
</script>';

    }
    elseif (strpos($url, 'bulk_approved') == true) {
        
 echo '<script>
    setTimeout(function() {
        swal({
            title: "Success!",
            text: "Bulk Approval Successful",
            type: "success"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
</script>';

    }elseif (strpos($url, 'approved') == true) {
        
 echo '<script>
    setTimeout(function() {
        swal({
            title: "Success!",
            text: "Approved",
            type: "success"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
</script>';

    } elseif (strpos($url, 'success') == true) {
            
     echo '<script>
        setTimeout(function() {
            swal({
                title: "Success!",
                text: "Bulk Upload Completed",
                type: "success"
            }, function() {
                window.location = "#0";
            });
        }, 1000);
    </script>';

    } elseif (strpos($url, 'denied') == true) {
        
 echo '<script>
    setTimeout(function() {
        swal({
            title: "Success!",
            text: "Denied",
            type: "success"
        }, function() {
            window.location = "#0";
        });
    }, 1000);
</script>';

    }




?>







<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Database Table</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    
    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
    <style>
    /* Customize any additional styles here */
    body {
        background-image: url(../images/final_20864245705555.5b18e0a95657b9.83368454.jpg);
    }

    .pagination {
        justify-content: center;
    }

    /* Adjust search bar width and height */
    #searchInput {
        width: 250px;
        /* Reduced width */
        /*height: 25px; */
        /* Reduced height */
    }

    /* Add alternating row colors */
    tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    /* Filter dropdown style */
    #filterDropdown {
        width: 200px;
        /* Adjust as needed */
    }

    /* item dropdown style */
    #perPage {
        width: 200px;
        /* Adjust as needed */
    }

    #dataTable {
        table-layout: auto;
        width: 130%;
        /* Optional: Set a specific width for the table */
    }

    .container {
        width: 100%;
        max-width: 100vw;
        overflow-x: auto;
        padding: 20px;
        /* Adjust padding as needed */
        box-sizing: border-box;
        height: 100%;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    .container {
        width: 100% !important;
        padding: 5px !important;
        margin-left: 20px !important;
        /* Remove left margin */
        margin-right: 40px !important;
        /* Remove right margin */
    }
    </style>

    <style>
    /* Modal styles */
    .modal,
    .modal2 {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content,
    .modal-content2 {
        background-color: #fefefe;
        margin: 2% auto;
        padding: 20px 50px;
        border: 1px solid #888;
        width: 70%;
        height: 90vh;
        overflow-y: auto;

    }

    .close,
    .close2 {
        color: #aaa;
        /* float: right; */
        font-size: 38px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus,
    .close2:hover,
    .close2:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }



    .inputdiv {
        display: block;
    }

    .inputdiv input {
        padding: 10px 20px;
        outline: none;
        border-radius: 10px;
        border: 2px solid gray;

    }
    </style>




</head>

<body>

    <!-- Form Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <h1 style="text-align: right;">
                <span class="close p-2 text-danger ">&times;</span>
            </h1>
            <h2 class='text-center text-primary'>Add New Principal</h2>
            <form id="modalForm" action="./addnew/addnew.php" method="post" enctype="multipart/form-data">
                <div class="form-row row py-2">
                    <div class="form-group col-md-12  py-2">
                        <label for="group">Group</label>
                        <select id="group" class="form-control" name="group" required>
                            <option selected>Choose...</option>
                            <?php
                            include_once './dbconn.php';
                                // Fetch data from the table
                                $sql = "SELECT company, link, company_code, groupplan FROM web_app_enrollment_form";
                                $result = $conn->query($sql);
                                
                                
                                // Check if there are any rows returned
                                if ($result->num_rows > 0) {
                                    // Output data of each row
                                    while($row = $result->fetch_assoc()) {
                                        $company=$row["company"];
                                        $link=$row["link"];
                                        $company_code= $row["company_code"];
                                        $groupplan=$row["groupplan"];
                                        echo "<option value='" . $company . "'>" . $company . "</option>";
                                        
                                    }
                                } else {
                                    echo "<option value=''>No data available</option>";
                                }
                                                    
                            ?>
                            
                        </select>
                        
                <!--hidden inputs-->
                <!--<input type="hidden" name="company_code" value="<?=$company_code?>">-->
                    </div>
                    <div class="form-group col-md-6">
                        <label for="firstName">First Name</label>
                        <input type="text" class="form-control" id="firstName" name="firstname" required
                            placeholder="First Name">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lastName">Last Name</label>
                        <input type="text" class="form-control" id="lastName" name="lastname" required
                            placeholder="Last Name">
                    </div>
                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="middlename">Middle Name</label>
                        <input type="text" class="form-control" id="lastName" name="middlename"
                            placeholder="Last Name">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="phoneNumber">Phone Number</label>
                        <input type="tel" class="form-control" id="phoneNumber" name="phonenumber" required
                            placeholder="Phone Number">
                    </div>

                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required placeholder="Email">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="address">Employee ID</label>
                        <input type="text" class="form-control" id="employeeid" name="employeeid" required
                            placeholder="Employee ID">
                    </div>
                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="gender">Gender</label>
                        <select id="gender" class="form-control" name="gender" required>
                            <option selected>Choose...</option>
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="dob">Date Of Birth</label>
                        <input type="date" class="form-control" id="dob" name="dob" required>
                    </div>


                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="state">State</label>
                        <select class="form-control" id="state" onchange="populateLocalGovernments()" name="state"
                            required>
                            <option selected disabled>Select State</option>
                            <option value="Abia">Abia</option>
                            <option value="Adamawa">Adamawa</option>
                            <option value="Abuja">Abuja</option>
                            <option value="AkwaIbom">Akwa Ibom</option>
                            <option value="Anambra">Anambra</option>
                            <option value="Bauchi">Bauchi</option>
                            <option value="Bayelsa">Bayelsa</option>
                            <option value="Benue">Benue</option>
                            <option value="Borno">Borno</option>
                            <option value="CrossRiver">Cross River</option>
                            <option value="Delta">Delta</option>
                            <option value="Ebonyi">Ebonyi</option>
                            <option value="Edo">Edo</option>
                            <option value="Ekiti">Ekiti</option>
                            <option value="Enugu">Enugu</option>
                            <option value="Gombe">Gombe</option>
                            <option value="Imo">Imo</option>
                            <option value="Jigawa">Jigawa</option>
                            <option value="Kaduna">Kaduna</option>
                            <option value="Kano">Kano</option>
                            <option value="Katsina">Katsina</option>
                            <option value="Kebbi">Kebbi</option>
                            <option value="Kogi">Kogi</option>
                            <option value="Kwara">Kwara</option>
                            <option value="Lagos">Lagos</option>
                            <option value="Nassarawa">Nassarawa</option>
                            <option value="Niger">Niger</option>
                            <option value="Ogun">Ogun</option>
                            <option value="Ondo">Ondo</option>
                            <option value="Osun">Osun</option>
                            <option value="Oyo">Oyo</option>
                            <option value="Plateau">Plateau</option>
                            <option value="Rivers">Rivers</option>
                            <option value="Sokoto">Sokoto</option>
                            <option value="Taraba">Taraba</option>
                            <option value="Yobe">Yobe</option>
                            <option value="Zamfara">Zamfara</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="lga">Local Government</label>
                        <select class="form-control" name="lga" id="local-government">
                            <option selected disabled>Select Local Government</option>
                        </select>
                        <script src="./statelga.js"></script>
                    </div>
                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="City">City</label>
                        <input type="text" class="form-control" id="city" name="city" required placeholder="City">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="address">Address</label>
                        <input type="text" class="form-control" id="address" name="address" required
                            placeholder="Address">
                    </div>

                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="planType">Plan Type</label>
                        <select class="form-control" class="form-control" id="planType" name="plantype" required>
                            <option value="Flex Plan"> Flex Plan </option>
            				<option value="Executive Plan"> Executive Plan </option>
            				<option value="Upper Plan"> Upper Plan </option>
            				<option value="Business Plan"> Business Plan </option>
            				<option value="Club Plan"> Club Plan </option>
            				<option value="Social Plan"> Social Paln </option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="roup Type">Group Type</label>
                        <select class="form-control" class="form-control" id="groupType" name="grouptype" required>
                            <option selected disabled>Select Plan</option>
                            <option value="Individual">Individual</option>
                            <option value="Family">Family</option>
                        </select>
                    </div>
                </div>
                <div class="form-row row py-2">
                    <div class="form-group col-md-12">
                        <label for="selectedProvider">Selected Provider</label>
                        <select class="form-control" class="form-control" id="provider" name="provider" required>
                            <option selected disabled>Choose Provider</option>
                            <?php
                                // Fetch data from the table
                                $sql = "SELECT provider_name FROM web_app_provider_list";
                                $result = $conn->query($sql);
                                
                                
                                // Check if there are any rows returned
                                if ($result->num_rows > 0) {
                                    // Output data of each row
                                    while($row = $result->fetch_assoc()) {
                                        $provider=$row["provider_name"];
                                        echo "<option value='" . $provider . "'>" . $provider . "</option>";
                                        
                                    }
                                } else {
                                    echo "<option value=''>No data available</option>";
                                }
                                                    
                            ?>
                        </select>
                    </div>
                </div>



                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="status">Status</label>
                        <select class="form-control" class="form-control" id="status" name="status" required>
                            <option selected disabled>Status</option>
                            <option value="Approved">Approved</option>
                            <option value="Pending">Pending</option>
                            <option value="Denied">Denied</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="passport">Passport</label>
                        <input type="file" class="form-control form-control-file" id="passport" name="passport">
                    </div>
                </div>

                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="Genotype">Genotype</label>
                        <select class="form-control" class="form-control" id="Genotype" name="genotype" required>
                            <option selected disabled>Select Genotype</option>
                            <option value="AA">AA</option>
                            <option value="AS">AS</option>
                            <option value="SS">SS</option>
                            <option value="AC">AC</option>
                            <option value="SC">SC</option>
                            <option value="CC">CC</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="bloodgroup">Blood Group</label>
                        <select class="form-control" class="form-control" id="bloodgroup" name="bloodgroup" required>
                            <option selected disabled>Select Blood Group</option>
                            <option value="A+">A+</option>
                            <option value="A-">A-</option>
                            <option value="B+">B+</option>
                            <option value="B-">B-</option>
                            <option value="AB+">AB+</option>
                            <option value="AB-">AB-</option>
                            <option value="O+">O+</option>
                            <option value="O-">O-</option>
                        </select>
                    </div>
                </div>

                <div class="form-row row py-2">
                    <div class="form-group col-md-12">
                        <label for="allergies">Allergies</label>
                        <input type="text" class="form-control" id="allergies" name="allergies"
                            placeholder="Any Allergies">
                    </div>
                </div>

                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="pre-existing">Has Pre-Existing Condition</label>
                        <select class="form-control" class="form-control" id="has-pre-existing" name="haspreexisting"
                            required>
                            <option selected disabled>Select...</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="pre-existing">Pre-Existing Condition</label>
                        <input type="text" class="form-control" id="pre-existing" name="preexisting"
                            placeholder="Pre-Existing Condition">
                    </div>
                </div>

                <div class="form-row row py-2">
                    <div class="form-group col-md-6">
                        <label for="surgicalhist">Has Surgical History</label>
                        <select class="form-control" class="form-control" id="hassurgicalhist" name="hassurgicalhist"
                            required>
                            <option selected disabled>Select...</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="Surgical-History">Surgical History</label>
                        <input type="text" class="form-control" id="SurgicalHistory" name="surgicalhist"
                            placeholder="Surgical History">
                    </div>
                </div>


                <button type="submit" class="btn btn-primary px-4 mt-4" name="add">Add</button>
            </form>
        </div>

    </div>


    
   <div style="text-align:center">
    <img alt="" class="form-image pt-3" style="border:0" src="../images/Red-logo.png" height="150px" width=""
        data-component="image">
    <div class="container-fluid">
        <div class="mb-3 mt-4">
            <form action="import.php" method="post" enctype="multipart/form-data" style="display: none;"
                id="importForm">
                <input type="file" name="importFile" id="importFile">
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            <a href="#" class="btn btn-info mb-3" onclick="document.getElementById('importFile').click();">Import from
                file</a>
            <a href="export.php" class="btn btn-secondary mb-3">Export to CSV</a>
            <a href="download_all_cards.php" class="btn btn-danger mb-3">Download selected E-ID</a>
            <button id="openModalBtn" class="btn btn-success mb-3">Add New</button>
            <a href="../admin/index.php" class="btn btn-primary mb-3">Add Company</a>
            <button id="approveButton" onclick="performBulkApproval()" class="btn btn-success mb-3">Approve
                Selected</button>
            <script src="./modal.js"></script>
        </div>
        <div class="container-fluid d-flex px-4 py-2">
            <div class="d-flex align-items-center px-4 py-2">
                    <label for="searchInput" class="text-black me-2">Search:</label>
                    <input type="text" id="searchInput" class="form-control" oninput="performSearch()" placeholder="Search using Surname or HMO_ID">
            </div>
            <div class="d-flex align-items-center">
                <label for="perPage" class="text-black me-2">Items:</label>
                <select id="perPage" class="form-select" onchange="changePerPage(this)">
                    <option value="5">5</option>
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                </select>
            </div>
            <div class="d-flex align-items-center px-4">
                <label for="filterDropdown" class="text-black me-2">Filter:</label>
                <select id="filterDropdown" class="form-select" onchange="applyFilter()">
                    <option value="All" <?php if ($filter == 'All') echo 'selected'; ?>>All</option>
                    <option value="Pending" <?php if ($filter == 'Pending') echo 'selected'; ?>>Pending</option>
                    <option value="Approved" <?php if ($filter == 'Approved') echo 'selected'; ?>>Approved</option>
                    <option value="Denied" <?php if ($filter == 'Denied') echo 'selected'; ?>>Denied</option>
                </select>
            </div>
            
        </div>
        <div class="mb-3">
            <div class="container">
                
                <table id="dataTable" class="table table-bordered">
                    <!-- Table Headings -->
                    <thead>
                        <tr>
                            <th><input type="checkbox" onclick="toggle(this);"></th>
                            <th>SN</th>
                            <th>Group</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Phone Number</th>
                            <th>Email</th>
                            <th>HMO ID</th>
                            <th>Gender</th>
                            <th>Date Of Birth</th>
                            <th>Plan Type</th>
                            <th>State</th>
                            <th>Address</th>
                            <th>Selected Provider</th>
                            <th>Employee ID</th>
                            <th>Status</th>
                            <th>Passport</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <!-- Table Body -->
                    <tbody>
                        <?php
                            require 'PHPMailer/src/PHPMailer.php';
                            require 'PHPMailer/src/SMTP.php';
                            require 'PHPMailer/src/Exception.php';
                            // Connect to MySQL
                            include_once './dbconn.php';
                            // Pagination variables
                            $limit = isset($_GET['per_page']) ? $_GET['per_page'] : 10; // Number of records per page
                            $page = isset($_GET['page']) ? $_GET['page'] : 1;
                            $start = ($page - 1) * $limit;
                            // Get filter value
                            $filter = isset($_GET['filter']) ? $_GET['filter'] : 'All'; // Default filter value
                            // Adjust SQL query based on filter value
                            if ($filter === 'All') {
                                if (isset($_GET['search'])) {
                                    $search = $_GET['search'];
                                    $sql = "SELECT * FROM `web_app_enrollee_data` WHERE `hmo_id` LIKE '%$search%' OR `surname` LIKE '%$search%' ORDER BY id DESC LIMIT $start, $limit";
                                } else {
                                    $sql = "SELECT * FROM `web_app_enrollee_data` ORDER BY id DESC LIMIT $start, $limit";
                                }
                            } else {
                                if (isset($_GET['search'])) {
                                    $search = $_GET['search'];
                                    $sql = "SELECT * FROM `web_app_enrollee_data` WHERE status = '$filter' AND (`hmo_id` LIKE '%$search%' OR `surname` LIKE '%$search%') ORDER BY id DESC LIMIT $start, $limit";
                                } else {
                                    $sql = "SELECT * FROM `web_app_enrollee_data` WHERE status = '$filter' ORDER BY id DESC LIMIT $start, $limit";
                                }
                            }
                            // Fetch data with pagination and filter
                            $result = mysqli_query($conn, $sql);
                            // Count total records
                            $total_records = mysqli_num_rows(mysqli_query($conn, "SELECT * FROM `web_app_enrollee_data`"));
                            // Calculate total pages
                            $total_pages = ceil($total_records / $limit);
                            if (mysqli_num_rows($result) > 0) {
                                $serial = ($page - 1) * $limit + 1;
                                while($row = mysqli_fetch_assoc($result)) {
                                    echo "<tr>";
                                    // Add checkbox column
                                    echo "<td><input type='checkbox' name='selected[]' value='" . $row['id'] . "'></td>";
                                    // Output other table cells with data from database
                                    // Adjust as per your database schema
                                    // Example: echo "<td>" . $row['column_name'] . "</td>";
                                    // Adjust other table cells accordingly
                                    echo "<td>" . $serial . "</td>";
                                    echo "<td>" . $row['company_name'] . "</td>";
                                    echo "<td>" . $row['first_name'] . "</td>";
                                    echo "<td>" . $row['surname'] . "</td>";
                                    echo "<td>" . $row['phone_number'] . "</td>";
                                    echo "<td>" . $row['email_address'] . "</td>";
                                    echo "<td>" . $row['hmo_id'] . "</td>";
                                    echo "<td>" . $row['gender'] . "</td>";
                                    echo "<td>" . $row['date_of_birth'] . "</td>";
                                    echo "<td>" . $row['type_of_plan'] . "</td>";
                                    echo "<td>" . $row['address_state'] . "</td>";
                                    echo "<td>" . $row['address_street'] . "</td>";
                                    echo "<td>" . $row['hospitals'] . "</td>";
                                    echo "<td>" . $row['employee_id'] . "</td>";
                                    echo "<td>" . $row['status'] . "</td>";
                                    echo "<td><img src='" . $row['Passport_link'] . "' alt='Image' style='max-width: 60px; max-height: 60px;'></td>";
                                    echo "<td>";
                                    echo "<div class='btn-group'>";
                                    echo "<a href='approved.php?id=" . $row['id'] . "&email=" . $row['email_address'] . "' class='btn btn-success'><i class='fas fa-check'></i></a>";
                                    echo "<a href='denied.php?id=" . $row['id'] . "' class='btn btn-danger'><i class='fas fa-remove'></i></a>";
                                    echo "<a href='edit.php?id=" . $row['id'] . "' class='btn btn-warning'><i class='fas fa-pen'></i></a>";
                                    echo "<a href='adddependent.php?id=" . $row['id'] . "' class='btn btn-primary'><i class='fas fa-add'></i></a>";
                                    echo "<a href='#' class='btn btn-secondary' onclick='printIDCard(" . $row['id'] . ", \"" . $row['first_name'] . " " . $row['surname'] . "\", \"" . $row['hmo_id'] . "\", \"" . $row['company_name'] . "\", \"" . $row['type_of_plan'] . "\", \"" . $row['gender'] . "\", \"" . $row['Passport_link'] . "\")'><i class='fas fa-id-card'></i></a>";
                                    echo "</div>";
                                    echo "</td>";
                                    echo "</tr>";
                                    $serial++;
                                }
                            } else {
                                echo "<tr><td colspan='18'>No data found</td></tr>";
                            }
                            // Close connection
                            mysqli_close($conn);
                        ?>
                    </tbody>
                </table>
            </div>
            <ul class="pagination justify-content-center">
                <?php if ($page > 1) : ?>
                <li class="page-item"><a class="page-link"
                        href="?page=<?php echo ($page - 1) . (isset($_GET['per_page']) ? '&per_page=' . $_GET['per_page'] : ''); ?>"><i
                            class="fas fa-chevron-left"></i></a></li>
                <?php endif; ?>
                <?php for ($i = 1; $i <= $total_pages; $i++) : ?>
                <li class="page-item <?php if ($i == $page) echo 'active'; ?>"><a class="page-link"
                        href="?page=<?php echo $i . (isset($_GET['per_page']) ? '&per_page=' . $_GET['per_page'] : ''); ?>"><?php echo $i; ?></a>
                </li>
                <?php endfor; ?>
                <?php if ($page < $total_pages) : ?>
                <li class="page-item"><a class="page-link"
                        href="?page=<?php echo ($page + 1) . (isset($_GET['per_page']) ? '&per_page=' . $_GET['per_page'] : ''); ?>"><i
                            class="fas fa-chevron-right"></i></a></li>
                <?php endif; ?>
            </ul>
        </div>
    </div>
</div>

<script>
    function toggle(source) {
        checkboxes = document.getElementsByName('selected[]');
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked = source.checked;
        }
    }

    function performSearch() {
        var searchInput = document.getElementById('searchInput').value.toLowerCase();
        var tableRows = document.querySelectorAll('#dataTable tbody tr');

        tableRows.forEach(function(row) {
            var hmoId = row.cells[7].innerText.toLowerCase(); // Index of HMO ID column
            var surname = row.cells[4].innerText.toLowerCase(); // Index of Surname column

            if (hmoId.includes(searchInput) || surname.includes(searchInput)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    function performBulkApproval() {
        var button = document.getElementById('approveButton');
        button.disabled = true; // Disable the button
        var checkboxes = document.getElementsByName('selected[]');
        var selectedItems = [];
        // Iterate through checkboxes to find selected items
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                selectedItems.push(checkboxes[i].value);
            }
        }
        // Check if any item is selected
        if (selectedItems.length > 0) {
            // Send selected item IDs to bulkapproval.php using AJAX
            $.ajax({
                url: 'bulkapproval.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    selected: selectedItems
                },
                success: function(response) {
                    // Handle success response if needed
                    console.log(response);
                    // Redirect to another page after successful bulk approval
                    window.location.href = 'index.php?bulk_approved';
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error
                    alert('Error occurred during bulk approval: ' + xhr.responseText);
                },
                complete: function() {
                    button.disabled = false;
                }
            });
        } else {
            // If no item is selected, show an alert
            alert('Please select at least one item for bulk approval.');
            button.disabled = false;
        }
    }

    function changePerPage(select) {
        var value = select.value;
        window.location.href = '?page=1&per_page=' + value;
    }

    function applyFilter() {
        var filterValue = document.getElementById('filterDropdown').value;
        window.location.href = '?filter=' + filterValue;
    }
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>

<script>
    // Function to print ID card
    function printIDCard(id, name, idNumber, client, plan, gender, imageUrl) {
        $.ajax({
            url: 'idcard.php',
            type: 'POST',
            dataType: 'json',
            data: {
                name: name,
                id_number: idNumber,
                client: client, // Update with actual client data
                validity: gender, // Update with actual validity data
                plan: plan,
                image_url: imageUrl
            },
            success: function(response) {
                var a = document.createElement('a');
                a.href = response.file_url;
                a.download = idNumber; // You can change the name of the downloaded file here
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click(); // Trigger the download
                document.body.removeChild(a); // Clean up
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                // Handle error
            }
        });
    }

    // JavaScript to set selected filter option after page refresh
    document.addEventListener("DOMContentLoaded", function() {
        var filterValue = '<?php echo $filter; ?>';
        var filterDropdown = document.getElementById('filterDropdown');
        for (var i = 0; i < filterDropdown.options.length; i++) {
            if (filterDropdown.options[i].value === filterValue) {
                filterDropdown.selectedIndex = i;
                break;
            }
        }
    });
</script>


</body>

</html>