1#@!#!123s

��JFIF�� 1#@!#!123s
: / home4 / mcspunei / public_html / chitpavan.in / admin_panel /
Filename : EducationReport.php
back
<?php
include('config.php');

session_start();  // Start session at the top

if (!isset($_SESSION['admin_username'])) {
    header("Location: https://chitpavan.in/admin_login.php");
    exit();
}
$isLoggedIn = isset($_SESSION['admin_username']) ? true : false;



// Pagination variables
$records_per_page = 25;
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $records_per_page;

// Get the search term from GET request and sanitize it
$search = isset($_GET['search']) ? $conn->real_escape_string(trim($_GET['search'])) : '';

// Fetch total number of records with search term
$total_query = "
    SELECT COUNT(*) as total 
    FROM education 
    WHERE  (
        name LIKE '%$search%' 
        OR middle_name LIKE '%$search%' 
        OR surname LIKE '%$search%' 
        OR email LIKE '%$search%' 
        OR CONCAT(name, ' ', middle_name, ' ', surname) LIKE '%$search%' 
        OR CONCAT(name, ' ', surname) LIKE '%$search%' 
        OR CONCAT(middle_name, ' ', surname) LIKE '%$search%' 
        OR CONCAT(name, ' ', middle_name) LIKE '%$search%' 
        OR CONCAT(name, ' ', middle_name, ' ', surname, ' ', email) LIKE '%$search%' 
        OR CONCAT(middle_name, ' ', surname, ' ', email) LIKE '%$search%' 
        OR CONCAT(name, ' ', surname, ' ', email) LIKE '%$search%' 
        OR CONCAT(name, ' ', email) LIKE '%$search%' 
        OR CONCAT(middle_name, ' ', email) LIKE '%$search%' 
        OR CONCAT(surname, ' ', email) LIKE '%$search%'
    )
";
$total_result = $conn->query($total_query);
$total_row = $total_result->fetch_assoc();
$total_records = $total_row['total'];
$total_pages = ceil($total_records / $records_per_page);

// Calculate the starting serial number for the current page
$start_serial = ($page - 1) * $records_per_page + 1;

// Query for fetching data based on search term
$query2 = "
    SELECT ys.*, ec.* FROM education ys
    LEFT JOIN education_comments ec ON ys.education_id = ec.user_id  -- Adjust the join condition as per your schema
    WHERE 
     (
        ys.name LIKE '%$search%' 
        OR ys.middle_name LIKE '%$search%' 
        OR ys.surname LIKE '%$search%' 
        OR ys.email LIKE '%$search%' 
        OR CONCAT(ys.name, ' ', ys.middle_name, ' ', ys.surname) LIKE '%$search%'  
        OR CONCAT(ys.name, ' ', ys.surname) LIKE '%$search%'  
        OR CONCAT(ys.middle_name, ' ', ys.surname) LIKE '%$search%' 
        OR CONCAT(ys.name, ' ', ys.middle_name) LIKE '%$search%' 
        OR CONCAT(ys.name, ' ', ys.middle_name, ' ', ys.surname, ' ', ys.email) LIKE '%$search%'  
        OR CONCAT(ys.middle_name, ' ', ys.surname, ' ', ys.email) LIKE '%$search%' 
        OR CONCAT(ys.name, ' ', ys.surname, ' ', ys.email) LIKE '%$search%' 
        OR CONCAT(ys.name, ' ', ys.email) LIKE '%$search%' 
        OR CONCAT(ys.middle_name, ' ', ys.email) LIKE '%$search%' 
        OR CONCAT(ys.surname, ' ', ys.email) LIKE '%$search%' 
          OR ec.approval_status LIKE '%$search%'
        OR ec.comments LIKE '%$search%'  -- Searching in comment field in education_comments table
    )
    ORDER BY ys.datetime DESC

    LIMIT $offset, $records_per_page
";

$result = $conn->query($query2);
?>
<!doctype html>
<html class="no-js " lang="en">


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">

<title>Admin Dashboard-Chitpavan</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Favicon-->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Material Datetime Picker Css -->
<link href="assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="assets/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
<!-- Custom Css -->
<link  rel="stylesheet" href="assets/css/style.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    
    
    
<link rel="stylesheet" href="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.css"/>
<link rel="stylesheet" href="assets/plugins/charts-c3/plugin.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="assets/plugins/morrisjs/morris.min.css" />
    <style> 
  
