upskill-event-manager/docs/TEMPLATE-AND-TICKETING-REQUIREMENTS.md

# Template and Ticketing System Requirements

## Overview
This document outlines the requirements for integrating TEC ticketing system with the HVAC event creation form and updating the template system with real class templates.

## TEC Ticketing Integration Requirements

### Core Requirements
- Connect form to TEC plugins' ticketing system
- Same CRUD capabilities as regular TEC events
- Support for tickets with prices, season passes, RSVPs
- Mandatory collection of attendee information

### Trainer Limitations
- Trainers don't need to set SKUs (simplified interface)
- Each ticket should have mandatory registration collection:
  - First name
  - Last name
  - Fields from TEC Ticket Fieldset Post ID 6235

### Ticketing Features Needed
- Ticket creation with pricing
- Season pass support
- RSVP functionality
- Attendee information collection
- Integration with TEC core ticketing system

## Template System Updates

### Current Issues
- Modal popup not properly centered (positioned bottom-right, cropped)
- Sample templates need replacement with real class templates

### Required Templates
Based on cleaned template data from `docs/reference/EVENT_TEMPLATES_2025-09-25.md`:

1. **Transform Your HVAC Business with Manual J LiDAR**
   - Source: Post ID 1658
   - Type: Half-day introductory training
   - Category: Business/Technology
   - Default Time: 8:00 AM - 12:00 PM
   - Default Price: $99 per person

2. **Master Static Pressure & Airflow: The Keys to Profitable Service**
   - Source: Post ID 1661
   - Type: Half-day introductory training
   - Category: Technical/Performance
   - Default Time: 1:00 PM - 5:00 PM
   - Default Price: $99 per person

3. **Full-Day A/C and Heat Pump Commissioning & Diagnostics Mastery with measureQuick**
   - Source: Post ID 5295
   - Type: Full-day advanced training
   - Category: Technical/Diagnostics
   - Default Time: 8:00 AM - 5:00 PM
   - Default Price: $99 per person

4. **ACCA QI5 Quality Installation Certificates - VSP and VEO**
   - Source: Post ID 1663
   - Type: Full-day intermediate certification
   - Category: Certification/Standards
   - Default Time: 8:00 AM - 4:00 PM
   - Default Price: $129 per person

5. **Advanced Class: Building Science Meets HVAC Performance**
   - Source: Post ID 1665
   - Type: Three-day advanced training
   - Category: Advanced/Building Science
   - Default Time: 8:00 AM - 5:00 PM (3 days)
   - Default Price: $1200 per person

6. **measureQuick for Gas Heating**
   - Source: Post ID 5737
   - Type: Half-day product training
   - Category: Product Training/Gas Systems
   - Default Time: 8:00 AM - 2:00 PM
   - Default Price: $150 per person

### Template Data Structure
Each template should include:
- Title
- Description (from source post)
- Start time (time only, no date)
- End time (time only, no date)
- Default ticket structure
- Category classification
- Duration/type indicators

## Implementation Plan

### Phase 1: Analysis and Planning
1. Analyze current TEC integration points
2. Examine TEC Ticket Fieldset Post ID 6235 structure
3. Review existing form builder capabilities
4. Identify required modifications to HVAC_Event_Form_Builder

### Phase 2: TEC Ticketing Integration
1. Extend HVAC_Event_Form_Builder with TEC ticketing fields
2. Implement mandatory attendee information collection
3. Connect to TEC ticket creation API
4. Add ticket pricing and management fields
5. Integrate with TEC RSVP system

### Phase 3: Template System Fixes
1. Fix modal positioning CSS issues
2. Fetch real template data from specified post IDs
3. Create template data structure with proper categorization
4. Update template modal with real class information
5. Implement template application with ticket data

### Phase 4: Testing and Validation
1. Test TEC ticketing integration
2. Validate attendee information collection
3. Test template modal positioning
4. Verify template application functionality
5. End-to-end testing of event creation flow

## Technical Considerations

### TEC Integration Points
- TEC Core ticketing API
- TEC Community Events integration
- TEC Tickets Plus (if applicable)
- Custom field integration

### Database Requirements
- Integration with TEC events tables
- Ticket information storage
- Attendee data collection
- Custom field mappings

### UI/UX Considerations
- Simplified trainer interface
- Mandatory field validation
- Modal positioning fixes
- Responsive template selection

## Implementation Plan

### Analysis Results

#### Current Architecture
- **HVAC_Event_Form_Builder** (1296 lines): Core form builder with template integration
- **HVAC_TEC_Integration** (357 lines): URL routing and iframe embedding, lacks ticketing
- **page-tec-create-event.php**: Contains modal with hardcoded sample templates and positioning issues

