function updateMyProfile() {
    var loader = $('#overlay, #loader');
    var userId = document.getElementById("UserIdSidebar").value;


    // Get the file input element for the profile picture
    var profilePictureInputSidebar = document.getElementById("profilePictureInputSidebar");

    if (profilePictureInputSidebar && profilePictureInputSidebar.files.length > 0) {
        var ProfilePicture = profilePictureInputSidebar.files[0];
        var reader = new FileReader();
        reader.onload = function (event) {
            var base64Image = event.target.result;

            // Include the base64Image in your JSON object
            var data = {
                // Other properties...
                ProfilePictureStr: base64Image
            };
            // Send the AJAX request
            sendUpdateMyRequest(data, loader, userId);
        };
        // Read the file as data URL
        reader.readAsDataURL(ProfilePicture);
    } else {
        // No file selected, send the request with an empty ProfilePictureStr
        var data = {
            ProfilePictureStr: ''
            // Other properties...
        };
        sendUpdateMyRequest(data, loader, userId);
    }
}

function sendUpdateMyRequest(data, loader, userId) {

    var ProfilePictureStr = data.ProfilePictureStr;
    var UserName = document.getElementById("UserNameSidebar").value;
    var FullName = document.getElementById("FullNameSidebar").value;
    var Company = document.getElementById("CompanySidebar").value;
    var Email = document.getElementById("EmailSidebar").value;
    var PhoneNumber = document.getElementById("PhoneNumberSidebar").value;
    var NewPassword = document.getElementById("PasswordSidebar").value;
    var Address = document.getElementById("AddressSidebar").value;

    const confirmation = confirm('Are you sure you want to proceed?');
    if (confirmation) {
        $.ajax({
            url: '/Account/UpdateUserProfile',
            type: 'POST',
            data: { ProfilePictureStr, userId, UserName, FullName, Company, Email, PhoneNumber, NewPassword, Address }, // Send form data including the profile picture
            success: function (response) {
                if (response.success) {
                    $('#updateMyProfile').modal('hide');

                    alert('Your profile is now updated!, please re-login.');
                    window.location.href = '/Home/Logout';
                } else {
                    // User update was not successful, display the error message
                    //console.log('User update failed:', response.response);
                    alert('User update failed: ' + response.response);

                }
            },
            beforeSend: function () {
                // Show the loader before making the AJAX request
                loader.show();
            },
            complete: function () {
                // Hide the loader after the AJAX request is complete (success or error)
                loader.hide();
            }
        });
    }
}

//navigate the picture
document.addEventListener("DOMContentLoaded", function () {
    var profilePictureImageSidebar = document.getElementById("profilePictureImageSidebar");
    var profilePictureInputSidebar = document.getElementById("profilePictureInputSidebar");

    // // Set a default image source for the profile picture
    // profilePictureImage.src = "/Images/404userImage.jpg";

    // Add a click event listener to the profile picture to trigger the file input
    profilePictureImageSidebar.addEventListener("click", function () {
        profilePictureInputSidebar.click();
    });

    // Add a change event listener to the file input
    profilePictureInputSidebar.addEventListener("change", function () {
        var ProfilePicture = profilePictureInputSidebar.files[0];

        if (ProfilePicture) {
            // Display the selected image
            var imageURL = URL.createObjectURL(ProfilePicture);
            profilePictureImageSidebar.src = imageURL;
        } else {
            // No file selected, revert to the default image
            console.log("No file selected, using default image");
            profilePictureImageSidebar.src = "/Content/Images/404userImage.jpg";
        }
    });
});

function showUserProfile() {
    $.ajax({
        url: '/Account/GetUserProfileById', // Replace with your API endpoint
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            // Check if the data is not null or undefined
            if (data && data.data && data.data.length > 0) {
                // Assuming the API returns an array of user profiles, take the first one
                var userProfile = data.data[0];

                // Update the view based on the data received
                $('#UserNameSidebar').val(userProfile.userName);
                $('#FullNameSidebar').val(userProfile.fullName);
                $('#PFullNameSidebar').val(userProfile.fullName);
                $('#PUserRoleSidebar').val(userProfile.role);
                $('#UserIdSidebar').val(userProfile.id);
                $('#EmailSidebar').val(userProfile.email);
                $('#PasswordSidebar').val(""); // Since it's a password, you might want to leave it empty for security reasons
                $('#AddressSidebar').val(userProfile.address);;
                $('#PhoneNumberSidebar').val(userProfile.phoneNumber);
                $('#CompanySidebar').val(userProfile.company);

                // Create the loader spinner element
                // var updateMyProfile = $('<div id="updateMyProfile" class="updateMyProfile"></div>');

                $('#updateMyProfile').modal('show');
                // Update other elements as needed

                // console.log('My response data:', userProfile.role);
            } else {
                console.log('Data is null or undefined');
                // User is not authenticated or profile not found, handle accordingly
                // window.location.href = '/Home/Logout';
            }
        },
        error: function (xhr, error, thrown) {
            console.log('Authentication error:', error);
            console.log('Details:', thrown);
            window.location.href = '/Home/Logout';
        }
    });
}

   // var cachedImageUrl = localStorage.getItem('userProfileImageUrl');
   // var imageUrl = '@imageUrl';
    // console.log('image content from storage: ' + cachedImageUrl);
    // Check if the image URL is already in local storage
    // if (!cachedImageUrl || (imageUrl && cachedImageUrl !== imageUrl)) {
    //     // If not, fetch the image and store it in local storage
    //     if (imageUrl) {
    //         var img = new Image();
    //         img.src = imageUrl;
    //         img.onload = function () {
    //             localStorage.setItem('userProfileImageUrl', imageUrl);
    //         };
    //     }
    // }