<x-app-layout>
    <div class="container my-5">
        <h2>{{ $course->subject->name }} ({{ $course->level->name }})</h2>
        <p>{{ $course->description }}</p>

        <h4 class="mt-4">Modules</h4>
        @foreach($course->modules as $module)
            <div class="mb-3">
                <h5>{{ $module->name }}</h5>
                @foreach($module->lessonSections as $section)
                    <h6 class="mt-2">{{ $section->title }}</h6>
                    <ul>
                        @foreach($section->chapters as $chapter)
                            <li>
                                <strong>{{ $chapter->title }}</strong>
                                <ul>
                                    @foreach($chapter->lessons as $lesson)
                                        <li>
                                            <a href="{{ route('student.lessons.show', $lesson->id) }}">
                                                {{ $lesson->title }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
        @endforeach
    </div>
</x-app-layout>