<?php
/**
 * Template Name: Find Training
 *
 * Google Maps-style full-screen layout with left sidebar panel
 * for trainer directory and compact filter toolbar.
 *
 * @package HVAC_Community_Events
 * @since 2.2.0
 */

defined('ABSPATH') || exit;
define('HVAC_IN_PAGE_TEMPLATE', true);

get_header();

// Get page handler instance
$find_training = HVAC_Find_Training_Page::get_instance();
$filter_options = $find_training->get_filter_options();
$api_key_configured = $find_training->is_api_key_configured();
?>

<div class="hvac-find-training-page">
    <!-- Skip link for accessibility -->
    <a href="#hvac-event-grid" class="hvac-skip-link">Skip to event results</a>

    <!-- Compact Filter Bar -->
    <div class="hvac-filter-bar" role="search" aria-label="Filter events, trainers, and venues">
        <div class="hvac-filter-bar-inner">
            <!-- Search -->
            <div class="hvac-filter-item hvac-filter-search">
                <span class="dashicons dashicons-search" aria-hidden="true"></span>
                <input type="text" id="hvac-training-search" placeholder="Search events..." aria-label="Search events">
            </div>

            <!-- Info Button -->
            <button type="button" id="hvac-info-btn" class="hvac-info-btn" aria-label="How to use this page">
                <span class="dashicons dashicons-info-outline" aria-hidden="true"></span>
            </button>

            <!-- Filter Dropdowns (hidden on mobile, shown in panel) -->
            <div class="hvac-filter-dropdowns">
                <select id="hvac-filter-state" class="hvac-filter-select" aria-label="Filter by state">
                    <option value="">All States</option>
                    <?php foreach ($filter_options['states'] as $state): ?>
                        <option value="<?php echo esc_attr($state); ?>"><?php echo esc_html($state); ?></option>
                    <?php endforeach; ?>
                </select>

                <select id="hvac-filter-certification" class="hvac-filter-select" aria-label="Filter by certification">
                    <option value="">All Certifications</option>
                    <?php foreach ($filter_options['certifications'] as $cert): ?>
                        <option value="<?php echo esc_attr($cert); ?>"><?php echo esc_html($cert); ?></option>
                    <?php endforeach; ?>
                </select>

                <select id="hvac-filter-format" class="hvac-filter-select" aria-label="Filter by training format">
                    <option value="">All Formats</option>
                    <?php foreach ($filter_options['training_formats'] as $format): ?>
                        <option value="<?php echo esc_attr($format); ?>"><?php echo esc_html($format); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Near Me Button -->
            <button type="button" id="hvac-near-me-btn" class="hvac-near-me-btn">
                <span class="dashicons dashicons-location-alt" aria-hidden="true"></span>
                <span class="hvac-btn-text">Near Me</span>
            </button>

            <!-- Include Past Events Checkbox -->
            <label class="hvac-filter-checkbox">
                <input type="checkbox" id="hvac-include-past">
                <span>Include Past</span>
            </label>

            <!-- Clear Filters -->
            <button type="button" class="hvac-clear-filters" style="display: none;">
                Clear
            </button>

            <!-- Mobile Filter Toggle -->
            <button type="button"
                    class="hvac-mobile-filter-toggle"
                    aria-expanded="false"
                    aria-controls="hvac-mobile-filter-panel">
                <span class="dashicons dashicons-filter" aria-hidden="true"></span>
                <span class="hvac-btn-text">Filters</span>
            </button>
        </div>

        <!-- Active Filters Chips -->
        <div class="hvac-active-filters" aria-live="polite"></div>

        <!-- Mobile Filter Panel (hidden by default) -->
        <div id="hvac-mobile-filter-panel" class="hvac-mobile-filter-panel" hidden>
            <div class="hvac-mobile-filter-group">
                <label for="hvac-filter-state-mobile">State / Province</label>
                <select id="hvac-filter-state-mobile" class="hvac-filter-select" aria-label="Filter by state">
                    <option value="">All States</option>
                    <?php foreach ($filter_options['states'] as $state): ?>
                        <option value="<?php echo esc_attr($state); ?>"><?php echo esc_html($state); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="hvac-mobile-filter-group">
                <label for="hvac-filter-certification-mobile">Certification</label>
                <select id="hvac-filter-certification-mobile" class="hvac-filter-select" aria-label="Filter by certification">
                    <option value="">All Certifications</option>
                    <?php foreach ($filter_options['certifications'] as $cert): ?>
                        <option value="<?php echo esc_attr($cert); ?>"><?php echo esc_html($cert); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="hvac-mobile-filter-group">
                <label for="hvac-filter-format-mobile">Training Format</label>
                <select id="hvac-filter-format-mobile" class="hvac-filter-select" aria-label="Filter by training format">
                    <option value="">All Formats</option>
                    <?php foreach ($filter_options['training_formats'] as $format): ?>
                        <option value="<?php echo esc_attr($format); ?>"><?php echo esc_html($format); ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="hvac-mobile-filter-group">
                <label class="hvac-filter-checkbox">
                    <input type="checkbox" id="hvac-include-past-mobile">
                    <span>Include Past Events</span>
                </label>
            </div>
        </div>
    </div>

    <!-- Main Content: Sidebar + Map -->
    <div class="hvac-map-layout">
        <!-- Left Sidebar -->
        <aside class="hvac-sidebar" role="region" aria-label="Training directory">
            <div class="hvac-sidebar-header">
                <!-- Tab Navigation -->
                <div class="hvac-sidebar-tabs" role="tablist" aria-label="Browse by category">
                    <button role="tab" class="hvac-tab active" data-tab="events" aria-selected="true" aria-controls="hvac-panel-events">
                        <label class="hvac-marker-toggle hvac-marker-toggle-event" title="Show events on map" onclick="event.stopPropagation()">
                            <input type="checkbox" id="hvac-show-events" checked>
                            <span class="hvac-marker-checkbox"></span>
                        </label>
                        Events (<span data-count="events">0</span>)
                    </button>
                    <button role="tab" class="hvac-tab" data-tab="trainers" aria-selected="false" aria-controls="hvac-panel-trainers">
                        <label class="hvac-marker-toggle hvac-marker-toggle-trainer" title="Show trainers on map" onclick="event.stopPropagation()">
                            <input type="checkbox" id="hvac-show-trainers" checked>
                            <span class="hvac-marker-checkbox"></span>
                        </label>
                        Trainers (<span data-count="trainers">0</span>)
                    </button>
                    <button role="tab" class="hvac-tab" data-tab="venues" aria-selected="false" aria-controls="hvac-panel-venues">
                        <label class="hvac-marker-toggle hvac-marker-toggle-venue" title="Show venues on map" onclick="event.stopPropagation()">
                            <input type="checkbox" id="hvac-show-venues" checked>
                            <span class="hvac-marker-checkbox"></span>
                        </label>
                        Venues (<span data-count="venues">0</span>)
                    </button>
                </div>

                <!-- Mobile collapse toggle -->
                <button type="button"
                        class="hvac-sidebar-toggle"
                        aria-expanded="true"
                        aria-controls="hvac-sidebar-content"
                        aria-label="Toggle directory list">
                    <span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
                </button>
            </div>

            <div id="hvac-sidebar-content" class="hvac-sidebar-content">
                <!-- Events Panel -->
                <div role="tabpanel" id="hvac-panel-events" class="hvac-tab-panel active" aria-labelledby="tab-events">
                    <div id="hvac-event-grid" class="hvac-item-list">
                        <div class="hvac-grid-loading">
                            <span class="dashicons dashicons-update-alt hvac-spin" aria-hidden="true"></span>
                            Loading events...
                        </div>
                    </div>
                </div>

                <!-- Trainers Panel -->
                <div role="tabpanel" id="hvac-panel-trainers" class="hvac-tab-panel" aria-labelledby="tab-trainers" hidden>
                    <div id="hvac-trainer-grid" class="hvac-item-list"></div>
                </div>

                <!-- Venues Panel -->
                <div role="tabpanel" id="hvac-panel-venues" class="hvac-tab-panel" aria-labelledby="tab-venues" hidden>
                    <div id="hvac-venue-grid" class="hvac-item-list"></div>
                </div>

                <!-- Load More Button -->
                <div class="hvac-load-more-wrapper" style="display: none;">
                    <button type="button" id="hvac-load-more" class="hvac-btn-secondary">
                        Load More
                    </button>
                </div>

                <!-- CTA -->
                <div class="hvac-sidebar-cta">
                    <p>Want to be listed in our directory?</p>
                    <a href="<?php echo esc_url(site_url('/trainer/registration/')); ?>" class="hvac-btn-primary hvac-btn-small">
                        Become A Trainer
                    </a>
                </div>
            </div>
        </aside>

        <!-- Map Container -->
        <div class="hvac-map-container" role="region" aria-label="Training locations map">
            <div id="hvac-training-map" class="hvac-google-map">
                <?php if (!$api_key_configured): ?>
                    <div class="hvac-map-error">
                        <span class="dashicons dashicons-warning" aria-hidden="true"></span>
                        <p><strong>Map Configuration Required</strong></p>
                        <p>The Google Maps API key is not configured. <?php if (current_user_can('manage_options')): ?>Please configure it in <a href="<?php echo admin_url('admin.php?page=hvac-trainer-profile-settings'); ?>">Trainer Profile Settings</a>.<?php else: ?>Please contact the site administrator.<?php endif; ?></p>
                    </div>
                <?php else: ?>
                    <div class="hvac-map-loading">
                        <span class="dashicons dashicons-location" aria-hidden="true"></span>
                        <p>Loading map...</p>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Reset Map View Button -->
            <button type="button" id="hvac-reset-map" class="hvac-reset-map-btn" aria-label="Reset map view" title="Reset map view">
                <span class="dashicons dashicons-image-rotate" aria-hidden="true"></span>
            </button>

            <!-- Map Legend Overlay -->
            <div class="hvac-map-legend">
                <div class="hvac-legend-item">
                    <span class="hvac-legend-marker hvac-legend-trainer" aria-hidden="true"></span>
                    <span>Trainer</span>
                </div>
                <div class="hvac-legend-item">
                    <span class="hvac-legend-marker hvac-legend-venue" aria-hidden="true"></span>
                    <span>Venue</span>
                </div>
                <div class="hvac-legend-item">
                    <span class="hvac-legend-marker hvac-legend-event" aria-hidden="true"></span>
                    <span>Event</span>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Trainer Profile Modal -->