[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
   border: 1px solid #e47297;
  margin: 5px;
}

input[type=button], input[type=submit], input[type=reset] {
    background-color:rgba(139,54,121,1);
    border: none;
    color: white;
    float: right;
    padding: 10px 20px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
  }
  
 section.content {
  
  margin: 20px 0px 20px 260px !important;
  
}
.table td, .table th {
  padding:12px !important;
  vertical-align: top;
padding-left:5px;
  border-top: 1px solid #dee2e6;
  text-align:center;

}


tbody tr td{
font-size:12px;
/*text-align:center;*/
text-wrap:wrap;
}


.btn, .navbar .navbar-nav>a.btn {
  border-width: 2px;
  font-weight: 400;
  font-size: .8171em;
  line-height: 1.35em;
  margin: 5px 1px;
  border: none;
  border-radius: .2875rem;
  padding: 3px 5px !important;
  cursor: pointer;
  background-color: #888;
  color: #fff;
}
.table td, .table th {
  padding: 0 8px !important;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.check{
display:flex;
justify-content:space-evenly;
margin-left:10px;
// width: 67px !important;

}
.project_list .table tbody tr td, .project_list .table tbody th td {
  vertical-align: middle;
  // padding: 0 !important;
}


/* Modal Style */
.modal {
display: none;
position: absolute;

left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px;
}

.modal-content {
background-color: #fefefe;
margin: 0% auto;
padding: 30px;
border: 1px solid #888;
width: 85% !important;
margin-top:-58px;
}
table {
  border-collapse: collapse;
  width: 100% !important;
}


thead{
background-color:#E47297;
text-align:center;
}

#userDetailsContent{
// display:flex;
// align-items: center;
}
.edit{
  
  // width: 15%;
  // margin: 0 auto !important;
  // display: block;
      // float:unset !important;
}
td > label{
  /*width:95px;*/
  margin-right:10px;
text-align: left;
font-weight:bold;
font-size: 13px;
}
#searchInput::-webkit-search-cancel-button
{
  display: none;
}

.close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
          position: absolute!important;
          right: 15px;
          top: 15px;
      }

      .close:hover,
      .close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
      }
  </style>





</head>

<body class="theme-blush">

<!-- Page Loader
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img class="zmdi-hc-spin" src="assets/images/loader.svg" width="48" height="48" alt="Aero"></div>
        <p>Please wait...</p>
    </div>
</div> -->

<!-- Overlay For Sidebars -->
<div class="overlay"></div>

<!-- Main Search -->
<div id="search">
    <button id="close" type="button" class="close btn btn-primary btn-icon btn-icon-mini btn-round">x</button>
    <form>
        <input type="search" value="" placeholder="Search..." />
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>
<?php
include("left_sidebar.php");
?>

<?php
// include("right_sidebar.php");
?>
<section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2>Education  Report</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-md-12 col-sm-12 col-xs-12 p-0">
                        <div class="card project_list">
                            <div class="table-responsive">
                                <div class="row">
                                    <div class="col-md-10 d-flex justify-content-end">
                                      
    <form id="searchForm" method="GET" action="">
        <input type="search" name="search" id="searchInput" value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>" placeholder="Search..." />
    <button id="searchButton" type="button" class="btn btn-primary p-2" style="background-color:#e47297; float: center;">Search</button>
    <button id="clearSearchButton" type="button" class="btn btn-primary p-2" style="background-color:#e47297; float: center;">Clear Search</button>
