From 09a15f874c333705c0d2d4ce3c47143d5ce301d2 Mon Sep 17 00:00:00 2001
From: ben <ben@tealmaker.com>
Date: Thu, 25 Sep 2025 09:06:03 -0300
Subject: [PATCH] feat: complete Phase 2B template system enhancements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Enhanced Template Selector:
- Grouped templates by category with descriptions
- Template preview modal with field data display
- Apply template functionality with AJAX loading
- Enhanced UI with preview icons and better UX

✨ Save as Template Functionality:
- Complete save template dialog with validation
- Template name, description, and category fields
- Public/private template sharing options
- AJAX integration with error handling and success feedback

✨ Progressive Disclosure:
- Advanced options toggle with smooth animations
- Fields marked as advanced (capacity, cost, timezone)
- Local storage for user preference persistence
- Staggered reveal animations for better UX

✨ Enhanced Auto-save:
- Intelligent auto-save with field-type specific delays
- Draft recovery with age information and user confirmation
- Error handling with fallback to essential fields only
- Visual feedback with status indicator and animations
- Auto-save on page visibility change

✨ AJAX Infrastructure:
- Template preview handler (hvac_get_template_preview)
- Template loading handler (hvac_load_template_data)
- Template saving handler (hvac_save_template)
- Comprehensive error handling and security validation

🎨 UI/UX Enhancements:
- Modern modal dialogs with backdrop overlays
- Responsive design for mobile devices
- Smooth animations and transitions
- Status indicators with rotating save icons
- Comprehensive styling for all new components

🚀 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/settings.local.json                |    5 +-
 docs/FEATURE_AI_EVENT_POPULATION.md        |  492 ++++++++++
 includes/class-hvac-event-form-builder.php |  206 +++-
 includes/class-hvac-shortcodes.php         |  172 ++++
 templates/page-tec-create-event.php        | 1035 +++++++++++++++++++-
 5 files changed, 1856 insertions(+), 54 deletions(-)
 create mode 100644 docs/FEATURE_AI_EVENT_POPULATION.md

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index af733b1f..0ad9613f 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -21,7 +21,10 @@
       "WebFetch(domain:upskill-staging.measurequick.com)",
       "Bash(scripts/:*)",
       "Bash(./scripts/:*)",
-      "Bash(php -l:*)"
+      "Bash(php -l:*)",
+      "Bash(SSHPASS=\"uSCO6f1y\" sshpass -e scp -o StrictHostKeyChecking=no templates/page-native-event-test.php roodev@146.190.76.204:/home/974670.cloudwaysapps.com/uberrxmprk/public_html/wp-content/plugins/hvac-community-events/templates/)",
+      "Bash(SSHPASS=\"uSCO6f1y\" sshpass -e scp -o StrictHostKeyChecking=no templates/page-create-event.php roodev@146.190.76.204:/home/974670.cloudwaysapps.com/uberrxmprk/public_html/wp-content/plugins/hvac-community-events/templates/)",
+      "mcp__playwright__browser_navigate"
     ],
     "deny": [],
     "ask": [],