<div id="hvac-trainer-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="trainer-modal-title">
    <div class="hvac-modal-overlay"></div>
    <div class="hvac-modal-content">
        <div class="hvac-modal-loading">
            <span class="dashicons dashicons-update-alt hvac-spin" aria-hidden="true"></span>
            Loading...
        </div>
        <div class="hvac-modal-body"></div>
    </div>
</div>

<!-- Venue Info Modal -->
<div id="hvac-venue-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="venue-modal-title">
    <div class="hvac-modal-overlay"></div>
    <div class="hvac-modal-content hvac-venue-modal-content">
        <div class="hvac-venue-modal-header">
            <h2 id="venue-modal-title"></h2>
            <button class="hvac-modal-close" aria-label="Close modal">&times;</button>
        </div>
        <div class="hvac-venue-modal-body">
            <p class="hvac-venue-address"></p>
            <p class="hvac-venue-phone"></p>
            <p class="hvac-venue-capacity"></p>

            <div class="hvac-venue-description"></div>

            <!-- Equipment Badges -->
            <div class="hvac-venue-equipment" style="display: none;">
                <h4>Equipment</h4>
                <div class="hvac-badge-list hvac-equipment-badges"></div>
            </div>

            <!-- Amenities Badges -->
            <div class="hvac-venue-amenities" style="display: none;">
                <h4>Amenities</h4>
                <div class="hvac-badge-list hvac-amenities-badges"></div>
            </div>

            <!-- Upcoming Events -->
            <div class="hvac-venue-events">
                <h4>Upcoming Events</h4>
                <ul class="hvac-venue-events-list"></ul>
                <p class="hvac-venue-no-events" style="display: none;">No upcoming events scheduled.</p>
            </div>

            <!-- Actions -->
            <div class="hvac-venue-actions">
                <a href="#" class="hvac-venue-directions hvac-btn-secondary" target="_blank" rel="noopener">
                    <span class="dashicons dashicons-location" aria-hidden="true"></span>
                    Get Directions
                </a>
            </div>

            <!-- Contact Form -->
            <div class="hvac-venue-contact-section">
                <h4>Contact This Training Lab</h4>
                <form class="hvac-venue-contact-form" data-venue-id="">
                    <div class="hvac-form-row">
                        <div class="hvac-form-group">
                            <label for="venue-contact-first-name">First Name <span class="required">*</span></label>
                            <input type="text" id="venue-contact-first-name" name="first_name" required>
                        </div>
                        <div class="hvac-form-group">
                            <label for="venue-contact-last-name">Last Name <span class="required">*</span></label>
                            <input type="text" id="venue-contact-last-name" name="last_name" required>
                        </div>
                    </div>
                    <div class="hvac-form-row">
                        <div class="hvac-form-group">
                            <label for="venue-contact-email">Email <span class="required">*</span></label>
                            <input type="email" id="venue-contact-email" name="email" required>
                        </div>
                        <div class="hvac-form-group">
                            <label for="venue-contact-phone">Phone</label>
                            <input type="tel" id="venue-contact-phone" name="phone">
                        </div>
                    </div>
                    <div class="hvac-form-group">
                        <label for="venue-contact-company">Company</label>
                        <input type="text" id="venue-contact-company" name="company">
                    </div>
                    <div class="hvac-form-group">
                        <label for="venue-contact-message">Message</label>
                        <textarea id="venue-contact-message" name="message" rows="4" placeholder="Tell us about your training needs..."></textarea>
                    </div>
                    <div class="hvac-form-group hvac-recaptcha-wrapper">
                        <div class="g-recaptcha" data-sitekey="<?php echo esc_attr(class_exists('HVAC_Recaptcha') ? HVAC_Recaptcha::SITE_KEY : ''); ?>"></div>
                    </div>
                    <button type="submit" class="hvac-btn-primary">Send Message</button>
                </form>
                <div class="hvac-form-success" style="display: none;">
                    <span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
                    <p>Your message has been sent! The training lab will be in touch soon.</p>
                </div>
                <div class="hvac-form-error" style="display: none;">
                    <span class="dashicons dashicons-warning" aria-hidden="true"></span>
                    <p>There was a problem sending your message. Please try again.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Info Modal -->
