testing 3/24 1

function updateContactinfo(data) {
const fields = {
phone: '#phone',
phone_other: '#phone_other',
email: '#email'
};

const buttons = {
email: '#emailVerify',
phone: '#phoneVerify',
phone_other: '#phoneOtherVerify'
};

// Store original data for later use
window.userData = data;

// Update inputs and setup change listeners
Object.entries(fields).forEach(([key, selector]) => {
const el = document.querySelector(selector);
if (!el) return;

const val = data.user?.[key] || '';

// Remove any existing input listeners to prevent duplicates
el.removeEventListener('input', handleContactInput);

if (val) {
el.value = val;
el.setAttribute('disabled', true);
// Store the original verified value
el.dataset.originalValue = val;
el.dataset.isVerified = data.verification?.[key] ? 'true' : 'false';
} else {
el.value = '';
el.setAttribute('disabled', true);
el.dataset.originalValue = '';
el.dataset.isVerified = 'false';
// Add input listener for this field
el.addEventListener('input', handleContactInput);
}
});

// Update verification buttons
Object.entries(buttons).forEach(([key, selector]) => {
const el = document.querySelector(selector);
if (!el) return;

const val = data.user?.[key];
const state = data.verification?.[key];

// Remove all state classes and any existing click listeners
el.classList.remove('verified', 'failed', 'pending');
el.replaceWith(el.cloneNode(true)); // Remove all event listeners
const freshEl = document.querySelector(selector);

if (!freshEl) return;

if (val) {
if (state) {
// Verified
freshEl.classList.add('verified');
freshEl.textContent = 'Verified';
freshEl.onclick = null;
} else {
// Not verified but has value
freshEl.classList.add('failed');
freshEl.textContent = 'Verify';
freshEl.onclick = () => {
const input = document.querySelector(fields[key]);
if (input && input.value) {
verifyContact(input.value, key);
}
};
}
} else {
// No value entered - ADD state
freshEl.textContent = 'ADD';
freshEl.classList.remove('verified', 'failed');
freshEl.onclick = () => {
// Focus the input field and enable it
const input = document.querySelector(fields[key]);
if (input) {
input.removeAttribute('disabled');
input.focus();
// Change button text to Verify when user starts typing
input.addEventListener('input', function onFirstInput() {
if (input.value.trim()) {
freshEl.textContent = 'Verify';
freshEl.classList.add('pending');
// Remove this one-time listener
input.removeEventListener('input', onFirstInput);
}
}, { once: true });
}
};
}
});
}