diff --git a/docs/FEATURE_AI_EVENT_POPULATION.md b/docs/FEATURE_AI_EVENT_POPULATION.md
new file mode 100644
index 00000000..32f79df5
--- /dev/null
+++ b/docs/FEATURE_AI_EVENT_POPULATION.md
@@ -0,0 +1,492 @@
+# AI-Assisted Event Submission Feature Specification
+
+## Executive Summary
+
+This document specifies an AI-powered feature to reduce friction for HVAC trainers submitting events to a WordPress calendar system. The solution uses a single Anthropic Claude API call to parse unstructured event information and auto-populate form fields, dramatically simplifying the submission process for non-technical users.
+
+## Project Context
+
+### Current State
+- **Platform**: WordPress site hosted on Cloudways
+- **Base Plugin**: The Events Calendar (TEC) by Modern Tribe
+- **Custom Plugin**: Existing custom plugin built on top of TEC for HVAC trainer event submissions
+- **User Base**: HVAC trainers who are often not tech-savvy and have limited time
+- **Problem**: High friction in manual form entry leading to incomplete or missing event submissions
+
+### Technical Constraints
+- **Hosting**: Cloudways shared hosting environment
+  - Limited server-side processing capabilities
+  - No ability to install additional server software
+  - Standard PHP/MySQL stack
+  - HTTPS request capabilities
+- **Must maintain compatibility** with The Events Calendar plugin data structures
+- **Cannot add additional WordPress plugins** - solution must be implemented within existing custom plugin
+
+## Functional Requirements
+
+### Core Feature: AI-Assisted Event Form Population
+
+#### User Flow
+1. User navigates to the create event page
+2. User sees an "Auto-populate with AI" button/option
+3. Upon clicking, a modal dialog appears with:
+   - Clear instructions for the user
+   - Single rich text input field
+   - Submit button
+4. User provides one of three input types:
+   - **Option A**: URL to a webpage containing event details
+   - **Option B**: Copy/pasted text from email/document
+   - **Option C**: Brief description with key details
+5. System processes input showing:
+   - Loading spinner
+   - Status messages during processing
+6. System populates form fields automatically
+7. System displays confidence/completeness matrix
+8. User reviews and adjusts populated fields before final submission
+
+#### Input Acceptance Criteria
+
+**URL Input**
+- Accept any valid HTTP/HTTPS URL
+- Handle various event page formats (EventBrite, custom sites, social media event pages)
+- Extract information even from non-standard page structures
+
+**Pasted Text Input**
+- Accept unformatted text from emails, PDFs, documents
+- Handle various formatting styles and structures
+- Parse information regardless of order or format
+
+**Brief Description Input**
+- Accept natural language descriptions
+- Extract partial information when complete details aren't provided
+- Make intelligent assumptions about missing data
+
+#### Output Requirements
+
+**Required Fields to Extract**
+- Event title
+- Date and time
+- Location/venue
+- Description
+- Organizer
+- Cost/pricing
+- Registration URL (if available)
+
+**Data Validation Requirements**
+- Check against existing venues to avoid duplicates
+- Check against existing organizers to avoid duplicates
+- Validate date/time formats
+- Ensure required fields are populated
+
+**Confidence Reporting**
+Display a matrix showing:
+- **Completeness**: Whether each field was found (High/Medium/Low/N/A)
+- **Confidence**: How confident the AI is in the extracted data (0.0-1.0)
+
+## Technical Architecture
+
+### Simplified Single-API Approach
+
+#### Architecture Decision
+Use a single Anthropic Claude API call with web search capabilities enabled, eliminating the need for:
+- Separate web scraping services
+- Multiple NLP processing steps
+- Complex orchestration logic
+- Background job processing
+- Additional server infrastructure
+
+#### Key Components
+
+1. **Frontend (JavaScript)**
+   - Modal interface for input collection
+   - AJAX communication with WordPress backend
+   - Form field population logic
+   - Confidence matrix display
+
+2. **Backend (PHP/WordPress)**
+   - Single AJAX endpoint for AI processing
+   - API key management
+   - Request/response handling
+   - Data sanitization and validation
+
+3. **External Service**
+   - Anthropic Claude API (claude-3-5-sonnet-20241022 or latest)
+   - Web search/browsing capabilities enabled
+
+### Implementation Patterns
+
+#### Pattern 1: Stateless Request Processing
+- **Do**: Make each request completely self-contained
+- **Do**: Include all context needed in single prompt
+- **Do**: Return complete results in one response
+- **Don't**: Maintain conversation state between requests
+- **Don't**: Make multiple API calls for single submission
+
+#### Pattern 2: Defensive Data Handling
+```php
+// Always validate and sanitize
+$user_input = sanitize_textarea_field($_POST['input'] ?? '');
+if (empty($user_input)) {
+    wp_send_json_error(['message' => 'No input provided']);
+    wp_die();
+}
+```
+
+#### Pattern 3: Structured Output Enforcement
+- **Do**: Request JSON output explicitly in prompt
+- **Do**: Provide exact schema in prompt
+- **Do**: Include example of expected output
+- **Don't**: Parse free-text responses
+- **Don't**: Rely on consistent formatting without schema
+
+#### Pattern 4: Graceful Degradation
+- **Do**: Provide fallback for API failures
+- **Do**: Allow manual form filling if AI fails
+- **Do**: Cache successful extractions
+- **Don't**: Block user progress on AI failure
+- **Don't**: Require AI for form submission
+
+### Anti-Patterns to Avoid
+
+#### Anti-Pattern 1: Client-Side API Keys
+**Never** expose API keys in JavaScript or make direct API calls from browser
+
+#### Anti-Pattern 2: Synchronous Long-Running Requests
+**Avoid** blocking UI during API calls; always use async patterns with loading states
+
+#### Anti-Pattern 3: Over-Engineering
+**Don't** build complex parsing systems when Claude can handle it in one call
+
+#### Anti-Pattern 4: Rigid Field Matching
+**Don't** require exact field matches; use fuzzy matching for venues/organizers
+
+## Prompt Engineering Strategy
+
+### Core Prompt Structure
+
+```text
+You are an AI assistant specialized in extracting event information from various sources.
+Your task is to extract structured event data for an HVAC training calendar.
+
+[CONTEXT]
+- These are professional training events for HVAC technicians
+- Events may be in-person or virtual
+- Common organizers include: {list_of_existing_organizers}
+- Common venues include: {list_of_existing_venues}
+
+[INPUT]
+{user_provides_one_of_these}
+- URL: Please retrieve and analyze the webpage at: {url}
+- Text: Parse the following event information: {pasted_text}
+- Description: Extract event details from: {brief_description}
+
+[EXTRACTION RULES]
+1. Match venues/organizers to existing ones when similarity > 80%
+2. Infer missing information when reasonable (mark as low confidence)
+3. Handle relative dates (convert "next Tuesday" to actual date)
+4. Extract all URLs found in source material
+5. Standardize time to 24-hour format
+6. If multiple events found, extract only the first/primary one
+
+[OUTPUT SCHEMA]
+Return ONLY a valid JSON object with this exact structure:
+{json_schema_here}
+
+[IMPORTANT]
+- Return ONLY the JSON object, no explanatory text
+- Use null for missing fields rather than empty strings
+- Include confidence scores for each field
+```
+
+### Prompt Optimization Techniques
+
+#### 1. Few-Shot Examples
+Include 2-3 examples of successful extractions in the system prompt to improve consistency.
+
+#### 2. Role Definition
+Clearly define Claude's role as an "event information extraction specialist" to improve focus.
+
+#### 3. Explicit Constraints
+- Specify exact date format (ISO 8601)
+- Define confidence score ranges (0.0-1.0)
+- List acceptable values for enums
+
+#### 4. Context Injection
+Always include:
+- Current date/time for relative date resolution
+- List of existing venues/organizers
+- Common patterns in your specific domain
+
+### Handling Edge Cases
+
+#### Edge Case 1: Multiple Events
+**Strategy**: Extract only the first/most prominent event
+**Prompt Addition**: "If multiple events are found, extract only the primary/first event"
+
+#### Edge Case 2: Ambiguous Dates
+**Strategy**: Request current date context
+**Implementation**: Always include `Today is {current_date}` in prompt
+
+#### Edge Case 3: Missing Critical Information
+**Strategy**: Return partial data with low confidence
+**Validation**: Check for minimum required fields before population
+
+## Input/Output Validation
+
+### Input Validation Strategy
+
+#### Pre-Processing Validation
+```javascript
+function validateInput(input) {
+    // Check for minimum length
+    if (input.length < 10) {
+        return { valid: false, error: 'Input too short' };
+    }
+    
+    // Detect input type
+    const type = detectInputType(input);
+    
+    // URL validation
+    if (type === 'url') {
+        try {
+            new URL(input);
+        } catch {
+            return { valid: false, error: 'Invalid URL format' };
+        }
+    }
+    
+    // Size limits (prevent token overflow)
+    if (input.length > 50000) {
+        return { valid: false, error: 'Input too large' };
+    }
+    
+    return { valid: true, type };
+}
+```
+
+#### Input Sanitization
+- Strip potentially harmful HTML/scripts
+- Normalize whitespace and line breaks
+- Remove non-printable characters
+- Truncate to maximum acceptable length
+
+### Output Validation Strategy
+
+#### Schema Validation
+```php
+function validate_ai_response($response) {
+    $required_fields = ['title', 'date'];
+    $schema = [
+        'title' => 'string',
+        'date' => 'date',
+        'venue' => 'string|null',
+        'confidence' => 'array',
+        'completeness' => 'array'
+    ];
+    
+    // Check JSON structure
+    if (!is_array($response)) {
+        throw new ValidationException('Invalid JSON response');
+    }
+    
+    // Validate required fields
+    foreach ($required_fields as $field) {
+        if (empty($response[$field])) {
+            throw new ValidationException("Missing required field: {$field}");
+        }
+    }
+    
+    // Type checking and sanitization
+    // ... implementation details
+    
+    return $sanitized_response;
+}
+```
+
+#### Confidence Threshold Handling
+- **High Confidence (>0.8)**: Auto-populate without warning
+- **Medium Confidence (0.5-0.8)**: Populate with visual indicator
+- **Low Confidence (<0.5)**: Populate but highlight for review
+- **No Confidence (null)**: Leave field empty
+
+#### Duplicate Detection
+```php
+function check_duplicate_event($event_data) {
+    // Check for same date + similar title
+    $similar_events = get_posts([
+        'post_type' => 'tribe_events',
+        'meta_key' => '_EventStartDate',
+        'meta_value' => $event_data['date'],
+        'meta_compare' => '='
+    ]);
+    
+    foreach ($similar_events as $existing) {
+        $similarity = similar_text(
+            strtolower($existing->post_title),
+            strtolower($event_data['title']),
+            $percent
+        );
+        
+        if ($percent > 75) {
+            return [
+                'is_duplicate' => true,
+                'existing_id' => $existing->ID,
+                'similarity' => $percent
+            ];
+        }
+    }
+    
+    return ['is_duplicate' => false];
+}
+```
+
+## Error Handling and Recovery
+
+### API Error Handling
+
+#### Rate Limiting
+- Implement exponential backoff
+- Cache successful responses for 24 hours
+- Show user-friendly message when limit reached
+
+#### Network Failures
+- Timeout after 30 seconds
+- Provide option to retry
+- Fall back to manual entry
+
+#### Invalid Responses
+- Log malformed responses for debugging
+- Show generic error to user
+- Provide option to try different input
+
+### User Communication
+
+#### Status Messages
+1. "Analyzing your input..." (0-2 seconds)
+2. "Extracting event information..." (2-10 seconds)
+3. "Validating extracted data..." (10-15 seconds)
+4. "Populating form fields..." (15+ seconds)
+
+#### Error Messages
+- Be specific but not technical
+- Provide actionable next steps
+- Never expose internal errors or API keys
+
+## Security Considerations
+
+### API Key Management
+- Store in wp-config.php or environment variables
+- Never commit to version control
+- Rotate keys periodically
+- Use WordPress nonce for AJAX calls
+
+### Input Security
+- Sanitize all user inputs
+- Prevent SQL injection via parameterized queries
+- Escape output when displaying
+- Limit request frequency per user
+
+### Data Privacy
+- Don't log sensitive event information
+- Clear temporary data after processing
+- Comply with GDPR/privacy requirements
+- Allow users to opt-out of AI features
+
+## Performance Optimization
+
+### Caching Strategy
+- Cache AI responses for identical inputs (24-hour TTL)
+- Cache venue/organizer lists (1-hour TTL)
+- Use WordPress transients for temporary data
+
+### Request Optimization
+- Minimize prompt size while maintaining clarity
+- Pre-process input to remove redundant information
+- Batch similar requests when possible
+
+### Frontend Optimization
+- Lazy-load AI modal components
+- Debounce input validation
+- Use optimistic UI updates
+
+## Testing Strategy
+
+### Test Scenarios
+1. **URL Input**: Test with EventBrite, Facebook Events, custom sites
+2. **Text Input**: Test with various email formats, PDF copies
+3. **Description Input**: Test with minimal and detailed descriptions
+4. **Edge Cases**: Test with non-English content, past events, recurring events
+5. **Failure Cases**: Test with invalid URLs, gibberish input, timeout scenarios
+
+### Validation Testing
+- Ensure all required fields are validated
+- Test confidence score accuracy
+- Verify duplicate detection works correctly
+- Test venue/organizer matching logic
+
+## Implementation Checklist
+
+### Phase 1: Core Infrastructure
+- [ ] Set up Anthropic API integration
+- [ ] Create WordPress AJAX endpoint
+- [ ] Implement basic input validation
+- [ ] Build JSON response parser
+
+### Phase 2: UI Implementation
+- [ ] Create modal interface
+- [ ] Implement form field population
+- [ ] Add loading states and progress indicators
+- [ ] Build confidence matrix display
+
+### Phase 3: Data Processing
+- [ ] Implement venue/organizer matching
+- [ ] Add duplicate detection
+- [ ] Create validation pipeline
+- [ ] Add error handling and recovery
+
+### Phase 4: Optimization
+- [ ] Implement caching layer
+- [ ] Add request rate limiting
+- [ ] Optimize prompt for accuracy
+- [ ] Performance testing and tuning
+
+### Phase 5: Polish and Testing
+- [ ] Comprehensive error messages
+- [ ] User documentation
+- [ ] Edge case handling
+- [ ] Security audit
+
+## Success Metrics
+
+### Technical Metrics
+- API response time < 10 seconds (95th percentile)
+- Extraction accuracy > 85% for standard inputs
+- Zero security vulnerabilities
+- 99.9% uptime for feature availability
+
+### User Metrics
+- 50% reduction in time to submit events
+- 75% of submissions use AI assistance
+- < 5% error rate requiring manual intervention
+- User satisfaction score > 4/5
+
+## Appendix: The Events Calendar Integration
+
+### Relevant Post Types
+- `tribe_events` - Main event post type
+- `tribe_venue` - Venue post type
+- `tribe_organizer` - Organizer post type
+
+### Key Meta Fields
+- `_EventStartDate` - Event start date/time
+- `_EventEndDate` - Event end date/time
+- `_EventVenueID` - Reference to venue post
+- `_EventOrganizerID` - Reference to organizer post
+- `_EventCost` - Event cost
+- `_EventURL` - Registration/info URL
+
+### Integration Points
+- Use TEC's built-in functions when available
+- Respect TEC's data validation rules
+- Maintain compatibility with TEC updates
+- Leverage TEC's duplicate detection if available
\ No newline at end of file
diff --git a/includes/class-hvac-event-form-builder.php b/includes/class-hvac-event-form-builder.php
index 88317aa6..eab40d73 100644
--- a/includes/class-hvac-event-form-builder.php
+++ b/includes/class-hvac-event-form-builder.php
@@ -190,9 +190,19 @@ class HVAC_Event_Form_Builder extends HVAC_Form_Builder {
             $this->add_cost_fields();
         }
 
