127 lines
4.6 KiB
PHP
127 lines
4.6 KiB
PHP
<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>
|