<div id="hvac-info-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="info-modal-title">
    <div class="hvac-modal-overlay"></div>
    <div class="hvac-modal-content hvac-info-modal-content">
        <div class="hvac-info-modal-header">
            <h2 id="info-modal-title">Find Training Near You</h2>
            <button class="hvac-modal-close" aria-label="Close modal">&times;</button>
        </div>
        <div class="hvac-info-modal-body">
            <section class="hvac-info-section">
                <h3>What is Upskill HVAC?</h3>
                <p>Upskill HVAC is a community of certified trainers and training facilities dedicated to advancing skills in the HVAC industry. Our platform connects technicians with professional training opportunities across the country.</p>
            </section>

            <section class="hvac-info-section">
                <h3>How to Use This Page</h3>
                <ul class="hvac-info-list">
                    <li><strong>Browse by Category:</strong> Use the tabs above the list to switch between Trainers, Venues, and Events</li>
                    <li><strong>Search:</strong> Type in the search bar to filter results within the current tab</li>
                    <li><strong>Filter:</strong> Use the dropdown filters to narrow by state, certification, or format</li>
                    <li><strong>Near Me:</strong> Click the "Near Me" button to find training options close to your location</li>
                    <li><strong>Map Markers:</strong> Click on any marker to see details, or hover to preview</li>
                    <li><strong>Toggle Visibility:</strong> Use the colored dots in the header to show/hide marker types on the map</li>
                </ul>
            </section>

            <section class="hvac-info-section">
                <h3>Map Legend</h3>
                <div class="hvac-info-legend">
                    <div class="hvac-info-legend-item">
                        <span class="hvac-legend-marker hvac-legend-trainer"></span>
                        <div>
                            <strong>Trainer</strong>
                            <p>Certified HVAC trainers who conduct training sessions</p>
                        </div>
                    </div>
                    <div class="hvac-info-legend-item">
                        <span class="hvac-legend-marker hvac-legend-venue"></span>
                        <div>
                            <strong>Training Lab</strong>
                            <p>measureQuick Approved facilities with professional equipment</p>
                        </div>
                    </div>
                    <div class="hvac-info-legend-item">
                        <span class="hvac-legend-marker hvac-legend-event"></span>
                        <div>
                            <strong>Event</strong>
                            <p>Scheduled training sessions you can register for</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<?php get_footer(); ?>
