// $(document).ready(function(){
//     $('.profileLinkXX').click(function(evt){
//         evt.preventDefault();
//         $.ajax({
//             type: "GET",
//             url: base_url + '/users/getprofile',
//             processData: false,
//             contentType: false,
//             async: false,
//             success: function (data){
//                 console.log(data);
//               if (data.code === 1) {
//                 console.log(data['user_details']);

//                     $('.userId').val(data['user_details']['user_id']);
//                     $('.userName').val(data['user_details']['username']);
//                     $('.userFullName').val(data['user_details']['full_name']);
//                     $('.userEmail').val(data['user_details']['email']);
//                     $('.userPhone').val(data['user_details']['phone']);
//                     $('.userDesignation').val(data['user_details']['ua_position']);
//                     $('.userDateAdded').val(data['user_details']['created_date']);
//                     $('#profileModal').modal('show');    
//               }
//               else if (data.code > 1) {
//                 $.alert({
//                     title: 'Alert!',
//                     content: data.msg,
//                 });
//               }
//               else {
//                 $.alert({
//                     title: 'Alert!',
//                     content: 'Your request could not be handled. Try again !',
//                 });

//               }
//             }
//         });
        
//     });
//     $('#profileModalSubmitBtnXX').click(function(evt){
//         evt.preventDefault(evt);
//         $('#successArea').addClass('d-none');
//         $('#errorsArea').removeClass('d-none');
//         var formData = new FormData($('#userProfileForm')[0]);
//         $.ajax({
//             url: base_url + '/profileupdate',
//             type: 'POST',
//             data: formData,
//             processData: false,
//             contentType: false,
//             beforeSend: function() {
//                 $('#successArea').text("");
//                 $('#successArea').text("Please wait ... profile update in progress!");
//             },
//             success: function(data) {
//                 if (data['success'] == true) {
//                     $('#successArea').removeClass('d-none');
//                     $('#errorsArea').addClass('d-none');
                    
//                     $('#successArea').text("");
//                     $('#successArea').text("Profile successfully updated!");
//                     // location.reload();
//                     $.alert({
//                         title: 'Alert!',
//                         content: 'Profile successfully updated!',
//                     });
//                     setTimeout(function() {
//                     }, 2000);
//                 }
//                 else{
//                     $('#successArea').addClass('d-none');
//                     $('#errorArea').removeClass('d-none');
//                     $('#errorArea').text("");
//                     $('#errorArea').text("Profile could not be updated!");
//                     $.alert({
//                         title: 'Alert!',
//                         content: 'Profile could not updated!',
//                     });
//                 }
//             },
//             error: function(xhr, status, error) {
//                 console.error('Error:', error);
//                 $('#successArea').text(error);
//                 $('#successArea').text(error);
//                 $.alert({
//                     title: 'Alert!',
//                     content: error,
//                 });
//             }
//         });
//     });
// });

$(document).ready(function() {
    // Cache DOM elements that are manipulated frequently
    const $successArea = $('#successArea');
    const $errorArea = $('#errorArea'); // Standardized ID to avoid the 'errorsArea' vs 'errorArea' typo
    const $submitBtn = $('#profileModalSubmitBtn');

    // GET: Fetch Profile
    $('.profileLink').click(function(evt) {
        evt.preventDefault();
        
        $.ajax({
            type: "GET",
            url: base_url + '/users/getprofile',
            // Removed processData, contentType, and async: false
            success: function(data) {
                if (data.code === 1) {
                    const user = data.user_details;
                    
                    $('.userId').val(user.user_id);
                    $('.userName').val(user.username);
                    $('.userFullName').val(user.full_name);
                    $('.userEmail').val(user.email);
                    $('.userPhone').val(user.phone);
                    $('.userDesignation').val(user.ua_position);
                    $('.userDateAdded').val(user.created_date);
                    
                    $('#profileModal').modal('show');
                } else if (data.code > 1) {
                    $.alert({
                        title: 'Alert!',
                        content: data.msg,
                    });
                } else {
                    $.alert({
                        title: 'Alert!',
                        content: 'Your request could not be handled. Try again!',
                    });
                }
            },
            error: function() {
                $.alert({
                    title: 'Error!',
                    content: 'Failed to connect to the server.',
                });
            }
        });
    });

    // POST: Update Profile
    $submitBtn.click(function(evt) {
        evt.preventDefault(); // Fixed: evt.preventDefault(evt) -> evt.preventDefault()

        // Reset message areas
        $successArea.addClass('d-none').text("");
        $errorArea.addClass('d-none').text("");
        
        // UI UX: Disable button to prevent double-clicks during AJAX
        const originalBtnText = $submitBtn.text();
        $submitBtn.prop('disabled', true).text('Updating...');

        let formData = new FormData($('#userProfileForm')[0]);

        $.ajax({
            url: base_url + '/profileupdate',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            // Assuming CSRF token is handled globally in $.ajaxSetup for Laravel
            success: function(data) {
                if (data.success == true) {
                    $successArea.removeClass('d-none').text("Profile successfully updated!");
                    
                    $.alert({
                        title: 'Success!',
                        content: 'Profile successfully updated!',
                    });
                    
                    setTimeout(function() {
                        // location.reload(); 
                    }, 2000);
                } else {
                    $errorArea.removeClass('d-none').text("Profile could not be updated!");
                    
                    $.alert({
                        title: 'Alert!',
                        content: 'Profile could not be updated!',
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                
                // Fixed: The error message was previously being sent to the successArea
                $errorArea.removeClass('d-none').text("An error occurred: " + error);
                
                $.alert({
                    title: 'Alert!',
                    content: 'An error occurred: ' + error,
                });
            },
            complete: function() {
                // UI UX: Re-enable the button regardless of success or failure
                $submitBtn.prop('disabled', false).text(originalBtnText);
            }
        });
    });
});