110 lines
4.3 KiB
PHP
110 lines
4.3 KiB
PHP
<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>
|