@extends('layouts.dashboard')

@section('title', 'Constructeur de Cours - Professeur Sciences Afrique')
@section('page-title', 'Constructeur de Cours')
@section('page-subtitle', 'Créer et organiser le contenu de votre cours.')

@section('content')
<div class="bg-white border border-gray-100 rounded-2xl overflow-hidden shadow-sm">
    <div class="p-6">
        <h2 class="text-xl font-bold text-gray-900 mb-4">{{ $course->name }}</h2>
        <p class="text-gray-600 mb-6">{{ $course->description ?? 'Aucune description' }}</p>

        <div class="flex space-x-4 mb-6">
            <a href="{{ route('teacher.courses.show', $course) }}" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                <i class="fa-solid fa-arrow-left mr-2"></i> Retour au cours
            </a>
            <button onclick="duplicateModule()" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                <i class="fa-solid fa-clone mr-2"></i> Dupliquer un module
            </button>
        </div>
    </div>

    <div class="p-6 space-y-6">
        <div class="space-y-4">
            @foreach($course->modules as $module)
                <div class="border border-gray-200 rounded-lg p-4" id="module-{{ $module->id }}">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-900">{{ $module->name }}</h3>
                            <p class="text-gray-600">{{ $module->description ?? 'Aucune description' }}</p>
                        </div>
                        <div class="flex space-x-2">
                            <button onclick="editModule({{ $module->id }})" class="text-royal-blue hover:text-royal-blue-dark">
                                <i class="fa-solid fa-pencil"></i>
                            </button>
                            <button onclick="deleteModule({{ $module->id }})" class="text-red-600 hover:text-red-700">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <button onclick="duplicateModule({{ $module->id }})" class="text-green-600 hover:text-green-700">
                                <i class="fa-solid fa-clone"></i>
                            </button>
                        </div>
                    </div>

                    <div class="space-y-4">
                        @foreach($module->lessons as $lesson)
                            <div class="border-l-4 border-royal-blue pl-4" id="lesson-{{ $lesson->id }}">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <h4 class="font-medium text-gray-900">{{ $lesson->name }}</h4>
                                        <p class="text-gray-600">{{ $lesson->description ?? 'Aucune description' }}</p>
                                    </div>
                                    <div class="flex space-x-2">
                                        <button onclick="editLesson({{ $lesson->id }})" class="text-royal-blue hover:text-royal-blue-dark">
                                            <i class="fa-solid fa-pencil"></i>
                                        </button>
                                        <button onclick="deleteLesson({{ $lesson->id }})" class="text-red-600 hover:text-red-700">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="space-y-3 ml-6">
                                    @foreach($lesson->contents as $content)
                                        <div class="border border-gray-200 rounded-lg p-3" id="content-{{ $content->id }}">
                                            <div class="flex items-center justify-between">
                                                <div class="flex-1">
                                                    <h5 class="font-medium text-gray-900">{{ $content->title }}</h5>
                                                    <p class="text-sm text-gray-600">{{ $content->type }}</p>
                                                </div>
                                                <div class="flex space-x-2">
                                                    <button onclick="editContent({{ $content->id }})" class="text-royal-blue hover:text-royal-blue-dark">
                                                        <i class="fa-solid fa-pencil"></i>
                                                    </button>
                                                    <button onclick="deleteContent({{ $content->id }})" class="text-red-600 hover:text-red-700">
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-4">
                        <button onclick="addLesson({{ $module->id }})" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                            <i class="fa-solid fa-plus mr-2"></i> Ajouter une leçon
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-6">
            <button onclick="addModule()" class="px-6 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                <i class="fa-solid fa-plus mr-2"></i> Ajouter un module
            </button>
        </div>
    </div>
</div>

