upskill-event-manager/templates/page-tec-create-event.php

<?php
/**
 * Template Name: HVAC Create Event
 * Description: Native HVAC event creation using HVAC_Event_Form_Builder
 */

// Define constant to indicate we are in a page template
define('HVAC_IN_PAGE_TEMPLATE', true);

// Check if user is logged in and has trainer capabilities
if (!is_user_logged_in()) {
    wp_redirect(home_url('/training-login/'));
    exit;
}

$user = wp_get_current_user();
if (!array_intersect(['hvac_trainer', 'hvac_master_trainer'], $user->roles)) {
    wp_die(__('Access denied. Trainer role required.', 'hvac-community-events'));
}

get_header();

// Initialize HVAC Event Form Builder
if (class_exists('HVAC_Event_Form_Builder')) {
    $form_builder = new HVAC_Event_Form_Builder('hvac_event_form', true);
    $form_builder->create_event_form([
        'include_template_selector' => true,
        'include_venue_fields' => true,
        'include_organizer_fields' => true,
        'include_cost_fields' => true,
        'include_capacity_fields' => true,
        'include_datetime_fields' => true,
        'template_categories' => ['general', 'training', 'workshop', 'certification']
    ]);
}
?>

<style>
.hvac-create-event-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.hvac-page-header {
    margin-bottom: 30px;
    text-align: center;
}

.hvac-page-header h1 {
    color: #1a1a1a;
    font-size: 32px;
    margin-bottom: 10px;
}

.hvac-page-description {
    color: #666;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Quick action buttons */
.hvac-quick-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

.hvac-quick-actions .button {
    padding: 10px 20px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.hvac-quick-actions .button:hover {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

.hvac-quick-actions .button.active {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

/* Native HVAC form styling */
.hvac-event-form {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.hvac-event-form .form-section {
    margin-bottom: 30px;
}

.hvac-event-form .form-section h3 {
    color: #0073aa;
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0073aa;
}

.hvac-event-form .form-group {
    margin-bottom: 20px;
}

.hvac-event-form .form-group label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.hvac-event-form .form-group label .required {
    color: #dc3232;
}

.hvac-event-form input[type="text"],
.hvac-event-form input[type="email"],
.hvac-event-form input[type="url"],
.hvac-event-form input[type="tel"],
.hvac-event-form input[type="number"],
.hvac-event-form input[type="datetime-local"],
.hvac-event-form textarea,
.hvac-event-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.hvac-event-form input:focus,
.hvac-event-form textarea:focus,
.hvac-event-form select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
}

.hvac-event-form textarea {
    min-height: 120px;
    resize: vertical;
}

.hvac-event-form .form-submit {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.hvac-event-form input[type="submit"] {
    background: #0073aa;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.hvac-event-form input[type="submit"]:hover {
    background: #005a87;
}

/* Template selector styling */
.hvac-template-selector {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
}

.hvac-template-selector h4 {
    margin-top: 0;
    color: #495057;
    font-size: 16px;
}

/* Success message styling */
.hvac-success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    color: #155724;
}

/* Error message styling */
.hvac-error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    color: #721c24;
}

/* Phase 2 Integration Notice */
.hvac-phase2-notice {
    background: #e8f5e8;
    border: 2px solid #4CAF50;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
}

.hvac-phase2-notice strong {
    color: #2e7d2e;
    font-size: 16px;
}

.hvac-phase2-notice p {
    margin: 8px 0 0 0;
    color: #2e7d2e;
}

/* Responsive design */
@media (max-width: 768px) {
    .hvac-create-event-wrapper {
        padding: 15px;
    }

    .hvac-event-form {
        padding: 20px;
    }

    .hvac-quick-actions {
        flex-direction: column;
        align-items: center;
    }

    .hvac-quick-actions .button {
        width: 200px;
        text-align: center;
    }
}
</style>

<div class="hvac-create-event-wrapper">
    <?php
    // Display trainer navigation menu
    if (class_exists('HVAC_Menu_System')) {
        HVAC_Menu_System::instance()->render_trainer_menu();
    }

    // Display breadcrumbs
    if (class_exists('HVAC_Breadcrumbs')) {
        HVAC_Breadcrumbs::instance()->render();
    }
    ?>

    <div class="hvac-page-header">
        <h1>Create New Training Event</h1>
        <p class="hvac-page-description">
            Share your expertise by creating a training event using our native HVAC event management system.
        </p>
    </div>

    <!-- Phase 2 Integration Success Notice -->
    <div class="hvac-phase2-notice">
        <strong>✓ Phase 2 TEC Integration Complete</strong>
        <p>Now using native HVAC Event Form Builder with template system and TEC Core integration</p>
    </div>

    <div class="hvac-quick-actions">
        <a href="<?php echo home_url('/trainer/events/my-events/'); ?>" class="button">My Events</a>
        <a href="<?php echo home_url('/trainer/events/create/'); ?>" class="button active">Create Event</a>
        <a href="<?php echo home_url('/trainer/dashboard/'); ?>" class="button">Dashboard</a>
    </div>

    <div class="hvac-event-form">
        <?php
        // Display any success/error messages
        if (isset($_GET['success'])) {
            echo '<div class="hvac-success-message">Event created successfully!</div>';
        }
        if (isset($_GET['error'])) {
            echo '<div class="hvac-error-message">Error creating event. Please try again.</div>';
        }

        // Render the native HVAC event creation form
        if (isset($form_builder)) {
            echo $form_builder->render();
        } else {
            echo '<div class="hvac-error-message">';
            echo '<p><strong>Form Builder Not Available</strong></p>';
            echo '<p>The HVAC Event Form Builder is not loaded. Please ensure the plugin is properly activated.</p>';
            echo '<p><a href="' . esc_url(home_url('/trainer/dashboard/')) . '" class="button">Return to Dashboard</a></p>';
            echo '</div>';
        }
        ?>
    </div>
</div>

<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');
                }
            });
        }
    });

    // 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);
    });

    // 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);
            }
        });
    }

    // Clear draft on successful submission
    $('form').on('submit', function() {
        localStorage.removeItem('hvac_event_draft');
    });
});
</script>

<?php
get_footer();
?>