{% extends 'base.html' %}
{% block title %}Select Course for Outline | Try English{% endblock %}

{# 
DEBUG INFO:
topics_by_course available: {{ topics_by_course is defined }}
#}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-300 py-10 px-4 sm:px-6">
    <div class="max-w-6xl mx-auto">
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row items-center justify-between mb-10 gap-6">
            <div class="text-center md:text-left">
                <div class="inline-flex items-center justify-center bg-primary/10 rounded-full p-4 mb-3">
                    <i class="fas fa-list-check text-3xl text-primary"></i>
                </div>
                <h2 class="text-3xl sm:text-4xl font-extrabold mb-2">Select a Course for Outline</h2>
                <p class="text-base-content/70 max-w-xl">Create structured learning paths with sections and topics</p>
            </div>
            
            <!-- Help Card -->
            <div class="card bg-base-200/70 shadow-sm max-w-md">
                <div class="card-body p-4">
                    <h3 class="card-title text-sm flex items-center gap-2">
                        <i class="fas fa-info-circle text-info"></i>
                        Quick Guide
                    </h3>
                    <ul class="text-xs text-base-content/80 list-disc list-inside space-y-1">
                        <li>Choose any course to create or edit its outline</li>
                        <li>Outlines are organized into sections and topics</li>
                        <li>Courses with existing outlines are marked with a badge</li>
                        <li>Students will see the outline when accessing the course</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Search Bar -->
        <div class="max-w-3xl mx-auto mb-8">
            <div class="form-control">
                <div class="input-group w-full">
                    <input type="text" id="courseSearch" placeholder="Search courses by title or description..." class="input input-bordered w-full focus:ring-2 focus:ring-primary" />
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <label class="label">
                    <span class="label-text-alt text-base-content/60"><i class="fas fa-filter mr-1"></i> Tip: Use the tabs below to filter between your courses and all available courses</span>
                </label>
            </div>
        </div>

        <!-- Header for All Courses -->
        <div class="flex items-center justify-center gap-2 mb-6">
            <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary/10">
                <i class="fas fa-globe text-primary"></i>
            </span>
            <h3 class="text-2xl font-semibold">All Available Courses</h3>
            <span class="ml-2 badge badge-lg">
                {{ other_short_courses|length + other_learning_courses|length }}
            </span>
        </div>
        
        <!-- All Courses Section -->
        <div id="section-all-courses" class="space-y-8">
            <!-- Other Short Courses -->
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-accent/10">
                        <i class="fas fa-bolt text-accent"></i>
                    </span>
                    <h3 class="text-xl font-semibold">Available Short Courses</h3>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% if other_short_courses %}
                        {% for course in other_short_courses %}
                            <div class="course-item theme-card p-6 hover:shadow-lg transition-all relative group">
                                <!-- Teacher indicator if available -->
                                {% if course.teacher %}
                                    <div class="absolute top-2 right-2">
                                        <span class="badge badge-neutral gap-1" title="Course owner">
                                            <i class="fas fa-user"></i> {{ course.teacher.name }}
                                        </span>
                                    </div>
                                {% endif %}
                                
                                <!-- Status indicator -->
                                {% set has_topics = topics_by_course.get(course.id, [])|length > 0 %}
                                {% if has_topics %}
                                    <div class="absolute top-2 {% if course.teacher %}right-28{% else %}right-2{% endif %}">
                                        <span class="badge badge-success gap-1" title="This course has an existing outline">
                                            <i class="fas fa-check-circle"></i> Has Outline
                                        </span>
                                    </div>
                                {% endif %}
                                
                                <div class="flex flex-col h-full">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-2 mb-2">
                                            <span class="badge badge-accent">Short Course</span>
                                            <span class="text-xs text-base-content/60">ID: {{ course.id }}</span>
                                        </div>
                                        <h4 class="text-lg font-bold course-title">{{ course.title }}</h4>
                                        <p class="text-base-content/70 text-sm mt-1 mb-4 line-clamp-2">{{ course.description or "No description available" }}</p>
                                        
                                        <!-- Course metadata -->
                                        <div class="flex flex-wrap gap-2 text-xs text-base-content/60 mb-4">
                                            <span class="flex items-center gap-1">
                                                <i class="fas fa-calendar-alt"></i> 
                                                {{ course.created_at.strftime('%d %b %Y') }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="mt-4 flex flex-wrap gap-2 justify-between items-center">
                                        <span class="text-xs italic text-base-content/60">
                                            {% if not course.teacher %}
                                                Unassigned course
                                            {% elif has_topics %}
                                                Has existing outline
                                            {% else %}
                                                No outline yet
                                            {% endif %}
                                        </span>
                                        <a href="{{ url_for('teacher.add_course_outline', course_type='short', course_id=course.id) }}" 
                                           class="btn btn-sm btn-accent">
                                            {% if has_topics %}
                                                <i class="fas fa-sync-alt mr-2"></i>Remake Outline
                                            {% else %}
                                                <i class="fas fa-plus mr-2"></i>Create Outline
                                            {% endif %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="md:col-span-2 lg:col-span-3 text-center p-12 border-2 border-dashed border-base-300 rounded-lg">
                            <p class="text-base-content/70">No other short courses available</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Other Learning Courses -->
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/10">
                        <i class="fas fa-book-open text-primary"></i>
                    </span>
                    <h3 class="text-xl font-semibold">Available Learning Courses</h3>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% if other_learning_courses %}
                        {% for course in other_learning_courses %}
                            <div class="course-item theme-card p-6 hover:shadow-lg transition-all relative group">
                                <!-- Teacher indicator if available -->
                                {% if course.teacher %}
                                    <div class="absolute top-2 right-2">
                                        <span class="badge badge-neutral gap-1" title="Course owner">
                                            <i class="fas fa-user"></i> {{ course.teacher.name }}
                                        </span>
                                    </div>
                                {% endif %}
                                
                                <!-- Status indicator -->
                                {% set has_topics = topics_by_course.get(course.id, [])|length > 0 %}
                                {% if has_topics %}
                                    <div class="absolute top-2 {% if course.teacher %}right-28{% else %}right-2{% endif %}">
                                        <span class="badge badge-success gap-1" title="This course has an existing outline">
                                            <i class="fas fa-check-circle"></i> Has Outline
                                        </span>
                                    </div>
                                {% endif %}
                                
                                <div class="flex flex-col h-full">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-2 mb-2">
                                            <span class="badge badge-primary">Learning Course</span>
                                            <span class="text-xs text-base-content/60">ID: {{ course.id }}</span>
                                        </div>
                                        <h4 class="text-lg font-bold course-title">{{ course.title }}</h4>
                                        <p class="text-base-content/70 text-sm mt-1 mb-4 line-clamp-2">{{ course.description or "No description available" }}</p>
                                        
                                        <!-- Course metadata -->
                                        <div class="flex flex-wrap gap-2 text-xs text-base-content/60 mb-4">
                                            <span class="flex items-center gap-1">
                                                <i class="fas fa-calendar-alt"></i> 
                                                {{ course.created_at.strftime('%d %b %Y') }}
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- Actions -->
                                    <div class="mt-4 flex flex-wrap gap-2 justify-between items-center">
                                        <span class="text-xs italic text-base-content/60">
                                            {% if not course.teacher %}
                                                Unassigned course
                                            {% elif has_topics %}
                                                Has existing outline
                                            {% else %}
                                                No outline yet
                                            {% endif %}
                                        </span>
                                        <a href="{{ url_for('teacher.add_course_outline', course_type='learning', course_id=course.id) }}" 
                                           class="btn btn-sm btn-primary">
                                            {% if has_topics %}
                                                <i class="fas fa-sync-alt mr-2"></i>Remake Outline
                                            {% else %}
                                                <i class="fas fa-plus mr-2"></i>Create Outline
                                            {% endif %}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="md:col-span-2 lg:col-span-3 text-center p-12 border-2 border-dashed border-base-300 rounded-lg">
                            <p class="text-base-content/70">No other learning courses available</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex justify-center gap-4 mt-8">
            <a href="{{ url_for('teacher.manage_courses') }}" class="btn btn-ghost">
                <i class="fas fa-arrow-left mr-2"></i> Back to Course Management
            </a>
            
            <!-- Course statistics -->
            <div class="stats bg-base-200 shadow hidden" id="courseStatistics">
                <div class="stat">
                    <div class="stat-title">Courses Available</div>
                    <div class="stat-value text-primary" id="totalCourses">0</div>
                    <div class="stat-desc" id="coursesBreakdown"></div>
                </div>
                <div class="stat">
                    <div class="stat-title">With Outlines</div>
                    <div class="stat-value text-secondary" id="withOutlines">0</div>
                    <div class="stat-desc" id="outlinesBreakdown"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Get URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    const highlightCourseId = urlParams.get('highlight');
    const courseType = urlParams.get('type');
    
    // No tab switching needed - removed for simplicity
    function switchTab(tabName) {
        // This function is kept for compatibility with existing code,
        // but doesn't need to do anything since we only have one section now
        console.log('Tab switching not needed - only showing All Courses');
    }
    
    // Enhanced search functionality that searches in titles and descriptions
    function performSearch(searchTerm) {
        searchTerm = searchTerm.toLowerCase();
        const courseItems = document.querySelectorAll('.course-item');
        let resultsFound = 0;
        
        courseItems.forEach(item => {
            const title = item.querySelector('.course-title').textContent.toLowerCase();
            const description = item.querySelector('p').textContent.toLowerCase();
            
            if (title.includes(searchTerm) || description.includes(searchTerm)) {
                item.style.display = '';
                resultsFound++;
                
                // Reset any previous highlighting first
                if (item._originalTitle) {
                    const titleElement = item.querySelector('.course-title');
                    titleElement.textContent = item._originalTitle;
                }
                
                // Highlight matching text in title if search term exists
                if (searchTerm.length > 0) {
                    const titleElement = item.querySelector('.course-title');
                    // Store original title if not already stored
                    if (!item._originalTitle) {
                        item._originalTitle = titleElement.textContent;
                    }
                    const originalTitle = item._originalTitle;
                    const highlightedTitle = originalTitle.replace(
                        new RegExp(searchTerm, 'gi'),
                        match => `<mark class="bg-accent/20 px-1">${match}</mark>`
                    );
                    titleElement.innerHTML = highlightedTitle;
                }
            } else {
                item.style.display = 'none';
            }
        });
        
        // Show no results message if needed
        const sections = document.querySelectorAll('[id^="section-"]');
        sections.forEach(section => {
            // Only process sections that are visible
            if (section.classList.contains('hidden')) {
                return;
            }
            
            let sectionResults = 0;
            section.querySelectorAll('.course-item').forEach(item => {
                if (item.style.display !== 'none') {
                    sectionResults++;
                }
            });
            
            // Remove existing no-results message if any
            const existingMessage = section.querySelector('.no-results-message');
            if (existingMessage) {
                existingMessage.remove();
            }
            
            // Add no-results message if needed
            if (sectionResults === 0 && searchTerm) {
                const noResultsDiv = document.createElement('div');
                noResultsDiv.className = 'no-results-message text-center p-8 w-full';
                noResultsDiv.innerHTML = `
                    <div class="card bg-base-200">
                        <div class="card-body">
                            <p class="text-base-content/70">
                                <i class="fas fa-search mr-2"></i>
                                No courses found matching "<span class="font-semibold">${searchTerm}</span>"
                            </p>
                        </div>
                    </div>
                `;
                section.querySelector('.grid').appendChild(noResultsDiv);
            }
        });
        
        return resultsFound;
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        // No tab preference needed anymore
        
        // Search functionality
        document.getElementById('courseSearch').addEventListener('input', function(e) {
            performSearch(e.target.value);
        });
        
        // Initialize search button
        document.querySelector('.input-group button').addEventListener('click', function() {
            const searchInput = document.getElementById('courseSearch');
            performSearch(searchInput.value);
        });
        
        // Handle keyboard shortcut (Ctrl+F or Cmd+F) to focus search input
        document.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
                e.preventDefault(); // Prevent browser's default search
                document.getElementById('courseSearch').focus();
            }
        });
        
        // Calculate and show course statistics
        function updateCourseStatistics() {
            const stats = {
                totalCourses: 0,
                withOutlines: 0,
                short: 0,
                learning: 0,
                shortWithOutlines: 0,
                learningWithOutlines: 0
            };
            
            // Count all courses - only in the all courses section
            document.querySelectorAll('#section-all-courses .course-item').forEach(item => {
                stats.totalCourses++;
                
                // Check if it has an outline
                if (item.querySelector('.badge-success')) {
                    stats.withOutlines++;
                }
                
                // Check course type
                if (item.querySelector('.badge-accent')) {
                    stats.short++;
                    if (item.querySelector('.badge-success')) {
                        stats.shortWithOutlines++;
                    }
                } else if (item.querySelector('.badge-primary')) {
                    stats.learning++;
                    if (item.querySelector('.badge-success')) {
                        stats.learningWithOutlines++;
                    }
                }
            });
            
            // Update the statistics display
            document.getElementById('totalCourses').textContent = stats.totalCourses;
            document.getElementById('withOutlines').textContent = stats.withOutlines;
            document.getElementById('coursesBreakdown').textContent = 
                `${stats.short} short, ${stats.learning} learning courses`;
            document.getElementById('outlinesBreakdown').textContent = 
                `${stats.shortWithOutlines} short, ${stats.learningWithOutlines} learning outlines`;
            
            // Show statistics
            document.getElementById('courseStatistics').classList.remove('hidden');
        }
        
        // Call statistics update after a short delay
        setTimeout(updateCourseStatistics, 500);
        
        // Highlight specific course if in URL parameters
        if (highlightCourseId) {
            // Find the course card and highlight it
            document.querySelectorAll('.course-item').forEach(item => {
                const courseIdText = item.querySelector('.text-xs.text-base-content\\/60').textContent;
                const match = courseIdText.match(/ID: (\d+)/);
                if (match && match[1] === highlightCourseId) {
                    // Highlight the card
                    item.classList.add('ring-2', 'ring-accent', 'ring-offset-base-100', 'ring-offset-2');
                    
                    // Scroll to the card with animation after a short delay
                    setTimeout(() => {
                        item.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }, 300);
                }
            });
        }
    });
</script>
{% endblock %}