<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-trainer.php'; ?>

<div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-grid>

        <!-- Sidebar Area -->
        <div class="uk-width-2-6@m uk-visible@m">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <?php include 'trainer-sidebar.php'; ?>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="uk-width-expand@m">

            <div class="profile-container">

                <div class="profile-header">
                    <h2 class="uk-heading-divider">Professional Details</h2>
                </div>

                <form id="professionalDetailsForm">
                    <div class="uk-grid uk-grid-medium" uk-grid>

                        <!-- Main Specialization Category -->
                        <div class="uk-width-1-1">
                            <div class="form-group">
                                <label class="form-label" for="mainSpecialization">Main Specialization Category</label>
                                <select class="uk-select" id="mainSpecialization" required>
                                    <option value="" selected>Select Main Specialization</option>
                                    <option value="technical-interviews">Technical Interviews</option>
                                    <option value="software-development">Software Development</option>
                                    <option value="data-analytics">Data Analytics</option>
                                    <option value="project-management">Project Management</option>
                                    <option value="cybersecurity">Cybersecurity</option>
                                    <option value="cloud-computing">Cloud Computing</option>
                                    <option value="mobile-development">Mobile Development</option>
                                    <option value="web-development">Web Development</option>
                                </select>
                            </div>
                        </div>

                        <!-- Sub-specializations -->
                        <div class="uk-width-1-1">
                            <div class="form-group">
                                <label class="form-label">Sub-specializations</label>
                                <p class="uk-text-small uk-margin-small">Select multiple areas you can provide training in</p>

                                <div class="specialization-tags-container" id="subspecializationsContainer">
                                    <!-- Sub-specializations will be populated dynamically -->
                                </div>

                                <div class="no-selection-message uk-padding-small uk-alert uk-alert-primary uk-text-center br-8" id="noSelectionMessage" uk-alert>
                                    Please select a main specialization category first
                                </div>
                            </div>
                        </div>

                        <!-- Selected Specializations with Descriptions -->
                        <div class="uk-width-1-1" id="selectedSpecializationsSection" style="display: none;">
                            <div class="form-group">
                                <h3 class="uk-h4 f600 uk-margin-remove">
                                    <span>Add Descriptions for Your Specializations</span>
                                </h3>
                                <p class="uk-text-small uk-margin-small-top">
                                    Describe your expertise and what you can teach in each selected area
                                </p>

                                <div id="specializationDescriptions" class="specialization-descriptions-container uk-margin-small-top">
                                    <!-- Description areas will be added here dynamically -->
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="uk-width-1-1">
                            <button type="submit" class="uk-button uk-button-primary">Save Changes</button>
                        </div>

                    </div>
                </form>

            </div>
        </div>

    </div><!-- .uk-grid -->
</div><!-- .uk-container -->