+        // Add progressive disclosure toggle
+        $this->add_progressive_disclosure();
+
+        // Mark certain fields as advanced
+        $this->mark_field_as_advanced('event_capacity')
+             ->mark_field_as_advanced('event_cost')
+             ->mark_field_as_advanced('event_timezone');
+
         // Template actions if enabled
         if ($this->template_mode_enabled) {
             $this->add_template_actions();
+            // Mark template actions as advanced
+            $this->mark_field_as_advanced('save_as_template');
         }
 
         return $this;
@@ -220,23 +230,55 @@ class HVAC_Event_Form_Builder extends HVAC_Form_Builder {
             $templates = $this->template_manager->get_templates();
         }
 
-        // Prepare template options
-        $template_options = ['0' => '-- Select a Template --'];
+        // Group templates by category for enhanced UI
+        $templates_by_category = [];
         foreach ($templates as $template) {
-            $template_options[$template['id']] = esc_html($template['name']) .
-                ' (' . ucfirst($template['category']) . ')';
+            $category = $template['category'] ?? 'general';
+            if (!isset($templates_by_category[$category])) {
+                $templates_by_category[$category] = [];
+            }
+            $templates_by_category[$category][] = $template;
+        }
+
+        // Prepare enhanced template options with categories
+        $template_options = ['0' => '-- Select a Template --'];
+        foreach ($templates_by_category as $category => $category_templates) {
+            $template_options['optgroup_' . $category] = [
+                'label' => ucfirst($category) . ' Templates',
+                'options' => []
+            ];
+
+            foreach ($category_templates as $template) {
+                $template_options['optgroup_' . $category]['options'][$template['id']] =
+                    esc_html($template['name']) .
+                    (!empty($template['description']) ? ' - ' . wp_trim_words($template['description'], 8) : '');
+            }
         }
 
         $template_field = array_merge($this->event_field_defaults['template-selector'], [
             'name' => 'event_template',
             'label' => 'Use Template',
             'options' => $template_options,
-            'description' => 'Select a template to pre-fill form fields',
-            'wrapper_class' => 'form-row template-selector-row',
+            'description' => 'Select a template to pre-fill form fields. Templates are organized by category.',
+            'wrapper_class' => 'form-row template-selector-row enhanced-selector',
+            'data_attributes' => [
+                'templates' => json_encode($templates),
+                'enable_preview' => 'true'
+            ]
         ]);
 
         $this->add_field($template_field);
 
+        // Add template preview area
+        $preview_field = [
+            'type' => 'custom',
+            'name' => 'template_preview',
+            'custom_html' => $this->render_template_preview_area(),
+            'wrapper_class' => 'form-row template-preview-row',
+        ];
+
+        $this->add_field($preview_field);
+
         return $this;
     }
 
@@ -401,14 +443,73 @@ class HVAC_Event_Form_Builder extends HVAC_Form_Builder {
             'value' => 'Save as Template',
             'class' => 'button button-secondary hvac-save-template',
             'wrapper_class' => 'form-row template-actions',
-            'onclick' => 'hvacSaveAsTemplate(event)',
+            'onclick' => 'hvacShowSaveTemplateDialog(event)',
         ];
 
         $this->add_field($save_template_field);
 
+        // Add save template dialog
+        $save_dialog_field = [
+            'type' => 'custom',
+            'name' => 'save_template_dialog',
+            'custom_html' => $this->render_save_template_dialog(),
+            'wrapper_class' => 'form-row template-dialog-row',
+        ];
+
+        $this->add_field($save_dialog_field);
+
         return $this;
     }
 