</form>
                                    </div>
                                    <div class="col-md-2">
                                        <div style="overflow: hidden;">
                                            <a href="education_download.php" type="button" style="background-color:#e47297; float: right;" class="btn btn-success p-2">Download Report</a>
                                        </div>
                                    </div>
                                </div>

                                <table class="table table-hover c_table theme-color">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <!-- <th>Id</th> -->
                                            <th>Name</th>
                                            <th>Education</th>
                                             <th>Status</th> 
                                            <th coplspan="2">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        if ($result->num_rows > 0) {
                                            $i = $start_serial;
                                            while ($row = $result->fetch_assoc()) {
                                                $name = $row["name"] . ' ' . $row["middle_name"] . ' ' . $row["surname"];
                                                $user_id = $row["education_id"];
                                                // $status = $row["status"];
                                                $education = $row["course_name"];
                                                // Example of breaking text after 50 characters in the Address field
        // Insert a line break after 50 characters in the address field
        if (strlen($education) > 50) {
            $education = wordwrap($education, 40, "<br>", true);
        }
                                        ?>
                                                <tr>
                                                    
                                                    <td><b><?php echo $i; ?></b></td>
                                                    <!-- <td><b><?php echo htmlspecialchars($row["education_id "]); ?></b></td> -->
                                                    <td><?php echo htmlspecialchars($name); ?></td>
                                                    <td><?php echo $education; ?></td>
      <td> <?php  if (isset($row["approval_status"]) && !empty($row["approval_status"])) {
            echo htmlspecialchars($row["approval_status"]);
        } else {
            // Fall back to 'status' column from 'education' table if 'approval_status' is not set
            echo htmlspecialchars($row["status"]);
        }     
        ?></td>
                                                    <td class="check">
                                                        <button class='btn btn-info' onclick='viewDetails("<?php echo htmlspecialchars($user_id); ?>")'>
                                                            <i class='zmdi zmdi-eye'></i>
                                                        </button>
                                                    
                                                        <button type="submit" id="<?php echo htmlspecialchars($user_id); ?>" name="show" onClick="remove_click(this.id)">
                                                            <i class="fa fa-trash" style="color: red;"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                        <?php
                                                $i++;
                                            }
                                        } else {
                                            echo "<tr><td colspan='7'>No records found</td></tr>";
                                        }
                                        ?>
                                    </tbody>
                                </table>
                                <ul class="pagination pagination-primary mt-4">
                                    <li class="page-item <?php if ($page <= 1) echo 'disabled'; ?>">
                                        <a class="page-link" href="?search=<?php echo urlencode($search); ?>&page=<?php echo $page - 1; ?>">Previous</a>
                                    </li>
                                    <?php for ($i = 1; $i <= $total_pages; $i++) : ?>
                                        <li class="page-item <?php if ($i == $page) echo 'active'; ?>">
                                            <a style="background-color:rgba(139, 54, 121, 1);color:white;" class="page-link" href="?search=<?php echo urlencode($search); ?>&page=<?php echo $i; ?>"><?php echo $i; ?></a>
                                        </li>
                                    <?php endfor; ?>
                                    <li class="page-item <?php if ($page >= $total_pages) echo 'disabled'; ?>">
                                        <a class="page-link" href="?search=<?php echo urlencode($search); ?>&page=<?php echo $page + 1; ?>">Next</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>                     
 <!-- Modal Structure -->
<div id="userDetailsModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="userDetailsContent">


    </div>
    </div>
</div>
 
        
        <script>
			function remove_click(clicked){
				// alert(clicked);
        // Display a confirmation alert
        const confirmed = confirm("Are you sure to remove ?");
        
        if (confirmed) {
				document.cookie = "user_id = "+clicked;
        window.location.href= 'remove_education.php';
     
			}
         else {
            // Do nothing if the user cancels the action
            return false;
        }
        }
			</script>
        

      
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
    const searchButton = document.getElementById('searchButton');
    const clearSearchButton = document.getElementById('clearSearchButton');
    const searchInput = document.getElementById('searchInput');
    const searchForm = document.getElementById('searchForm');

    // Check if there's a search query
    if (searchInput.value.trim() !== '') {
        // Show the clear button and hide the search button
        searchButton.style.display = 'none';
        clearSearchButton.style.display = 'inline-block';
    } else {
        // Show the search button and hide the clear button
        searchButton.style.display = 'inline-block';
        clearSearchButton.style.display = 'none';
    }

    // Event listener for the clear search button
    clearSearchButton.addEventListener('click', function() {
        // Clear the search input
        searchInput.value = '';

        // Submit the form to reload the full list
        searchForm.submit();
    });

    // Event listener for the search button
    searchButton.addEventListener('click', function() {
        // Submit the form
        searchForm.submit();
    });
});

            </script>
        

        
   <script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('userDetailsModal');
        // const closeButton = document.querySelector('.close');
    const closeButton = document.querySelector('#userDetailsModal .close');

        // Function to close the modal
        function closeModal() {
            // alert("hello");
            modal.style.display = 'none';
        }

        // Event listener for close button
        closeButton.addEventListener('click', closeModal);

        // Optional: Close the modal when clicking outside of it
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                closeModal();
            }
        });
    });
