<x-app-layout>
    <div class="py-12">
        <div class="max-w-4xl 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">
                        Topic: {{ $lesson->title }}
                    </h1>

                    {{-- Add Video --}}
                    <div class="mb-8">
                        <h2 class="text-lg font-semibold mb-2">Add New Video</h2>

                        <form action="{{ route('admin.videos.store') }}" method="POST" class="space-y-4">
                            @csrf
                            <input type="hidden" name="lesson_id" value="{{ $lesson->id }}">

                            {{-- Title --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Video Title</label>
                                <input type="text" name="title"
                                       class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                       required>
                            </div>

                            {{-- URL --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Video URL</label>
                                <input type="url" name="video_url"
                                       class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-200 focus:border-blue-300"
                                       required>
                            </div>

                            <button type="submit"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm font-medium">
                                ➕ Add Video
                            </button>
                        </form>
                    </div>

					{{-- Videos List --}}
					<div>
						<h2 class="text-lg font-semibold mb-2">Videos</h2>

						{{-- Reorder form --}}
						<form action="{{ route('admin.videos.reorder') }}" method="POST" id="reorderVideosForm">
							@csrf

							<ul id="video-list" class="border rounded divide-y divide-gray-200 sortable-item mb-4">
								@foreach($lesson->videos as $video)
									<li class="flex items-center justify-between px-3 py-2 hover:bg-gray-50"
										data-id="{{ $video->id }}">

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

											<div class="flex flex-col">
												<span class="font-medium">{{ $video->title }}</span>
												<span class="text-xs text-gray-500 break-all">{{ $video->video_url }}</span>
											</div>
										</div>

										{{-- Delete button (now triggers external hidden form) --}}
										<button type="button"
												onclick="if (confirm('Delete this video?')) { document.getElementById('delete-video-{{ $video->id }}').submit(); }"
												class="text-red-600 hover:text-red-800 text-sm font-medium px-2">
											✖
										</button>
									</li>
								@endforeach
							</ul>

							<input type="hidden" name="order" id="videoOrderInput">

							<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>

						{{-- Hidden delete forms (must be outside reorder form) --}}
						@foreach($lesson->videos as $video)
							<form id="delete-video-{{ $video->id }}"
								  action="{{ route('admin.videos.destroy', $video->id) }}"
								  method="POST"
								  class="hidden">
								@csrf
								@method('DELETE')
							</form>
						@endforeach
					</div>

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

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    const videoList = document.getElementById('video-list');
    new Sortable(videoList, { animation: 150 });

    document.getElementById('reorderVideosForm').addEventListener('submit', () => {
        const ids = [...videoList.querySelectorAll('li')].map(li => li.dataset.id);
        document.getElementById('videoOrderInput').value = JSON.stringify(ids);
    });
</script>
