@extends('layouts.public')

@section('title', 'Training Courses - EntrepreneurEducation')
@section('meta_description', 'Browse our comprehensive training courses. Webinars, video courses, audio content and eBooks for entrepreneurs. Simple, Easy, Enjoyable & Accessible.')

@push('styles')
<style>
    :root {
        --ee-purple: #7c3aed;
        --ee-cyan: #06b6d4;
        --ee-yellow: #f59e0b;
        --ee-green: #10b981;
        --ee-dark: #0f172a;
        --ee-light: #f8fafc;
        --ee-card: #ffffff;
        --ee-border: #e2e8f0;
        --ee-text: #334155;
        --ee-text-light: #64748b;
        --ee-glow: rgba(124, 58, 237, 0.15);
    }
    
    .page-header {
        background: linear-gradient(135deg, var(--ee-purple) 0%, var(--ee-cyan) 100%);
        color: white;
        padding: 100px 0 80px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }
    
    .page-header-content {
        position: relative;
        z-index: 1;
    }
    
    .page-header h1 {
        font-size: 3.5rem;
        font-weight: 900;
        margin-bottom: 20px;
        background: linear-gradient(135deg, white, rgba(255, 255, 255, 0.9));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .page-header p {
        font-size: 1.25rem;
        opacity: 0.95;
        max-width: 700px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.95);
    }
    
    .courses-section {
        padding: 80px 0;
        background: var(--ee-light);
    }
    
    /* Modern Search & Filters */
    .courses-filters {
        display: flex;
        gap: 20px;
        margin-bottom: 40px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background: white;
        padding: 24px;
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
        border: 2px solid var(--ee-border);
    }
    
    /* Language Selector Styles */
    .language-selector {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .language-selector-label {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--ee-purple);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .language-selector select {
        padding: 10px 12px;
        border: 2px solid var(--ee-border);
        border-radius: 10px;
        background: white;
        color: var(--ee-text);
        font-weight: 600;
        min-width: 200px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    .language-selector select:focus {
        outline: none;
        border-color: var(--ee-purple);
        box-shadow: 0 0 0 4px var(--ee-glow);
    }
    
    .search-box {
        flex: 1;
        min-width: 300px;
        position: relative;
    }
    
    .search-box input {
        width: 100%;
        padding: 16px 50px 16px 20px;
        border: 2px solid var(--ee-border);
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: var(--ee-light);
        color: var(--ee-text);
        font-weight: 500;
    }
    
    .search-box input:focus {
        outline: none;
        border-color: var(--ee-purple);
        box-shadow: 0 0 0 4px var(--ee-glow);
        background: white;
    }
    
    .search-box i {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ee-purple);
        font-size: 1.25rem;
    }
    
    .filter-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .filter-btn {
        padding: 12px 24px;
        border: 2px solid var(--ee-border);
        background: white;
        border-radius: 12px;
        color: var(--ee-text);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9375rem;
        position: relative;
        overflow: hidden;
    }
    
    .filter-btn:hover {
        border-color: var(--ee-purple);
        background: rgba(124, 58, 237, 0.05);
        transform: translateY(-2px);
    }
    
    .filter-btn.active {
        border-color: var(--ee-purple);
        background: linear-gradient(135deg, var(--ee-purple), var(--ee-cyan));
        color: white;
        box-shadow: 0 8px 24px var(--ee-glow);
    }
    
    .courses-count {
        color: var(--ee-purple);
        font-size: 1rem;
        margin-bottom: 20px;
        font-weight: 600;
        padding: 12px 20px;
        background: white;
        border-radius: 12px;
        display: inline-block;
        border: 2px solid var(--ee-border);
    }
    
    /* Modern Course Cards */
    .courses-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
    }
    
    .course-card {
        background: white;
        border-radius: 24px;
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
        border: 2px solid var(--ee-border);
        cursor: pointer;
        position: relative;
        transform-style: preserve-3d;
    }
    
    .course-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 20px 60px rgba(124, 58, 237, 0.15);
        border-color: var(--ee-purple);
    }
    
    .course-image {
        position: relative;
        height: 200px;
        overflow: hidden;
        background: linear-gradient(135deg, var(--ee-purple), var(--ee-cyan));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .course-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
    }
    
    .course-image i {
        font-size: 64px;
        color: rgba(255, 255, 255, 0.2);
        z-index: 1;
    }
    
    /* SMALLER FREE BADGE */
    .course-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.95);
        color: var(--ee-purple);
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 2;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 2px solid white;
    }
    
    /* Make free badge smaller */
    .course-badge.free-badge {
        background: #10b981;
        color: white;
        padding: 4px 10px;
        font-size: 0.65rem;
    }
    
    .course-badge.premium-badge {
        background: #f59e0b;
        color: white;
    }
    
    .course-content {
        padding: 24px;
    }
    
    .course-category {
        color: var(--ee-purple);
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px;
        display: inline-block;
        padding: 4px 12px;
        background: rgba(124, 58, 237, 0.1);
        border-radius: 6px;
    }
    
    .course-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 12px;
        color: var(--ee-text);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .course-description {
        color: var(--ee-text-light);
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .course-meta {
        display: flex;
        gap: 20px;
        padding-top: 16px;
        border-top: 2px solid var(--ee-border);
        margin-top: 16px;
        font-size: 0.875rem;
        color: var(--ee-text-light);
    }
    
    .course-meta span {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .course-meta i {
        color: var(--ee-purple);
        font-size: 1rem;
    }
    
    .course-action {
        margin-top: 20px;
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, var(--ee-purple), var(--ee-cyan));
        color: white;
        border: none;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9375rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        text-align: center;
    }
    
    .course-action:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px var(--ee-glow);
    }
    
    .course-action.disabled {
        background: #94a3b8;
        cursor: not-allowed;
    }
    
    .course-action.disabled:hover {
        transform: none;
        box-shadow: none;
    }
    
    .no-courses {
        text-align: center;
        padding: 80px 20px;
        background: white;
        border-radius: 24px;
        border: 2px dashed var(--ee-border);
    }
    
    .no-courses i {
        font-size: 64px;
        color: var(--ee-border);
        margin-bottom: 24px;
    }
    
    .no-courses h3 {
        font-size: 1.5rem;
        color: var(--ee-text);
        margin-bottom: 12px;
    }
    
    .no-courses p {
        color: var(--ee-text-light);
        max-width: 500px;
        margin: 0 auto;
        line-height: 1.6;
    }
    
    .loading-spinner {
        text-align: center;
        padding: 80px 20px;
    }
    
    .spinner {
        border: 4px solid var(--ee-border);
        border-top: 4px solid var(--ee-purple);
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
        margin: 0 auto 20px;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    @media (max-width: 1024px) {
        .page-header h1 {
            font-size: 2.75rem;
        }
        
        .courses-filters {
            flex-direction: column;
            align-items: stretch;
        }
        
        .search-box {
            min-width: 100%;
        }
        
        .filter-buttons {
            width: 100%;
            justify-content: center;
        }
    }
    
    @media (max-width: 768px) {
        .page-header {
            padding: 80px 0 60px;
        }
        
        .page-header h1 {
            font-size: 2.25rem;
        }
        
        .page-header p {
            font-size: 1.125rem;
        }
        
        .courses-grid {
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 480px) {
        .page-header h1 {
            font-size: 1.875rem;
        }
        
        .filter-buttons {
            flex-direction: column;
        }
        
        .filter-btn {
            width: 100%;
        }
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<section class="page-header">
    <div class="container">
        <div class="page-header-content">
            <h1>Entrepreneur Training Courses</h1>
            <p>Simple, Easy, Enjoyable & Accessible digital learning for the next generation of entrepreneurs</p>
        </div>
    </div>
</section>

<!-- Courses Section -->
<section class="courses-section">
    <div class="container">
        <!-- Search & Filters -->
        <div class="courses-filters">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="🔍 Search courses, topics, or skills..." onkeyup="filterCourses()">
                <i class="fas fa-search"></i>
            </div>
            <div id="languageSelector" class="language-selector" style="display: none;">
                <span class="language-selector-label">
                    <i class="fas fa-globe"></i> Language:
                </span>
                <select id="languageDropdown">
                    <option value="">All languages</option>
                </select>
            </div>
            <div class="filter-buttons">
                <button class="filter-btn active" onclick="filterByCategory('all')">All Courses</button>
                <button class="filter-btn" onclick="filterByCategory('marketing')">Marketing</button>
                <button class="filter-btn" onclick="filterByCategory('it')">IT</button>
                <button class="filter-btn" onclick="filterByCategory('etc')">ETC Training</button>
            </div>
        </div>
        
        <!-- Course Count -->
        <div class="courses-count" id="coursesCount">⏳ Loading courses...</div>
        
        <!-- Loading Spinner -->
        <div id="loadingSpinner" class="loading-spinner">
            <div class="spinner"></div>
            <p style="color: var(--ee-text-light); font-weight: 600;">Loading our premium entrepreneur courses...</p>
        </div>
        
        <!-- Courses Grid -->
        <div id="coursesGrid" class="courses-grid" style="display: none;"></div>
        
        <!-- No Courses Message -->
        <div id="noCourses" class="no-courses" style="display: none;">
            <i class="fas fa-book-open"></i>
            <h3>No Courses Found 🧐</h3>
            <p>We couldn't find any courses matching your search. Try different keywords or browse our course categories.</p>
            <div style="margin-top: 24px;">
                <button class="filter-btn active" onclick="filterByCategory('all')" style="background: var(--ee-purple); color: white;">Show All Courses</button>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    let allCourses = [];
    let currentFilter = 'all';
    let selectedLanguageId = null;
    let multiLanguageEnabled = false;
    let availableLanguages = [];
    
    // Load courses on page load
    document.addEventListener('DOMContentLoaded', function() {
        checkMultiLanguageSettings();
    });
    
    // Check if multi-language is enabled
    async function checkMultiLanguageSettings() {
        try {
            const response = await fetch('/api/settings', {
                method: 'GET',
                headers: { 'Accept': 'application/json' }
            });
            
            if (response.ok) {
                const data = await response.json();
                multiLanguageEnabled = data.settings?.enable_multi_language === 'true' || data.settings?.enable_multi_language === true;
            }
        } catch (error) {
            console.error('Error checking multi-language settings:', error);
        }
        await loadLanguages();
        loadCourses();
    }
    
    // Load available languages
    async function loadLanguages() {
        try {
            const response = await fetch('/api/languages/active', {
                method: 'GET',
                headers: { 'Accept': 'application/json' }
            });
            
            if (response.ok) {
                const data = await response.json();
                availableLanguages = data.languages || [];
                
                if (availableLanguages.length > 0) {
                    multiLanguageEnabled = true;
                    // Set default language or restore from localStorage
                    const savedLanguage = localStorage.getItem('preferred_language');
                    if (savedLanguage === 'all') {
                        selectedLanguageId = null;
                    } else if (savedLanguage) {
                        const parsed = parseInt(savedLanguage);
                        selectedLanguageId = isNaN(parsed) ? null : parsed;
                    } else {
                        selectedLanguageId = null;
                    }
                    displayLanguageSelector();
                }
            }
        } catch (error) {
            console.error('Error loading languages:', error);
        }
    }
    
    // Display language selector
    function displayLanguageSelector() {
        const selector = document.getElementById('languageSelector');
        const dropdown = document.getElementById('languageDropdown');
        
        if (!selector || !dropdown || !availableLanguages || availableLanguages.length === 0) {
            if (selector) selector.style.display = 'none';
            return;
        }
        
        const options = [
            '<option value=\"\">All languages</option>',
            ...availableLanguages.map(lang => `<option value=\"${lang.id}\">${lang.flag_emoji || '🌐'} ${lang.name}</option>`)
        ].join('');
        dropdown.innerHTML = options;
        dropdown.value = selectedLanguageId || '';
        selector.style.display = 'flex';
        
        dropdown.onchange = (e) => {
            const val = e.target.value;
            selectLanguage(val === '' ? null : parseInt(val));
        };
    }
    
    // Select language
    function selectLanguage(languageId) {
        selectedLanguageId = languageId;
        localStorage.setItem('preferred_language', languageId === null ? 'all' : languageId);
        
        // Update dropdown selection
        const dropdown = document.getElementById('languageDropdown');
        if (dropdown) {
            dropdown.value = languageId || '';
        }
        
        // Reload courses with selected language
        loadCourses();
    }
    
    // Load courses from API
    async function loadCourses() {
        try {
            let url = '/api/courses/public';
            
            // Add language filter if multi-language is enabled
            if (selectedLanguageId) {
                url += `?language_id=${selectedLanguageId}`;
            }
            
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                }
            });
            
            if (!response.ok) {
                throw new Error('Failed to load courses');
            }
            
            const data = await response.json();
            allCourses = data.courses || [];
            
            document.getElementById('loadingSpinner').style.display = 'none';
            displayCourses(allCourses);
            
        } catch (error) {
            console.error('Error loading courses:', error);
            document.getElementById('loadingSpinner').style.display = 'none';
            
            // Show no courses message with error details
            const noCoursesDiv = document.getElementById('noCourses');
            noCoursesDiv.style.display = 'block';
            noCoursesDiv.innerHTML = `
                <i class="fas fa-exclamation-triangle" style="color: #f59e0b;"></i>
                <h3>Unable to Load Courses</h3>
                <p>There was an error loading the courses. This might be because:</p>
                <ul style="text-align: left; max-width: 500px; margin: 20px auto; line-height: 2; color: var(--ee-text-light);">
                    <li>No courses have been created yet by the admin</li>
                    <li>The database connection needs to be configured</li>
                    <li>You need to log in as admin and create courses</li>
                </ul>
                <p style="margin-top: 20px; color: var(--ee-text-light);">Please contact the administrator or try again later.</p>
            `;
            document.getElementById('coursesCount').textContent = '0 courses available';
        }
    }
    
    // Display courses
    function displayCourses(courses) {
        const grid = document.getElementById('coursesGrid');
        const noCoursesMsg = document.getElementById('noCourses');
        const countElement = document.getElementById('coursesCount');
        
        if (courses.length === 0) {
            grid.style.display = 'none';
            noCoursesMsg.style.display = 'block';
            countElement.textContent = 'No courses found 🫤';
            countElement.style.color = '#f59e0b';
            return;
        }
        
        grid.style.display = 'grid';
        noCoursesMsg.style.display = 'none';
        
        const courseWord = courses.length === 1 ? 'course' : 'courses';
        countElement.textContent = `🎯 Found ${courses.length} ${courseWord}`;
        countElement.style.color = 'var(--ee-purple)';
        
        grid.innerHTML = courses.map(course => {
            const isAuthenticated = {{ auth()->check() ? 'true' : 'false' }};
            
            // Determine category based on course name or description
            let category = 'General';
            const courseName = course.name.toLowerCase();
            const courseDesc = (course.short_description || '').toLowerCase();
            
            if (courseName.includes('marketing') || courseName.includes('seo') || courseName.includes('social media') || courseName.includes('brand') || 
                courseDesc.includes('marketing') || courseDesc.includes('seo') || courseDesc.includes('social media') || courseDesc.includes('brand')) {
                category = 'Marketing';
            } else if (courseName.includes('it') || courseName.includes('tech') || courseName.includes('software') || courseName.includes('programming') || 
                       courseName.includes('ai') || courseName.includes('artificial intelligence') || courseName.includes('web') ||
                       courseDesc.includes('it') || courseDesc.includes('tech') || courseDesc.includes('software') || courseDesc.includes('programming') ||
                       courseDesc.includes('ai') || courseDesc.includes('artificial intelligence') || courseDesc.includes('web')) {
                category = 'IT';
            } else if (courseName.includes('business') || courseName.includes('entrepreneur') || courseName.includes('finance') || 
                      courseName.includes('management') || courseName.includes('leadership') ||
                      courseDesc.includes('business') || courseDesc.includes('entrepreneur') || courseDesc.includes('finance') || 
                      courseDesc.includes('management') || courseDesc.includes('leadership')) {
                category = 'ETC Training';
            }
            
            // Determine enrollment status and button
            let actionButton = '';
            if (isAuthenticated) {
                if (course.is_free) {
                    actionButton = `
                        <a href="/learn/course/${course.id}" class="course-action">
                            <i class="fas fa-play-circle"></i> Start Learning Free
                        </a>
                    `;
                } else {
                    actionButton = `
                        <button class="course-action disabled" disabled>
                            <i class="fas fa-lock"></i> Premium Course - $${parseFloat(course.price).toFixed(2)}
                        </button>
                    `;
                }
            } else {
                actionButton = `
                    <a href="/login?redirect=/learn/course/${course.id}" class="course-action">
                        <i class="fas fa-sign-in-alt"></i> Login to Access Course
                    </a>
                `;
            }

            return `
                <div class="course-card" data-category="${category}">
                    <div class="course-image">
                        <i class="fas fa-graduation-cap"></i>
                        ${course.is_free 
                            ? '<div class="course-badge free-badge"><i class="fas fa-gift"></i> FREE</div>' 
                            : `<div class="course-badge premium-badge"><i class="fas fa-crown"></i> $${parseFloat(course.price).toFixed(2)}</div>`
                        }
                    </div>
                    <div class="course-content">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                            <div class="course-category">${category}</div>
                            ${course.language ? `
                                <div style="font-size: 0.875rem; color: var(--ee-text-light); display: flex; align-items: center; gap: 4px;">
                                    <span>${course.language.flag_emoji}</span>
                                    <span style="font-weight: 600;">${course.language.name}</span>
                                </div>
                            ` : ''}
                        </div>
                        <h3>${escapeHtml(course.name)}</h3>
                        <p class="course-description">${escapeHtml(course.short_description || 'Comprehensive training course covering essential entrepreneur skills and strategies for business growth.')}</p>
                        <div class="course-meta">
                            <span><i class="fas fa-book"></i> ${course.lessons_count || 0} Lessons</span>
                            <span><i class="fas fa-clock"></i> Self-paced</span>
                            ${course.is_free ? '' : `<span><i class="fas fa-tag"></i> $${parseFloat(course.price).toFixed(2)}</span>`}
                        </div>
                        ${actionButton}
                    </div>
                </div>
            `;
        }).join('');
    }
    
    // Filter by category
    function filterByCategory(category) {
        currentFilter = category;
        
        // Update active button
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        event.target.classList.add('active');
        
        // Filter courses
        let filtered = allCourses;
        
        if (category !== 'all') {
            filtered = filtered.filter(course => {
                const courseName = course.name.toLowerCase();
                const courseDesc = (course.short_description || '').toLowerCase();
                
                if (category === 'marketing') {
                    return courseName.includes('marketing') || courseName.includes('seo') || courseName.includes('social media') || courseName.includes('brand') || 
                           courseDesc.includes('marketing') || courseDesc.includes('seo') || courseDesc.includes('social media') || courseDesc.includes('brand');
                } else if (category === 'it') {
                    return courseName.includes('it') || courseName.includes('tech') || courseName.includes('software') || courseName.includes('programming') || 
                           courseName.includes('ai') || courseName.includes('artificial intelligence') || courseName.includes('web') ||
                           courseDesc.includes('it') || courseDesc.includes('tech') || courseDesc.includes('software') || courseDesc.includes('programming') ||
                           courseDesc.includes('ai') || courseDesc.includes('artificial intelligence') || courseDesc.includes('web');
                } else if (category === 'etc') {
                    return courseName.includes('business') || courseName.includes('entrepreneur') || courseName.includes('finance') || 
                           courseName.includes('management') || courseName.includes('leadership') ||
                           courseDesc.includes('business') || courseDesc.includes('entrepreneur') || courseDesc.includes('finance') || 
                           courseDesc.includes('management') || courseDesc.includes('leadership');
                }
                return true;
            });
        }
        
        // Apply search filter if active
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        if (searchTerm) {
            filtered = filtered.filter(course => 
                course.name.toLowerCase().includes(searchTerm) ||
                (course.short_description && course.short_description.toLowerCase().includes(searchTerm))
            );
        }
        
        displayCourses(filtered);
    }
    
    // Search filter
    function filterCourses() {
        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
        
        let filtered = allCourses;
        
        // Apply category filter
        if (currentFilter !== 'all') {
            filtered = filtered.filter(course => {
                const courseName = course.name.toLowerCase();
                const courseDesc = (course.short_description || '').toLowerCase();
                
                if (currentFilter === 'marketing') {
                    return courseName.includes('marketing') || courseName.includes('seo') || courseName.includes('social media') || courseName.includes('brand') || 
                           courseDesc.includes('marketing') || courseDesc.includes('seo') || courseDesc.includes('social media') || courseDesc.includes('brand');
                } else if (currentFilter === 'it') {
                    return courseName.includes('it') || courseName.includes('tech') || courseName.includes('software') || courseName.includes('programming') || 
                           courseName.includes('ai') || courseName.includes('artificial intelligence') || courseName.includes('web') ||
                           courseDesc.includes('it') || courseDesc.includes('tech') || courseDesc.includes('software') || courseDesc.includes('programming') ||
                           courseDesc.includes('ai') || courseDesc.includes('artificial intelligence') || courseDesc.includes('web');
                } else if (currentFilter === 'etc') {
                    return courseName.includes('business') || courseName.includes('entrepreneur') || courseName.includes('finance') || 
                           courseName.includes('management') || courseName.includes('leadership') ||
                           courseDesc.includes('business') || courseDesc.includes('entrepreneur') || courseDesc.includes('finance') || 
                           courseDesc.includes('management') || courseDesc.includes('leadership');
                }
                return true;
            });
        }
        
        // Apply search filter
        if (searchTerm) {
            filtered = filtered.filter(course => 
                course.name.toLowerCase().includes(searchTerm) ||
                (course.short_description && course.short_description.toLowerCase().includes(searchTerm))
            );
        }
        
        displayCourses(filtered);
    }
    
    // Escape HTML to prevent XSS
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
</script>
@endpush
