<script>
    function changePassword() {
        const userId = document.getElementById("changeUserId").value;
        const newPassword = document.getElementById("changeNewPassword").value;

        const data = new URLSearchParams();
        data.append("action", "change_password");
        data.append("user_id", userId);
        data.append("new_password", newPassword);

        doChangePassword(data, "Password change Successful!", "Password change failed.");
    }

    function doChangePassword(requestData, successMessage, failureMessage) {
        doAction(requestData, successMessage, failureMessage);
    }

    function updateUserProfile() {
        const userId = document.getElementById("updateUserIdProfile").value;
        const firstName = document.getElementById("updateFirstName").value;
        const lastName = document.getElementById("updateLastName").value;
        const nickname = document.getElementById("updateNickname").value;
        const minecraftNick = document.getElementById("updateMinecraftNick").value;

        const data = new URLSearchParams();
        data.append("action", "update_user_profile");
        data.append("user_id", userId);
        data.append("first_name", firstName);
        data.append("last_name", lastName);
        data.append("nickname", nickname);
        data.append("minecraft_nick", minecraftNick);

        doAction(data, "Profile update Successful!", "Profile update failed.");
    }

    async function getUserInfo() {
        const userId = document.getElementById("getUserInfoId").value;

        const data = new URLSearchParams();
        data.append("action", "get_user_info");
        data.append("user_id", userId);

        const result = await doAction(data, "User info retrieved Successfully!", "User info retrieval failed.");

        if (result && result.Status === "Success") {
            displayUserInfo(result);
        }
    }

    function displayUserInfo(userData) {
        const tableContainer = document.getElementById("userInfoTable");
        tableContainer.innerHTML = ""; // Clear previous content

        const table = document.createElement("table");
        table.border = "1";

        const headerRow = table.insertRow(0);
        for (const key in userData) {
            const th = document.createElement("th");
            th.appendChild(document.createTextNode(key));
            headerRow.appendChild(th);
        }

        const dataRow = table.insertRow(1);
        for (const key in userData) {
            const td = document.createElement("td");
            td.appendChild(document.createTextNode(userData[key]));
            dataRow.appendChild(td);
        }

        tableContainer.appendChild(table);
    }
</script>

<div class="form-container" id="changePasswordForm">
    <h1>Change Password</h1>
    <form>
        <label for="changeUserId">User ID:</label>
        <input type="text" id="changeUserId" name="changeUserId" required>

        <label for="changeOldPassword">Old Password:</label>
        <input type="password" id="changeOldPassword" name="changeOldPassword" required>

        <label for="changeNewPassword">New Password:</label>
        <input type="password" id="changeNewPassword" name="changeNewPassword" required>

        <button type="button" onclick="changePassword()">Change Password</button>
    </form>
</div>

<div class="form-container" id="updateUserProfileForm">
    <h1>Update User Profile</h1>
    <form>
        <label for="updateUserIdProfile">User ID:</label>
        <input type="text" id="updateUserIdProfile" name="updateUserIdProfile" required>

        <label for="updateFirstName">First Name:</label>
        <input type="text" id="updateFirstName" name="updateFirstName" required>

        <label for="updateLastName">Last Name:</label>
        <input type="text" id="updateLastName" name="updateLastName" required>

        <label for="updateNickname">Nickname:</label>
        <input type="text" id="updateNickname" name="updateNickname" required>

        <label for="updateMinecraftNick">Minecraft Nick:</label>
        <input type="text" id="updateMinecraftNick" name="updateMinecraftNick" required>

        <button type="button" onclick="updateUserProfile()">Update Profile</button>
    </form>
</div>

<div class="form-container" id="getUserInfoForm">
    <h1>Get User Info</h1>
    <form>
        <label for="getUserInfoId">User ID:</label>
        <input type="text" id="getUserInfoId" name="getUserInfoId" required>

        <button type="button" onclick="getUserInfo()">Get User Info</button>
    </form>
</div>

<button type="button" onclick="logout()">Logout</button>

<!-- Include other user action forms similarly -->

<!-- Centralized Status Message -->
<p id="StatusMessage"></p>