+    /**
+     * Add progressive disclosure section
+     */
+    public function add_progressive_disclosure(): self {
+        // Advanced options toggle
+        $advanced_toggle_field = [
+            'type' => 'custom',
+            'name' => 'advanced_options_toggle',
+            'custom_html' => $this->render_advanced_options_toggle(),
+            'wrapper_class' => 'form-row advanced-toggle-row',
+        ];
+
+        $this->add_field($advanced_toggle_field);
+
+        return $this;
+    }
+
+    /**
+     * Mark field as advanced (for progressive disclosure)
+     */
+    public function mark_field_as_advanced(string $field_name): self {
+        foreach ($this->fields as &$field) {
+            if ($field['name'] === $field_name) {
+                $field['wrapper_class'] = ($field['wrapper_class'] ?? '') . ' advanced-field';
+                $field['data_attributes'] = array_merge($field['data_attributes'] ?? [], [
+                    'advanced' => 'true'
+                ]);
+                break;
+            }
+        }
+
+        return $this;
+    }
+
+    /**
+     * Render advanced options toggle button
+     */
+    private function render_advanced_options_toggle(): string {
+        $html = '<div class="hvac-advanced-options-toggle">';
+        $html .= '<button type="button" class="toggle-advanced-options" onclick="hvacToggleAdvancedOptions()">';
+        $html .= '<span class="dashicons dashicons-arrow-down-alt2 toggle-icon"></span>';
+        $html .= '<span class="toggle-text">Show Advanced Options</span>';
+        $html .= '</button>';
+        $html .= '<small class="toggle-description">Additional settings for power users</small>';
+        $html .= '</div>';
+
+        return $html;
+    }
+
     /**
      * Load template data into form
      *
@@ -499,6 +600,97 @@ class HVAC_Event_Form_Builder extends HVAC_Form_Builder {
         }
     }
 
+    /**
+     * Render template preview area
+     *
+     * @return string Preview HTML
+     */
+    private function render_template_preview_area(): string {
+        $html = '<div class="hvac-template-preview" id="hvac-template-preview" style="display: none;">';
+        $html .= '<div class="preview-header">';
+        $html .= '<h4><span class="dashicons dashicons-visibility"></span> Template Preview</h4>';
+        $html .= '<button type="button" class="preview-close" onclick="hvacCloseTemplatePreview()">&times;</button>';
+        $html .= '</div>';
+        $html .= '<div class="preview-content">';
+        $html .= '<div class="preview-info">';
+        $html .= '<p class="template-name"><strong></strong></p>';
+        $html .= '<p class="template-description"></p>';
+        $html .= '<p class="template-category">Category: <span></span></p>';
+        $html .= '</div>';
+        $html .= '<div class="preview-fields">';
+        $html .= '<h5>Pre-filled Fields:</h5>';
+        $html .= '<ul class="field-list"></ul>';
+        $html .= '</div>';
+        $html .= '<div class="preview-actions">';
+        $html .= '<button type="button" class="button button-primary" onclick="hvacApplyTemplate()">Apply This Template</button>';
+        $html .= '<button type="button" class="button" onclick="hvacCloseTemplatePreview()">Cancel</button>';
+        $html .= '</div>';
+        $html .= '</div>';
+        $html .= '</div>';
+
+        return $html;
+    }
+
+    /**
+     * Render save template dialog
+     *
+     * @return string Dialog HTML
+     */
+    private function render_save_template_dialog(): string {
+        $html = '<div class="hvac-save-template-dialog" id="hvac-save-template-dialog" style="display: none;">';
+        $html .= '<div class="dialog-header">';
+        $html .= '<h4><span class="dashicons dashicons-saved"></span> Save as Template</h4>';
+        $html .= '<button type="button" class="dialog-close" onclick="hvacCloseSaveDialog()">&times;</button>';
+        $html .= '</div>';
+        $html .= '<div class="dialog-content">';
+
+        // Template name field
+        $html .= '<div class="form-group">';
+        $html .= '<label for="template-name"><strong>Template Name *</strong></label>';
+        $html .= '<input type="text" id="template-name" name="template_name" required maxlength="100" ';
+        $html .= 'placeholder="Enter template name..." class="template-input">';
+        $html .= '</div>';
+
+        // Template description field
+        $html .= '<div class="form-group">';
+        $html .= '<label for="template-description"><strong>Description</strong></label>';
+        $html .= '<textarea id="template-description" name="template_description" rows="3" maxlength="500" ';
+        $html .= 'placeholder="Brief description of this template..." class="template-input"></textarea>';
+        $html .= '</div>';
+
+        // Template category field
+        $html .= '<div class="form-group">';
+        $html .= '<label for="template-category"><strong>Category *</strong></label>';
+        $html .= '<select id="template-category" name="template_category" required class="template-input">';
+        $html .= '<option value="">Select Category...</option>';
+        $html .= '<option value="general">General</option>';
+        $html .= '<option value="training">Training</option>';
+        $html .= '<option value="workshop">Workshop</option>';
+        $html .= '<option value="certification">Certification</option>';
+        $html .= '<option value="conference">Conference</option>';
+        $html .= '<option value="webinar">Webinar</option>';
+        $html .= '</select>';
+        $html .= '</div>';
+
+        // Public checkbox
+        $html .= '<div class="form-group checkbox-group">';
+        $html .= '<label for="template-public">';
+        $html .= '<input type="checkbox" id="template-public" name="template_public" value="1">';
+        $html .= ' Make this template available to other trainers';
+        $html .= '</label>';
+        $html .= '<small class="description">If unchecked, only you will be able to use this template</small>';
+        $html .= '</div>';
+
+        $html .= '</div>';
+        $html .= '<div class="dialog-actions">';
+        $html .= '<button type="button" class="button button-primary" onclick="hvacSaveAsTemplate()">Save Template</button>';
+        $html .= '<button type="button" class="button" onclick="hvacCloseSaveDialog()">Cancel</button>';
+        $html .= '</div>';
+        $html .= '</div>';
+
+        return $html;
+    }
+
     /**
      * Get timezone options for select field
      *
diff --git a/includes/class-hvac-shortcodes.php b/includes/class-hvac-shortcodes.php
index 8db29d68..5e1b470c 100644
--- a/includes/class-hvac-shortcodes.php
+++ b/includes/class-hvac-shortcodes.php
@@ -49,6 +49,7 @@ class HVAC_Shortcodes {
     private function __construct() {
         $this->define_shortcodes();
         $this->register_shortcodes();
+        $this->register_ajax_handlers();
     }
     
     /**
@@ -860,4 +861,175 @@ class HVAC_Shortcodes {
         $profile_manager = HVAC_Trainer_Profile_Manager::get_instance();
         return $profile_manager->render_profile_edit($atts);
     }
+
+    /**
+     * Register AJAX handlers
+     */
+    private function register_ajax_handlers() {
+        // Template preview AJAX handler
+        add_action('wp_ajax_hvac_get_template_preview', array($this, 'ajax_get_template_preview'));
+        add_action('wp_ajax_nopriv_hvac_get_template_preview', array($this, 'ajax_get_template_preview'));
+
+        // Template loading AJAX handler
+        add_action('wp_ajax_hvac_load_template_data', array($this, 'ajax_load_template_data'));
+        add_action('wp_ajax_nopriv_hvac_load_template_data', array($this, 'ajax_load_template_data'));
+
+        // Template saving AJAX handler
+        add_action('wp_ajax_hvac_save_template', array($this, 'ajax_save_template'));
+        add_action('wp_ajax_nopriv_hvac_save_template', array($this, 'ajax_save_template'));
+    }
+
+    /**
+     * AJAX handler for getting template preview data
+     */
+    public function ajax_get_template_preview() {
+        // Verify nonce
+        if (!wp_verify_nonce($_POST['nonce'] ?? '', 'hvac_event_form_nonce')) {
+            wp_send_json_error('Security check failed');
+            return;
+        }
+
+        $template_id = sanitize_text_field($_POST['template_id'] ?? '');
+        if (empty($template_id)) {
+            wp_send_json_error('No template ID provided');
+            return;
+        }
+
+        // Get template manager instance
+        if (!class_exists('HVAC_Event_Template_Manager')) {
+            wp_send_json_error('Template manager not available');
+            return;
+        }
+
+        $template_manager = HVAC_Event_Template_Manager::instance();
+        $template = $template_manager->get_template($template_id);
+
+        if (!$template) {
+            wp_send_json_error('Template not found');
+            return;
+        }
+
+        // Return template data
+        wp_send_json_success($template);
+    }
+
+    /**
+     * AJAX handler for loading template data into form
+     */
+    public function ajax_load_template_data() {
+        // Verify nonce
+        if (!wp_verify_nonce($_POST['nonce'] ?? '', 'hvac_event_form_nonce')) {
+            wp_send_json_error('Security check failed');
+            return;
+        }
+
+        $template_id = sanitize_text_field($_POST['template_id'] ?? '');
+        if (empty($template_id)) {
+            wp_send_json_error('No template ID provided');
+            return;
+        }
+
+        // Get template manager instance
+        if (!class_exists('HVAC_Event_Template_Manager')) {
+            wp_send_json_error('Template manager not available');
+            return;
+        }
+
+        $template_manager = HVAC_Event_Template_Manager::instance();
+        $template = $template_manager->get_template($template_id);
+
+        if (!$template || empty($template['field_data'])) {
+            wp_send_json_error('Template data not found');
+            return;
+        }
+
+        // Return field data
+        wp_send_json_success($template['field_data']);
+    }
+
+    /**
+     * AJAX handler for saving new template
+     */
+    public function ajax_save_template() {
+        // Verify nonce
+        if (!wp_verify_nonce($_POST['nonce'] ?? '', 'hvac_event_form_nonce')) {
+            wp_send_json_error('Security check failed');
+            return;
+        }
+
+        // Check user permissions
+        if (!is_user_logged_in()) {
+            wp_send_json_error('Authentication required');
+            return;
+        }
+
+        $user = wp_get_current_user();
+        if (!array_intersect(['hvac_trainer', 'hvac_master_trainer'], $user->roles)) {
+            wp_send_json_error('Insufficient permissions');
+            return;
+        }
+
+        // Validate and sanitize input
+        $template_name = sanitize_text_field($_POST['template_name'] ?? '');
+        $template_description = sanitize_textarea_field($_POST['template_description'] ?? '');
+        $template_category = sanitize_text_field($_POST['template_category'] ?? '');
+        $is_public = (bool) ($_POST['is_public'] ?? false);
+        $field_data = $_POST['field_data'] ?? [];
+
+        if (empty($template_name)) {
+            wp_send_json_error('Template name is required');
+            return;
+        }
+
+        if (empty($template_category)) {
+            wp_send_json_error('Template category is required');
+            return;
+        }
+
+        // Sanitize field data
+        $sanitized_field_data = [];
+        foreach ($field_data as $key => $value) {
+            $sanitized_key = sanitize_key($key);
+            if (is_array($value)) {
+                $sanitized_field_data[$sanitized_key] = array_map('sanitize_text_field', $value);
+            } else {
+                $sanitized_field_data[$sanitized_key] = sanitize_text_field($value);
+            }
+        }
+
+        // Get template manager instance
+        if (!class_exists('HVAC_Event_Template_Manager')) {
+            wp_send_json_error('Template manager not available');
+            return;
+        }
+
+        $template_manager = HVAC_Event_Template_Manager::instance();
+
+        // Prepare template data
+        $template_data = [
+            'name' => $template_name,
+            'description' => $template_description,
+            'category' => $template_category,
+            'is_public' => $is_public,
+            'field_data' => $sanitized_field_data,
+            'created_by' => $user->ID,
+            'meta_data' => [
+                'source' => 'event_form',
+                'created_at' => current_time('mysql'),
+                'user_ip' => $_SERVER['REMOTE_ADDR'] ?? '',
+            ]
+        ];
+
+        // Create the template
+        $result = $template_manager->create_template($template_data);
+
+        if ($result['success']) {
+            wp_send_json_success([
+                'message' => 'Template saved successfully',
+                'template_id' => $result['template_id'] ?? null
+            ]);
+        } else {
+            wp_send_json_error($result['error'] ?? 'Failed to save template');
+        }
+    }
 }
