@extends('layouts.app')

@section('title', 'Lesson Viewer')

@php
    $lesson = $data['data'] ?? [];
    $sections = $courseData['data']['sections'] ?? [];
    $course = $courseData['data']['course'] ?? [];

    // Flatten all lessons for navigation
    $allLessons = [];
    foreach ($sections as $section) {
        foreach ($section['lessons'] ?? [] as $l) {
            $allLessons[] = $l;
        }
    }

    $currentIndex = null;
    foreach ($allLessons as $idx => $l) {
        if (($l['id'] ?? null) == $lessonId) {
            $currentIndex = $idx;
            break;
        }
    }

    $prevLesson = ($currentIndex !== null && $currentIndex > 0) ? $allLessons[$currentIndex - 1] : null;
    $nextLesson = ($currentIndex !== null && $currentIndex < count($allLessons) - 1) ? $allLessons[$currentIndex + 1] : null;
@endphp

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-extrabold text-secondary">{{ $course['name'] ?? 'Course' }}</h1>
            <p class="text-gray-500 mt-1 text-sm">Continue your learning journey.</p>
        </div>
        <a href="{{ $courseId ? route('course.detail', $courseId) : route('courses') }}" class="text-sm font-medium text-gray-500 hover:text-primary">&larr; Back to Course</a>
    </div>

    @if(isset($data['success']) && $data['success'] && !empty($lesson))
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Left Sidebar: Curriculum -->
        <div class="w-full lg:w-1/4 flex-shrink-0">
            <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
                <div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
                    <h3 class="font-bold text-secondary text-sm uppercase tracking-wider">Course Content</h3>
                </div>
                <div class="max-h-[70vh] overflow-y-auto">
                    @foreach($sections as $section)
                        <div class="border-b border-gray-100 last:border-b-0">
                            <div class="px-4 py-2 bg-gray-50/50 text-xs font-bold text-gray-500 uppercase tracking-wider">
                                {{ $section['title'] ?? 'Section' }}
                            </div>
                            <div class="divide-y divide-gray-50">
                                @foreach($section['lessons'] ?? [] as $l)
                                    @php
                                        $isActive = ($l['id'] ?? null) == $lessonId;
                                        $typeIcon = match($l['type'] ?? 'text') {
                                            'video' => '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/></svg>',
                                            'quiz' => '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
                                            'assignment' => '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>',
                                            default => '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>',
                                        };
                                    @endphp
                                    <a href="{{ route('lesson', $l['id']) }}?course_id={{ $courseId }}"
                                       class="flex items-center px-4 py-3 text-sm hover:bg-gray-50 transition {{ $isActive ? 'bg-primary/5 border-l-4 border-primary' : 'border-l-4 border-transparent' }}">
                                        <span class="flex-shrink-0 mr-3 {{ $isActive ? 'text-primary' : 'text-gray-400' }}">
                                            {!! $typeIcon !!}
                                        </span>
                                        <div class="flex-1 min-w-0">
                                            <p class="font-medium truncate {{ $isActive ? 'text-primary' : 'text-gray-700' }}">{{ $l['title'] ?? 'Untitled' }}</p>
                                            <p class="text-xs text-gray-400">{{ ucfirst($l['type'] ?? 'lesson') }}</p>
                                        </div>
                                        @if($isActive)
                                            <span class="ml-2 text-primary">
                                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                            </span>
                                        @endif
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 min-w-0">
            <!-- Lesson Header -->
            <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
                <div class="flex items-center mb-3">
                    @php
                        $typeColor = match($lesson['type'] ?? 'text') {
                            'video' => 'bg-red-100 text-red-700',
                            'quiz' => 'bg-green-100 text-green-700',
                            'assignment' => 'bg-indigo-100 text-indigo-700',
                            'document' => 'bg-amber-100 text-amber-700',
                            default => 'bg-gray-100 text-gray-700',
                        };
                    @endphp
                    <span class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider {{ $typeColor }}">
                        {{ ucfirst($lesson['type'] ?? 'Lesson') }}
                    </span>
                    @if(($lesson['duration_minutes'] ?? 0) > 0)
                        <span class="ml-3 text-xs text-gray-400 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $lesson['duration_minutes'] }} min
                        </span>
                    @endif
                    @if($lesson['is_free_preview'] ?? false)
                        <span class="ml-3 px-2 py-0.5 bg-green-50 text-green-600 text-xs font-bold rounded">Free Preview</span>
                    @endif
                </div>
                <h2 class="text-2xl font-bold text-secondary mb-2">{{ $lesson['title'] ?? 'Untitled Lesson' }}</h2>
                @if(!empty($lesson['short_description']))
                    <p class="text-gray-600">{{ $lesson['short_description'] }}</p>
                @endif
                @if(!empty($lesson['description']))
                    <p class="text-gray-500 text-sm mt-2">{{ $lesson['description'] }}</p>
                @endif
            </div>

            <!-- Lesson Content Area -->
            <div class="mb-6">
                @switch($lesson['type'] ?? 'text')
                    @case('video')
                        <div class="bg-black border border-gray-800 rounded-xl overflow-hidden shadow-2xl">
                            @php
                                $url = $lesson['content']['url'] ?? '';
                                $videoId = null;
                                if ($url) {
                                    preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/', $url, $matches);
                                    $videoId = $matches[1] ?? null;
                                }
                            @endphp
                            @if($videoId)
                                <div class="relative" style="padding-bottom: 56.25%;">
                                    <iframe class="absolute top-0 left-0 w-full h-full rounded-xl" src="https://www.youtube.com/embed/{{ $videoId }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                            @elseif($url)
                                <div class="flex items-center justify-center p-20">
                                    <a href="{{ $url }}" target="_blank" class="px-6 py-3 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 transition">
                                        Watch external video
                                    </a>
                                </div>
                            @else
                                <div class="p-20 text-center text-gray-400">No video URL provided.</div>
                            @endif
                        </div>
                        @break

                    @case('text')
                        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm">
                            @if(!empty($lesson['content']['content']))
                                <div class="prose prose-slate max-w-none">
                                    {!! $lesson['content']['content'] !!}
                                </div>
                            @else
                                <div class="text-gray-400 text-center py-10">No content available for this lesson.</div>
                            @endif
                        </div>
                        @break

                    @case('quiz')
                        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm">
                            @php
                                $questions = $lesson['content']['questions'] ?? [];
                                $settings = $lesson['content']['settings'] ?? [];
                            @endphp
                            @if(!empty($settings))
                                <div class="flex flex-wrap gap-3 mb-6 text-sm">
                                    @if(($settings['passing_grade'] ?? 0) > 0)
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full font-medium">Passing Grade: {{ $settings['passing_grade'] }}%</span>
                                    @endif
                                    @if(($settings['max_attempts'] ?? 0) > 0)
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full font-medium">Max Attempts: {{ $settings['max_attempts'] }}</span>
                                    @endif
                                    @if(($settings['duration_minutes'] ?? 0) > 0)
                                        <span class="px-3 py-1 bg-amber-50 text-amber-700 rounded-full font-medium">Duration: {{ $settings['duration_minutes'] }} min</span>
                                    @endif
                                </div>
                            @endif

                            @if(count($questions) > 0)
                                <form id="quiz-form" class="space-y-8">
                                    @foreach($questions as $qIndex => $question)
                                        <div class="border border-gray-100 rounded-lg p-5 bg-gray-50/50">
                                            <div class="flex items-start mb-4">
                                                <span class="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">{{ $qIndex + 1 }}</span>
                                                <div class="flex-1">
                                                    <p class="font-semibold text-gray-800 text-lg">{{ $question['question_text'] ?? 'Question ' . ($qIndex + 1) }}</p>
                                                    @if(!empty($question['explanation']))
                                                        <p class="text-sm text-gray-500 mt-1">{{ $question['explanation'] }}</p>
                                                    @endif
                                                </div>
                                                <span class="text-xs text-gray-400 ml-2">{{ $question['points'] ?? 1 }} pts</span>
                                            </div>

                                            @if(!empty($question['options']))
                                                <div class="space-y-2 ml-11">
                                                    @foreach($question['options'] as $optIndex => $option)
                                                        @php
                                                            $optValue = is_array($option) ? ($option['text'] ?? $option['value'] ?? '') : $option;
                                                        @endphp
                                                        <label class="flex items-center p-3 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition group">
                                                            <input type="radio" name="question_{{ $question['id'] ?? $qIndex }}" value="{{ $optIndex }}" class="w-4 h-4 text-primary border-gray-300 focus:ring-primary">
                                                            <span class="ml-3 text-gray-700 group-hover:text-gray-900">{{ $optValue }}</span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="ml-11">
                                                    <textarea class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-primary focus:border-primary" rows="3" placeholder="Type your answer here..."></textarea>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                    <div class="pt-4">
                                        <button type="submit" class="px-8 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 transition shadow">
                                            Submit Quiz
                                        </button>
                                    </div>
                                </form>
                            @else
                                <div class="text-gray-400 text-center py-10">
                                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    <p>This quiz has no questions configured yet.</p>
                                </div>
                            @endif
                        </div>
                        @break

                    @case('assignment')
                        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm">
                            @php
                                $instructions = $lesson['content']['instructions'] ?? ($lesson['content']['content'] ?? null);
                                $files = $lesson['content']['files'] ?? [];
                                $maxAttempts = $lesson['content']['max_attempts'] ?? 0;
                                $passingScore = $lesson['content']['passing_score'] ?? 0;
                            @endphp

                            @if($maxAttempts > 0 || $passingScore > 0)
                                <div class="flex flex-wrap gap-3 mb-6 text-sm">
                                    @if($maxAttempts > 0)
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full font-medium">Max Attempts: {{ $maxAttempts }}</span>
                                    @endif
                                    @if($passingScore > 0)
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full font-medium">Passing Score: {{ $passingScore }}%</span>
                                    @endif
                                </div>
                            @endif

                            @if($instructions)
                                <div class="prose prose-slate max-w-none mb-6">
                                    <h3 class="text-lg font-bold text-secondary mb-2">Instructions</h3>
                                    {!! $instructions !!}
                                </div>
                            @endif

                            @if(count($files) > 0)
                                <div class="mb-6">
                                    <h3 class="text-lg font-bold text-secondary mb-3">Attached Files</h3>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                        @foreach($files as $file)
                                            <a href="{{ is_array($file) ? ($file['url'] ?? '#') : $file }}" target="_blank" class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition group">
                                                <svg class="w-8 h-8 text-gray-400 group-hover:text-primary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                                <span class="text-sm font-medium text-gray-700 group-hover:text-primary truncate">{{ is_array($file) ? ($file['name'] ?? 'Download File') : 'Download File' }}</span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-5">
                                <h3 class="text-lg font-bold text-indigo-900 mb-2">Submit Your Work</h3>
                                <p class="text-indigo-700 text-sm mb-4">Upload your completed assignment below.</p>
                                <div class="border-2 border-dashed border-indigo-200 rounded-lg p-8 text-center bg-white hover:bg-indigo-50/50 transition cursor-pointer">
                                    <svg class="w-10 h-10 text-indigo-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                                    <p class="text-sm text-gray-500">Drag & drop files here or click to browse</p>
                                    <input type="file" class="hidden">
                                </div>
                                <button type="button" class="mt-4 px-6 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition">Submit Assignment</button>
                            </div>
                        </div>
                        @break

                    @case('document')
                        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm">
                            @if(!empty($lesson['content']['content']))
                                <div class="prose prose-slate max-w-none mb-6">
                                    {!! $lesson['content']['content'] !!}
                                </div>
                            @endif
                            @php $files = $lesson['content']['files'] ?? []; @endphp
                            @if(count($files) > 0)
                                <div class="border-t border-gray-100 pt-6">
                                    <h3 class="text-lg font-bold text-secondary mb-3">Attached Files</h3>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                        @foreach($files as $file)
                                            <a href="{{ is_array($file) ? ($file['url'] ?? '#') : $file }}" target="_blank" class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition group">
                                                <svg class="w-8 h-8 text-gray-400 group-hover:text-primary mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                                <span class="text-sm font-medium text-gray-700 group-hover:text-primary truncate">{{ is_array($file) ? ($file['name'] ?? 'Download File') : 'Download File' }}</span>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                        @break

                    @default
                        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm text-center text-gray-400">
                            This lesson type ({{ $lesson['type'] ?? 'unknown' }}) is not supported yet.
                        </div>
                @endswitch
            </div>

            <!-- Materials -->
            @if(!empty($lesson['materials']) && count($lesson['materials']) > 0)
                <div class="bg-white border border-gray-200 rounded-xl p-6 mb-6 shadow-sm">
                    <h3 class="text-lg font-bold text-secondary mb-4 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                        Lesson Materials
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach($lesson['materials'] as $material)
                            <a href="{{ $material['url'] ?? '#' }}" target="_blank" class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-primary/5 transition group">
                                <span class="flex-shrink-0 w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center mr-3 group-hover:bg-primary/10 transition">
                                    @php
                                        $mType = $material['type'] ?? 'file';
                                        if (str_contains($mType, 'pdf')) {
                                            echo '<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>';
                                        } elseif (str_contains($mType, 'image')) {
                                            echo '<svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>';
                                        } else {
                                            echo '<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>';
                                        }
                                    @endphp
                                </span>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-800 truncate group-hover:text-primary transition">{{ $material['title'] ?? 'Material' }}</p>
                                    <p class="text-xs text-gray-400">{{ ucfirst($material['type'] ?? 'File') }}</p>
                                </div>
                                @if($material['is_downloadable'] ?? true)
                                    <svg class="w-4 h-4 text-gray-300 group-hover:text-primary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                @endif
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Navigation Footer -->
            <div class="flex justify-between items-center bg-gray-50 p-5 rounded-xl border border-gray-200">
                @if($prevLesson)
                    <a href="{{ route('lesson', $prevLesson['id']) }}?course_id={{ $courseId }}" class="flex items-center px-5 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-white hover:border-gray-400 transition bg-white shadow-sm">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                        <div class="text-left">
                            <div class="text-xs text-gray-400 font-normal">Previous</div>
                            <div class="text-sm truncate max-w-[150px]">{{ $prevLesson['title'] ?? '' }}</div>
                        </div>
                    </a>
                @else
                    <span></span>
                @endif

                @if($nextLesson)
                    <a href="{{ route('lesson', $nextLesson['id']) }}?course_id={{ $courseId }}" class="flex items-center px-5 py-3 bg-primary text-white rounded-lg font-bold hover:bg-primary-hover shadow transition">
                        <div class="text-right">
                            <div class="text-xs text-white/70 font-normal">Next</div>
                            <div class="text-sm truncate max-w-[150px]">{{ $nextLesson['title'] ?? '' }}</div>
                        </div>
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                @else
                    <div class="text-center">
                        <span class="px-5 py-3 bg-green-100 text-green-700 rounded-lg font-bold inline-flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Course Completed
                        </span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @else
        <div class="p-6 bg-red-50 text-red-600 rounded-lg text-center border border-red-100">
            Failed to render lesson. Content not found or bad response.
        </div>
    @endif
</div>
@endsection