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