\ No newline at end of file
diff --git a/templates/page-tec-create-event.php b/templates/page-tec-create-event.php
index a116a2bd..e016e4e0 100644
--- a/templates/page-tec-create-event.php
+++ b/templates/page-tec-create-event.php
@@ -177,7 +177,7 @@ if (class_exists('HVAC_Event_Form_Builder')) {
     background: #005a87;
 }
 
-/* Template selector styling */
+/* Enhanced template selector styling */
 .hvac-template-selector {
     background: #f8f9fa;
     padding: 20px;
@@ -191,6 +191,436 @@ if (class_exists('HVAC_Event_Form_Builder')) {
     font-size: 16px;
 }
 
+.enhanced-selector select {
+    position: relative;
+}
+
+.enhanced-selector .template-info-icon {
+    display: inline-block;
+    margin-left: 8px;
+    color: #666;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.enhanced-selector .template-info-icon:hover {
+    color: #0073aa;
+}
+
+/* Template preview modal styling */
+.hvac-template-preview {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    z-index: 10000;
+    min-width: 500px;
+    max-width: 90vw;
+    max-height: 80vh;
+    overflow: hidden;
+}
+
+.hvac-template-preview .preview-header {
+    background: #0073aa;
+    color: white;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.hvac-template-preview .preview-header h4 {
+    margin: 0;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.hvac-template-preview .preview-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.hvac-template-preview .preview-close:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+.hvac-template-preview .preview-content {
+    padding: 20px;
+    max-height: calc(80vh - 120px);
+    overflow-y: auto;
+}
+
+.hvac-template-preview .preview-info {
+    margin-bottom: 20px;
+}
+
+.hvac-template-preview .template-name strong {
+    font-size: 18px;
+    color: #333;
+}
+
+.hvac-template-preview .template-description {
+    color: #666;
+    margin: 8px 0;
+    line-height: 1.5;
+}
+
+.hvac-template-preview .template-category span {
+    background: #e8f5e8;
+    color: #2e7d2e;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.hvac-template-preview .preview-fields {
+    border-top: 1px solid #eee;
+    padding-top: 15px;
+    margin-bottom: 20px;
+}
+
+.hvac-template-preview .field-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.hvac-template-preview .field-list li {
+    background: #f9f9f9;
+    margin: 5px 0;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border-left: 3px solid #0073aa;
+}
+
+.hvac-template-preview .preview-actions {
+    border-top: 1px solid #eee;
+    padding-top: 15px;
+    text-align: right;
+}
+
+.hvac-template-preview .preview-actions .button {
+    margin-left: 10px;
+}
+
+/* Overlay backdrop */
+.hvac-template-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 9999;
+    display: none;
+}
+
+/* Save template dialog styling */
+.hvac-save-template-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    z-index: 10001;
+    min-width: 450px;
+    max-width: 90vw;
+    max-height: 80vh;
+    overflow: hidden;
+}
+
+.hvac-save-template-dialog .dialog-header {
+    background: #0073aa;
+    color: white;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.hvac-save-template-dialog .dialog-header h4 {
+    margin: 0;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.hvac-save-template-dialog .dialog-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.hvac-save-template-dialog .dialog-close:hover {
+    background: rgba(255,255,255,0.2);
+}
+
+.hvac-save-template-dialog .dialog-content {
+    padding: 25px;
+    max-height: calc(80vh - 120px);
+    overflow-y: auto;
+}
+
+.hvac-save-template-dialog .form-group {
+    margin-bottom: 20px;
+}
+
+.hvac-save-template-dialog .form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+
+.hvac-save-template-dialog .template-input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.hvac-save-template-dialog .template-input:focus {
+    outline: none;
+    border-color: #0073aa;
+    box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
+}
+
+.hvac-save-template-dialog .checkbox-group {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.hvac-save-template-dialog .checkbox-group label {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    font-weight: normal;
+    margin-bottom: 0;
+    cursor: pointer;
+}
+
+.hvac-save-template-dialog .checkbox-group input[type="checkbox"] {
+    margin: 0;
+    width: auto;
+}
+
+.hvac-save-template-dialog .description {
+    color: #666;
+    font-size: 12px;
+    display: block;
+    margin-top: 5px;
+}
+
+.hvac-save-template-dialog .dialog-actions {
+    border-top: 1px solid #eee;
+    padding: 15px 25px;
+    text-align: right;
+}
+
+.hvac-save-template-dialog .dialog-actions .button {
+    margin-left: 10px;
+}
+
+/* Progressive disclosure styling */
+.hvac-advanced-options-toggle {
+    text-align: center;
+    margin: 30px 0;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 6px;
+    border: 1px dashed #ddd;
+}
+
+.hvac-advanced-options-toggle .toggle-advanced-options {
+    background: none;
+    border: none;
+    color: #0073aa;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    width: auto;
+    margin: 0 auto 5px;
+    padding: 8px 16px;
+    border-radius: 4px;
+    transition: all 0.3s;
+}
+
+.hvac-advanced-options-toggle .toggle-advanced-options:hover {
+    background: rgba(0,115,170,0.1);
+    color: #005a87;
+}
+
+.hvac-advanced-options-toggle .toggle-icon {
+    transition: transform 0.3s;
+    font-size: 18px;
+}
+
+.hvac-advanced-options-toggle.expanded .toggle-icon {
+    transform: rotate(180deg);
+}
+
+.hvac-advanced-options-toggle .toggle-description {
+    color: #666;
+    font-size: 13px;
+    display: block;
+    margin: 0;
+}
+
+/* Advanced fields styling */
+.advanced-field {
+    display: none;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: all 0.3s ease-in-out;
+}
+
+.advanced-field.show {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.advanced-fields-section {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 2px solid #e8f5e8;
+    position: relative;
+}
+
+.advanced-fields-section::before {
+    content: "Advanced Options";
+    position: absolute;
+    top: -12px;
+    left: 20px;
+    background: #fff;
+    color: #0073aa;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 0 10px;
+}
+
+/* Animation for advanced fields reveal */
+@keyframes slideInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.advanced-field.animate-in {
+    animation: slideInDown 0.3s ease-out forwards;
+}
+
+/* Auto-save indicator styling */
+.hvac-autosave-indicator {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9998;
+    padding: 10px 15px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    display: none;
+    transition: all 0.3s ease;
+}
+
+.hvac-autosave-indicator .dashicons {
+    font-size: 16px;
+    vertical-align: text-top;
+    margin-right: 5px;
+}
+
+.hvac-autosave-indicator.status-saving {
+    background: #fff3cd;
+    color: #856404;
+    border: 1px solid #ffeaa7;
+}
+
+.hvac-autosave-indicator.status-saved {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.hvac-autosave-indicator.status-error {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.hvac-autosave-indicator.status-draft-loaded {
+    background: #cce5ff;
+    color: #004085;
+    border: 1px solid #99ccff;
+}
+
+/* Saving animation */
+.hvac-autosave-indicator.status-saving .dashicons {
+    animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+    .hvac-autosave-indicator {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        text-align: center;
+        font-size: 13px;
+    }
+}
+
 /* Success message styling */
 .hvac-success-message {
     background: #d4edda;
@@ -311,65 +741,578 @@ if (class_exists('HVAC_Event_Form_Builder')) {
 
 <script>
 jQuery(document).ready(function($) {
-    // Template selector functionality
-    $('#hvac-template-selector').on('change', function() {
-        const templateId = $(this).val();
-        if (templateId) {
-            // AJAX call to load template data
-            $.ajax({
-                url: ajaxurl || '/wp-admin/admin-ajax.php',
-                type: 'POST',
-                data: {
-                    action: 'hvac_load_template_data',
-                    template_id: templateId,
-                    nonce: $('[name="hvac_event_form_nonce"]').val()
-                },
-                success: function(response) {
-                    if (response.success && response.data) {
-                        // Populate form fields with template data
-                        Object.keys(response.data).forEach(function(field) {
-                            const $field = $('[name="' + field + '"]');
-                            if ($field.length) {
-                                $field.val(response.data[field]);
-                            }
-                        });
-                    }
-                },
-                error: function() {
-                    console.log('Error loading template data');
-                }
+    // Enhanced template selector functionality
+    let templateData = {};
+
+    // Parse template data from form
+    try {
+        const $templateSelector = $('[name="event_template"]');
+        if ($templateSelector.length && $templateSelector.data('templates')) {
+            const templates = $templateSelector.data('templates');
+            templates.forEach(function(template) {
+                templateData[template.id] = template;
             });
         }
+    } catch (e) {
+        console.warn('Could not parse template data:', e);
+    }
+
+    // Template selector change handler
+    $(document).on('change', '[name="event_template"]', function() {
+        const templateId = $(this).val();
+
+        if (templateId && templateId !== '0') {
+            // Show template preview
+            hvacShowTemplatePreview(templateId);
+        } else {
+            // Hide preview if no template selected
+            hvacCloseTemplatePreview();
+        }
     });
 
-    // Auto-save functionality for long forms
-    let autoSaveTimeout;
-    $('input, textarea, select').on('change', function() {
-        clearTimeout(autoSaveTimeout);
-        autoSaveTimeout = setTimeout(function() {
-            // Auto-save form data to localStorage
-            const formData = $('form').serialize();
-            localStorage.setItem('hvac_event_draft', formData);
-        }, 2000);
+    // Add preview icon to template selector
+    $('[name="event_template"]').after(
+        '<span class="template-info-icon dashicons dashicons-info" title="Click to preview template"></span>'
+    );
+
+    // Preview icon click handler
+    $(document).on('click', '.template-info-icon', function() {
+        const templateId = $('[name="event_template"]').val();
+        if (templateId && templateId !== '0') {
+            hvacShowTemplatePreview(templateId);
+        }
     });
 
-    // Load draft data on page load
-    const draftData = localStorage.getItem('hvac_event_draft');
-    if (draftData && !$('[name="event_id"]').val()) {
-        // Only load draft for new events, not edits
-        const params = new URLSearchParams(draftData);
-        params.forEach(function(value, key) {
-            const $field = $('[name="' + key + '"]');
-            if ($field.length && !$field.val()) {
-                $field.val(value);
+    // Enhanced auto-save functionality for long forms
+    let autoSaveTimeout;
+    let autoSaveIndicator;
+
+    // Create auto-save indicator
+    function createAutoSaveIndicator() {
+        if ($('#hvac-autosave-indicator').length === 0) {
+            const indicator = $('<div id="hvac-autosave-indicator" class="hvac-autosave-indicator"></div>');
+            $('.hvac-event-form').prepend(indicator);
+            autoSaveIndicator = indicator;
+        }
+    }
+
+    // Update auto-save status
+    function updateAutoSaveStatus(status, message = '') {
+        if (!autoSaveIndicator) createAutoSaveIndicator();
+
+        const statusClasses = {
+            'saving': 'status-saving',
+            'saved': 'status-saved',
+            'error': 'status-error',
+            'draft-loaded': 'status-draft-loaded'
+        };
+
+        const statusMessages = {
+            'saving': '<span class="dashicons dashicons-backup"></span> Saving draft...',
+            'saved': '<span class="dashicons dashicons-yes"></span> Draft saved',
+            'error': '<span class="dashicons dashicons-warning"></span> Save failed - will retry',
+            'draft-loaded': '<span class="dashicons dashicons-restore"></span> Draft restored'
+        };
+
+        autoSaveIndicator
+            .removeClass(Object.values(statusClasses).join(' '))
+            .addClass(statusClasses[status])
+            .html(message || statusMessages[status])
+            .show();
+
+        if (status === 'saved') {
+            setTimeout(() => {
+                autoSaveIndicator.fadeOut();
+            }, 3000);
+        } else if (status === 'draft-loaded') {
+            setTimeout(() => {
+                autoSaveIndicator.fadeOut();
+            }, 5000);
+        }
+    }
+
+    // Enhanced auto-save function with error handling
+    function performAutoSave() {
+        const formData = {};
+        let hasContent = false;
+
+        // Collect form data more selectively
+        $('form input, form textarea, form select').each(function() {
+            const $field = $(this);
+            const name = $field.attr('name');
+            const value = $field.val();
+
+            if (name && value && value.toString().trim() &&
+                !name.includes('nonce') && !name.includes('_wp_http_referer') &&
+                name !== 'submit') {
+                formData[name] = value;
+                hasContent = true;
             }
         });
+
+        // Only save if there's meaningful content
+        if (!hasContent) return;
+
+        updateAutoSaveStatus('saving');
+
+        // Add metadata
+        const saveData = {
+            formData: formData,
+            timestamp: new Date().toISOString(),
+            url: window.location.href,
+            version: '2.0'
+        };
+
+        try {
+            localStorage.setItem('hvac_event_draft', JSON.stringify(saveData));
+            updateAutoSaveStatus('saved');
+        } catch (e) {
+            console.warn('Auto-save failed:', e);
+            updateAutoSaveStatus('error');
+
+            // Try to save with reduced data if quota exceeded
+            if (e.name === 'QuotaExceededError') {
+                try {
+                    // Save only essential fields
+                    const essentialData = {
+                        event_title: formData.event_title,
+                        event_description: formData.event_description,
+                        event_start_datetime: formData.event_start_datetime,
+                        timestamp: new Date().toISOString()
+                    };
+                    localStorage.setItem('hvac_event_draft_essential', JSON.stringify(essentialData));
+                } catch (e2) {
+                    console.error('Even essential data save failed:', e2);
+                }
+            }
+        }
     }
 
+    // Enhanced auto-save trigger with debouncing and intelligent timing
+    $('input, textarea, select').on('input change', function() {
+        clearTimeout(autoSaveTimeout);
+
+        const fieldType = this.type || this.tagName.toLowerCase();
+        let delay = 2000; // Default delay
+
+        // Adjust delay based on field type
+        if (fieldType === 'text' || fieldType === 'textarea') {
+            delay = 3000; // Longer delay for text fields to avoid saving on every keystroke
+        } else if (fieldType === 'select') {
+            delay = 1000; // Shorter delay for dropdowns
+        }
+
+        autoSaveTimeout = setTimeout(performAutoSave, delay);
+    });
+
+    // Enhanced draft recovery with user confirmation
+    function attemptDraftRecovery() {
+        const draftData = localStorage.getItem('hvac_event_draft');
+        const essentialDraft = localStorage.getItem('hvac_event_draft_essential');
+
+        if (!draftData && !essentialDraft) return;
+        if ($('[name="event_id"]').val()) return; // Don't restore for existing events
+
+        let parsedData;
+        let isEssentialOnly = false;
+
+        try {
+            if (draftData) {
+                parsedData = JSON.parse(draftData);
+            } else {
+                parsedData = JSON.parse(essentialDraft);
+                isEssentialOnly = true;
+            }
+        } catch (e) {
+            console.warn('Invalid draft data found, clearing...');
+            localStorage.removeItem('hvac_event_draft');
+            localStorage.removeItem('hvac_event_draft_essential');
+            return;
+        }
+
+        const draftAge = new Date() - new Date(parsedData.timestamp);
+        const hoursOld = Math.floor(draftAge / (1000 * 60 * 60));
+
+        // Show draft recovery dialog
+        const draftInfo = isEssentialOnly ? '(essential fields only)' : '(complete form)';
+        const message = `Found a draft from ${hoursOld} hours ago ${draftInfo}. Would you like to restore it?`;
+
+        if (confirm(message)) {
+            Object.entries(parsedData.formData || parsedData).forEach(([key, value]) => {
+                if (key === 'timestamp') return;
+
+                const $field = $(`[name="${key}"]`);
+                if ($field.length && !$field.val()) {
+                    $field.val(value).trigger('change');
+                }
+            });
+
+            updateAutoSaveStatus('draft-loaded',
+                `<span class="dashicons dashicons-restore"></span> Draft restored ${draftInfo}`);
+        }
+
+        // Clean up old drafts
+        if (hoursOld > 72) { // Remove drafts older than 3 days
+            localStorage.removeItem('hvac_event_draft');
+            localStorage.removeItem('hvac_event_draft_essential');
+        }
+    }
+
+    // Initialize enhanced auto-save
+    createAutoSaveIndicator();
+    setTimeout(attemptDraftRecovery, 500); // Delay to ensure form is ready
+
     // Clear draft on successful submission
     $('form').on('submit', function() {
         localStorage.removeItem('hvac_event_draft');
+        localStorage.removeItem('hvac_event_draft_essential');
+        if (autoSaveIndicator) {
+            autoSaveIndicator.hide();
+        }
     });
+
+    // Handle page visibility change (auto-save when user switches tabs)
+    $(document).on('visibilitychange', function() {
+        if (document.hidden) {
+            clearTimeout(autoSaveTimeout);
+            performAutoSave();
+        }
+    });
+});
+
+// Enhanced template preview functions
+function hvacShowTemplatePreview(templateId) {
+    const $ = jQuery;
+
+    // Create overlay if it doesn't exist
+    if (!$('.hvac-template-overlay').length) {
+        $('body').append('<div class="hvac-template-overlay"></div>');
+    }
+
+    // Show overlay
+    $('.hvac-template-overlay').show();
+
+    // Get template data via AJAX
+    $.ajax({
+        url: ajaxurl || '/wp-admin/admin-ajax.php',
+        type: 'POST',
+        data: {
+            action: 'hvac_get_template_preview',
+            template_id: templateId,
+            nonce: $('[name="hvac_event_form_nonce"]').val()
+        },
+        beforeSend: function() {
+            // Show loading state
+            $('#hvac-template-preview .template-name strong').text('Loading...');
+            $('#hvac-template-preview .template-description').text('');
+            $('#hvac-template-preview .template-category span').text('');
+            $('#hvac-template-preview .field-list').empty();
+        },
+        success: function(response) {
+            if (response.success && response.data) {
+                const template = response.data;
+
+                // Populate preview with template data
+                $('#hvac-template-preview .template-name strong').text(template.name);
+                $('#hvac-template-preview .template-description').text(template.description || 'No description available');
+                $('#hvac-template-preview .template-category span').text(template.category);
+
+                // Show field data
+                const $fieldList = $('#hvac-template-preview .field-list');
+                $fieldList.empty();
+
+                if (template.field_data && Object.keys(template.field_data).length > 0) {
+                    Object.keys(template.field_data).forEach(function(fieldName) {
+                        const fieldValue = template.field_data[fieldName];
+                        if (fieldValue && fieldValue.toString().trim()) {
+                            const displayName = fieldName.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                            $fieldList.append(
+                                '<li><strong>' + displayName + ':</strong> ' +
+                                String(fieldValue).substring(0, 100) +
+                                (String(fieldValue).length > 100 ? '...' : '') + '</li>'
+                            );
+                        }
+                    });
+                } else {
+                    $fieldList.append('<li><em>No pre-filled fields in this template</em></li>');
+                }
+
+                // Store template data for apply function
+                window.hvacCurrentTemplate = template;
+            }
+        },
+        error: function() {
+            $('#hvac-template-preview .template-name strong').text('Error loading template');
+            $('#hvac-template-preview .template-description').text('Could not load template data');
+        },
+        complete: function() {
+            // Show preview modal
+            $('#hvac-template-preview').show();
+        }
+    });
+}
+
+function hvacCloseTemplatePreview() {
+    const $ = jQuery;
+    $('#hvac-template-preview').hide();
+    $('.hvac-template-overlay').hide();
+    delete window.hvacCurrentTemplate;
+}
+
+function hvacApplyTemplate() {
+    const $ = jQuery;
+
+    if (!window.hvacCurrentTemplate) {
+        alert('No template data available');
+        return;
+    }
+
+    const template = window.hvacCurrentTemplate;
+
+    // Apply template field data to form
+    if (template.field_data) {
+        Object.keys(template.field_data).forEach(function(fieldName) {
+            const $field = $('[name="' + fieldName + '"]');
+            if ($field.length && template.field_data[fieldName]) {
+                $field.val(template.field_data[fieldName]).trigger('change');
+            }
+        });
+    }
+
+    // Show success message
+    if ($('.hvac-success-message').length) {
+        $('.hvac-success-message').remove();
+    }
+    $('.hvac-event-form').prepend(
+        '<div class="hvac-success-message">Template "' + template.name + '" applied successfully!</div>'
+    );
+
+    // Auto-remove success message after 5 seconds
+    setTimeout(function() {
+        $('.hvac-success-message').fadeOut();
+    }, 5000);
+
+    // Close preview
+    hvacCloseTemplatePreview();
+}
+
+// Close preview when clicking overlay
+jQuery(document).on('click', '.hvac-template-overlay', function() {
+    hvacCloseTemplatePreview();
+});
+
+// Escape key to close preview
+jQuery(document).on('keyup', function(e) {
+    if (e.key === "Escape") {
+        hvacCloseTemplatePreview();
+        hvacCloseSaveDialog();
+    }
+});
+
+// Save template dialog functions
+function hvacShowSaveTemplateDialog(event) {
+    event.preventDefault();
+    const $ = jQuery;
+
+    // Create overlay if it doesn't exist
+    if (!$('.hvac-template-overlay').length) {
+        $('body').append('<div class="hvac-template-overlay"></div>');
+    }
+
+    // Show overlay
+    $('.hvac-template-overlay').show();
+
+    // Clear previous form data
+    $('#template-name').val('');
+    $('#template-description').val('');
+    $('#template-category').val('');
+    $('#template-public').prop('checked', false);
+
+    // Show dialog
+    $('#hvac-save-template-dialog').show();
+}
+
+function hvacCloseSaveDialog() {
+    const $ = jQuery;
+    $('#hvac-save-template-dialog').hide();
+    $('.hvac-template-overlay').hide();
+}
+
+function hvacSaveAsTemplate() {
+    const $ = jQuery;
+
+    // Get form data
+    const templateName = $('#template-name').val().trim();
+    const templateDescription = $('#template-description').val().trim();
+    const templateCategory = $('#template-category').val();
+    const isPublic = $('#template-public').is(':checked');
+
+    // Basic validation
+    if (!templateName) {
+        alert('Please enter a template name');
+        $('#template-name').focus();
+        return;
+    }
+
+    if (!templateCategory) {
+        alert('Please select a category');
+        $('#template-category').focus();
+        return;
+    }
+
+    // Collect current form data
+    const formData = {};
+    $('form input, form textarea, form select').each(function() {
+        const $field = $(this);
+        const name = $field.attr('name');
+        const value = $field.val();
+
+        if (name && value && name !== 'template_name' && name !== 'template_description' &&
+            name !== 'template_category' && name !== 'template_public' &&
+            name !== 'hvac_event_form_nonce' && name !== '_wp_http_referer') {
+            formData[name] = value;
+        }
+    });
+
+    // Show saving state
+    $('.hvac-save-template-dialog .button-primary').prop('disabled', true).text('Saving...');
+
+    // Send AJAX request
+    $.ajax({
+        url: ajaxurl || '/wp-admin/admin-ajax.php',
+        type: 'POST',
+        data: {
+            action: 'hvac_save_template',
+            template_name: templateName,
+            template_description: templateDescription,
+            template_category: templateCategory,
+            is_public: isPublic ? 1 : 0,
+            field_data: formData,
+            nonce: $('[name="hvac_event_form_nonce"]').val()
+        },
+        success: function(response) {
+            if (response.success) {
+                // Show success message
+                if ($('.hvac-success-message').length) {
+                    $('.hvac-success-message').remove();
+                }
+                $('.hvac-event-form').prepend(
+                    '<div class="hvac-success-message">Template "' + templateName + '" saved successfully!</div>'
+                );
+
+                // Auto-remove success message after 5 seconds
+                setTimeout(function() {
+                    $('.hvac-success-message').fadeOut();
+                }, 5000);
+
+                // Close dialog
+                hvacCloseSaveDialog();
+
+                // Refresh template selector if it exists
+                if ($('[name="event_template"]').length) {
+                    // Add new template to selector
+                    const newOption = '<option value="' + response.data.template_id + '">' +
+                        templateName + ' (' + templateCategory.charAt(0).toUpperCase() + templateCategory.slice(1) + ')</option>';
+                    $('[name="event_template"]').append(newOption);
+                }
+            } else {
+                alert('Error saving template: ' + (response.data || 'Unknown error'));
+            }
+        },
+        error: function() {
+            alert('Error saving template. Please try again.');
+        },
+        complete: function() {
+            // Reset button state
+            $('.hvac-save-template-dialog .button-primary').prop('disabled', false).text('Save Template');
+        }
+    });
+}
+
+// Close save dialog when clicking overlay
+jQuery(document).on('click', '.hvac-template-overlay', function(e) {
+    if (e.target === this) {
+        hvacCloseTemplatePreview();
+        hvacCloseSaveDialog();
+    }
+});
+
+// Progressive disclosure functions
+function hvacToggleAdvancedOptions() {
+    const $ = jQuery;
+    const $toggle = $('.hvac-advanced-options-toggle');
+    const $toggleText = $('.toggle-text');
+    const $advancedSection = $('.advanced-fields-section');
+    const $advancedFields = $('.advanced-field');
+
+    const isExpanded = $toggle.hasClass('expanded');
+
+    if (isExpanded) {
+        // Hide advanced section
+        $advancedSection.slideUp(300, function() {
+            $advancedFields.removeClass('show animate-in');
+        });
+        $toggle.removeClass('expanded');
+        $toggleText.text('Show Advanced Options');
+
+        // Save state
+        localStorage.setItem('hvac_advanced_options_visible', 'false');
+    } else {
+        // Show advanced section
+        $toggle.addClass('expanded');
+        $toggleText.text('Hide Advanced Options');
+
+        $advancedSection.slideDown(300, function() {
+            // Show fields with staggered animation
+            let delay = 0;
+            $advancedFields.each(function(index) {
+                const $field = $(this);
+                setTimeout(function() {
+                    $field.addClass('show animate-in');
+                }, delay);
+                delay += 50;
+            });
+        });
+
+        // Save state
+        localStorage.setItem('hvac_advanced_options_visible', 'true');
+    }
+}
+
+// Initialize progressive disclosure on page load
+jQuery(document).ready(function($) {
+    // Wait for form to be fully rendered
+    setTimeout(function() {
+        // Check if advanced options should be visible (from localStorage)
+        const advancedVisible = localStorage.getItem('hvac_advanced_options_visible') === 'true';
+
+        // Add advanced section wrapper if there are advanced fields
+        if ($('.advanced-field').length > 0) {
+            // Group advanced fields together
+            let $firstAdvanced = $('.advanced-field').first();
+            let $advancedContainer = $('<div class="advanced-fields-section"></div>');
+
+            // Insert the container before the first advanced field
+            $firstAdvanced.before($advancedContainer);
+
+            // Move all advanced fields into the container
+            $('.advanced-field').each(function() {
+                $advancedContainer.append($(this));
+            });
+
+            if (advancedVisible) {
+                // Show advanced options without animation on page load
+                $('.hvac-advanced-options-toggle').addClass('expanded');
+                $('.toggle-text').text('Hide Advanced Options');
+                $('.advanced-field').addClass('show');
+                $advancedContainer.show();
+            } else {
+                // Hide advanced fields and container by default
+                $('.advanced-field').removeClass('show');
+                $advancedContainer.hide();
+            }
+        }
+    }, 100);
 });
 </script>