<?php
// Enable CORS
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");

// Handle POST request to update user data
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Read the request body
    $data = file_get_contents('php://input');
    $userData = json_decode($data, true);

    // Update user data in your database or Excel file
    // Replace this with your actual logic

    // Send response
    header('Content-Type: application/json');
    echo json_encode(array('message' => 'User data updated successfully'));
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Options</title>
</head>
<body>

<h1>Options Page</h1>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="usersTableBody">
        <!-- User data will be populated here -->
    </tbody>
</table>

<script>
// Function to handle editing or saving user data
function editOrSaveUser(button) {
    var row = button.parentNode.parentNode;
    var cells = row.getElementsByTagName('td');

    // Check if the button text is "Edit" or "Save"
    if (button.innerHTML === 'Edit') {
        // Enable editing mode for all cells in the row
        for (var i = 0; i < cells.length - 1; i++) {
            var input = document.createElement('input');
            input.value = cells[i].textContent;
            cells[i].innerHTML = '';
            cells[i].appendChild(input);
        }
        button.innerHTML = 'Save'; // Change button text to "Save"
    } else {
        // Save the edited data
        var userData = {};
        for (var i = 0; i < cells.length - 1; i++) {
            var inputValue = cells[i].querySelector('input').value;
            cells[i].innerHTML = inputValue;
            userData[i] = inputValue;
        }
        button.innerHTML = 'Edit'; // Change button text back to "Edit"

        // Trigger save process to update database
        saveUserToDatabase(userData);
    }
}

// Function to save user data to the database
function saveUserToDatabase(userData) {
    // Send a POST request to the server to update the database
    fetch('options.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    })
    .then(response => {
        if (response.ok) {
            console.log('User data updated successfully.');
        } else {
            console.error('Failed to update user data.');
        }
    })
    .catch(error => {
        console.error('Error updating user data:', error);
    });
}

// Populate users table with initial data
var sampleUserData = [
    { name: "John Doe", username: "john_doe", email: "john@example.com" },
    { name: "Jane Doe", username: "jane_doe", email: "jane@example.com" }
    // Add more user profiles as needed
];

// Populate users table with sample data
var usersTableBody = document.getElementById("usersTableBody");
sampleUserData.forEach(function(user) {
    var row = usersTableBody.insertRow();
    Object.values(user).forEach(function(value) {
        var cell = row.insertCell();
        cell.textContent = value;
    });
    var editCell = row.insertCell();
    var editButton = document.createElement("button");
    editButton.textContent = "Edit";
    editButton.onclick = function() {
        editOrSaveUser(this);
    };
    editCell.appendChild(editButton);
});
</script>

</body>
</html>
