script.js

document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const previewContainer = document.getElementById('previewContainer');
    const lessonsContainer = document.getElementById('lessonsContainer');
    const addModuleBtn = document.getElementById('addModuleBtn');
    const addLessonBtn = document.getElementById('addLessonBtn');
    const saveCurriculumBtn = document.getElementById('saveCurriculumBtn');
    const closeEditorBtn = document.getElementById('closeEditorBtn');
    const builderView = document.getElementById('builderView');
    const editorView = document.getElementById('editorView');
    const moduleTitleInput = document.querySelector('.module-title-input');
    const editableTitle = document.querySelector('.editable-title');
    
    // State
    let currentModule = null;
    let modules = [];
    
    // Add Module
    addModuleBtn.addEventListener('click', function() {
        const newModule = {
            id: Date.now(),
            title: 'New Module',
            description: '',
            lessons: []
        };
        
        modules.push(newModule);
        renderModulePreview(newModule);
        openModuleEditor(newModule);
    });
    
    // Add Lesson
    addLessonBtn.addEventListener('click', function() {
        if (!currentModule) return;
        
        const newLesson = {
            id: Date.now(),
            type: 'video',
            title: 'New Lesson',
            duration: '',
            content: ''
        };
        
        currentModule.lessons.push(newLesson);
        renderLesson(newLesson);
    });
    
    // Save Curriculum
    saveCurriculumBtn.addEventListener('click', function() {
        alert('Curriculum saved successfully!');
        console.log('Saved modules:', modules);
    });
    
    // Close Editor
    closeEditorBtn.addEventListener('click', function() {
        editorView.classList.add('hidden');
        builderView.classList.remove('hidden');
        currentModule = null;
    });
    
    // Module Title Update
    moduleTitleInput.addEventListener('input', function() {
        if (currentModule) {
            currentModule.title = this.value;
            editableTitle.textContent = this.value;
            updateModulePreview(currentModule);
        }
    });
    
    // Functions
    function openModuleEditor(module) {
        currentModule = module;
        moduleTitleInput.value = module.title;
        editableTitle.textContent = module.title;
        lessonsContainer.innerHTML = '';
        
        module.lessons.forEach(lesson => {
            renderLesson(lesson);
        });
        
        builderView.classList.add('hidden');
        editorView.classList.remove('hidden');
    }
    
    function renderModulePreview(module) {
        const moduleEl = document.createElement('div');
        moduleEl.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-100';
        moduleEl.dataset.moduleId = module.id;
        moduleEl.innerHTML = `
            <div class="flex justify-between items-center">
                <h3 class="font-medium">${module.title}</h3>
                <button class="text-gray-500 hover:text-primary-600 edit-module-btn">
                    <i data-feather="edit-2" class="w-4 h-4"></i>
                </button>
            </div>
            <div class="mt-2 space-y-2" id="module-lessons-${module.id}">
                ${module.lessons.length > 0 ? 
                    module.lessons.map(lesson => `
                        <div class="flex items-center gap-2 text-sm">
                            <i data-feather="${getLessonIcon(lesson.type)}" class="w-4 h-4 text-gray-500"></i>
                            <span>${lesson.title}${lesson.duration ? ` (${lesson.duration} min)` : ''}</span>
                        </div>
                    `).join('') :
                    '<p class="text-sm text-gray-400">No lessons yet</p>'
                }
            </div>
        `;
        
        previewContainer.appendChild(moduleEl);
        feather.replace();
        
        // Add click handler for edit button
        moduleEl.querySelector('.edit-module-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            openModuleEditor(module);
        });
        
        // Add click handler for entire module
        moduleEl.addEventListener('click', () => {
            openModuleEditor(module);
        });
    }
    
    function updateModulePreview(module) {
        const moduleEl = previewContainer.querySelector(`[data-module-id="${module.id}"]`);
        if (moduleEl) {
            moduleEl.querySelector('h3').textContent = module.title;
            
            const lessonsContainer = moduleEl.querySelector(`#module-lessons-${module.id}`);
            lessonsContainer.innerHTML = module.lessons.length > 0 ? 
                module.lessons.map(lesson => `
                    <div class="flex items-center gap-2 text-sm">
                        <i data-feather="${getLessonIcon(lesson.type)}" class="w-4 h-4 text-gray-500"></i>
                        <span>${lesson.title}${lesson.duration ? ` (${lesson.duration} min)` : ''}</span>
                    </div>
                `).join('') :
                '<p class="text-sm text-gray-400">No lessons yet</p>';
            
            feather.replace();
        }
    }
    
    function renderLesson(lesson) {
        const lessonEl = document.createElement('div');
        lessonEl.className = 'bg-gray-50 p-4 rounded-lg border border-gray-200';
        lessonEl.innerHTML = `
            <div class="flex justify-between items-start mb-2">
                <div>
                    <h4 class="font-medium">${lesson.title}</h4>
                    <div class="flex items-center gap-4 mt-1">
                        <span class="text-sm text-gray-500">${lesson.type}</span>
                        ${lesson.duration ? `<span class="text-sm text-gray-500">${lesson.duration} min</span>` : ''}
                    </div>
                </div>
                <div class="flex gap-2">
                    <button class="text-gray-500 hover:text-primary-600 edit-lesson-btn">
                        <i data-feather="edit-2" class="w-4 h-4"></i>
                    </button>
                    <button class="text-gray-500 hover:text-red-600 delete-lesson-btn">
                        <i data-feather="trash-2" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
            <p class="text-sm text-gray-500">${lesson.content || 'No content yet'}</p>
        `;
        
        lessonsContainer.appendChild(lessonEl);
        feather.replace();
        
        // Add event handlers
        lessonEl.querySelector('.edit-lesson-btn').addEventListener('click', () => {
            editLesson(lesson);
        });
        
        lessonEl.querySelector('.delete-lesson-btn').addEventListener('click', () => {
            deleteLesson(lesson);
        });
    }
    
    function editLesson(lesson) {
        // In a real app, you'd open a modal or form to edit the lesson
        const newTitle = prompt('Edit lesson title:', lesson.title);
        if (newTitle !== null) {
            lesson.title = newTitle;
            const moduleIndex = modules.findIndex(m => m.id === currentModule.id);
            if (moduleIndex !== -1) {
                const lessonIndex = modules[moduleIndex].lessons.findIndex(l => l.id === lesson.id);
                if (lessonIndex !== -1) {
                    modules[moduleIndex].lessons[lessonIndex] = lesson;
                    updateModulePreview(currentModule);
                    lessonsContainer.innerHTML = '';
                    currentModule.lessons.forEach(l => renderLesson(l));
                }
            }
        }
    }
    
    function deleteLesson(lesson) {
        if (confirm('Are you sure you want to delete this lesson?')) {
            const moduleIndex = modules.findIndex(m => m.id === currentModule.id);
            if (moduleIndex !== -1) {
                modules[moduleIndex].lessons = modules[moduleIndex].lessons.filter(l => l.id !== lesson.id);
                updateModulePreview(currentModule);
                lessonsContainer.innerHTML = '';
                currentModule.lessons.forEach(l => renderLesson(l));
            }
        }
    }
    
    function getLessonIcon(type) {
        switch(type.toLowerCase()) {
            case 'video': return 'play';
            case 'reading': return 'file-text';
            case 'quiz': return 'check-circle';
            case 'assignment': return 'edit-3';
            default: return 'file';
        }
    }
});