<script>
    // Selected specializations array with descriptions
    let selectedSpecializations = {};

    // Sub-specializations mapping for each main category
    const specializationMapping = {
        'technical-interviews': [{
                id: 'coding-interviews',
                name: 'Coding Interviews'
            },
            {
                id: 'system-design',
                name: 'System Design'
            },
            {
                id: 'behavioral-interviews',
                name: 'Behavioral Interviews'
            },
            {
                id: 'algorithm-challenges',
                name: 'Algorithm Challenges'
            },
            {
                id: 'data-structures',
                name: 'Data Structures'
            },
            {
                id: 'problem-solving',
                name: 'Problem Solving'
            },
            {
                id: 'whiteboard-coding',
                name: 'Whiteboard Coding'
            },
            {
                id: 'technical-communication',
                name: 'Technical Communication'
            }
        ],
        'software-development': [{
                id: 'frontend-development',
                name: 'Frontend Development'
            },
            {
                id: 'backend-development',
                name: 'Backend Development'
            },
            {
                id: 'full-stack-development',
                name: 'Full Stack Development'
            },
            {
                id: 'mobile-development',
                name: 'Mobile Development'
            },
            {
                id: 'web-frameworks',
                name: 'Web Frameworks'
            },
            {
                id: 'api-development',
                name: 'API Development'
            },
            {
                id: 'database-design',
                name: 'Database Design'
            },
            {
                id: 'software-architecture',
                name: 'Software Architecture'
            }
        ],
        'data-analytics': [{
                id: 'data-science',
                name: 'Data Science'
            },
            {
                id: 'machine-learning',
                name: 'Machine Learning'
            },
            {
                id: 'statistical-analysis',
                name: 'Statistical Analysis'
            },
            {
                id: 'data-visualization',
                name: 'Data Visualization'
            },
            {
                id: 'big-data',
                name: 'Big Data'
            },
            {
                id: 'business-intelligence',
                name: 'Business Intelligence'
            },
            {
                id: 'predictive-modeling',
                name: 'Predictive Modeling'
            },
            {
                id: 'data-mining',
                name: 'Data Mining'
            }
        ],
        'project-management': [{
                id: 'agile-methodologies',
                name: 'Agile Methodologies'
            },
            {
                id: 'scrum-master',
                name: 'Scrum Master'
            },
            {
                id: 'project-planning',
                name: 'Project Planning'
            },
            {
                id: 'risk-management',
                name: 'Risk Management'
            },
            {
                id: 'team-leadership',
                name: 'Team Leadership'
            },
            {
                id: 'stakeholder-management',
                name: 'Stakeholder Management'
            },
            {
                id: 'budget-management',
                name: 'Budget Management'
            },
            {
                id: 'quality-assurance',
                name: 'Quality Assurance'
            }
        ],
        'cybersecurity': [{
                id: 'network-security',
                name: 'Network Security'
            },
            {
                id: 'penetration-testing',
                name: 'Penetration Testing'
            },
            {
                id: 'security-auditing',
                name: 'Security Auditing'
            },
            {
                id: 'incident-response',
                name: 'Incident Response'
            },
            {
                id: 'compliance-frameworks',
                name: 'Compliance Frameworks'
            },
            {
                id: 'risk-assessment',
                name: 'Risk Assessment'
            },
            {
                id: 'security-architecture',
                name: 'Security Architecture'
            },
            {
                id: 'threat-analysis',
                name: 'Threat Analysis'
            }
        ],
        'cloud-computing': [{
                id: 'aws-services',
                name: 'AWS Services'
            },
            {
                id: 'azure-platform',
                name: 'Azure Platform'
            },
            {
                id: 'google-cloud',
                name: 'Google Cloud'
            },
            {
                id: 'cloud-architecture',
                name: 'Cloud Architecture'
            },
            {
                id: 'containerization',
                name: 'Containerization'
            },
            {
                id: 'serverless-computing',
                name: 'Serverless Computing'
            },
            {
                id: 'cloud-migration',
                name: 'Cloud Migration'
            },
            {
                id: 'devops-practices',
                name: 'DevOps Practices'
            }
        ],
        'mobile-development': [{
                id: 'ios-development',
                name: 'iOS Development'
            },
            {
                id: 'android-development',
                name: 'Android Development'
            },
            {
                id: 'react-native',
                name: 'React Native'
            },
            {
                id: 'flutter',
                name: 'Flutter'
            },
            {
                id: 'mobile-ui-ux',
                name: 'Mobile UI/UX'
            },
            {
                id: 'app-store-optimization',
                name: 'App Store Optimization'
            },
            {
                id: 'mobile-testing',
                name: 'Mobile Testing'
            },
            {
                id: 'cross-platform',
                name: 'Cross Platform'
            }
        ],
        'web-development': [{
                id: 'html-css',
                name: 'HTML/CSS'
            },
            {
                id: 'javascript-frameworks',
                name: 'JavaScript Frameworks'
            },
            {
                id: 'responsive-design',
                name: 'Responsive Design'
            },
            {
                id: 'web-performance',
                name: 'Web Performance'
            },
            {
                id: 'seo-optimization',
                name: 'SEO Optimization'
            },
            {
                id: 'content-management',
                name: 'Content Management'
            },
            {
                id: 'e-commerce-development',
                name: 'E-commerce Development'
            },
            {
                id: 'web-accessibility',
                name: 'Web Accessibility'
            }
        ]
    };

    // Function to update sub-specializations based on main category
    function updateSubSpecializations(mainCategory) {
        const container = document.getElementById('subspecializationsContainer');
        const noSelectionMessage = document.getElementById('noSelectionMessage');

        // Clear selected specializations when changing main category
        selectedSpecializations = {};
        updateDescriptionsSection();

        if (!mainCategory || !specializationMapping[mainCategory]) {
            container.innerHTML = '';
            container.style.display = 'none';
            noSelectionMessage.style.display = 'block';
            return;
        }

        // Hide no selection message and show container
        noSelectionMessage.style.display = 'none';
        container.style.display = 'flex';

        // Generate sub-specialization tags
        const subspecializations = specializationMapping[mainCategory];
        container.innerHTML = subspecializations.map(spec =>
            `<div class="specialization-tag" data-specialization="${spec.id}" data-name="${spec.name}">
                ${spec.name}
            </div>`
        ).join('');

        // Add click event listeners to new tags
        container.querySelectorAll('.specialization-tag').forEach(tag => {
            tag.addEventListener('click', handleSpecializationClick);
        });
    }

    // Handle specialization tag clicks
    function handleSpecializationClick() {
        const specialization = this.getAttribute('data-specialization');
        const specializationName = this.getAttribute('data-name');

        if (this.classList.contains('selected')) {
            // Remove specialization
            this.classList.remove('selected');
            delete selectedSpecializations[specialization];

            // Show notification when removed
            UIkit.notification({
                message: `${specializationName} removed`,
                status: 'warning',
                pos: 'bottom-right',
                timeout: 1500
            });
        } else {
            // Add specialization
            this.classList.add('selected');
            selectedSpecializations[specialization] = {
                name: specializationName,
                description: ''
            };

            // Show notification when added
            UIkit.notification({
                message: `${specializationName} added`,
                status: 'success',
                pos: 'bottom-right',
                timeout: 1500
            });
        }

        updateDescriptionsSection();
    }

    // Update the descriptions section
    function updateDescriptionsSection() {
        const section = document.getElementById('selectedSpecializationsSection');
        const container = document.getElementById('specializationDescriptions');

        const selectedCount = Object.keys(selectedSpecializations).length;

        if (selectedCount === 0) {
            section.style.display = 'none';
            return;
        }

        section.style.display = 'block';

        // Generate description items
        container.innerHTML = Object.entries(selectedSpecializations).map(([id, data]) => `
            <div class="description-item" data-specialization="${id}">
                <div class="specialization-title">
                    <span class="specialization-name">${data.name}</span>
                    <button type="button" class="remove-btn" onclick="removeSpecialization('${id}')">Remove</button>
                </div>
                <textarea 
                    id="backend-description"
                    name="backend_description"
                    class="description-textarea" 
                    placeholder="Describe your expertise in ${data.name}. What can you teach? What's your experience level? Any specific tools or frameworks?"
                    onchange="updateDescription('${id}', this.value)"
                    onkeyup="updateDescription('${id}', this.value)"
                >${data.description}</textarea>
            </div>
        `).join('');
    }

    // Update description for a specialization
    function updateDescription(specializationId, description) {
        if (selectedSpecializations[specializationId]) {
            selectedSpecializations[specializationId].description = description;
        }
    }

    // Remove a specialization
    function removeSpecialization(specializationId) {
        const specializationName = selectedSpecializations[specializationId]?.name;

        // Remove from selected specializations
        delete selectedSpecializations[specializationId];

        // Update the tag appearance
        const tag = document.querySelector(`[data-specialization="${specializationId}"]`);
        if (tag) {
            tag.classList.remove('selected');
        }

        // Update descriptions section
        updateDescriptionsSection();

        // Show notification
        UIkit.notification({
            message: `${specializationName} removed`,
            status: 'warning',
            pos: 'bottom-right',
            timeout: 1500
        });
    }

    // Handle main specialization change
    document.getElementById('mainSpecialization').addEventListener('change', function() {
        updateSubSpecializations(this.value);
    });

    // Handle form submission
    document.getElementById('professionalDetailsForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const mainSpecialization = document.getElementById('mainSpecialization').value;

        // Validation with UIKit notifications
        if (!mainSpecialization) {
            UIkit.notification({
                message: 'Please select a main specialization category',
                status: 'warning',
                pos: 'top-center',
                timeout: 3000
            });
            return;
        }

        if (Object.keys(selectedSpecializations).length === 0) {
            UIkit.notification({
                message: 'Please select at least one sub-specialization',
                status: 'warning',
                pos: 'top-center',
                timeout: 3000
            });
            return;
        }

        // Check if all selected specializations have descriptions
        const missingDescriptions = Object.entries(selectedSpecializations)
            .filter(([id, data]) => !data.description.trim())
            .map(([id, data]) => data.name);

        if (missingDescriptions.length > 0) {
            UIkit.notification({
                message: `Please add descriptions for: ${missingDescriptions.join(', ')}`,
                status: 'warning',
                pos: 'top-center',
                timeout: 4000
            });
            return;
        }

        // Show loading notification
        UIkit.notification({
            message: 'Saving your professional details...',
            status: 'primary',
            pos: 'top-center',
            timeout: 2000
        });

        // Prepare data for submission
        const formData = {
            mainSpecialization: mainSpecialization,
            specializations: selectedSpecializations
        };

        console.log('Form data to submit:', formData);

        // Simulate API call (replace with your actual endpoint)
        setTimeout(() => {
            UIkit.notification({
                message: 'Professional details saved successfully!',
                status: 'success',
                pos: 'top-center',
                timeout: 4000
            });
        }, 1500);
    });
</script>

<?php include 'footer.php'; ?>