<!-- Modals -->
<div id="moduleModal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
    <div class="absolute inset-0 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-lg font-semibold mb-4" id="moduleModalTitle">Ajouter un module</h3>
            <form id="moduleForm">
                <input type="hidden" id="moduleId">
                <div class="mb-4">
                    <label for="moduleName" class="block text-sm font-medium text-gray-700 mb-2">Nom du module</label>
                    <input type="text" id="moduleName" name="name" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                </div>
                <div class="mb-4">
                    <label for="moduleDescription" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea id="moduleDescription" name="description" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent"></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="closeModuleModal()" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Annuler
                    </button>
                    <button type="submit" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="lessonModal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
    <div class="absolute inset-0 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <h3 class="text-lg font-semibold mb-4" id="lessonModalTitle">Ajouter une leçon</h3>
            <form id="lessonForm">
                <input type="hidden" id="lessonModuleId">
                <input type="hidden" id="lessonId">
                <div class="mb-4">
                    <label for="lessonName" class="block text-sm font-medium text-gray-700 mb-2">Nom de la leçon</label>
                    <input type="text" id="lessonName" name="name" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                </div>
                <div class="mb-4">
                    <label for="lessonDescription" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea id="lessonDescription" name="description" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent"></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="closeLessonModal()" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Annuler
                    </button>
                    <button type="submit" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="contentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
    <div class="absolute inset-0 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-2xl">
            <h3 class="text-lg font-semibold mb-4" id="contentModalTitle">Ajouter un contenu</h3>
            <form id="contentForm">
                <input type="hidden" id="contentLessonId">
                <input type="hidden" id="contentId">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="contentTitle" class="block text-sm font-medium text-gray-700 mb-2">Titre</label>
                        <input type="text" id="contentTitle" name="title" required
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                    </div>
                    <div>
                        <label for="contentType" class="block text-sm font-medium text-gray-700 mb-2">Type</label>
                        <select id="contentType" name="type" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                            <option value="text">Texte</option>
                            <option value="video">Vidéo</option>
                            <option value="audio">Audio</option>
                            <option value="file">Fichier</option>
                            <option value="quiz">Quiz</option>
                        </select>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="contentDescription" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea id="contentDescription" name="description" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent"></textarea>
                </div>
                <div class="mb-4">
                    <label for="contentContent" class="block text-sm font-medium text-gray-700 mb-2">Contenu</label>
                    <textarea id="contentContent" name="content" rows="4"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent"></textarea>
                </div>
                <div class="mb-4">
                    <label for="contentFilePath" class="block text-sm font-medium text-gray-700 mb-2">Chemin du fichier</label>
                    <input type="text" id="contentFilePath" name="file_path"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                </div>
                <div class="mb-4">
                    <label for="contentDuration" class="block text-sm font-medium text-gray-700 mb-2">Durée</label>
                    <input type="text" id="contentDuration" name="duration"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent">
                </div>
                <div class="mb-4">
                    <label for="contentMetadata" class="block text-sm font-medium text-gray-700 mb-2">Métadonnées</label>
                    <textarea id="contentMetadata" name="metadata" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-royal-blue focus:border-transparent"></textarea>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="closeContentModal()" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                        Annuler
                    </button>
                    <button type="submit" class="px-4 py-2 text-white bg-royal-blue rounded-lg hover:bg-royal-blue-dark">
                        Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function addModule() {
    document.getElementById('moduleModalTitle').textContent = 'Ajouter un module';
    document.getElementById('moduleId').value = '';
    document.getElementById('moduleName').value = '';
    document.getElementById('moduleDescription').value = '';
    document.getElementById('moduleModal').classList.remove('hidden');
}

function editModule(moduleId) {
    const module = document.getElementById('module-' + moduleId);
    const name = module.querySelector('h3').textContent;
    const description = module.querySelector('p').textContent;

    document.getElementById('moduleModalTitle').textContent = 'Modifier le module';
    document.getElementById('moduleId').value = moduleId;
    document.getElementById('moduleName').value = name;
    document.getElementById('moduleDescription').value = description;
    document.getElementById('moduleModal').classList.remove('hidden');
}

function deleteModule(moduleId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer ce module ?')) {
        window.location.href = `/teacher/courses/${{{ $course->id }}}/modules/${moduleId}/delete`;
    }
}

function duplicateModule(moduleId = null) {
    if (moduleId) {
        if (confirm('Êtes-vous sûr de vouloir dupliquer ce module ?')) {
            window.location.href = `/teacher/courses/${{{ $course->id }}}/modules/${moduleId}/duplicate`;
        }
    } else {
        alert('Veuillez sélectionner un module à dupliquer.');
    }
}

