{% extends "base.html" %}
{% load static %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto mt-8 px-4">
        <div>
            <a href="/education/instructor_dashboard/"
               class="mt-4 inline-flex items-center justify-center mb-10 px-4 py-2 bg-blue-600 text-white font-semibold text-lg rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to Dashboard
            </a>
            <h2 class="text-3xl font-bold text-gray-800">{{ course.title }} - Content Management</h2>
            <p class="text-gray-600 mt-2">Organize your course content by adding, editing, or reordering sections and lectures.</p>
            <div class="bg-white shadow-lg rounded-lg mt-6">
                <div class="flex justify-between items-center p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-t-lg">
                    <h5 class="text-xl font-semibold text-gray-800">Course Sections</h5>
                    <button type="button"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300"
                            onclick="toggleModal('addSectionModal')">Add Section</button>
                </div>
                <div class="p-6">
                    <div id="sections-container">
                        {% for section in course.sections.all %}
                            <div class="section-item mb-6" data-section-id="{{ section.id }}">
                                <div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
                                    <div class="flex flex-col">
                                        <div class="flex items-center">
                                            <span class="section-handle mr-3 cursor-move text-gray-400 hover:text-gray-600">
                                                <i class="fas fa-grip-vertical"></i>
                                            </span>
                                            <h5 class="text-lg font-medium text-gray-800">{{ section.order }}. {{ section.title }}</h5>
                                        </div>
                                        {% if section.description %}<p class="text-sm text-gray-600 mt-1">{{ section.description }}</p>{% endif %}
                                    </div>
                                    <div class="flex space-x-2">
                                        <button type="button"
                                                class="px-3 py-1.5 text-sm bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition duration-300 add-lecture"
                                                onclick="toggleAddLectureModal('{{ section.id }}')"
                                                data-section-id="{{ section.id }}">Add Lecture</button>
                                        <button type="button"
                                                class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition duration-300 edit-section"
                                                onclick="toggleEditSectionModal('{{ section.id }}')"
                                                data-section-id="{{ section.id }}"
                                                data-section-title="{{ section.title }}">Edit</button>
                                        <button type="button"
                                                class="px-3 py-1.5 text-sm bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition duration-300 delete-section"
                                                data-section-id="{{ section.id }}"
                                                onclick="toggleDeleteModal('sec', '{{ section.id }}')">Delete</button>
                                    </div>
                                </div>
                                <div class="lectures-container pl-6 mt-3">
                                    {% for lecture in section.lectures.all %}
                                        <div class="lecture-item flex justify-between items-center p-3 border-b hover:bg-gray-50 transition duration-300"
                                             data-lecture-id="{{ lecture.id }}">
                                            <div class="flex items-center">
                                                <span class="lecture-handle mr-3 cursor-move text-gray-400 hover:text-gray-600">
                                                    <i class="fas fa-grip-lines"></i>
                                                </span>
                                                <div>
                                                    <h6 class="text-base font-medium text-gray-800">{{ lecture.order }}. {{ lecture.title }}</h6>
                                                    {% if lecture.description %}<p class="text-sm text-gray-900 mt-1">{{ lecture.description }}</p>{% endif %}
                                                    <small class="text-gray-500">
                                                        {{ lecture.get_content_type_display }}
                                                        {% if lecture.duration %}• {{ lecture.duration }} min{% endif %}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="flex space-x-2">
                                                <button type="button"
                                                        class="text-blue-600 hover:text-blue-800 transition duration-300 edit-lecture"
                                                        onclick="toggleModal('editLectureModal')"
                                                        data-lecture-id="{{ lecture.id }}">Edit</button>
                                                <button type="button"
                                                        class="text-red-600 hover:text-red-800 transition duration-300 delete-lecture"
                                                        data-lecture-id="{{ lecture.id }}"
                                                        onclick="toggleDeleteModal('lec', '{{ lecture.id }}')">
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    {% empty %}
                                        <div class="text-center p-4 text-gray-500">
                                            <p>No lectures in this section yet.</p>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% empty %}
                            <div class="text-center p-6 text-gray-500">
                                <p>No sections available. Create your first section to get started.</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="addSectionModal"
         class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 lg:w-1/3 max-h-screen overflow-y-auto">
            <form method="post" action="{% url 'add_section' course.id %}">
                {% csrf_token %}
                <div class="p-6 border-b">
                    <h5 class="text-xl font-semibold text-gray-800">Add New Section</h5>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <label for="sectionTitle" class="block text-sm font-medium text-gray-700">Section Title</label>
                        <input type="text"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               id="sectionTitle"
                               name="title"
                               required>
                    </div>
                    <div class="mb-4">
                        <label for="sectionOrder" class="block text-sm font-medium text-gray-700">Order</label>
                        <input type="number"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               id="sectionOrder"
                               name="order"
                               min="1"
                               value="{{ next_section_order }}">
                    </div>
                </div>
                <div class="p-6 border-t flex justify-end space-x-3">
                    <button type="button"
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition duration-300"
                            onclick="toggleModal('addSectionModal')">Cancel</button>
                    <button type="submit"
                            class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">
                        Create Section
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="editSectionModal"
         class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50 ">
        <div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 lg:w-1/3 max-h-screen overflow-y-auto">
            <form method="post"
                  action="{% url 'edit_section' 0 %}"
                  id="editSectionForm">
                {% csrf_token %}
                <div class="p-6 border-b">
                    <h5 class="text-xl font-semibold text-gray-800">Edit Section</h5>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <label for="editSectionTitle"
                               class="block text-sm font-medium text-gray-700">Section Title</label>
                        <input type="text"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               id="editSectionTitle"
                               name="title"
                               required>
                        <label for="editSectionDescription"
                               class="block text-sm font-medium text-gray-700 mt-5">Section Description</label>
                        <textarea id="editSectionDescription"
                                  name="description"
                                  rows="3"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>
                <div class="p-6 border-t flex justify-end space-x-3">
                    <button type="button"
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition duration-300"
                            onclick="toggleModal('editSectionModal')">Cancel</button>
                    <button type="submit"
                            class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="addLectureModal"
         class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 lg:w-2/3 max-h-screen overflow-y-auto">
            <form method="post" action="{% url 'add_lecture' 0 %}" id="addLectureForm">
                {% csrf_token %}
                <input type="hidden" name="section_id" id="lectureSection">
                <div class="p-6 border-b">
                    <h5 class="text-xl font-semibold text-gray-800">Add New Lecture</h5>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="lectureTitle" class="block text-sm font-medium text-gray-700">Lecture Title</label>
                        <input type="text"
                               id="lectureTitle"
                               name="title"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required>
                    </div>
                    <div>
                        <label for="contentType" class="block text-sm font-medium text-gray-700">Content Type</label>
                        <select id="contentType"
                                name="content_type"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                onchange="toggleContentFields(this.value)">
                            <option value="VIDEO" selected>Video Lecture</option>
                            <option value="LIVE">Live Session</option>
                            <option value="DOCUMENT">Document</option>
                        </select>
                    </div>
                    <div>
                        <label for="lectureDuration" class="block text-sm font-medium text-gray-700">Duration (in minutes)</label>
                        <input type="number"
                               id="lectureDuration"
                               name="duration"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="lectureDescription"
                               class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="lectureDescription"
                                  name="description"
                                  rows="3"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div id="videoFields" class="content-fields hidden space-y-4">
                        <div>
                            <label for="videoUrl" class="block text-sm font-medium text-gray-700">Video URL</label>
                            <input type="url"
                                   id="videoUrl"
                                   name="video_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div id="liveFields" class="content-fields hidden space-y-4">
                        <div>
                            <label for="liveUrl" class="block text-sm font-medium text-gray-700">Live Session URL</label>
                            <input type="url"
                                   id="liveUrl"
                                   name="live_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="scheduledTime" class="block text-sm font-medium text-gray-700">Scheduled Time</label>
                            <input type="datetime-local"
                                   id="scheduledTime"
                                   name="scheduled_time"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="recordingUrl" class="block text-sm font-medium text-gray-700">Recording URL (optional)</label>
                            <input type="url"
                                   id="recordingUrl"
                                   name="recording_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div id="documentFields" class="content-fields hidden space-y-4">
                        <div>
                            <label for="documentContent" class="block text-sm font-medium text-gray-700">Content</label>
                            <textarea id="documentContent"
                                      name="content"
                                      rows="4"
                                      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t flex justify-end space-x-3">
                    <button type="button"
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition duration-300"
                            onclick="toggleModal('addLectureModal')">Cancel</button>
                    <button type="submit"
                            class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">
                        Create Lecture
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="editLectureModal"
         class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 lg:w-2/3 max-h-screen overflow-y-auto">
            <form method="post"
                  action="{% url 'edit_lecture' 0 %}"
                  id="editLectureForm">
                {% csrf_token %}
                <div class="p-6 border-b">
                    <h5 class="text-xl font-semibold text-gray-800">Edit Lecture</h5>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="editLectureTitle"
                               class="block text-sm font-medium text-gray-700">Lecture Title</label>
                        <input type="text"
                               id="editLectureTitle"
                               name="title"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required>
                    </div>
                    <div>
                        <label for="editContentType" class="block text-sm font-medium text-gray-700">Content Type</label>
                        <select id="editContentType"
                                name="content_type"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                onchange="toggleEditContentFields(this.value)">
                            <option value="VIDEO">Video Lecture</option>
                            <option value="LIVE">Live Session</option>
                            <option value="DOCUMENT">Document</option>
                        </select>
                    </div>
                    <div>
                        <label for="editLectureDuration"
                               class="block text-sm font-medium text-gray-700">Duration (in minutes)</label>
                        <input type="number"
                               id="editLectureDuration"
                               name="duration"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="editLectureDescription"
                               class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="editLectureDescription"
                                  name="description"
                                  rows="3"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div id="editVideoFields" class="edit-content-fields hidden space-y-4">
                        <div>
                            <label for="editVideoUrl" class="block text-sm font-medium text-gray-700">Video URL</label>
                            <input type="url"
                                   id="editVideoUrl"
                                   name="video_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="editDocumentContent"
                                   class="block text-sm font-medium text-gray-700">Content</label>
                            <textarea id="editDocumentContent"
                                      name="content"
                                      rows="4"
                                      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                    <div id="editLiveFields" class="edit-content-fields hidden space-y-4">
                        <div>
                            <label for="editLiveUrl" class="block text-sm font-medium text-gray-700">Live Session URL</label>
                            <input type="url"
                                   id="editLiveUrl"
                                   name="live_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="editScheduledTime"
                                   class="block text-sm font-medium text-gray-700">Scheduled Time</label>
                            <input type="datetime-local"
                                   id="editScheduledTime"
                                   name="scheduled_time"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label for="editRecordingUrl"
                                   class="block text-sm font-medium text-gray-700">Recording URL (optional)</label>
                            <input type="url"
                                   id="editRecordingUrl"
                                   name="recording_url"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div id="editDocumentFields" class="edit-content-fields hidden space-y-4">
                        <div>
                            <label for="editDocumentContent"
                                   class="block text-sm font-medium text-gray-700">Document Content</label>
                            <textarea id="editDocumentContent"
                                      name="content"
                                      rows="4"
                                      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t flex justify-end space-x-3">
                    <button type="button"
                            class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition duration-300"
                            onclick="toggleModal('editLectureModal')">Cancel</button>
                    <button type="submit"
                            class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition duration-300">
                        Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="confirmDeleteModal"
         class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 lg:w-1/3">
            <div class="p-6 border-b">
                <h5 class="text-xl font-semibold text-gray-800">Confirm Deletion</h5>
            </div>
            <div class="p-6">
                <p id="deleteConfirmationText" class="text-gray-700">Are you sure you want to delete this item?</p>
            </div>
            <form action="{% url 'delete_lecture' 0 %}"
                  id="confirmDeleteForm"
                  method="post">
                {% csrf_token %}
                <button type="button"
                        class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition duration-300"
                        onclick="toggleModal('confirmDeleteModal')">Cancel</button>
                <button type="submit"
                        id="confirmDeleteButton"
                        class="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition duration-300">
                    Delete
                </button>
            </form>
        </div>
    </div>
    <script>
        function toggleModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.toggle('hidden');
        }
    
        document.querySelectorAll('[data-modal-toggle]').forEach(button => {
            button.addEventListener('click', () => {
                const modalId = button.getAttribute('data-modal-toggle');
                toggleModal(modalId);
            });
        });

        async function toggleAddLectureModal(sectionId) {
            const modal = document.getElementById('addLectureModal');
            modal.classList.toggle('hidden');
            const form = document.getElementById('addLectureForm');
            form.action = `{% url 'add_lecture' 0 %}`.replace('0', sectionId);
        }

        async function toggleEditSectionModal(sectionId){
            const modal = document.getElementById('editSectionModal');
            modal.classList.toggle('hidden');
            const form = document.getElementById('editSectionForm');
            form.action = `{% url 'edit_section' 0 %}`.replace('0', sectionId);
            
            await fetchSectionData(sectionId)

        }

        async function toggleDeleteModal(itemType, itemId){
            const modal = document.getElementById('confirmDeleteModal');
            modal.classList.toggle('hidden');
            
            confirmText = ''
            action = ''
            if (itemType == 'lec'){
                confirmText = 'Are you sure you want to delete this lecture?'
                action = `{% url 'delete_lecture' 0 %}`.replace('0', itemId)
            } else if (itemType == 'sec'){
                confirmText = 'Are you sure you want to delete this section? All related lectures will also be deleted.'
                action = `{% url 'delete_section' 0 %}`.replace('0', itemId)
            } else {
                confirmText = 'Are you sure you want to delete this item?'
            }
            
            document.getElementById('deleteConfirmationText').textContent = confirmText;

            const form = document.getElementById('confirmDeleteForm');
            form.action = action

        }

    </script>
    {% block extra_js %}
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize sortable for sections
            const sectionsContainer = document.getElementById('sections-container');
            if (sectionsContainer) {
                new Sortable(sectionsContainer, {
                    handle: '.section-handle',
                    animation: 150,
                    onEnd: function(evt) {
                        updateSectionsOrder();
                    }
                });
            }
            
            // Initialize sortable for lectures within sections
            document.querySelectorAll('.lectures-container').forEach(container => {
                new Sortable(container, {
                    handle: '.lecture-handle',
                    animation: 150,
                    onEnd: function(evt) {
                        updateLecturesOrder(evt.to);
                    }
                });
            });
            
            document.getElementById('contentType').addEventListener('change', function() {
                toggleContentFields(this.value);
            });
            
            document.getElementById('editContentType').addEventListener('change', function() {
                toggleEditContentFields(this.value);
            });

            
    
            document.querySelectorAll('.edit-lecture').forEach(button => {
                button.addEventListener('click', async function() {
                    const lectureId = this.getAttribute('data-lecture-id');
                    await fetchLectureData(lectureId);
                });
            });

        });
        
        function toggleContentFields(contentType) {
            document.querySelectorAll('.content-fields').forEach(field => {
                field.classList.add('hidden');
            });

            if (contentType === 'VIDEO') {
                document.getElementById('videoFields').classList.remove('hidden');
                document.getElementById('documentFields').classList.remove('hidden');
            } else if (contentType === 'LIVE') {
                document.getElementById('liveFields').classList.remove('hidden');
            } else if (contentType === 'DOCUMENT') {
                document.getElementById('documentFields').classList.remove('hidden');
            }
        }


        document.addEventListener('DOMContentLoaded', function () {
            const defaultContentType = document.getElementById('contentType').value;
            toggleContentFields(defaultContentType);
        });
        
        function toggleEditContentFields(contentType) {
            document.querySelectorAll('.edit-content-fields').forEach(field => {
                field.classList.add('hidden');
            });
            
            if (contentType === 'VIDEO') {
                document.getElementById('editVideoFields').classList.remove('hidden');
            } else if (contentType === 'LIVE') {
                document.getElementById('editLiveFields').classList.remove('hidden');
            } else if (contentType === 'DOCUMENT') {
                document.getElementById('editDocumentFields').classList.remove('hidden');
            }
        }

        async function fetchSectionData(sectionId){
            try{
                const response = await fetch(`/education/instructor_dashboard/api/sections/${sectionId}/`)
                if (!response.ok) throw new Error('Failed to fetch section data');

                const section = await response.json()

                document.getElementById('editSectionTitle').value = section.title
                document.getElementById('editSectionDescription').value = section.description
                
            } catch (error) {
                console.error('Error fetching lecture data:', error);
                alert('Failed to load lecture data. Please try again.');
            }
        }
        
        async function fetchLectureData(lectureId) {
            try {
                const response = await fetch(`/education/instructor_dashboard/api/lectures/${lectureId}/`);
                if (!response.ok) throw new Error('Failed to fetch lecture data');
                
                const lecture = await response.json();
                
                document.getElementById('editLectureForm').action = "{% url 'edit_lecture' 0 %}".replace('0', lectureId);
                
                document.getElementById('editLectureTitle').value = lecture.title;
                document.getElementById('editContentType').value = lecture.content_type;
                document.getElementById('editLectureDuration').value = lecture.duration || '';
                document.getElementById('editLectureDescription').value = lecture.description || '';
                
                toggleEditContentFields(lecture.content_type);
                
                if (lecture.content_type === 'VIDEO') {
                    document.getElementById('editVideoUrl').value = lecture.video_url || '';
                    document.getElementById('editDocumentContent').value = lecture.content || '';
                } else if (lecture.content_type === 'LIVE') {
                    document.getElementById('editLiveUrl').value = lecture.live_url || '';
                    document.getElementById('editScheduledTime').value = formatDateForInput(lecture.scheduled_time);
                    document.getElementById('editRecordingUrl').value = lecture.recording_url || '';
                } else if (lecture.content_type === 'DOCUMENT') {
                    document.getElementById('editDocumentContent').value = lecture.content || '';
                }
            } catch (error) {
                console.error('Error fetching lecture data:', error);
                alert('Failed to load lecture data. Please try again.');
            }
        }
        
        function formatDateForInput(dateString) {
            if (!dateString) return '';
            
            const date = new Date(dateString);
            
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' +
                   String(date.getDate()).padStart(2, '0') + 'T' +
                   String(date.getHours()).padStart(2, '0') + ':' +
                   String(date.getMinutes()).padStart(2, '0');
        }
        
        function updateSectionsOrder() {
            const sections = [];
            
            document.querySelectorAll('.section-item').forEach((item, index) => {
                sections.push({
                    id: item.getAttribute('data-section-id'),
                    order: index + 1
                });
            });
            
            fetch("{% url 'update_sections_order' course.id %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ sections })
            })
            .then(response => {
                if (!response.ok) throw new Error('Failed to update sections order');
                return response.json();
            })
            .then(data => {
                console.log('Sections order updated successfully');
            })
            .catch(error => {
                console.error('Error updating sections order:', error);
            });
        }
        
        function updateLecturesOrder(container) {
            const sectionId = container.closest('.section-item').getAttribute('data-section-id');
            const lectures = [];
            
            container.querySelectorAll('.lecture-item').forEach((item, index) => {
                lectures.push({
                    id: item.getAttribute('data-lecture-id'),
                    order: index + 1
                });
            });
            
            fetch("{% url 'update_lectures_order' 0 %}".replace('0', sectionId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                body: JSON.stringify({ lectures })
            })
            .then(response => {
                if (!response.ok) throw new Error('Failed to update lectures order');
                return response.json();
            })
            .then(data => {
                console.log('Lectures order updated successfully');
            })
            .catch(error => {
                console.error('Error updating lectures order:', error);
            });
        }
        </script>
    {% endblock %}
{% endblock content %}