#### Key Findings
1. **Template System**: Uses hardcoded JavaScript sample data instead of real posts
2. **TEC Integration**: Handles iframe embedding but lacks ticketing system integration
3. **Modal Issues**: CSS positioning causes bottom-right placement and cropping
4. **Missing Components**: No direct TEC ticketing API integration, no fieldset integration

### Phase-by-Phase Implementation

#### Phase 1: Modal Positioning Fix (Immediate - 30 minutes)
**Files to modify:**
- `templates/page-tec-create-event.php`

**Changes required:**
```css
/* Fix modal positioning in CSS section */
.template-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the modal */
    z-index: 10000;
    max-height: 80vh;
    overflow-y: auto;
}
```

#### Phase 2: Template System Updates (1-2 hours)
**Files to modify:**
- `templates/page-tec-create-event.php` (JavaScript section)
- `includes/class-hvac-event-form-builder.php` (template loading methods)

**Changes required:**
1. Replace hardcoded template JavaScript with real template data
2. Create template data structure from cleaned template reference
3. Update template loading to use standardized format
4. Add template categorization and filtering

**Template Data Format:**
```javascript
const templates = [
    {
        id: 'manual-j-lidar',
        title: 'Transform Your HVAC Business with Manual J LiDAR',
        category: 'Business/Technology',
        duration: 'Half Day',
        difficulty: 'Introductory',
        defaultTime: { start: '08:00', end: '12:00' },
        defaultPrice: 99,
        description: 'Master iPad-based Manual J calculations and measureQuick fundamentals...',
        requirements: 'No special Heating Cooling Equip. Needs, good Internet connection',
        maxStudents: null
    }
    // ... other templates
];
```

#### Phase 3: TEC Ticketing Integration (3-4 hours)
**Files to modify:**
- `includes/class-hvac-event-form-builder.php`
- `includes/class-hvac-tec-integration.php`
- Create new: `includes/class-hvac-tec-tickets.php`

**Changes required:**
1. **Analyze TEC Ticket Fieldset Post ID 6235**
   - Extract field definitions and requirements
   - Map mandatory fields: first name, last name, custom fields

2. **Extend HVAC_Event_Form_Builder with ticketing fields:**
   ```php
   // Add methods
   private function add_ticket_fields()
   private function add_tec_fieldset_integration()
   private function validate_ticket_requirements()
   ```

3. **Create TEC tickets integration class:**
   ```php
   class HVAC_TEC_Tickets {
       public function create_event_tickets($event_id, $ticket_data)
       public function get_fieldset_fields($fieldset_id = 6235)
       public function validate_attendee_data($attendee_data)
       private function integrate_with_tec_api()
   }
   ```

4. **Add ticket management UI elements:**
   - Ticket pricing fields
   - Season pass options
   - RSVP configuration
   - Attendee information requirements

#### Phase 4: Fieldset Integration (1-2 hours)
**Files to investigate:**
- TEC Ticket Fieldset Post ID 6235 structure
- TEC Community Events ticket field mapping

**Changes required:**
1. Extract fieldset field definitions from Post ID 6235
2. Create dynamic form field generation based on fieldset
3. Add validation for mandatory attendee information
4. Integrate with TEC ticket creation workflow

#### Phase 5: Testing and Validation (2-3 hours)
**Testing checklist:**
1. Modal positioning fixes across different screen sizes
2. Template selection and form population
3. TEC ticket creation with proper fieldset integration
4. Attendee information collection and validation
5. End-to-end event creation workflow
6. Integration with existing TEC Community Events

### Technical Implementation Details

#### Modal Fix Implementation
```css
/* Replace existing modal CSS with: */
.template-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    overflow-y: auto;
}
```

#### Template Data Integration
```php
// In HVAC_Event_Form_Builder
private function get_real_templates() {
    return [
        [
            'id' => 'manual-j-lidar',
            'title' => 'Transform Your HVAC Business with Manual J LiDAR',
            'description' => $this->get_template_description('manual-j-lidar'),
            'default_start_time' => '08:00',
            'default_end_time' => '12:00',
            'default_price' => 99,
            'category' => 'Business/Technology',
            'difficulty' => 'Introductory',
            'duration' => 'Half Day'
        ]
        // ... other templates
    ];
}
```

