<?php
/**
 * Template Name: Master Edit Trainer Profile
 * Description: Template for master trainers to edit any trainer's profile
 */

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

get_header();

// Check master trainer permissions
$user = wp_get_current_user();
if (!in_array('hvac_master_trainer', $user->roles) && !current_user_can('manage_options')) {
    wp_die('Access denied. Master trainer privileges required.');
}

// Render master trainer navigation
if (class_exists('HVAC_Master_Menu_System')) {
    $master_menu = HVAC_Master_Menu_System::instance();
    $master_menu->render_master_menu();
}

// Render breadcrumbs
if (class_exists('HVAC_Breadcrumbs')) {
    echo HVAC_Breadcrumbs::instance()->render_breadcrumbs();
}

echo '<div class="hvac-page-wrapper hvac-master-edit-trainer-profile-page">';
echo '<div class="container">';
?>

<div class="hvac-master-edit-trainer-profile">
    <h1 class="page-title">Edit Trainer Profile</h1>
    
    <div class="trainer-selector">
        <label for="select-trainer">Select Trainer to Edit:</label>
        <select id="select-trainer" class="hvac-trainer-select">
            <option value="">-- Select a Trainer --</option>
            <?php
            // Get all users with hvac_trainer role
            $trainers = get_users(array(
                'role__in' => array('hvac_trainer', 'hvac_master_trainer'),
                'orderby' => 'display_name',
                'order' => 'ASC'
            ));
            
            foreach ($trainers as $trainer) {
                $company = get_user_meta($trainer->ID, 'business_name', true);
                $display = $trainer->display_name;
                if ($company) {
                    $display .= ' - ' . $company;
                }
                echo '<option value="' . esc_attr($trainer->ID) . '">' . esc_html($display) . '</option>';
            }
            ?>
        </select>
    </div>
    
    <div id="trainer-profile-edit-form" style="display: none;">
        <!-- Profile edit form will be loaded here via AJAX -->
    </div>
    
    <script>
    // Make currentTrainerId globally accessible
    window.currentTrainerId = null;
    
    jQuery(document).ready(function($) {
        
        $('#select-trainer').on('change', function() {
            var trainerId = $(this).val();
            if (!trainerId) {
                $('#trainer-profile-edit-form').hide();
                window.currentTrainerId = null;
                return;
            }
            
            window.currentTrainerId = trainerId;
            
            // Load trainer profile for editing
            $('#trainer-profile-edit-form').html('<p>Loading trainer profile...</p>').show();
            
            // In a real implementation, this would make an AJAX call
            // For now, show a placeholder form
            var formHtml = `
                <h2>Editing Profile: <span id="trainer-name"></span></h2>
                
                <form class="hvac-trainer-profile-form">
                    <div class="form-section">
                        <h3>Personal Information</h3>
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" name="first_name" />
                        </div>
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" name="last_name" />
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" />
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input type="tel" name="phone" />
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h3>Business Information</h3>
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" name="business_name" />
                        </div>
                        <div class="form-group">
                            <label>Business Type</label>
                            <select name="business_type">
                                <option>Association</option>
                                <option>Consultant</option>
                                <option>Service Company</option>
                                <option>Distributor or Supplier</option>
                                <option>Educational Institution</option>
                                <option>Training Organization</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h3>Certifications Management</h3>
                        <div class="certifications-manager">
                            <div class="certifications-list" id="certifications-list">
                                <!-- Existing certifications will be loaded here -->
                            </div>
                            
                            <button type="button" class="button add-certification-btn" id="add-certification-btn">
                                <span class="dashicons dashicons-plus"></span> Add New Certification
                            </button>
                        </div>
                    </div>
                    
                    <!-- Certification Form Modal -->
                    <div id="certification-modal" class="hvac-modal" style="display: none;">
                        <div class="hvac-modal-content">
                            <div class="hvac-modal-header">
                                <h3 id="certification-modal-title">Add New Certification</h3>
                                <button type="button" class="hvac-modal-close" id="close-certification-modal">
                                    <span class="dashicons dashicons-no"></span>
                                </button>
                            </div>
                            
                            <form id="certification-form" class="hvac-certification-form">
                                <input type="hidden" id="certification-id" name="certification_id" value="">
                                <input type="hidden" id="trainer-user-id" name="trainer_user_id" value="">
                                
                                <div class="form-group">
                                    <label for="cert-type">Certification Type *</label>
                                    <select id="cert-type" name="certification_type" required>
                                        <option value="">-- Select Type --</option>
                                        <option value="measureQuick Certified Trainer">measureQuick Certified Trainer</option>
                                        <option value="measureQuick Certified Champion">measureQuick Certified Champion</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="cert-status">Status *</label>
                                    <select id="cert-status" name="status" required>
                                        <option value="active">Active</option>
                                        <option value="expired">Expired</option>
                                        <option value="suspended">Suspended</option>
                                        <option value="revoked">Revoked</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="cert-number">Certificate Number</label>
                                    <input type="text" id="cert-number" name="certificate_number" placeholder="e.g., MQT-2024-001">
                                </div>
                                
                                <div class="form-group">
                                    <label for="issue-date">Issue Date</label>
                                    <input type="date" id="issue-date" name="issue_date">
                                </div>
                                
                                <div class="form-group">
                                    <label for="expiration-date">Expiration Date</label>
                                    <input type="date" id="expiration-date" name="expiration_date">
                                </div>
                                
                                <div class="form-group">
                                    <label for="cert-notes">Notes</label>
                                    <textarea id="cert-notes" name="notes" rows="3" placeholder="Optional notes about this certification"></textarea>
                                </div>
                                
                                <div class="hvac-modal-actions">
                                    <button type="submit" class="button button-primary" id="save-certification-btn">
                                        <span class="certification-save-text">Save Certification</span>
                                        <span class="certification-save-loading" style="display: none;">Saving...</span>
                                    </button>
                                    <button type="button" class="button" id="cancel-certification-btn">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <h3>Account Status</h3>
                        <div class="form-group">
                            <label>Account Status</label>
                            <select name="account_status">
                                <option>Active</option>
                                <option>Pending</option>
                                <option>Disabled</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>User Role</label>
                            <select name="user_role">
                                <option value="hvac_trainer">HVAC Trainer</option>
                                <option value="hvac_master_trainer">Master Trainer</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="button button-primary">Save Changes</button>
                        <button type="button" class="button cancel-edit">Cancel</button>
                    </div>
                </form>
            `;
            
            $('#trainer-profile-edit-form').html(formHtml);
            $('#trainer-name').text($('#select-trainer option:selected').text());
            
            // Set the trainer user ID for certification management
            $('#trainer-user-id').val(trainerId);
            
            // Load existing certifications
            loadTrainerCertifications(trainerId);
        });
        
        // Cancel button handler
        $(document).on('click', '.cancel-edit', function() {
            $('#select-trainer').val('');
            $('#trainer-profile-edit-form').hide();
            window.currentTrainerId = null;
        });
        
        // Certification Management Functions
        function loadTrainerCertifications(trainerId) {
            const certificationsList = $('#certifications-list');
            certificationsList.html('<p>Loading certifications...</p>');
            
            // Mock AJAX call - in production this would fetch from the server
            // For demo purposes, show some example certifications
            setTimeout(function() {
                const mockCertifications = [
                    {
                        id: 1,
                        certification_type: 'measureQuick Certified Trainer',
                        status: 'active',
                        certificate_number: 'MQT-2024-001',
                        issue_date: '2024-01-15',
                        expiration_date: '2026-01-15',
                        notes: 'Initial certification'
                    },
                    {
                        id: 2,
                        certification_type: 'measureQuick Certified Champion',
                        status: 'active',
                        certificate_number: 'MQC-2024-015',
                        issue_date: '2024-06-01',
                        expiration_date: '2025-01-15',
                        notes: 'Advanced certification'
                    }
                ];
                
                renderCertificationsList(mockCertifications);
            }, 500);
        }
        
        function renderCertificationsList(certifications) {
            const certificationsList = $('#certifications-list');
            
            if (!certifications || certifications.length === 0) {
                certificationsList.html('<p class="no-certifications">No certifications found. Click "Add New Certification" to get started.</p>');
                return;
            }
            
            let html = '<div class="certifications-grid">';
            
            certifications.forEach(function(cert) {
                const statusClass = cert.status === 'active' ? 'status-active' : 
                                  cert.status === 'expired' ? 'status-expired' : 
                                  cert.status === 'suspended' ? 'status-suspended' : 
                                  'status-revoked';
                
                const isExpired = cert.expiration_date && new Date(cert.expiration_date) < new Date();
                const displayStatus = isExpired ? 'Expired' : cert.status.charAt(0).toUpperCase() + cert.status.slice(1);
                
                html += `
                    <div class="certification-item" data-certification-id="${cert.id}">
                        <div class="certification-header">
                            <h4>${cert.certification_type}</h4>
                            <div class="certification-actions">
                                <button type="button" class="button button-small edit-certification" data-id="${cert.id}">
                                    <span class="dashicons dashicons-edit"></span> Edit
                                </button>
                                <button type="button" class="button button-small button-link-delete delete-certification" data-id="${cert.id}">
                                    <span class="dashicons dashicons-trash"></span> Delete
                                </button>
                            </div>
                        </div>
                        <div class="certification-details">
                            <span class="certification-status ${statusClass}">${displayStatus}</span>
                            ${cert.certificate_number ? `<span class="certification-number">No. ${cert.certificate_number}</span>` : ''}
                            ${cert.issue_date ? `<span class="certification-date">Issued: ${formatDate(cert.issue_date)}</span>` : ''}
                            ${cert.expiration_date ? `<span class="certification-expiry">Expires: ${formatDate(cert.expiration_date)}</span>` : ''}
                        </div>
                        ${cert.notes ? `<div class="certification-notes">${cert.notes}</div>` : ''}
                    </div>
                `;
            });
            
            html += '</div>';
            certificationsList.html(html);
        }
        
        function formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', { 
                year: 'numeric', 
                month: 'short', 
                day: 'numeric' 
            });
        }
        
        // Add New Certification - Using vanilla JavaScript since jQuery might not be loaded yet
        document.addEventListener('click', function(e) {
            if (e.target && e.target.id === 'add-certification-btn') {
                e.preventDefault();
                
                if (!window.currentTrainerId) return;
                
                // Reset form
                const form = document.getElementById('certification-form');
                if (form) {
                    form.reset();
                }
                
                const certId = document.getElementById('certification-id');
                if (certId) certId.value = '';
                
                const trainerUserId = document.getElementById('trainer-user-id');
                if (trainerUserId) trainerUserId.value = window.currentTrainerId;
                
                const modalTitle = document.getElementById('certification-modal-title');
                if (modalTitle) modalTitle.textContent = 'Add New Certification';
                
                // Show modal using vanilla JavaScript with fade effect
                const modal = document.getElementById('certification-modal');
                if (modal) {
                    modal.style.display = 'flex';
                    modal.style.opacity = '0';
                    modal.style.transition = 'opacity 0.3s ease-in-out';
                    
                    // Force reflow then animate
                    modal.offsetHeight;
                    modal.style.opacity = '1';
                }
            }
        });
        
        // Edit Certification
        $(document).on('click', '.edit-certification', function() {
            const certId = $(this).data('id');
            
            // In production, this would fetch the certification data via AJAX
            // For demo, we'll populate with example data
            $('#certification-id').val(certId);
            $('#trainer-user-id').val(window.currentTrainerId);
            $('#cert-type').val('measureQuick Certified Trainer');
            $('#cert-status').val('active');
            $('#cert-number').val('MQT-2024-001');
            $('#issue-date').val('2024-01-15');
            $('#expiration-date').val('2026-01-15');
            $('#cert-notes').val('Initial certification');
            
            $('#certification-modal-title').text('Edit Certification');
            $('#certification-modal').fadeIn(300);
        });
        
        // Delete Certification
        $(document).on('click', '.delete-certification', function() {
            const certId = $(this).data('id');
            
            if (confirm('Are you sure you want to delete this certification? This action cannot be undone.')) {
                // In production, this would make an AJAX call to delete
                $(`.certification-item[data-certification-id="${certId}"]`).fadeOut(function() {
                    $(this).remove();
                    
                    // Check if no certifications remain
                    if ($('.certification-item').length === 0) {
                        $('#certifications-list').html('<p class="no-certifications">No certifications found. Click "Add New Certification" to get started.</p>');
                    }
                });
            }
        });
        
        // Close Certification Modal - Using vanilla JavaScript
        document.addEventListener('click', function(e) {
            if (e.target && (e.target.id === 'close-certification-modal' || e.target.id === 'cancel-certification-btn' || e.target.classList.contains('hvac-modal-close'))) {
                e.preventDefault();
                
                const modal = document.getElementById('certification-modal');
                if (modal) {
                    modal.style.transition = 'opacity 0.3s ease-in-out';
                    modal.style.opacity = '0';
                    
                    // Hide modal after fade out
                    setTimeout(() => {
                        modal.style.display = 'none';
                    }, 300);
                }
            }
        });
        
        // Save Certification Form
        $('#certification-form').on('submit', function(e) {
            e.preventDefault();
            
            const saveBtn = $('#save-certification-btn');
            const saveText = $('.certification-save-text');
            const saveLoading = $('.certification-save-loading');
            
            // Show loading state
            saveBtn.prop('disabled', true);
            saveText.hide();
            saveLoading.show();
            
            // Get form data
            const formData = new FormData(this);
            const certData = Object.fromEntries(formData.entries());
            
            // Simulate AJAX save
            setTimeout(function() {
                // In production, this would be a real AJAX call
                console.log('Saving certification data:', certData);
                
                // Reset loading state
                saveBtn.prop('disabled', false);
                saveText.show();
                saveLoading.hide();
                
                // Close modal
                $('#certification-modal').fadeOut(300);
                
                // Reload certifications list
                loadTrainerCertifications(window.currentTrainerId);
                
                // Show success message
                alert('Certification saved successfully!');
                
            }, 1000);
        });
        
        // Click outside modal to close
        $(document).on('click', '.hvac-modal', function(e) {
            if ($(e.target).is('.hvac-modal')) {
                $(this).fadeOut(300);
            }
        });
    });
    </script>
    
    <style>
    /* Certification Management Styles */
    .certifications-manager {
        margin-top: 15px;
    }
    
    .certifications-grid {
        display: grid;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .certification-item {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
        background: #f9f9f9;
    }
    
    .certification-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .certification-header h4 {
        margin: 0;
        font-size: 16px;
    }
    
    .certification-actions {
        display: flex;
        gap: 5px;
    }
    
    .certification-actions .button {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .certification-details {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 10px;
    }
    
    .certification-details > span {
        font-size: 13px;
        padding: 2px 6px;
        border-radius: 3px;
        background: #fff;
        border: 1px solid #ddd;
    }
    
    .certification-status.status-active {
        background: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }
    
    .certification-status.status-expired {
        background: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }
    
    .certification-status.status-suspended {
        background: #fff3cd;
        border-color: #ffeaa7;
        color: #856404;
    }
    
    .certification-status.status-revoked {
        background: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }
    
    .certification-notes {
        font-style: italic;
        color: #666;
        margin-top: 10px;
        font-size: 13px;
    }
    
    .no-certifications {
        text-align: center;
        color: #666;
        font-style: italic;
        padding: 20px;
        background: #f9f9f9;
        border: 1px dashed #ccc;
        border-radius: 4px;
    }
    
    .add-certification-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    /* Modal Styles */
    .hvac-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hvac-modal-content {
        background: white;
        border-radius: 4px;
        width: 500px;
        max-width: 90vw;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .hvac-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #ddd;
    }
    
    .hvac-modal-header h3 {
        margin: 0;
    }
    
    .hvac-modal-close {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
        color: #666;
    }
    
    .hvac-certification-form {
        padding: 20px;
    }
    
    .hvac-certification-form .form-group {
        margin-bottom: 15px;
    }
    
    .hvac-certification-form label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    .hvac-certification-form input,
    .hvac-certification-form select,
    .hvac-certification-form textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .hvac-modal-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }
    
    .certification-save-loading {
        display: none;
    }
    </style>
</div>

<?php
echo '</div>'; // .container
echo '</div>'; // .hvac-page-wrapper

get_footer();
?>