va-tracker-middleware/public/js/pages/profile.js

// API base URL
const API_BASE = '/api/v1/client';


// Format empty fields
function formatEmptyFields() {
    const inputs = document.querySelectorAll('.form-input');
    inputs.forEach(input => {
        if (!input.value.trim()) {
            input.value = 'Not provided';
            input.classList.add('empty-field');
        } else {
            input.classList.remove('empty-field');
        }
    });
}

// Load profile data
async function loadProfileData() {
    try {
        const response = await fetchWithAuth(`${API_BASE}/profile`);
        if (!response) return;

        const result = await response.json();
        if (result.success) {
            const data = result.data;

            // Populate only personal and address information
            const fieldsToShow = ['name', 'email', 'position', 'address', 'city', 'state', 'zip'];

            fieldsToShow.forEach(key => {
                const element = document.getElementById(key);
                if (element && data[key]) {
                    element.value = data[key];
                }
            });

            formatEmptyFields();

        } else {
            console.error('Failed to load profile data:', result.message);
            alert('Failed to load profile data');
        }
    } catch (error) {
        console.error('Error loading profile data:', error);
        alert('Error loading profile data');
    }
}

// Password Modal Functions
function openPasswordModal() {
    const modal = document.getElementById('passwordModal');
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';

    // Clear form
    document.getElementById('passwordForm').reset();
    clearErrorMessages();
}

function closePasswordModal() {
    const modal = document.getElementById('passwordModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';

    // Clear form and errors
    document.getElementById('passwordForm').reset();
    clearErrorMessages();
}

function clearErrorMessages() {
    document.getElementById('currentPasswordError').textContent = '';
    document.getElementById('newPasswordError').textContent = '';
    document.getElementById('confirmPasswordError').textContent = '';
}

// Change password
async function changePassword(event) {
    event.preventDefault();

    const currentPassword = document.getElementById('currentPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;

    // Reset errors
    clearErrorMessages();

    let hasError = false;

    if (!currentPassword) {
        document.getElementById('currentPasswordError').textContent = 'Current password is required';
        hasError = true;
    }

    if (!newPassword) {
        document.getElementById('newPasswordError').textContent = 'New password is required';
        hasError = true;
    } else if (newPassword.length < 6) {
        document.getElementById('newPasswordError').textContent = 'Password must be at least 6 characters';
        hasError = true;
    }

    if (!confirmPassword) {
        document.getElementById('confirmPasswordError').textContent = 'Please confirm your password';
        hasError = true;
    } else if (newPassword !== confirmPassword) {
        document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
        hasError = true;
    }

    if (hasError) return;

    try {
        const saveBtn = document.getElementById('savePasswordBtn');
        saveBtn.disabled = true;
        saveBtn.textContent = 'Changing Password...';

        const response = await fetchWithAuth(`${API_BASE}/profile`, {
            method: 'PATCH',
            body: JSON.stringify({
                userDetails: {
                    currentPassword,
                    newPassword,
                    confirmPassword
                }
            })
        });

        if (!response) {
            saveBtn.disabled = false;
            saveBtn.textContent = 'Change Password';
            return;
        }

        const result = await response.json();
        if (result.success) {
            alert('Password changed successfully!');
            closePasswordModal();
        } else {
            alert(result.message || 'Failed to change password');
        }
    } catch (error) {
        console.error('Error changing password:', error);
        alert('Error changing password');
    } finally {
        const saveBtn = document.getElementById('savePasswordBtn');
        saveBtn.disabled = false;
        saveBtn.textContent = 'Change Password';
    }
}

// Event listeners
document.addEventListener('DOMContentLoaded', function () {
    loadProfileData();

    // Change password button
    document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);

    // Password form submission
    document.getElementById('passwordForm').addEventListener('submit', changePassword);

    // Close modal when clicking outside
    document.getElementById('passwordModal').addEventListener('click', function (e) {
        if (e.target === this) {
            closePasswordModal();
        }
    });

    // Close modal with escape key
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closePasswordModal();
            closeLogoutModal();
        }
    });

    document.getElementById('logoutModal').addEventListener('click', function (e) {
        if (e.target === this) {
            closeLogoutModal();
        }
    });

    // Logout button - opens confirmation modal instead of directly logging out
    document.getElementById('logoutButton').addEventListener('click', openLogoutModal);

    // Confirm logout button
    document.getElementById('confirmLogoutBtn').addEventListener('click', handleLogout);

    // Mobile menu toggle
    const menuToggle = document.querySelector('.mobile-menu-button');
    const sidebar = document.querySelector('.dashboard-sidebar');
    menuToggle.addEventListener('click', () => {
        sidebar.classList.toggle('active');
    });
});