function addLesson(moduleId) {
    document.getElementById('lessonModalTitle').textContent = 'Ajouter une leçon';
    document.getElementById('lessonModuleId').value = moduleId;
    document.getElementById('lessonId').value = '';
    document.getElementById('lessonName').value = '';
    document.getElementById('lessonDescription').value = '';
    document.getElementById('lessonModal').classList.remove('hidden');
}

function editLesson(lessonId) {
    const lesson = document.getElementById('lesson-' + lessonId);
    const name = lesson.querySelector('h4').textContent;
    const description = lesson.querySelector('p').textContent;

    document.getElementById('lessonModalTitle').textContent = 'Modifier la leçon';
    document.getElementById('lessonId').value = lessonId;
    document.getElementById('lessonName').value = name;
    document.getElementById('lessonDescription').value = description;
    document.getElementById('lessonModal').classList.remove('hidden');
}

function deleteLesson(lessonId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette leçon ?')) {
        window.location.href = `/teacher/lessons/${lessonId}/delete`;
    }
}

function addContent(lessonId) {
    document.getElementById('contentModalTitle').textContent = 'Ajouter un contenu';
    document.getElementById('contentLessonId').value = lessonId;
    document.getElementById('contentId').value = '';
    document.getElementById('contentTitle').value = '';
    document.getElementById('contentType').value = 'text';
    document.getElementById('contentDescription').value = '';
    document.getElementById('contentContent').value = '';
    document.getElementById('contentFilePath').value = '';
    document.getElementById('contentDuration').value = '';
    document.getElementById('contentMetadata').value = '';
    document.getElementById('contentModal').classList.remove('hidden');
}

function editContent(contentId) {
    const content = document.getElementById('content-' + contentId);
    const title = content.querySelector('h5').textContent;
    const type = content.querySelector('p').textContent;

    document.getElementById('contentModalTitle').textContent = 'Modifier le contenu';
    document.getElementById('contentId').value = contentId;
    document.getElementById('contentTitle').value = title;
    document.getElementById('contentType').value = type;
    document.getElementById('contentModal').classList.remove('hidden');
}

function deleteContent(contentId) {
    if (confirm('Êtes-vous sûr de vouloir supprimer ce contenu ?')) {
        window.location.href = `/teacher/contents/${contentId}/delete`;
    }
}

function closeModuleModal() {
    document.getElementById('moduleModal').classList.add('hidden');
}

function closeLessonModal() {
    document.getElementById('lessonModal').classList.add('hidden');
}

function closeContentModal() {
    document.getElementById('contentModal').classList.add('hidden');
}

// Form submissions
document.getElementById('moduleForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const moduleId = document.getElementById('moduleId').value;
    const courseId = {{ $course->id }};
    const url = moduleId ? `/teacher/modules/${moduleId}` : `/teacher/courses/${courseId}/modules`;
    const method = moduleId ? 'PUT' : 'POST';
    const formData = new FormData(this);

    fetch(url, {
        method: method,
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Une erreur est survenue.');
    });
});

document.getElementById('lessonForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const lessonId = document.getElementById('lessonId').value;
    const moduleId = document.getElementById('lessonModuleId').value;
    const courseId = {{ $course->id }};
    const url = lessonId ? `/teacher/lessons/${lessonId}` : `/teacher/modules/${moduleId}/lessons`;
    const method = lessonId ? 'PUT' : 'POST';
    const formData = new FormData(this);

    fetch(url, {
        method: method,
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Une erreur est survenue.');
    });
});

document.getElementById('contentForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const contentId = document.getElementById('contentId').value;
    const lessonId = document.getElementById('contentLessonId').value;
    const courseId = {{ $course->id }};
    const url = contentId ? `/teacher/contents/${contentId}` : `/teacher/lessons/${lessonId}/contents`;
    const method = contentId ? 'PUT' : 'POST';
    const formData = new FormData(this);

    fetch(url, {
        method: method,
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Une erreur est survenue.');
    });
});
</script>
@endsection