#### TEC Ticketing Integration
```php
// New class: HVAC_TEC_Tickets
class HVAC_TEC_Tickets {

    public function create_tickets_for_event($event_id, $tickets_data) {
        foreach ($tickets_data as $ticket) {
            $ticket_id = $this->create_tec_ticket($event_id, $ticket);
            $this->add_fieldset_requirements($ticket_id, 6235);
        }
    }

    private function get_tec_fieldset_fields($fieldset_id) {
        // Extract field definitions from TEC Ticket Fieldset
        $fieldset_post = get_post($fieldset_id);
        return $this->parse_fieldset_structure($fieldset_post);
    }
}
```

### Priority Order
1. **IMMEDIATE**: Fix modal positioning (30 minutes)
2. **HIGH**: Replace sample templates with real data (1-2 hours)
3. **MEDIUM**: Implement TEC ticketing integration (3-4 hours)
4. **LOW**: Add fieldset integration (1-2 hours)
5. **FINAL**: Comprehensive testing (2-3 hours)

### Risk Assessment
- **Low Risk**: Modal positioning fix, template data replacement
- **Medium Risk**: TEC ticketing API integration (requires understanding TEC internals)
- **High Risk**: Fieldset integration (depends on TEC Ticket Fieldset structure)

### Success Metrics
1. Modal centers properly on all screen sizes
2. Real templates load with correct data and formatting
3. TEC tickets can be created with mandatory attendee information
4. Form maintains existing functionality while adding new features
5. Integration works seamlessly with existing TEC Community Events

## Additional UI/UX Enhancement Requirements (September 2025)

### Form Layout Improvements

#### Field Grouping and Responsive Design
- **Same Row Fields (Desktop) → Column Layout (Mobile):**
  - Ticket Price ($) & Ticket Capacity
  - Ticket Sales Start & Ticket Sales End
  - Start Date & Time & End Date & Time

#### Text Editor Enhancement
- **Event Description Field:**
  - Increase size to 3x current dimensions
  - Add rich text editing toolbar (bold, italic, lists, links)
  - Support for formatted text input

#### Form Field Issues
- **Missing Label Issues:** Fix blank/unlabeled form sections:
  - Blank box above "Enable Ticketing"
  - Blank box above "Ticket Name"
  - Two blank boxes above "Start Date & Time"

### New Feature Requirements

#### Featured Image Upload
- **Image Upload Component:**
  - File upload interface with drag-and-drop
  - Image preview functionality
  - Replace/remove image capabilities
  - Proper image optimization and sizing

#### Virtual Event Capability
- **Virtual Event Toggle:**
  - Enable/disable virtual event mode
  - When enabled, show virtual event specific fields
  - Integration with existing venue system

#### Enhanced Toggle Controls
- **Interactive Toggles (show/hide subsections):**
  - Virtual Event toggle → Virtual event configuration fields
  - Enable RSVP toggle → RSVP configuration options
  - Enable Ticketing toggle → Ticketing subsection fields

#### Advanced Selection Components

##### Multi-Select with Dynamic Search
- **Organizer Field:**
  - Text input with autocomplete
  - Dynamic dropdown showing all available options on focus
  - Multi-select capability (up to 3 items)
  - "Create New Organizer" option → Modal popup with organizer creation form

- **Categories Field (New):**
  - Same functionality as Organizer field
  - Text input with autocomplete search
  - Multi-select up to 3 categories
  - "Create New Category" option → Modal popup for category creation

##### Single-Select with Search
- **Venue Field Enhancement:**
  - Convert to searchable single-select
  - Text input with autocomplete
  - Dynamic dropdown on focus
  - Single selection only
  - "Create New Venue" option → Modal popup with venue creation form

#### Modal Creation Forms
- **New Organizer Modal:**
  - Name, email, phone, organization fields
  - Save and apply to event functionality

- **New Category Modal:**
  - Category name, description, parent category
  - Save and apply to event functionality

- **New Venue Modal:**
  - Venue name, address, capacity, facilities
  - Save and apply to event functionality

### Implementation Priority
1. **Phase 1:** Fix existing form issues (missing labels, layout)
2. **Phase 2:** Implement responsive field grouping
3. **Phase 3:** Add rich text editor and featured image upload
4. **Phase 4:** Implement toggle controls and virtual event features
5. **Phase 5:** Create advanced selection components and modal forms

### Technical Considerations
- Maintain existing security measures and validation
- Ensure mobile responsiveness across all new components
- Integrate seamlessly with current TEC ticketing system
- Preserve existing template and autosave functionality
- Follow WordPress coding standards and accessibility guidelines

---
*Implementation plan generated during TEC integration and template system improvement project*
*Updated September 2025 with comprehensive UI/UX enhancement requirements*