114 lines
4.9 KiB
PHP
114 lines
4.9 KiB
PHP
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
|
||
|
||
<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">
|
||
Chapter: {{ $chapter->title }}
|
||
</h1>
|
||
|
||
{{-- Reorder Lessons --}}
|
||
<form action="{{ route('admin.lessons.reorder') }}"
|
||
method="POST"
|
||
id="reorderLessonsForm"
|
||
class="mb-6">
|
||
@csrf
|
||
|
||
<ul id="lesson-list"
|
||
class="border rounded divide-y divide-gray-200 sortable-item">
|
||
@foreach($chapter->lessons->sortBy('order') as $lesson)
|
||
<li class="flex items-center justify-between px-3 py-2 hover:bg-gray-50"
|
||
data-id="{{ $lesson->id }}">
|
||
|
||
{{-- Drag + title --}}
|
||
<div class="flex items-center gap-2">
|
||
<span class="cursor-move text-gray-400 select-none">⋮⋮</span>
|
||
|
||
<a href="{{ route('admin.lessons.show', [
|
||
'course' => $course->slug,
|
||
'chapter' => $chapter->slug,
|
||
'lesson' => $lesson->slug
|
||
]) }}"
|
||
class="text-gray-800 hover:underline">
|
||
{{ $lesson->title }}
|
||
</a>
|
||
</div>
|
||
|
||
{{-- Delete button (now triggers external form) --}}
|
||
<button type="button"
|
||
onclick="deleteLesson('{{ $lesson->id }}', '{{ addslashes($lesson->title) }}')"
|
||
class="text-red-600 hover:text-red-800">
|
||
✖
|
||
</button>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
|
||
<input type="hidden" name="order" id="lessonOrderInput">
|
||
|
||
<button type="submit"
|
||
class="mt-3 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 --}}
|
||
@foreach($chapter->lessons as $lesson)
|
||
<form id="delete-form-{{ $lesson->id }}"
|
||
action="{{ route('admin.lessons.destroy', [
|
||
'course' => $course->slug,
|
||
'chapter' => $chapter->slug,
|
||
'lesson' => $lesson->slug
|
||
]) }}"
|
||
method="POST"
|
||
class="hidden">
|
||
@csrf
|
||
@method('DELETE')
|
||
</form>
|
||
@endforeach
|
||
|
||
{{-- Add New Lesson --}}
|
||
<form action="{{ route('admin.lessons.store') }}"
|
||
method="POST"
|
||
class="mt-4 flex gap-2">
|
||
@csrf
|
||
<input type="hidden" name="chapter_id" value="{{ $chapter->id }}">
|
||
|
||
<input type="text"
|
||
name="title"
|
||
class="flex-1 border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200"
|
||
placeholder="New Topic 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>
|
||
</x-app-layout>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
||
<script>
|
||
const lessonList = document.getElementById('lesson-list');
|
||
new Sortable(lessonList, { animation: 150 });
|
||
|
||
document.getElementById('reorderLessonsForm').addEventListener('submit', function () {
|
||
const ids = Array.from(lessonList.querySelectorAll('li')).map(li => li.dataset.id);
|
||
document.getElementById('lessonOrderInput').value = JSON.stringify(ids);
|
||
});
|
||
|
||
function deleteLesson(id, title) {
|
||
if (confirm(`Are you sure you want to delete the topic "${title}"?\n\n⚠️ This will also remove any videos inside it.`)) {
|
||
document.getElementById(`delete-form-${id}`).submit();
|
||
}
|
||
}
|
||
</script>
|