136 lines
5.3 KiB
PHP
136 lines
5.3 KiB
PHP
<x-app-layout>
|
||
<div x-data="{ sidebarOpen: false }"
|
||
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
|
||
<div class="flex flex-col lg:flex-row lg:space-x-8">
|
||
|
||
{{-- Mobile toggle (outside the aside) --}}
|
||
<div class="flex items-center justify-between lg:hidden mb-3">
|
||
<h3 class="text-lg font-semibold text-gray-800">Course Content</h3>
|
||
<button @click="sidebarOpen = !sidebarOpen"
|
||
class="text-gray-600 hover:text-indigo-600">
|
||
<svg :class="{ 'rotate-180': sidebarOpen }"
|
||
class="w-5 h-5 transform transition-transform"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Sidebar --}}
|
||
<aside
|
||
x-cloak
|
||
:class="{ 'hidden': !sidebarOpen }" {{-- hide on mobile when closed --}}
|
||
class="hidden lg:block lg:w-64 bg-white rounded-xl shadow p-4 overflow-y-auto max-h-screen mb-6 lg:mb-0"
|
||
style="margin-top:20px">
|
||
<div class="space-y-3">
|
||
@foreach($chapters as $chapter)
|
||
<div x-data="{ open: {{ $chapter->id === $lesson->chapter?->id ? 'true' : 'false' }} }">
|
||
<button @click="open = !open"
|
||
class="w-full flex justify-between items-center text-left font-medium text-gray-700 hover:text-indigo-600">
|
||
<span>{{ $chapter->title }}</span>
|
||
<svg :class="{'rotate-180': open}" class="w-4 h-4 transform transition-transform"
|
||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div x-show="open" class="mt-2 ml-3 space-y-1">
|
||
@foreach($chapter->lessons as $chLesson)
|
||
<a href="{{ route('student.course.lesson', [
|
||
'course' => $lesson->chapter->lessonSection->module->course->slug,
|
||
'lesson' => $chLesson->slug
|
||
]) }}"
|
||
class="block px-2 py-1 rounded-lg text-sm
|
||
{{ $chLesson->id === $lesson->id
|
||
? 'bg-indigo-100 text-indigo-700 font-medium'
|
||
: 'text-gray-600 hover:bg-gray-100' }}">
|
||
{{ $chLesson->title }}
|
||
</a>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</aside>
|
||
|
||
{{-- Main lesson content --}}
|
||
<main class="flex-1">
|
||
|
||
<h2 class="hidden lg:block text-2xl font-semibold text-gray-800 mb-2">
|
||
{{ $lesson->chapter?->title }} — {{ $lesson->title }}
|
||
</h2>
|
||
<p class="text-gray-500 mb-6">
|
||
{{ $lesson->chapter->lessonSection->module->course->subject->name }}
|
||
({{ $lesson->chapter->lessonSection->module->course->level->name }})
|
||
</p>
|
||
@forelse($lesson->videos as $video)
|
||
<x-video-player :url="$video->video_url" :title="$video->title" />
|
||
@empty
|
||
<p>No videos available for this lesson yet.</p>
|
||
@endforelse
|
||
{{-- ============================= --}}
|
||
{{-- Lesson Questions Section --}}
|
||
{{-- ============================= --}}
|
||
<div class="mt-10">
|
||
<h2 class="text-xl font-semibold mb-4">Questions about this lesson</h2>
|
||
|
||
{{-- Flash message --}}
|
||
@if (session('success'))
|
||
<div class="mb-4 p-3 bg-green-100 text-green-700 rounded">
|
||
{{ session('success') }}
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Question submission form --}}
|
||
<form action="{{ route('student.course.lesson.questions.store', [$lesson->chapter->lessonSection->module->course->slug, $lesson->slug]) }}" method="POST">
|
||
@csrf
|
||
<textarea name="question" rows="3" class="w-full rounded-lg border-gray-300 focus:ring focus:ring-blue-200" placeholder="Ask your question here...">{{ old('question') }}</textarea>
|
||
@error('question')
|
||
<p class="text-red-500 text-sm mt-1">{{ $message }}</p>
|
||
@enderror
|
||
<div class="text-right mt-2">
|
||
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||
Submit Question
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
{{-- List of existing questions --}}
|
||
@if($lesson->questions->isNotEmpty())
|
||
<ul class="space-y-4">
|
||
@foreach ($lesson->questions as $question)
|
||
<li class="p-4 border rounded-lg bg-gray-50">
|
||
<p class="font-medium text-gray-800">
|
||
{{ $question->student->name }} asked:
|
||
</p>
|
||
<p class="mt-1 text-gray-700">{{ $question->question }}</p>
|
||
|
||
@if($question->answer)
|
||
<div class="mt-3 pl-4 border-l-4 border-blue-400">
|
||
<p class="text-sm text-gray-600">
|
||
<strong>Teacher’s reply:</strong> {{ $question->answer }}
|
||
</p>
|
||
</div>
|
||
@else
|
||
<p class="mt-2 text-sm text-gray-500 italic">Awaiting a reply...</p>
|
||
@endif
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@else
|
||
<p class="text-gray-500">No questions have been asked yet — be the first!</p>
|
||
@endif
|
||
</div>
|
||
|
||
<a href="{{ url()->previous() }}"
|
||
class="inline-block mt-4 px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:bg-gray-100">
|
||
← Back
|
||
</a>
|
||
</main>
|
||
|
||
</div>
|
||
</div>
|
||
</x-app-layout> |