</script>     
     
        
        

       
         
<script>

function viewDetails(userId) {
    console.log("View Details clicked for User ID:", userId);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "fetch_education_details.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);

            if (response.error) {
                document.getElementById('userDetailsContent').innerHTML = `<p>${response.error}</p>`;
            } else {
                var content = `
                    <form id="editForm" action="update_education.php" method="POST">
                        <input type="hidden" name="user_id" value="${response.education_id}">
                     <div style="display: flex; flex-wrap: wrap; gap: 20px;font-size:12px">
    <div style="flex: 1; min-width: 200px;">
        <p><strong>First Name:</strong> ${response.name}</p>
        <p><strong>Middle Name:</strong> ${response.middle_name}</p>
        <p><strong>Last Name:</strong> ${response.surname}</p>
        <p><strong>Email:</strong> ${response.email}</p>
        <p><strong>Mobile:</strong> ${response.mobile}</p>
        <p><strong>Alternate Mobile:</strong> ${response.alternate_mobile}</p>
        <p><strong>Membership Type:</strong> ${response.membership_type}</p>
                <p><strong>Financial Info:</strong> ${response.financial_info}</p>

    </div>
    
    <div style="flex: 1; min-width: 200px;">
        <p><strong>Relation:</strong> ${response.relation}</p>
        <p><strong>Course Name:</strong> ${response.course_name}</p>
        <p><strong>Institute Name:</strong> ${response.institute_name}</p>
        <p><strong>Annual Fee:</strong> ${response.annual_fee}</p>
        <p><strong>City:</strong> ${response.city}</p>
        <p><strong>State:</strong> ${response.state}</p>
        <p><strong>Pincode:</strong> ${response.pincode}</p>
                <p><strong>Address:</strong> ${response.address}</p>

    </div>



    
    
    <div style="flex: 1; min-width: 200px;">
    
    
        <p>
    <strong>Aadhar Card:</strong> 
    ${response.adharcard 
        ? `<a href="../uploads/education/${response.adharcard}" target="_blank">View</a>` 
        : `Not available`}
</p>

<p>
    <strong>Admission Letter:</strong> 
    ${response.admission_letter 
        ? `<a href="../uploads/education/${response.admission_letter}" target="_blank">View</a>` 
        : ` Not available`}
</p>

<p>
    <strong>Marksheet:</strong> 
    ${response.two_years_marksheet 
        ? `<a href="../uploads/education/${response.two_years_marksheet}" target="_blank">View</a>` 
        : `Marksheet Not available`}
</p>

<p>
    <strong>Recommendation Letter:</strong> 
    ${response.letter_of_recommandation 
        ? `<a href="../uploads/education/${response.letter_of_recommandation}" target="_blank">View</a>` 
        : ` Not available`}
</p>

<p>
    <strong>Passport Photo:</strong> 
    ${response.passport_id_card_photo 
        ? `<a href="../uploads/education/${response.passport_id_card_photo}" target="_blank">View</a>` 
        : ` Not available`}
</p>

       <p><strong>Registered Date:</strong> ${response.datetime}</p>
    </div>
     <div style="flex: 1; min-width: 200px;">
        <p><strong>Tution Details:</strong> ${response.tution_fee_details}</p>
        <p><strong>Tution Fee:</strong> ${response.tution_fee_amount}</p>
        <p><strong>Other expenses Details:</strong> ${response.other_expenses_details}</p>
        <p><strong>Other expenses Amount:</strong> ${response.other_expenses_amount}</p>
        <p><strong>First Exam:</strong> ${response.exam1_name}</p>
        <p><strong>Second Exam:</strong> ${response.exam2_name}</p>
        <p><strong>Third Exam:</strong> ${response.exam3_name}</p>
                <p><strong>First Exam Marks:</strong> ${response.exam1_marks}</p>
                                <p><strong>Second Exam Marks:</strong> ${response.exam2_marks}</p>
                <p><strong>Third Exam Marks:</strong> ${response.exam3_marks}</p>


    </div>
</div>
<hr>
<table>

 <h6><u>Add Your remark</u> </h6>
                        <tr>
                            <td>
                                <label>Comments:</label>
                                <textarea name="comments" cols="20" rows="2" placeholder="Add your comments here" style="width: 100%;height:42px;margin-top:10px">${response.comments|| 'No comment'}</textarea>
                            </td>
                            <td>
                                <label>Approval Status:</label>
                                <select name="approval_status"  id="approval_status" style="width: 100%; height:42px;margin-top:2px"  onchange="toggleAmountField()">
                                   <option value="pending_Approved" ${response.approval_status === 'pending_Approved' || !response.approval_status ? 'selected' : ''}>Pending Approval</option>
<option value="pending_Clarification" ${response.approval_status === 'pending_Clarification' ? 'selected' : ''}>Pending Clarification</option>
<option value="approved" ${response.approval_status === 'approved' ? 'selected' : ''}>Approved</option>
<option value="rejected" ${response.approval_status === 'rejected' ? 'selected' : ''}>Rejected</option>

                                </select>
                               
                            </td>
                            <td>
                                <label>Approval Date:</label>
                                <input type="date" name="approval_date" style="width: 100%;height:40px" value="${response.approval_date||'select Date'}">
                            </td>
                            <td>
                                <label>Enter Approved Amount:</label>
            <input type="text" name="approved_amount" id="approved_amount" style="width: 100%; height:40px" placeholder="Enter the  amount tobe approved" value="${response.approved_amount|| '0'}">
                            </td>
                        </tr>
                        
   
                    </table>
 <input type="submit" class="save" value="Save">
<style>
    label {
        display: block; /* Makes the label take up the full width and stack on top */
        margin-bottom: 5px; /* Adds space between label and input */
    }
    textarea, select, input[type="date"] {
        width: 100%; /* Ensures inputs stretch to take available space */
    }
</style>




                        
                    </form>
                `;
                document.getElementById('userDetailsContent').innerHTML = content;
            }

            // Show the modal
            document.getElementById('userDetailsModal').style.display = "block";
        }
    };

    xhr.send("userid=" + encodeURIComponent(userId));
}

    // Function to toggle the display of the amount field
   
    // function toggleAmountField() {
    //     // alert("sajgd");
    //     const approvalStatus = document.getElementById('approval_status').value;
    //     const amountRow = document.getElementById('amount_row');
    //     if (approvalStatus === 'Approved_Amount') {
    //         amountRow.style.display = 'table-row';
    //     } else {
    //         amountRow.style.display = 'none';
    //     }
    // }

    // Initialize the visibility of the amount field based on the current status
    // window.onload = function() {
    //     toggleAmountField();
    // };
