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

{% 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-4xl mx-auto">
        <!-- Header Section -->
        <div class="text-center mb-10">
            <div class="inline-flex items-center justify-center bg-primary/10 rounded-full p-4 mb-3">
                <i class="fas fa-plus-circle text-3xl text-primary"></i>
            </div>
            <h2 class="text-3xl sm:text-4xl font-extrabold mb-2">Add Course Outline</h2>
            <p class="text-base-content/70 max-w-xl mx-auto">Create the outline for <span class="font-semibold text-primary">{{ course.title }}</span></p>
        </div>

        <!-- Course Outline Form -->
        <div class="bg-base-100 rounded-xl shadow-lg p-6">
            <form method="POST" id="outlineForm">
                {{ form.csrf_token }}
                <div id="sections" class="space-y-6">
                    <!-- Template for a section -->
                    <div class="section bg-base-200/50 p-4 rounded-lg">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold">Section 1</h3>
                            <button type="button" class="btn btn-ghost btn-sm text-error remove-section" onclick="removeSection(this)">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        <div class="space-y-4">
                            <div class="form-control">
                                <label class="label">
                                    <span class="label-text font-medium">Section Title</span>
                                </label>
                                <input type="text" name="sections[0][title]" value="Week 1" class="input input-bordered" required>
                            </div>
                            <div class="topics space-y-2">
                                <div class="topic flex items-center gap-2">
                                    <input type="text" name="sections[0][topics][]" class="input input-bordered flex-1" placeholder="Topic title" required>
                                    <button type="button" class="btn btn-ghost btn-sm text-error" onclick="removeTopic(this)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-ghost btn-sm" onclick="addTopic(this)">
                                <i class="fas fa-plus mr-2"></i> Add Topic
                            </button>
                        </div>
                    </div>
                </div>

                <div class="flex justify-center gap-4 mt-8">
                    <button type="button" class="btn btn-outline" onclick="addSection()">
                        <i class="fas fa-plus mr-2"></i> Add Section
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i> Save Outline
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let sectionCount = 1;

function addSection() {
    const sections = document.getElementById('sections');
    const newSection = sections.children[0].cloneNode(true);
    sectionCount++;
    
    // Update section title
    newSection.querySelector('h3').textContent = `Section ${sectionCount}`;
    
    // Update input names
    const inputs = newSection.querySelectorAll('input');
    inputs.forEach(input => {
        const name = input.name;
        input.name = name.replace(/sections\[\d+\]/, `sections[${sectionCount-1}]`);
        input.value = '';
        
        // Pre-populate section title with "Week X"
        if (name.includes('[title]')) {
            input.value = `Week ${sectionCount}`;
        }
    });
    
    // Clear all but one topic
    const topics = newSection.querySelector('.topics');
    const firstTopic = topics.children[0].cloneNode(true);
    firstTopic.querySelector('input').value = '';
    topics.innerHTML = '';
    topics.appendChild(firstTopic);
    
    sections.appendChild(newSection);
}

function removeSection(button) {
    if (document.querySelectorAll('.section').length > 1) {
        button.closest('.section').remove();
        updateSectionNumbers();
    }
}

function updateSectionNumbers() {
    const sections = document.querySelectorAll('.section');
    sections.forEach((section, index) => {
        section.querySelector('h3').textContent = `Section ${index + 1}`;
        const inputs = section.querySelectorAll('input');
        inputs.forEach(input => {
            const name = input.name;
            input.name = name.replace(/sections\[\d+\]/, `sections[${index}]`);
        });
    });
    sectionCount = sections.length;
}

function addTopic(button) {
    const topics = button.parentElement.querySelector('.topics');
    const newTopic = topics.children[0].cloneNode(true);
    newTopic.querySelector('input').value = '';
    topics.appendChild(newTopic);
}

function removeTopic(button) {
    const topics = button.closest('.topics');
    if (topics.children.length > 1) {
        button.closest('.topic').remove();
    }
}
</script>
{% endblock %}