upskill-event-manager/assets/js/hvac-event-form-templates.js

/**
 * HVAC Event Form Templates JavaScript
 *
 * Handles client-side template functionality for event forms
 * Integrates with HVAC_Event_Form_Builder and HVAC_Event_Template_Manager
 *
 * ⛔ DEPRECATED - January 2025
 * This file has been deprecated and its functionality integrated into the AI assistant system
 *
 * Reasons for deprecation:
 * - Template functionality consolidated into hvac-ai-assist.js
 * - AI-powered template system provides better user experience
 * - Duplicate functionality with new comprehensive form builder
 * - Template management moved to backend with better caching
 *
 * Replacement: assets/js/hvac-ai-assist.js
 * - Integrated template system with AI assistance
 * - Smart template recommendations based on input
 * - Enhanced template preview and application
 * - Automatic template categorization and filtering
 *
 * See: DEPRECATED-FILES.md for full migration details
 *
 * @package HVAC_Community_Events
 * @since 3.1.0 (Phase 2A)
 * @deprecated 3.2.0 Use hvac-ai-assist.js instead
 */

(function($) {
    'use strict';

    // Global template management object
    window.HVACEventTemplates = {
        currentTemplate: null,
        formFields: {},

        /**
         * Initialize template functionality
         */
        init: function() {
            this.bindEvents();
            this.initializeFormState();
        },

        /**
         * Bind event handlers
         */
        bindEvents: function() {
            // Template selector change
            $(document).on('change', '.hvac-template-selector', this.handleTemplateChange.bind(this));

            // Save as template button
            $(document).on('click', '.hvac-save-template', this.showSaveTemplateModal.bind(this));

            // Clear template button
            $(document).on('click', '.hvac-clear-template', this.clearTemplate.bind(this));

            // Save template form submission
            $(document).on('submit', '#hvac-save-template-form', this.handleSaveTemplate.bind(this));

            // Modal close buttons
            $(document).on('click', '.hvac-close-modal', this.closeModal.bind(this));

            // Venue/Organizer creation toggle
            $(document).on('change', 'select[name="event_venue"]', this.toggleVenueCreation.bind(this));
            $(document).on('change', 'select[name="event_organizer"]', this.toggleOrganizerCreation.bind(this));

            // Form field change tracking
            $(document).on('change input', 'form[data-template-enabled="1"] input, form[data-template-enabled="1"] textarea, form[data-template-enabled="1"] select',
                this.trackFormChanges.bind(this));
        },

        /**
         * Initialize form state
         */
        initializeFormState: function() {
            // Check if a template is already loaded
            const templateInfo = $('.template-info');
            if (templateInfo.length) {
                const templateId = $('input[name="current_template_id"]').val();
                if (templateId) {
                    this.currentTemplate = templateId;
                }
            }

            // Initialize field tracking
            this.captureInitialFormState();
        },

        /**
         * Handle template selection change
         */
        handleTemplateChange: function(event) {
            const templateId = $(event.target).val();
            const loadingIndicator = $('.hvac-template-loading');

            if (templateId === '0') {
                this.clearTemplate();
                return;
            }

            // Show loading indicator
            loadingIndicator.removeClass('hidden');

            // Load template data via AJAX
            this.loadTemplate(templateId).finally(function() {
                loadingIndicator.addClass('hidden');
            });
        },

        /**
         * Load template data and populate form
         */
        loadTemplate: function(templateId) {
            const self = this;
            const maxRetries = 3;
            let retryCount = 0;

            const attemptLoad = function() {
                return $.ajax({
                    url: hvacEventTemplates.ajaxurl,
                    method: 'GET',
                    timeout: 10000, // 10 second timeout
                    data: {
                        action: 'hvac_load_template_data',
                        template_id: templateId,
                        nonce: hvacEventTemplates.nonce
                    },
                    success: function(response) {
                        if (response.success) {
                            self.populateFormFromTemplate(response.data.template_data);
                            self.updateTemplateInfo(response.data.template_info);
                            self.currentTemplate = templateId;
                            self.showMessage(response.data.message, 'success');
                        } else {
                            throw new Error(response.data.message || hvacEventTemplates.strings.error);
                        }
                    },
                    error: function(xhr, status, error) {
                        if (retryCount < maxRetries && (status === 'timeout' || xhr.status === 0 || xhr.status >= 500)) {
                            retryCount++;
                            self.showMessage(`Retrying... (${retryCount}/${maxRetries})`, 'info');
                            setTimeout(() => attemptLoad(), 1000 * retryCount); // Exponential backoff
                        } else {
                            const errorMessage = status === 'timeout'
                                ? 'Request timed out. Please try again.'
                                : hvacEventTemplates.strings.error;
                            self.showMessage(errorMessage, 'error');
                        }
                    }
                });
            };

            return attemptLoad();
        },

        /**
         * Populate form fields from template data
         */
        populateFormFromTemplate: function(templateData) {
            const form = $('form[data-template-enabled="1"]');

            // Clear existing values
            form.find('input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="datetime-local"], textarea').val('');
            form.find('select').prop('selectedIndex', 0);
            form.find('input[type="checkbox"], input[type="radio"]').prop('checked', false);

            // Populate fields from template
            $.each(templateData, function(fieldName, value) {
                const field = form.find('[name="' + fieldName + '"]');

                if (field.length) {
                    if (field.is('input[type="checkbox"]')) {
                        field.prop('checked', !!value);
                    } else if (field.is('input[type="radio"]')) {
                        field.filter('[value="' + value + '"]').prop('checked', true);
                    } else {
                        field.val(value);
                    }

                    // Trigger change event for dynamic fields
                    field.trigger('change');
                }
            });

            // Update form state tracking
            this.captureInitialFormState();
        },

        /**
         * Update template information display
         */
        updateTemplateInfo: function(templateInfo) {
            let infoDiv = $('.template-info');

            if (!infoDiv.length) {
                // Create template info div
                infoDiv = $('<div class="template-info"></div>');
                $('form[data-template-enabled="1"]').prepend(infoDiv);
            }

            const templateId = this.currentTemplate;
            infoDiv.html(
                '<p><strong>Using Template:</strong> ' + this.escapeHtml(templateInfo.name) + '</p>' +
                '<input type="hidden" name="current_template_id" value="' + this.escapeHtml(templateId) + '">'
            );

            // Update submit button text
            $('.form-submit button[type="submit"]').text('Create Event from Template');
        },

        /**
         * Clear current template
         */
        clearTemplate: function() {
            if (!confirm(hvacEventTemplates.strings.confirmClear)) {
                // Reset select to current template if cancelled
                $('.hvac-template-selector').val(this.currentTemplate || '0');
                return;
            }

            const form = $('form[data-template-enabled="1"]');

            // Clear form fields
            form.find('input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="datetime-local"], textarea').val('');
            form.find('select').prop('selectedIndex', 0);
            form.find('input[type="checkbox"], input[type="radio"]').prop('checked', false);

            // Hide venue/organizer creation fields
            $('.venue-creation-field, .organizer-creation-field').addClass('hidden');

            // Remove template info
            $('.template-info').remove();

            // Reset template selector
            $('.hvac-template-selector').val('0');

            // Reset submit button text
            $('.form-submit button[type="submit"]').text('Create Event');

            // Clear current template
            this.currentTemplate = null;

            // Update form state tracking
            this.captureInitialFormState();

            this.showMessage(hvacEventTemplates.strings.templateCleared, 'success');
        },

        /**
         * Show save template modal
         */
        showSaveTemplateModal: function(event) {
            event.preventDefault();

            // Validate that form has data
            if (!this.hasFormData()) {
                this.showMessage(hvacEventTemplates.strings.fillRequiredFields, 'error');
                return;
            }

            // Show modal
            $('#hvac-save-template-modal').removeClass('hidden');

            // Focus on name field
            $('#template-name').focus();
        },

        /**
         * Handle save template form submission
         */
        handleSaveTemplate: function(event) {
            event.preventDefault();

            const form = $(event.target);
            const templateName = form.find('#template-name').val().trim();

            if (!templateName) {
                this.showMessage(hvacEventTemplates.strings.templateNameRequired || 'Template name is required', 'error');
                return;
            }

            // Collect current form data
            const formData = this.collectFormData();

            // Prepare template data
            const templateData = {
                action: 'hvac_save_as_template',
                nonce: hvacEventTemplates.nonce,
                template_name: templateName,
                template_description: form.find('#template-description').val(),
                template_category: form.find('#template-category').val(),
                template_public: form.find('input[name="template_public"]').is(':checked') ? 1 : 0,
                form_data: formData
            };

            // Show loading state
            const submitButton = form.find('button[type="submit"]');
            const originalText = submitButton.text();
            submitButton.text('Saving...').prop('disabled', true);

            // Save template via AJAX
            $.ajax({
                url: hvacEventTemplates.ajaxurl,
                method: 'POST',
                data: templateData,
                success: (response) => {
                    if (response.success) {
                        this.showMessage(hvacEventTemplates.strings.templateSaved, 'success');
                        this.closeModal();

                        // Refresh template selector options
                        this.refreshTemplateSelector();
                    } else {
                        this.showMessage(response.data.error || hvacEventTemplates.strings.error, 'error');
                    }
                },
                error: () => {
                    this.showMessage(hvacEventTemplates.strings.error, 'error');
                },
                complete: () => {
                    submitButton.text(originalText).prop('disabled', false);
                }
            });
        },

        /**
         * Close modal dialog
         */
        closeModal: function() {
            $('.hvac-modal').addClass('hidden');

            // Reset form
            $('#hvac-save-template-form')[0].reset();
        },

        /**
         * Toggle venue creation fields
         */
        toggleVenueCreation: function(event) {
            const selectedValue = $(event.target).val();
            const creationFields = $('.venue-creation-field');

            if (selectedValue === 'new') {
                creationFields.removeClass('hidden');
                creationFields.find('input[name="new_venue_name"]').prop('required', true);
            } else {
                creationFields.addClass('hidden');
                creationFields.find('input').prop('required', false).val('');
            }
        },

        /**
         * Toggle organizer creation fields
         */
        toggleOrganizerCreation: function(event) {
            const selectedValue = $(event.target).val();
            const creationFields = $('.organizer-creation-field');

            if (selectedValue === 'new') {
                creationFields.removeClass('hidden');
                creationFields.find('input[name="new_organizer_name"]').prop('required', true);
            } else {
                creationFields.addClass('hidden');
                creationFields.find('input').prop('required', false).val('');
            }
        },

        /**
         * Track form changes
         */
        trackFormChanges: function(event) {
            const field = $(event.target);
            const fieldName = field.attr('name');

            if (fieldName && fieldName !== 'event_template') {
                this.formFields[fieldName] = this.getFieldValue(field);
            }
        },

        /**
         * Capture initial form state
         */
        captureInitialFormState: function() {
            const form = $('form[data-template-enabled="1"]');
            this.formFields = {};

            form.find('input, textarea, select').not('[name="event_template"]').each((index, element) => {
                const field = $(element);
                const fieldName = field.attr('name');
                if (fieldName) {
                    this.formFields[fieldName] = this.getFieldValue(field);
                }
            });
        },

        /**
         * Get field value based on field type
         */
        getFieldValue: function(field) {
            if (field.is('input[type="checkbox"]')) {
                return field.is(':checked') ? '1' : '0';
            } else if (field.is('input[type="radio"]')) {
                return field.is(':checked') ? field.val() : '';
            } else {
                return field.val() || '';
            }
        },

        /**
         * Check if form has data
         */
        hasFormData: function() {
            const form = $('form[data-template-enabled="1"]');
            let hasData = false;

            form.find('input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="datetime-local"], textarea').each(function() {
                if ($(this).val().trim()) {
                    hasData = true;
                    return false; // Break loop
                }
            });

            if (!hasData) {
                form.find('select').each(function() {
                    if ($(this).val() && $(this).val() !== '0' && $(this).attr('name') !== 'event_template') {
                        hasData = true;
                        return false; // Break loop
                    }
                });
            }

            return hasData;
        },

        /**
         * Collect current form data
         */
        collectFormData: function() {
            const form = $('form[data-template-enabled="1"]');
            const data = {};

            // Collect all form fields except template selector
            form.find('input, textarea, select').not('[name="event_template"]').each(function() {
                const field = $(this);
                const fieldName = field.attr('name');

                if (fieldName && !fieldName.startsWith('_wp') && fieldName !== 'action') {
                    data[fieldName] = this.getFieldValue(field);
                }
            }.bind(this));

            return data;
        },

        /**
         * Refresh template selector options
         */
        refreshTemplateSelector: function() {
            const selector = $('.hvac-template-selector');
            if (!selector.length) return;

            // This would typically reload the options via AJAX
            // For now, just trigger a page refresh might be needed
            // TODO: Implement dynamic template list refresh
        },

        /**
         * Show message to user
         */
        showMessage: function(message, type = 'info') {
            // Remove existing messages
            $('.hvac-message').remove();

            // Create message element
            const messageClass = 'hvac-message hvac-message-' + type;
            const messageHtml = '<div class="' + messageClass + '">' + this.escapeHtml(message) + '</div>';

            // Show message at top of form
            $('form[data-template-enabled="1"]').prepend(messageHtml);

            // Auto-hide after 5 seconds
            setTimeout(function() {
                $('.hvac-message').fadeOut(function() {
                    $(this).remove();
                });
            }, 5000);
        },

        /**
         * Escape HTML to prevent XSS
         */
        escapeHtml: function(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
    };

    // Global functions for template operations (called from PHP-generated onclick handlers)
    window.hvacLoadTemplate = function(templateId) {
        HVACEventTemplates.loadTemplate(templateId);
    };

    window.hvacClearTemplate = function() {
        HVACEventTemplates.clearTemplate();
    };

    window.hvacSaveAsTemplate = function(event) {
        HVACEventTemplates.showSaveTemplateModal(event);
    };

    // Advanced options toggle functionality
    window.hvacToggleAdvancedOptions = function() {
        const button = $('.toggle-advanced-options');
        const icon = button.find('.toggle-icon');
        const text = button.find('.toggle-text');
        const advancedFields = $('.advanced-field');

        // Toggle visibility of advanced fields
        advancedFields.slideToggle(300);

        // Toggle button state
        if (advancedFields.is(':visible')) {
            icon.removeClass('dashicons-arrow-down-alt2').addClass('dashicons-arrow-up-alt2');
            text.text('Hide Advanced Options');
            button.addClass('expanded');
        } else {
            icon.removeClass('dashicons-arrow-up-alt2').addClass('dashicons-arrow-down-alt2');
            text.text('Show Advanced Options');
            button.removeClass('expanded');
        }
    };

    // Initialize when document is ready
    $(document).ready(function() {
        HVACEventTemplates.init();

        // Initialize advanced fields as hidden
        $('.advanced-field').hide();
    });

})(jQuery);