<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="p-6 text-gray-900">

                    <h1 class="text-2xl font-bold mb-6">
                        Manage Course: {{ $course->subject->name }} ({{ $course->level->name }})
                    </h1>

                    @forelse($course->modules as $module)
                        <div class="mb-10">
                            <!-- Module Name -->
                            <h2 class="text-xl font-semibold mb-4">
                                {{ $module->name }}
                            </h2>

                            <div class="bg-gray-50 border rounded-lg p-5">

                                <!-- SECTION HEADER + ADD FORM -->
                                <div class="flex items-center justify-between mb-4">
                                    <h3 class="text-lg font-semibold">
                                        Lesson Sections
                                    </h3>

                                    <form action="{{ route('admin.sections.store', ['course' => $course->slug]) }}"
                                          method="POST"
                                          class="flex items-center gap-2">
                                        @csrf
                                        <input type="hidden" name="module_id" value="{{ $module->id }}">

                                        <input type="text"
                                               name="title"
                                               placeholder="New Section Title"
                                               required
                                               class="border rounded px-2 py-1 text-sm w-48 focus:ring-blue-200 focus:border-blue-300">

                                        <button type="submit"
                                                class="px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 text-sm font-medium">
                                            ➕ Add
                                        </button>
                                    </form>
                                </div>

                                <!-- SECTION LIST -->
                                <ul id="section-list-{{ $module->id }}"
                                    class="border rounded divide-y divide-gray-200 sortable-item bg-white">

                                    @foreach($module->lessonSections->sortBy('order') as $section)
                                        <li class="flex items-center justify-between px-4 py-2 hover:bg-gray-50"
                                            data-id="{{ $section->id }}">

                                            <!-- Drag handle + link -->
                                            <div class="flex items-center gap-3">
                                                <span class="cursor-move text-gray-400 select-none">⋮⋮</span>

                                                <a href="{{ route('admin.sections.show', [
                                                    'course'  => $course->slug,
                                                    'section' => $section->slug
                                                ]) }}"
                                                   class="text-blue-600 hover:underline">
                                                    {{ $section->title }}
                                                </a>
                                            </div>

                                            <!-- Rename + Delete -->
                                            <div class="flex items-center gap-2">

                                                <!-- RENAME -->
                                                <form action="{{ route('admin.sections.update', [
                                                        'course' => $course->slug,
                                                        'lessonSection' => $section->slug
                                                    ]) }}"
                                                      method="POST"
                                                      class="flex items-center gap-1">
                                                    @csrf
                                                    @method('PUT')

                                                    <input type="text"
                                                           name="title"
                                                           value="{{ $section->title }}"
                                                           class="border border-gray-300 rounded px-2 py-0.5 text-sm w-40 focus:ring-blue-200 focus:border-blue-300">

                                                    <button type="submit"
                                                            class="text-blue-600 hover:text-blue-800 text-sm">
                                                        ✔
                                                    </button>
                                                </form>

                                                <!-- DELETE -->
                                                <button onclick="if (confirmDelete('{{ $section->title }}')) document.getElementById('delete-section-{{ $section->id }}').submit();"
                                                        class="text-red-600 hover:text-red-800 text-sm">
                                                    ✖
                                                </button>

                                            </div>

                                            <!-- SINGLE DELETE FORM (correct route, no duplicates) -->
                                            <form id="delete-section-{{ $section->id }}"
                                                  action="{{ route('admin.sections.destroy', [
                                                      'course'  => $course->slug,
                                                      'section' => $section->slug
                                                  ]) }}"
                                                  method="POST"
                                                  class="hidden">
                                                @csrf
                                                @method('DELETE')
                                            </form>

                                        </li>
                                    @endforeach
                                </ul>

                                <!-- Hidden reorder field + button -->
                                <button form="reorderForm-{{ $module->id }}"
                                        class="mt-3 px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 text-sm font-medium">
                                    💾 Save Section Order
                                </button>

                                <form action="{{ route('admin.sections.reorder', ['course' => $course->slug]) }}"
                                      method="POST"
                                      id="reorderForm-{{ $module->id }}"
                                      class="hidden">
                                    @csrf
                                    <input type="hidden" name="order" id="reorderInput-{{ $module->id }}">
                                </form>

                            </div>
                        </div>
                    @empty
                        <p class="text-gray-600">
                            No modules yet.
                            <a href="{{ route('admin.modules.create') }}" class="text-blue-600 hover:underline">
                                Add a module
                            </a>
                        </p>
                    @endforelse

					<!-- Add New Module -->
					<div class="mt-8 bg-gray-50 border rounded-lg p-5">
						<h3 class="text-lg font-semibold mb-4">Add a New Module</h3>

						<form action="{{ route('admin.modules.store') }}" method="POST" class="flex gap-3">
							@csrf

							<input type="hidden" name="course_id" value="{{ $course->id }}">

							<input type="text"
								   name="name"
								   class="flex-1 border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200"
								   placeholder="Module Name"
								   required>

							<button type="submit"
									class="px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 text-sm font-medium">
								➕ Add Module
							</button>
						</form>
					</div>
                </div>
            </div>

        </div>
    </div>
</x-app-layout>

<!-- Sortable -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    // Reorder handling
    document.querySelectorAll('[id^="section-list-"]').forEach(list => {
        const moduleId = list.id.replace('section-list-', '');
        const reorderForm = document.getElementById('reorderForm-' + moduleId);
        const reorderInput = document.getElementById('reorderInput-' + moduleId);

        new Sortable(list, { animation: 150 });

        reorderForm.addEventListener('submit', function () {
            const ids = [...list.querySelectorAll('li')].map(li => li.dataset.id);
            reorderInput.value = JSON.stringify(ids);
        });
    });

    function confirmDelete(name) {
        return confirm(
            `Are you sure you want to delete the lesson section "${name}"?\n\n` +
            `⚠️ All chapters and lessons inside it will also be deleted.`
        );
    }
</script>
