upskill-event-manager/assets/js/hvac-trainer-profile.js

/**
 * HVAC Trainer Profile JavaScript - Enhanced with Custom Post Type Support
 *
 * @package HVAC_Community_Events
 * @version 3.0.0
 */

jQuery(document).ready(function($) {
    // Cache DOM elements
    const $profileForm = $('#hvac-profile-form, #hvac-master-profile-form');
    const $uploadButton = $('#hvac-upload-photo');
    const $removeButton = $('#hvac-remove-photo');
    const $photoIdField = $('#profile_photo_id');
    const $currentPhoto = $('.hvac-current-photo');
    
    // Form state management
    let initialFormData = new FormData();
    let hasUnsavedChanges = false;
    let autoSaveInterval;
    let autoSaveTimeout;
    
    // Form validation
    function validateProfileForm() {
        let isValid = true;
        const errors = [];
        
        // Clear previous errors
        $('.hvac-form-error').removeClass('hvac-form-error');
        $('.hvac-error-message').remove();
        
        // Required fields
        const requiredFields = [
            { id: 'first_name', label: 'First Name' },
            { id: 'last_name', label: 'Last Name' },
            { id: 'display_name', label: 'Display Name' },
            { id: 'email', label: 'Email Address' }
        ];
        
        requiredFields.forEach(field => {
            const $field = $('#' + field.id);
            const value = $field.val();
            
            if (!value || value.trim() === '') {
                isValid = false;
                errors.push(field.label + ' is required');
                $field.addClass('hvac-form-error');
                $field.after('<span class="hvac-error-message">' + field.label + ' is required</span>');
            }
        });
        
        // Validate email
        const email = $('#email').val();
        if (email && !isValidEmail(email)) {
            isValid = false;
            errors.push('Please enter a valid email address');
            $('#email').addClass('hvac-form-error');
            $('#email').after('<span class="hvac-error-message">Please enter a valid email address</span>');
        }
        
        // Validate phone format if provided
        const phone = $('#phone').val();
        if (phone && !isValidPhone(phone)) {
            isValid = false;
            errors.push('Please enter a valid phone number');
            $('#phone').addClass('hvac-form-error');
            $('#phone').after('<span class="hvac-error-message">Please enter a valid phone number</span>');
        }
        
        // Validate URLs if provided
        const website = $('#website').val();
        if (website && !isValidURL(website)) {
            isValid = false;
            errors.push('Please enter a valid website URL');
            $('#website').addClass('hvac-form-error');
            $('#website').after('<span class="hvac-error-message">Please enter a valid website URL</span>');
        }
        
        const linkedin = $('#linkedin').val();
        if (linkedin && !isValidURL(linkedin)) {
            isValid = false;
            errors.push('Please enter a valid LinkedIn URL');
            $('#linkedin').addClass('hvac-form-error');
            $('#linkedin').after('<span class="hvac-error-message">Please enter a valid LinkedIn URL</span>');
        }
        
        // Validate years of experience
        const years = $('#years_experience').val();
        if (years && (years < 0 || years > 50)) {
            isValid = false;
            errors.push('Years of experience must be between 0 and 50');
            $('#years_experience').addClass('hvac-form-error');
            $('#years_experience').after('<span class="hvac-error-message">Must be between 0 and 50</span>');
        }
        
        return isValid;
    }
    
    // Email validation
    function isValidEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    // Phone validation
    function isValidPhone(phone) {
        const digits = phone.replace(/\D/g, '');
        return digits.length >= 10 && digits.length <= 15;
    }
    
    // URL validation
    function isValidURL(url) {
        try {
            new URL(url);
            return true;
        } catch (_) {
            return false;
        }
    }
    
    // Show message
    function showMessage(message, type = 'success') {
        const messageClass = type === 'success' ? 'hvac-message-success' : 'hvac-message-error';
        const $message = $('<div class="hvac-message ' + messageClass + '">' + message + '</div>');
        
        // Remove any existing messages
        $('.hvac-message').remove();
        
        // Target the messages container if it exists, otherwise fallback to page header
        const $messagesContainer = $('#hvac-profile-messages');
        const $target = $messagesContainer.length ? $messagesContainer : $('.hvac-page-header');
        
        if ($messagesContainer.length) {
            $messagesContainer.html($message);
        } else {
            $target.after($message);
        }
        
        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(function() {
                $message.fadeOut(function() {
                    $(this).remove();
                });
            }, 5000);
        }
        
        // Scroll to messages
        $('html, body').animate({
            scrollTop: $target.offset().top - 100
        }, 300);
    }
    
    // Form state management functions
    function captureFormState() {
        if ($profileForm.length) {
            initialFormData = new FormData($profileForm[0]);
        }
    }
    
    function checkForChanges() {
        if (!$profileForm.length) return false;
        
        const currentData = new FormData($profileForm[0]);
        let hasChanges = false;
        
        // Compare form data
        for (let [key, value] of currentData.entries()) {
            if (initialFormData.get(key) !== value) {
                hasChanges = true;
                break;
            }
        }
        
        if (hasChanges !== hasUnsavedChanges) {
            hasUnsavedChanges = hasChanges;
            toggleUnsavedIndicator(hasChanges);
            
            if (hasChanges && !autoSaveInterval) {
                startAutoSave();
            } else if (!hasChanges && autoSaveInterval) {
                stopAutoSave();
            }
        }
        
        return hasChanges;
    }
    
    function toggleUnsavedIndicator(show) {
        const $indicator = $('#hvac-unsaved-indicator');
        if ($indicator.length) {
            if (show) {
                $indicator.show();
            } else {
                $indicator.hide();
            }
        }
    }
    
    function showAutoSaveIndicator() {
        const $indicator = $('#hvac-autosave-indicator');
        if ($indicator.length) {
            $indicator.show();
            setTimeout(() => {
                $indicator.fadeOut();
            }, 2000);
        }
    }
    
    function startAutoSave() {
        autoSaveInterval = setInterval(() => {
            if (hasUnsavedChanges) {
                autoSaveForm();
            }
        }, 30000); // Auto-save every 30 seconds
    }
    
    function stopAutoSave() {
        if (autoSaveInterval) {
            clearInterval(autoSaveInterval);
            autoSaveInterval = null;
        }
    }
    
    function autoSaveForm() {
        if (!$profileForm.length) return;
        
        const formData = new FormData($profileForm[0]);
        formData.append('action', 'hvac_auto_save_profile');
        formData.append('auto_save', '1');
        
        // Use the appropriate nonce based on form context
        const nonce = $('input[name="hvac_profile_nonce"]').val() || hvacProfile?.nonce;
        if (nonce) {
            formData.append('nonce', nonce);
        }
        
        $.ajax({
            url: hvacProfile?.ajax_url || hvac_ajax?.ajax_url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showAutoSaveIndicator();
                    captureFormState(); // Update baseline
                    hasUnsavedChanges = false;
                    toggleUnsavedIndicator(false);
                }
            },
            error: function() {
                console.warn('Auto-save failed');
            }
        });
    }
    
    // Debounce function for input events
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
    
    // Real-time validation with debouncing
    function validateField(field) {
        const $field = $(field);
        const fieldName = $field.attr('name');
        const fieldValue = $field.val();
        
        // Remove existing error styling
        $field.removeClass('hvac-form-error');
        $field.siblings('.hvac-error-message').remove();
        
        // Client-side validation rules
        const validationRules = {
            'linkedin_profile_url': {
                pattern: /^https:\/\/(www\.)?linkedin\.com\/in\/[a-zA-Z0-9-]+\/?$/,
                message: 'Please enter a valid LinkedIn profile URL'
            },
            'trainer_email': {
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                message: 'Please enter a valid email address'
            },
            'email': {
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                message: 'Please enter a valid email address'
            },
            'annual_revenue_target': {
                pattern: /^\d+$/,
                message: 'Please enter a valid number'
            }
        };
        
        if (validationRules[fieldName] && fieldValue) {
            const rule = validationRules[fieldName];
            const isValid = rule.pattern.test(fieldValue);
            
            if (!isValid) {
                $field.addClass('hvac-form-error');
                $field.after('<span class="hvac-error-message">' + rule.message + '</span>');
            }
        }
    }
    
    // Enhanced form submission handler
    function handleFormSubmission(e) {
        e.preventDefault();
        
        // Validate form
        if (!validateProfileForm()) {
            return false;
        }
        
        // Show loading state
        const $submitButton = $profileForm.find('button[type="submit"]');
        const originalText = $submitButton.text();
        $submitButton.prop('disabled', true).text('Saving...');
        
        // Prepare form data
        const formData = new FormData($profileForm[0]);
        formData.append('action', 'hvac_save_trainer_profile');
        
        // Use the appropriate nonce
        const nonce = $('input[name="hvac_profile_nonce"]').val() || hvacProfile?.nonce;
        if (nonce) {
            formData.append('nonce', nonce);
        }
        
        // Submit form
        $.ajax({
            url: hvacProfile?.ajax_url || hvac_ajax?.ajax_url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    showMessage('Profile saved successfully!', 'success');
                    captureFormState(); // Update baseline
                    hasUnsavedChanges = false;
                    toggleUnsavedIndicator(false);
                    
                    // Show geocoding indicator if triggered
                    if (response.data && response.data.geocoding_triggered) {
                        showMessage('Profile saved! Address geocoding has been scheduled.', 'success');
                    }
                } else {
                    showMessage(response.data || 'An error occurred while saving.', 'error');
                }
            },
            error: function() {
                showMessage('Network error occurred. Please try again.', 'error');
            },
            complete: function() {
                $submitButton.prop('disabled', false).text(originalText);
            }
        });
    }
    
    // Initialize form state management
    if ($profileForm.length) {
        // Capture initial form state
        captureFormState();
        
        // Set up form event handlers
        $profileForm.on('submit', handleFormSubmission);
        
        // Set up change detection
        const debouncedChangeCheck = debounce(checkForChanges, 300);
        
        $profileForm.find('input, select, textarea').on('input change', debouncedChangeCheck);
        
        // Set up real-time validation
        $profileForm.find('input, select, textarea').on('blur', function() {
            validateField(this);
        });
        
        // Prevent navigation with unsaved changes
        $(window).on('beforeunload', function(e) {
            if (hasUnsavedChanges) {
                const message = 'You have unsaved changes. Are you sure you want to leave?';
                e.returnValue = message;
                return message;
            }
        });
    }
    
    // Handle photo upload
    if ($uploadButton.length) {
        let mediaUploader;
        
        $uploadButton.on('click', function(e) {
            e.preventDefault();
            
            // If the media uploader already exists, open it
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            
            // Create the media uploader
            mediaUploader = wp.media({
                title: 'Choose Profile Photo',
                button: {
                    text: 'Use this photo'
                },
                multiple: false,
                library: {
                    type: 'image'
                }
            });
            
            // When an image is selected, run a callback
            mediaUploader.on('select', function() {
                const attachment = mediaUploader.state().get('selection').first().toJSON();
                
                // Update the photo preview
                $currentPhoto.html('<img src="' + attachment.sizes.thumbnail.url + '" alt="Profile photo" />');
                
                // Update the hidden field
                $photoIdField.val(attachment.id);
                
                // Update button text
                $uploadButton.text('Change Photo');
                
                // Show remove button if not already visible
                if (!$removeButton.length) {
                    const removeBtn = '<button type="button" id="hvac-remove-photo" class="hvac-button hvac-button-danger-outline">Remove Photo</button>';
                    $uploadButton.after(removeBtn);
                }
            });
            
            // Open the media uploader
            mediaUploader.open();
        });
    }
    
    // Handle photo removal
    $(document).on('click', '#hvac-remove-photo', function(e) {
        e.preventDefault();
        
        // Clear the photo preview
        $currentPhoto.html('<div class="hvac-photo-placeholder">No photo uploaded</div>');
        
        // Clear the hidden field
        $photoIdField.val('');
        
        // Update button text
        $uploadButton.text('Upload Photo');
        
        // Remove the remove button
        $(this).remove();
    });
    
    // Real-time validation
    $('#email').on('blur', function() {
        const email = $(this).val();
        $('.hvac-error-message', $(this).parent()).remove();
        $(this).removeClass('hvac-form-error');
        
        if (email && !isValidEmail(email)) {
            $(this).addClass('hvac-form-error');
            $(this).after('<span class="hvac-error-message">Please enter a valid email address</span>');
        }
    });
    
    $('#phone').on('blur', function() {
        const phone = $(this).val();
        $('.hvac-error-message', $(this).parent()).remove();
        $(this).removeClass('hvac-form-error');
        
        if (phone && !isValidPhone(phone)) {
            $(this).addClass('hvac-form-error');
            $(this).after('<span class="hvac-error-message">Please enter a valid phone number</span>');
        }
    });
    
    $('#website, #linkedin').on('blur', function() {
        const url = $(this).val();
        $('.hvac-error-message', $(this).parent()).remove();
        $(this).removeClass('hvac-form-error');
        
        if (url && !isValidURL(url)) {
            $(this).addClass('hvac-form-error');
            $(this).after('<span class="hvac-error-message">Please enter a valid URL</span>');
        }
    });
    
    // Auto-format phone number
    $('#phone').on('input', function() {
        let value = $(this).val().replace(/\D/g, '');
        
        if (value.length > 0) {
            if (value.length <= 3) {
                value = value;
            } else if (value.length <= 6) {
                value = value.slice(0, 3) + '-' + value.slice(3);
            } else if (value.length <= 10) {
                value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6);
            } else {
                value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6, 10);
            }
        }
        
        $(this).val(value);
    });
});