// document.getElementById('phone').addEventListener('input', function (e) {
//     var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
//     e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
//     validatePhoneNumber();
// });

// document.getElementById('phoneForm').addEventListener('submit', function (e) {
//     if (!validatePhoneNumber()) {
//         e.preventDefault();
//         document.getElementById('phone').classList.add('zoom-out');
//         setTimeout(function () {
//             document.getElementById('phone').classList.remove('zoom-out');
//         }, 100);
//     }
// });

// function validatePhoneNumber() {
//     var phoneInput = document.getElementById('phone').value;
//     var phonePattern = /^\(\d{3}\) \d{3}-\d{4}$/;
//     var isValid = phonePattern.test(phoneInput);
//     var hasTenDigits = phoneInput.replace(/\D/g, '').length === 10;
//     var isValidNumber = isValid && hasTenDigits;
//     document.getElementById('phoneError').style.display = isValidNumber ? 'none' : 'block';
//     return isValidNumber;
// }


// Format phone number as user types
document.getElementById('phone').addEventListener('input', function (e) {
    let input = e.target.value.replace(/\D/g, ''); // Remove all non-digits
    if (input.length > 10) input = input.slice(0, 10); // Limit to 10 digits
    let formatted = '';
    if (input.length > 0) {
        formatted = '(' + input.slice(0, 3);
        if (input.length > 3) formatted += ') ' + input.slice(3, 6);
        if (input.length > 6) formatted += '-' + input.slice(6, 10);
    }
    e.target.value = formatted;
    window.validatePhoneNumber(); // Call validation to update error state
});

// Globally accessible validation function
window.validatePhoneNumber = function () {
    let phoneInput = document.getElementById('phone').value;
    let phonePattern = /^\(\d{3}\) \d{3}-\d{4}$/; // Matches (123) 456-7890
    let isValid = phonePattern.test(phoneInput);
    let hasTenDigits = phoneInput.replace(/\D/g, '').length === 10;
    let isValidNumber = isValid && hasTenDigits;
    document.getElementById('phoneError').style.display = isValidNumber ? 'none' : 'block';
    return isValidNumber;
};