<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h1 class="text-2xl font-bold mb-6">
                        Manage Course: {{ $course->subject->name }} ({{ $course->level->name }})
                    </h1>



{{-- Show ONLY the module this section belongs to --}}
<div class="mb-6">
    <h2 class="text-xl font-semibold mb-2">
        {{ $section->module->name }}
    </h2>

    <div class="ml-4 mb-6">
        <h3 class="text-lg font-semibold mb-2">
            Chapters ({{ $section->title }})
        </h3>

        {{-- Reorder form --}}
        <form action="{{ route('admin.chapters.reorder') }}"
              method="POST"
              id="reorderForm-{{ $section->id }}">
            @csrf

            <ul id="chapter-list-{{ $section->id }}"
                class="border rounded mb-3 divide-y divide-gray-200 sortable-item">

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

                        <div class="flex items-center gap-2">
                            <span class="cursor-move text-gray-400 select-none">⋮⋮</span>

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

                        <button type="button"
                                onclick="if (confirmDelete('{{ $chapter->title }}')) { 
                                    document.getElementById('delete-form-{{ $chapter->id }}').submit();
                                }"
                                class="text-red-600 hover:text-red-800">
                            ✖
                        </button>
                    </li>
                @endforeach

            </ul>

            <input type="hidden" name="order" id="orderInput-{{ $section->id }}">

            <button type="submit"
                    class="px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 text-sm font-medium">
                💾 Save Order
            </button>
        </form>

        {{-- Delete forms --}}
        @foreach($section->chapters as $chapter)
            <form id="delete-form-{{ $chapter->id }}"
                  action="{{ route('admin.chapters.destroy', $chapter->id) }}"
                  method="POST"
                  class="hidden">
                @csrf
                @method('DELETE')
            </form>
        @endforeach

        {{-- Add Chapter --}}
        <form action="{{ route('admin.chapters.store') }}" method="POST" class="mt-4 flex gap-2">
            @csrf
            <input type="hidden" name="lesson_section_id" value="{{ $section->id }}">

            <input type="text"
                   name="title"
                   class="flex-1 border-gray-300 rounded-md shadow-sm focus:ring-blue-200"
                   placeholder="New Chapter Title"
                   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
            </button>
        </form>
    </div>
</div>


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

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    document.querySelectorAll('[id^="chapter-list-"]').forEach(list => {
        new Sortable(list, { animation: 150 });

        const sectionId = list.id.replace('chapter-list-', '');
        const form = document.getElementById('reorderForm-' + sectionId);
        const hiddenInput = document.getElementById('orderInput-' + sectionId);

        form.addEventListener('submit', function () {
            const ids = Array.from(list.querySelectorAll('li')).map(li => li.dataset.id);
            hiddenInput.value = JSON.stringify(ids);
        });
    });

    function confirmDelete(title) {
        return confirm(
            `Are you sure you want to delete the chapter "${title}"?\n\n` +
            `⚠️ This will also remove all topics and videos inside it.`
        );
    }
</script>
