upskill-event-manager/assets/js/hvac-event-edit-comprehensive.js

/**
 * HVAC Event Edit Comprehensive Field Population
 * 
 * Complete solution for TEC Community Events plugin bug where ALL event fields
 * remain empty when editing existing events. This script populates all form fields
 * using comprehensive event data from WordPress/TEC APIs.
 * 
 * Fields populated:
 * - Title, Description, Excerpt
 * - Venue (dropdown selection + all venue fields)
 * - Organizer (dropdown selection + all organizer fields)
 * - Categories, Tags
 * - Meta fields (cost, URL, virtual event settings)
 * - Featured image
 * - Date/time fields (for verification)
 * 
 * @version 1.0.0
 */
(function($) {
    'use strict';

    // Only run on event management pages with event data
    if (typeof hvac_event_comprehensive === 'undefined' || !hvac_event_comprehensive.event_data) {
        return;
    }

    // Configuration
    const CONFIG = {
        RETRY_ATTEMPTS: 5,
        RETRY_DELAY: 1000,
        FIELD_POPULATE_DELAY: 500,
        DEBUG: hvac_event_comprehensive.debug || false
    };

    // State tracking
    let populationAttempted = false;
    let fieldsPopulated = 0;
    let totalFields = 0;

    /**
     * Debug logging
     */
    function debugLog(message, data = null) {
        if (CONFIG.DEBUG) {
            console.log('[HVAC Event Comprehensive]', message, data || '');
        }
    }

    /**
     * Main population function
     */
    function populateAllEventFields() {
        if (populationAttempted) {
            return;
        }

        populationAttempted = true;
        debugLog('Starting comprehensive event field population', hvac_event_comprehensive.event_data);

        // Show loading indicator
        showLoadingIndicator();

        // Reset counters
        fieldsPopulated = 0;
        totalFields = 0;

        // Wait for TEC form to be fully rendered, then populate with retries
        setTimeout(() => {
            populateWithRetries(0);
        }, CONFIG.FIELD_POPULATE_DELAY);
    }

    /**
     * Populate fields with retry logic
     */
    function populateWithRetries(attempt) {
        if (attempt >= CONFIG.RETRY_ATTEMPTS) {
            debugLog('Max retry attempts reached');
            showCompletionNotification();
            return;
        }

        debugLog(`Population attempt ${attempt + 1}/${CONFIG.RETRY_ATTEMPTS}`);

        // Populate all field categories
        populateCoreFields();
        populateVenueFields();
        populateOrganizerFields();
        populateTaxonomyFields();
        populateMetaFields();
        populateFeaturedImage();

        // Check if we need to retry
        if (fieldsPopulated === 0 && attempt < CONFIG.RETRY_ATTEMPTS - 1) {
            debugLog(`No fields populated, retrying in ${CONFIG.RETRY_DELAY}ms`);
            setTimeout(() => {
                populateWithRetries(attempt + 1);
            }, CONFIG.RETRY_DELAY);
        } else {
            showCompletionNotification();
        }
    }

    /**
     * Populate core event fields (title, description, excerpt)
     */
    function populateCoreFields() {
        const coreData = hvac_event_comprehensive.event_data.core;
        if (!coreData) return;

        debugLog('Populating core fields', coreData);

        // Title field
        if (coreData.title) {
            const titleSelectors = [
                '#post_title',
                'input[name="post_title"]',
                '.tribe-community-events-form-title input',
                '#tribe-event-title'
            ];
            populateField(titleSelectors, coreData.title, 'Title');
        }

        // Description field (handle both textarea and TinyMCE)
        if (coreData.content) {
            const descriptionSelectors = [
                '#tcepostcontent',
                'textarea[name="tcepostcontent"]',
                '#post_content',
                'textarea[name="post_content"]',
                '.tribe-community-events-form-content textarea',
                '.wp-editor-area'
            ];
            populateField(descriptionSelectors, coreData.content, 'Description', true);
        }

        // Excerpt field
        if (coreData.excerpt) {
            const excerptSelectors = [
                '#excerpt',
                'textarea[name="excerpt"]',
                '#post_excerpt'
            ];
            populateField(excerptSelectors, coreData.excerpt, 'Excerpt');
        }
    }

    /**
     * Populate venue fields
     */
    function populateVenueFields() {
        const venueData = hvac_event_comprehensive.event_data.venue;
        if (!venueData) return;

        debugLog('Populating venue fields', venueData);

        // Venue dropdown selection (exact TEC selector)
        if (venueData.id) {
            const venueDropdownSelectors = [
                'select[name="venue[VenueID][]"]',
                '#saved_tribe_venue',
                'select[name="venue[VenueID]"]',
                '#venue_id',
                '.tribe-venue-dropdown select'
            ];
            populateField(venueDropdownSelectors, venueData.id, 'Venue Dropdown');
        }

        // Venue creation fields (exact TEC selectors)
        if (venueData.title) {
            const venueNameSelectors = [
                'input[name="venue[Venue][]"]',
                'input[name="venue[Venue]"]',
                '#venue_name',
                '.tribe-venue-name input'
            ];
            populateField(venueNameSelectors, venueData.title, 'Venue Name');
        }

        if (venueData.content) {
            const venueDescSelectors = [
                'textarea[name="venue[Description]"]',
                '#venue_description'
            ];
            populateField(venueDescSelectors, venueData.content, 'Venue Description');
        }

        if (venueData.address) {
            populateField(['input[name="venue[Address][]"]', 'input[name="venue[Address]"]'], venueData.address, 'Venue Address');
        }

        if (venueData.city) {
            populateField(['input[name="venue[City][]"]', 'input[name="venue[City]"]'], venueData.city, 'Venue City');
        }

        if (venueData.state) {
            populateField(['select[name="venue[State][]"]', '#StateProvinceSelect', 'input[name="venue[State]"]'], venueData.state, 'Venue State');
        }

        if (venueData.province) {
            populateField(['input[name="venue[Province][]"]', '#StateProvinceText', 'input[name="venue[Province]"]'], venueData.province, 'Venue Province');
        }

        if (venueData.zip) {
            populateField(['input[name="venue[Zip][]"]', '#EventZip', 'input[name="venue[Zip]"]'], venueData.zip, 'Venue Zip');
        }

        if (venueData.country) {
            populateField(['select[name="venue[Country][]"]', '#EventCountry', 'input[name="venue[Country]"]'], venueData.country, 'Venue Country');
        }

        if (venueData.phone) {
            populateField(['input[name="venue[Phone][]"]', '#EventPhone', 'input[name="venue[Phone]"]'], venueData.phone, 'Venue Phone');
        }

        if (venueData.url) {
            populateField(['input[name="venue[URL][]"]', '#EventWebsite', 'input[name="venue[URL]"]'], venueData.url, 'Venue URL');
        }
    }

    /**
     * Populate organizer fields
     */
    function populateOrganizerFields() {
        const organizerData = hvac_event_comprehensive.event_data.organizer;
        if (!organizerData) return;

        debugLog('Populating organizer fields', organizerData);

        // Organizer dropdown selection (exact TEC selector)
        if (organizerData.id) {
            const organizerDropdownSelectors = [
                'select[name="organizer[OrganizerID][]"]',
                '#saved_tribe_organizer',
                'select[name="organizer[OrganizerID]"]',
                '#organizer_id',
                '.tribe-organizer-dropdown select'
            ];
            populateField(organizerDropdownSelectors, organizerData.id, 'Organizer Dropdown');
        }

        // Organizer creation fields (exact TEC selectors)
        if (organizerData.title) {
            const organizerNameSelectors = [
                'input[name="organizer[Organizer][]"]',
                'input[name="organizer[Organizer]"]',
                '#organizer_name',
                '.tribe-organizer-name input'
            ];
            populateField(organizerNameSelectors, organizerData.title, 'Organizer Name');
        }

        if (organizerData.content) {
            const organizerDescSelectors = [
                'textarea[name="organizer[Description]"]',
                '#organizer_description'
            ];
            populateField(organizerDescSelectors, organizerData.content, 'Organizer Description');
        }

        if (organizerData.phone) {
            populateField(['input[name="organizer[Phone][]"]', '#organizer-phone', 'input[name="organizer[Phone]"]'], organizerData.phone, 'Organizer Phone');
        }

        if (organizerData.website) {
            populateField(['input[name="organizer[Website][]"]', '#organizer-website', 'input[name="organizer[Website]"]'], organizerData.website, 'Organizer Website');
        }

        if (organizerData.email) {
            populateField(['input[name="organizer[Email][]"]', '#organizer-email', 'input[name="organizer[Email]"]'], organizerData.email, 'Organizer Email');
        }
    }

    /**
     * Populate taxonomy fields (categories, tags)
     */
    function populateTaxonomyFields() {
        const taxonomyData = hvac_event_comprehensive.event_data.taxonomies;
        if (!taxonomyData) return;

        debugLog('Populating taxonomy fields', taxonomyData);

        // Categories (select dropdown) - exact TEC selectors with proper escaping
        if (taxonomyData.categories && taxonomyData.categories.length > 0) {
            const categorySelectors = [
                'select[name="tax_input\\[tribe_events_cat\\]\\[\\]"]',
                'select[name="tax_input\\[tribe_events_cat\\]"]',
                '.tribe-events-cat-dropdown select'
            ];
            
            const $categorySelect = findField(categorySelectors);
            if ($categorySelect.length > 0) {
                // Select multiple categories if supported
                taxonomyData.categories.forEach(category => {
                    $categorySelect.find(`option[value="${category.id}"]`).prop('selected', true);
                });
                $categorySelect.trigger('change');
                $categorySelect.addClass('hvac-populated-field');
                fieldsPopulated++;
                debugLog(`Populated categories: ${taxonomyData.categories.map(c => c.name).join(', ')}`);
            } else {
                // Fallback to checkboxes with proper selector escaping
                taxonomyData.categories.forEach(category => {
                    const categoryCheckboxSelectors = [
                        `input[name="tax_input\\[tribe_events_cat\\]\\[\\]"][value="${category.id}"]`,
                        `input[name="tax_input\\[tribe_events_cat\\]\\[${category.id}\\]"]`,
                        `#in-tribe_events_cat-${category.id}`,
                        `input[type="checkbox"][name*="tribe_events_cat"][value="${category.id}"]`
                    ];
                    
                    const $categoryField = findField(categoryCheckboxSelectors);
                    if ($categoryField.length > 0) {
                        $categoryField.prop('checked', true);
                        $categoryField.addClass('hvac-populated-field');
                        fieldsPopulated++;
                        debugLog(`Populated category: ${category.name}`);
                    }
                });
            }
        }

        // Tags (select dropdown) - exact TEC selectors with proper escaping
        if (taxonomyData.tags && taxonomyData.tags.length > 0) {
            const tagSelectors = [
                'select[name="tax_input\\[post_tag\\]\\[\\]"]',
                'select[name="tax_input\\[post_tag\\]"]',
                '.tribe-tags-dropdown select'
            ];
            
            const $tagSelect = findField(tagSelectors);
            if ($tagSelect.length > 0) {
                // Select multiple tags if supported
                taxonomyData.tags.forEach(tag => {
                    $tagSelect.find(`option[value="${tag.id}"]`).prop('selected', true);
                });
                $tagSelect.trigger('change');
                $tagSelect.addClass('hvac-populated-field');
                fieldsPopulated++;
                debugLog(`Populated tags: ${taxonomyData.tags.map(t => t.name).join(', ')}`);
            } else {
                // Try text input fallback with proper escaping
                const tagNames = taxonomyData.tags.map(tag => tag.name).join(', ');
                const tagTextSelectors = [
                    'input[name="newtag\\[post_tag\\]"]',
                    'input[name="newtag\\[post_tag\\]\\[\\]"]',
                    '#new-tag-post_tag',
                    '.tribe-tags-input input'
                ];
                
                if (populateField(tagTextSelectors, tagNames, 'Tags (text)', false)) {
                    // Text input worked
                } else {
                    // Try individual checkboxes as last resort with proper escaping
                    taxonomyData.tags.forEach(tag => {
                        const tagCheckboxSelectors = [
                            `input[name="tax_input\\[post_tag\\]\\[\\]"][value="${tag.id}"]`,
                            `input[name="tax_input\\[post_tag\\]\\[${tag.id}\\]"]`,
                            `#in-post_tag-${tag.id}`,
                            `input[type="checkbox"][name*="post_tag"][value="${tag.id}"]`
                        ];
                        
                        const $tagField = findField(tagCheckboxSelectors);
                        if ($tagField.length > 0) {
                            $tagField.prop('checked', true);
                            $tagField.addClass('hvac-populated-field');
                            fieldsPopulated++;
                            debugLog(`Populated tag: ${tag.name}`);
                        }
                    });
                }
            }
        }
    }

    /**
     * Populate meta fields
     */
    function populateMetaFields() {
        const metaData = hvac_event_comprehensive.event_data.meta;
        if (!metaData) return;

        debugLog('Populating meta fields', metaData);

        // Cost field (TEC uses ticket pricing, not event cost)
        if (metaData._EventCost) {
            const costSelectors = [
                'input[name="ticket_price"]',
                '#ticket_price',
                'input[name="EventCost"]',
                '#event_cost',
                '.tribe-event-cost input'
            ];
            populateField(costSelectors, metaData._EventCost, 'Event Cost');
        }

        // External URL field
        if (metaData._EventURL) {
            const urlSelectors = [
                'input[name="EventURL"]',
                '#event_url',
                '.tribe-event-url input'
            ];
            populateField(urlSelectors, metaData._EventURL, 'Event URL');
        }

        // Virtual event checkbox
        if (metaData._VirtualEvent === '1' || metaData._VirtualEvent === 'yes') {
            const virtualSelectors = [
                'input[name="is_virtual"]',
                '#virtual_event',
                '.tribe-virtual-event input[type="checkbox"]'
            ];
            
            const $virtualField = findField(virtualSelectors);
            if ($virtualField.length > 0) {
                $virtualField.prop('checked', true);
                $virtualField.addClass('hvac-populated-field');
                fieldsPopulated++;
                debugLog('Populated virtual event checkbox');
            }
        }

        // All day event checkbox
        if (metaData._EventAllDay === '1' || metaData._EventAllDay === 'yes') {
            const allDaySelectors = [
                'input[name="EventAllDay"]',
                '#event_all_day',
                '.tribe-allday input[type="checkbox"]'
            ];
            
            const $allDayField = findField(allDaySelectors);
            if ($allDayField.length > 0) {
                $allDayField.prop('checked', true);
                $allDayField.addClass('hvac-populated-field');
                fieldsPopulated++;
                debugLog('Populated all day event checkbox');
            }
        }
    }

    /**
     * Populate featured image (if applicable)
     */
    function populateFeaturedImage() {
        const imageData = hvac_event_comprehensive.event_data.featured_image;
        if (!imageData) return;

        debugLog('Setting featured image data', imageData);

        // Add hidden field with image ID for form processing
        const $hiddenField = $('<input type="hidden" name="featured_image_id">');
        $hiddenField.val(imageData.id);
        $('.tribe-community-events form, #post').append($hiddenField);

        // Show image preview if there's a preview container
        const $previewContainer = $('.featured-image-preview, .tribe-image-preview');
        if ($previewContainer.length > 0 && imageData.url) {
            const $preview = $(`<img src="${imageData.url}" alt="${imageData.alt}" style="max-width: 200px; height: auto; margin: 10px 0;">`);
            $previewContainer.html($preview);
            fieldsPopulated++;
            debugLog('Added featured image preview');
        }
    }

    /**
     * Generic field population function
     */
    function populateField(selectors, value, fieldName, isRichText = false) {
        const $field = findField(selectors);
        
        if ($field.length === 0) {
            debugLog(`Field not found: ${fieldName}`, selectors);
            return false;
        }

        // Skip if field already has content
        if ($field.val() && $field.val().trim()) {
            debugLog(`Field already has content, skipping: ${fieldName}`);
            return false;
        }

        try {
            if (isRichText && typeof tinymce !== 'undefined') {
                // Handle TinyMCE editor
                const editorId = $field.attr('id');
                const editor = tinymce.get(editorId);
                if (editor) {
                    editor.setContent(value);
                    $field.addClass('hvac-populated-field');
                    fieldsPopulated++;
                    debugLog(`Populated TinyMCE field: ${fieldName}`);
                    return true;
                }
            }
            
            // Handle regular form fields
            $field.val(value);
            $field.trigger('change');
            $field.trigger('input');
            $field.addClass('hvac-populated-field');
            fieldsPopulated++;
            debugLog(`Populated field: ${fieldName} = ${value}`);
            return true;
            
        } catch (error) {
            debugLog(`Error populating field ${fieldName}:`, error);
            return false;
        }
    }

    /**
     * Find field using multiple selectors
     */
    function findField(selectors) {
        for (let selector of selectors) {
            const $field = $(selector);
            if ($field.length > 0) {
                return $field;
            }
        }
        return $();
    }

    /**
     * Show loading indicator
     */
    function showLoadingIndicator() {
        const $indicator = $('<div class="hvac-loading-indicator">')
            .html('<span class="hvac-spinner"></span> Populating event fields...')
            .css({
                'position': 'fixed',
                'top': '20px',
                'right': '20px',
                'background': '#0073aa',
                'color': 'white',
                'padding': '10px 15px',
                'border-radius': '4px',
                'font-size': '14px',
                'z-index': '9999',
                'box-shadow': '0 2px 5px rgba(0,0,0,0.2)'
            });

        $('body').append($indicator);

        // Remove after 10 seconds max
        setTimeout(() => {
            $indicator.remove();
        }, 10000);
    }

    /**
     * Show completion notification
     */
    function showCompletionNotification() {
        // Remove loading indicator
        $('.hvac-loading-indicator').remove();

        if (fieldsPopulated === 0) {
            debugLog('No fields were populated');
            return;
        }

        const message = fieldsPopulated === 1 ? 
            `${fieldsPopulated} event field populated successfully` : 
            `${fieldsPopulated} event fields populated successfully`;

        // Create and show notification
        const $notification = $('<div class="hvac-completion-notification">')
            .html(`<span class="hvac-success-icon">✓</span> ${message}`)
            .css({
                'position': 'fixed',
                'top': '20px',
                'right': '20px',
                'background': '#4CAF50',
                'color': 'white',
                'padding': '10px 15px',
                'border-radius': '4px',
                'font-size': '14px',
                'z-index': '9999',
                'box-shadow': '0 2px 5px rgba(0,0,0,0.2)',
                'opacity': '0',
                'transition': 'opacity 0.3s ease'
            });

        $('body').append($notification);
        
        // Fade in
        setTimeout(() => $notification.css('opacity', '1'), 100);
        
        // Fade out and remove after 5 seconds
        setTimeout(() => {
            $notification.css('opacity', '0');
            setTimeout(() => $notification.remove(), 300);
        }, 5000);

        debugLog(`Population completed: ${fieldsPopulated} fields populated`);
    }

    /**
     * Initialize when document is ready
     */
    $(document).ready(function() {
        debugLog('Document ready, initializing comprehensive field population');
        
        // Wait a bit for TEC form to initialize
        setTimeout(populateAllEventFields, 1000);
    });

    /**
     * Also initialize on window load as backup
     */
    $(window).on('load', function() {
        if (!populationAttempted) {
            debugLog('Window loaded, starting backup population attempt');
            setTimeout(populateAllEventFields, 500);
        }
    });

    /**
     * Handle dynamic content loading
     */
    $(document).on('tribe_community_events_form_loaded', function() {
        if (!populationAttempted) {
            debugLog('TEC form loaded event detected');
            setTimeout(populateAllEventFields, 500);
        }
    });

})(jQuery);