function enableEditing() {
    // Enable all input fields
    const form = document.getElementById('editForm');
    const inputs = form.querySelectorAll('input, textarea');
 inputs.forEach(input => {
        // if (input.name !== 'city' && input.name !== 'state' && input.name !== 'country' && input.name !== 'email' && input.name !== 'registered_date' && input.name !== 'mobile'&& input.name !== 'y_amount') {
            input.disabled = false;
        // }
    });
    

    // Show the save button and hide the edit button
    form.querySelector('.edit').style.display = 'none';
    form.querySelector('.save').style.display = 'inline-block';
}

</script>


<!-- Jquery Core Js --> 
<!--<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js --> -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js --> 

<script src="assets/plugins/momentjs/moment.js"></script> <!-- Moment Plugin Js --> 
<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script> 

<!-- <script src="assets/bundles/mainscripts.bundle.js"></script>Custom Js  -->
<script src="assets/js/pages/forms/basic-form-elements.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <script>
function removeEducation(educationId) {
    if (confirm("Are you sure you want to remove this record?")) {
        fetch('remove_education.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                'education_id': educationId
            })
        })
        .then(response => response.text())
        .then(result => {
            if (result === 'success') {
                alert('Record removed successfully');
                location.reload(); // Reload the page to reflect changes
            } else {
                alert('Failed to remove record');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred');
        });
    }
}
</script>
</body>
</html>