@extends('layouts.app')

@section('title', $course['name'] ?? 'Course Details')

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

    // 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;
    
    // Get duration for timer
    $durationMinutes = 0;
    if ($lesson['type'] ?? '' == 'quiz') {
        $durationMinutes = $lesson['content']['settings']['duration_minutes'] ?? 0;
    } else {
        $durationMinutes = $lesson['duration_minutes'] ?? 0;
    }

    // Load previously saved quiz answers
    $savedAnswers = [];
    if (isset($savedSubmission) && $savedSubmission) {
        $savedAnswers = $savedSubmission->answers ?? [];
    }
@endphp

@section('content')
<div class="h-screen flex flex-col overflow-hidden">
    <!-- Header -->
    <div class="bg-white border-b border-gray-200 px-6 py-4 flex-shrink-0">
        <div class="max-w-7xl mx-auto">
            <h1 class="text-2xl font-extrabold text-secondary">{{ $course['name'] ?? 'Course Details' }}</h1>
            <p class="text-gray-500 mt-1 text-sm">{{ $course['description'] ?? 'Explore the curriculum and start learning.' }}</p>
        </div>
    </div>

    @if(isset($data['success']) && $data['success'] && !empty($course))
    <div class="flex flex-1 overflow-hidden max-w-7xl mx-auto w-full px-6 gap-6 py-6">
        <!-- Left Sidebar: Curriculum (Scrollable) -->
        <div class="w-80 flex-shrink-0 flex flex-col overflow-hidden bg-white border border-gray-200 rounded-xl shadow-sm">
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center flex-shrink-0">
                <h3 class="font-bold text-secondary text-sm uppercase tracking-wider">Course Content</h3>
                <span class="text-xs text-gray-400">{{ count($allLessons) }} lessons</span>
            </div>
            <div class="flex-1 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 flex justify-between">
                            <span>{{ $section['title'] ?? 'Section' }}</span>
                            <span>{{ count($section['lessons'] ?? []) }}</span>
                        </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('course.detail', $course['id']) }}?lesson_id={{ $l['id'] }}"
                                   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>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden">
            @if(!empty($lesson) && isset($lessonData['success']) && $lessonData['success'])
                <!-- Lesson Header -->
                <div class="bg-white border border-gray-200 rounded-xl p-4 mb-3 flex-shrink-0">
                    <div class="flex items-center gap-3 mb-2">
                        @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-2 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider {{ $typeColor }}">
                            {{ ucfirst($lesson['type'] ?? 'Lesson') }}
                        </span>
                        @if($durationMinutes > 0 && ($lesson['type'] ?? '') != 'quiz')
                            <span class="text-xs text-gray-400 flex items-center gap-1">
                                <svg class="w-3 h-3" 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>
                                {{ $durationMinutes }} min
                            </span>
                        @endif
                        @if($lesson['is_free_preview'] ?? false)
                            <span class="px-2 py-0.5 bg-green-50 text-green-600 text-xs font-bold rounded">Free Preview</span>
                        @endif
                    </div>
                    <h2 class="text-xl font-bold text-secondary">{{ $lesson['title'] ?? 'Untitled Lesson' }}</h2>
                    @if(!empty($lesson['short_description']))
                        <p class="text-gray-500 text-sm mt-1">{{ strip_tags(html_entity_decode($lesson['short_description'])) }}</p>
                    @endif
                    
                    <!-- Quiz Info in Header (below short description) - Single Line -->
                    @if(($lesson['type'] ?? '') == 'quiz')
                        @php
                            $questions = $lesson['content']['questions'] ?? [];
                            $settings = $lesson['content']['settings'] ?? [];
                            $totalQuestions = count($questions);
                            $passingGrade = $settings['passing_grade'] ?? 70;
                            $maxAttempts = $settings['max_attempts'] ?? 1;
                            $durationMinutesForQuiz = $settings['duration_minutes'] ?? 0;
                        @endphp
                        <div class="mt-3 pt-3 border-t border-gray-100">
                            <div class="flex flex-wrap items-center gap-4 text-xs">
                                <div class="flex items-center gap-2">
                                    <span class="font-semibold text-gray-700">Quiz Assessment</span>
                                </div>
                                @if($settings['random_questions'] ?? false)
                                    <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full">Random Order</span>
                                @endif
                                @if($settings['random_answers'] ?? false)
                                    <span class="px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full">Random Answers</span>
                                @endif
                                <div class="flex items-center gap-4 ml-auto">
                                    <div class="text-center">
                                        <span class="font-bold text-primary">{{ $totalQuestions }}</span>
                                        <span class="text-gray-500 ml-1">Questions</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="font-bold text-green-600">{{ $passingGrade }}%</span>
                                        <span class="text-gray-500 ml-1">Passing</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="font-bold text-orange-600">{{ $durationMinutesForQuiz }}</span>
                                        <span class="text-gray-500 ml-1">Minutes</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="font-bold text-blue-600">{{ $maxAttempts }}</span>
                                        <span class="text-gray-500 ml-1">Attempts</span>
                                    </div>
                                    @if($durationMinutesForQuiz > 0)
                                    <div class="flex items-center gap-2 bg-orange-50 px-3 py-1 rounded-lg">
                                        <svg class="w-4 h-4 text-orange-600" 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>
                                        <span class="text-xs font-semibold text-gray-700">Time:</span>
                                        <span id="quizTimer" class="text-lg font-mono font-bold text-orange-600">--:--</span>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Lesson Content Area with Fixed Height -->
                <div class="flex-1 overflow-y-auto mb-3 space-y-3" style="max-height: calc(100vh - 280px);">
                    @switch($lesson['type'] ?? 'text')
                        @case('video')
                            <div class="bg-black border border-gray-800 rounded-xl overflow-hidden shadow-2xl max-w-xl mx-auto">
                                @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" src="https://www.youtube.com/embed/{{ $videoId }}?rel=0&modestbranding=1" 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-6 shadow-sm">
                                @php
                                    $textContent = $lesson['content']['content'] ?? ($lesson['content'] ?? '');
                                @endphp
                                @if(!empty($textContent))
                                    <div class="prose prose-slate max-w-none">
                                        {!! $textContent !!}
                                    </div>
                                @else
                                    <div class="text-gray-400 text-center py-10">No content available for this lesson.</div>
                                @endif
                            </div>
                            
                            <!-- Materials Section -->
                            @if(!empty($lesson['materials']) && count($lesson['materials']) > 0)
                            <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                                <h3 class="text-md font-semibold text-secondary mb-3 flex items-center gap-2">
                                    <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                                    Lesson Materials
                                </h3>
                                <div class="space-y-2">
                                    @foreach($lesson['materials'] as $material)
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                                            <div class="flex items-center gap-3">
                                                <div class="p-1.5 bg-primary/10 rounded-lg">
                                                    <svg class="w-4 h-4 text-primary" 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>
                                                </div>
                                                <div>
                                                    <p class="font-medium text-gray-800 text-sm">{{ $material['title'] ?? 'Untitled' }}</p>
                                                    <p class="text-xs text-gray-500">{{ strtoupper($material['type'] ?? 'file') }}</p>
                                                </div>
                                            </div>
                                            <a href="{{ $material['url'] ?? $material['path'] }}" class="px-3 py-1.5 bg-primary text-white rounded-lg text-xs hover:bg-primary-dark transition flex items-center gap-1" target="_blank">
                                                <svg class="w-3 h-3" 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>
                                                Download
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                            @break

                        @case('quiz')
                            <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                                <div id="quizQuestions">
                                    @if(!empty($questions))
                                        <div class="space-y-4">
                                            @foreach($questions as $index => $question)
                                                <div class="quiz-card bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all duration-300" 
                                                     data-question-id="{{ $question['id'] }}">
                                                    <div class="flex items-start gap-2 mb-3">
                                                        <div class="flex-shrink-0 w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xs">
                                                            {{ $index + 1 }}
                                                        </div>
                                                        <h4 class="font-semibold text-gray-800 text-sm flex-1">{{ $question['question_text'] }}</h4>
                                                        <span class="text-xs text-gray-400">{{ $question['points'] ?? 1 }} pts</span>
                                                    </div>
                                                    
                                                    @if(!empty($question['options']))
                                                        <div class="space-y-2 ml-8">
                                                            @foreach($question['options'] as $option)
                                                                @php
                                                                    $isSaved = isset($savedAnswers[$question['id']]) && $savedAnswers[$question['id']] == $option;
                                                                @endphp
                                                                <label class="quiz-option flex items-center gap-2 p-2 rounded-lg bg-white border border-gray-200 hover:border-primary cursor-pointer transition-all duration-200 {{ $isSaved ? 'border-primary bg-primary/5' : '' }}">
                                                                    <input type="radio"
                                                                           name="question_{{ $question['id'] }}"
                                                                           value="{{ $option }}"
                                                                           class="w-3 h-3 text-primary"
                                                                           {{ $isSaved ? 'checked' : '' }}>
                                                                    <span class="text-gray-700 text-sm">{{ $option }}</span>
                                                                </label>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                            
                                            <div class="sticky bottom-0 bg-white pt-3 pb-1" id="quizSubmitContainer">
                                                <button id="submitQuizBtn" class="w-full px-4 py-2.5 bg-gradient-to-r from-primary to-primary-hover text-white font-semibold rounded-lg hover:shadow-md transition-all duration-300 text-sm">
                                                    Submit Quiz
                                                </button>
                                            </div>
                                        </div>
                                    @else
                                        <div class="text-gray-400 text-center py-8">No quiz questions available.</div>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- Materials Section for Quiz -->
                            @if(!empty($lesson['materials']) && count($lesson['materials']) > 0)
                            <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                                <h3 class="text-md font-semibold text-secondary mb-3 flex items-center gap-2">
                                    <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                                    Lesson Materials
                                </h3>
                                <div class="space-y-2">
                                    @foreach($lesson['materials'] as $material)
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                                            <div class="flex items-center gap-3">
                                                <div class="p-1.5 bg-primary/10 rounded-lg">
                                                    <svg class="w-4 h-4 text-primary" 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>
                                                </div>
                                                <div>
                                                    <p class="font-medium text-gray-800 text-sm">{{ $material['title'] ?? 'Untitled' }}</p>
                                                    <p class="text-xs text-gray-500">{{ strtoupper($material['type'] ?? 'file') }}</p>
                                                </div>
                                            </div>
                                            <a href="{{ $material['url'] ?? $material['path'] }}" class="px-3 py-1.5 bg-primary text-white rounded-lg text-xs hover:bg-primary-dark transition flex items-center gap-1" target="_blank">
                                                <svg class="w-3 h-3" 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>
                                                Download
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                            @break

                        @case('assignment')
                            <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
                                <div class="mb-4">
                                    <h3 class="font-semibold text-md mb-2 text-secondary">Instructions</h3>
                                    <div class="text-gray-600 prose-sm max-w-none">
                                        {!! $lesson['content']['instructions'] ?? '<p class="text-gray-400 text-sm">No instructions provided.</p>' !!}
                                    </div>
                                </div>
                                
                                @if(!empty($lesson['materials']) && count($lesson['materials']) > 0)
                                    <div>
                                        <h3 class="font-semibold text-md mb-2 text-secondary flex items-center gap-2">
                                            <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>
                                            Assignment Materials
                                        </h3>
                                        <div class="space-y-2">
                                            @foreach($lesson['materials'] as $material)
                                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                                    <div class="flex items-center gap-3">
                                                        <div class="p-1.5 bg-primary/10 rounded-lg">
                                                            <svg class="w-4 h-4 text-primary" 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>
                                                        </div>
                                                        <div>
                                                            <p class="font-medium text-gray-800 text-sm">{{ $material['title'] ?? 'Untitled' }}</p>
                                                            <p class="text-xs text-gray-500">{{ strtoupper($material['type'] ?? 'file') }}</p>
                                                        </div>
                                                    </div>
                                                    <a href="{{ $material['url'] ?? $material['path'] }}" class="px-3 py-1.5 bg-primary text-white rounded-lg text-xs hover:bg-primary-dark transition" target="_blank">Download</a>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                            @break

                        @default
                            <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
                                <div class="text-gray-400 text-center py-8">No content available for this lesson.</div>
                            </div>
                    @endswitch
                </div>

                <!-- Navigation Buttons -->
                <div class="flex justify-between gap-3 mt-1 flex-shrink-0">
                    @if($prevLesson)
                        <a href="{{ route('course.detail', $course['id']) }}?lesson_id={{ $prevLesson['id'] }}" 
                           class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center gap-1 text-sm">
                            <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="M15 19l-7-7 7-7"/>
                            </svg>
                            Previous
                        </a>
                    @else
                        <div></div>
                    @endif
                    
                    @if($nextLesson)
                        <a id="nextLessonBtn" href="{{ route('course.detail', $course['id']) }}?lesson_id={{ $nextLesson['id'] }}" 
                           class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition flex items-center gap-1 text-sm">
                            Next
                            <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 5l7 7-7 7"/>
                            </svg>
                        </a>
                    @endif
                </div>
            @else
                <div class="bg-white border border-gray-200 rounded-xl p-8 text-center">
                    <p class="text-gray-400">Select a lesson from the sidebar to start learning.</p>
                </div>
            @endif
        </div>
    </div>
    @else
    <div class="max-w-7xl mx-auto px-6 py-6">
        <div class="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
            <p class="text-red-600">Course not found or you don't have access to this course.</p>
            <a href="{{ route('courses') }}" class="mt-4 inline-block px-6 py-2 bg-primary text-white rounded-lg">Browse Courses</a>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    (function() {
        // Quiz functionality
        @if(($lesson['type'] ?? '') == 'quiz')
            @php
                $durationMinutesForQuiz = $lesson['content']['settings']['duration_minutes'] ?? 0;
                $quizCourseId = $course['id'] ?? '';
                $quizLessonId = $lesson['id'] ?? '';
                $savedTimeSpent = $savedSubmission->time_spent_seconds ?? 0;
                $isQuizSubmitted = !empty($savedSubmission) && !empty($savedSubmission->answers);
            @endphp

            // Timer variables
            const durationMinutes = parseInt({{ $durationMinutesForQuiz }}) || 0;
            const savedTimeSpent = parseInt({{ $savedTimeSpent }}) || 0;
            const isQuizSubmitted = {{ $isQuizSubmitted ? 'true' : 'false' }};
            let timeInSeconds = Math.max(0, durationMinutes * 60 - savedTimeSpent);
            let timerInterval = null;
            let autoSaveInterval = null;
            const quizStartTime = Date.now();
            let quizSubmitted = isQuizSubmitted;

            function formatTime(seconds) {
                const secs = Math.max(0, seconds);
                const mins = Math.floor(secs / 60);
                const rem = secs % 60;
                return `${mins.toString().padStart(2, '0')}:${rem.toString().padStart(2, '0')}`;
            }

            function updateQuizTimer() {
                const timerElement = document.getElementById('quizTimer');
                if (!timerElement) return;

                timerElement.textContent = formatTime(timeInSeconds);

                if (timeInSeconds <= 60) {
                    timerElement.classList.add('text-red-600');
                    timerElement.classList.remove('text-orange-600');
                }

                if (timeInSeconds <= 0) {
                    clearInterval(timerInterval);
                    timerInterval = null;
                    clearInterval(autoSaveInterval);
                    autoSaveInterval = null;
                    alert('Time is up! Moving to next lesson...');
                    @if($nextLesson)
                        window.location.href = "{{ route('course.detail', $course['id']) }}?lesson_id={{ $nextLesson['id'] }}";
                    @endif
                }

                timeInSeconds--;
            }

            function getTimeSpentSeconds() {
                return savedTimeSpent + Math.floor((Date.now() - quizStartTime) / 1000);
            }

            async function saveElapsedTime() {
                if (quizSubmitted) return;
                const timeSpent = getTimeSpentSeconds();
                try {
                    await fetch('{{ route('quiz.time') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                        },
                        body: JSON.stringify({
                            course_id: '{{ $quizCourseId }}',
                            lesson_id: '{{ $quizLessonId }}',
                            time_spent_seconds: timeSpent
                        })
                    });
                } catch (e) {
                    // silent fail for auto-save
                }
            }

            // Start timer immediately if duration is set
            if (durationMinutes > 0 && document.getElementById('quizTimer')) {
                updateQuizTimer(); // show immediately
                if (!quizSubmitted) {
                    timerInterval = setInterval(updateQuizTimer, 1000);
                }
            }

            // Auto-save elapsed time every 10 seconds
            if (!quizSubmitted) {
                autoSaveInterval = setInterval(saveElapsedTime, 10000);
            }

            function showSuccessMessage(message) {
                const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#2563EB';
                Swal.fire({
                    title: 'Quiz Submitted!',
                    text: message || 'Your answers have been recorded successfully.',
                    icon: 'success',
                    confirmButtonText: 'Continue',
                    confirmButtonColor: primaryColor,
                    allowOutsideClick: false,
                    customClass: {
                        confirmButton: 'px-5 py-2 rounded-lg text-sm font-semibold text-white'
                    }
                });
            }

            function gatherAnswers() {
                const answers = {};
                document.querySelectorAll('#quizQuestions input[type="radio"]:checked').forEach(radio => {
                    const match = radio.name.match(/question_(.+)/);
                    if (match) {
                        answers[match[1]] = radio.value;
                    }
                });
                return answers;
            }

            // Add hover + selection effects to quiz options
            document.querySelectorAll('.quiz-option').forEach(option => {
                option.addEventListener('mouseenter', () => {
                    if (quizSubmitted) return;
                    option.classList.add('border-primary', 'shadow-sm');
                });
                option.addEventListener('mouseleave', () => {
                    if (!option.querySelector('input:checked')) {
                        option.classList.remove('border-primary', 'shadow-sm');
                    }
                });

                const radio = option.querySelector('input');
                if (radio) {
                    radio.addEventListener('change', () => {
                        document.querySelectorAll(`input[name="${radio.name}"]`).forEach(r => {
                            r.closest('.quiz-option')?.classList.remove('border-primary', 'bg-primary/5', 'shadow-sm');
                        });
                        if (radio.checked) {
                            option.classList.add('border-primary', 'bg-primary/5');
                        }
                    });
                }
            });

            // Handle already-submitted state
            const submitBtn = document.getElementById('submitQuizBtn');
            const submitContainer = document.getElementById('quizSubmitContainer');

            if (quizSubmitted && submitContainer) {
                submitContainer.innerHTML = `
                    <div class="w-full px-4 py-2.5 bg-green-100 text-green-700 font-semibold rounded-lg text-sm text-center flex items-center justify-center gap-2">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                        Already Submitted
                    </div>
                `;
                document.querySelectorAll('#quizQuestions input[type="radio"]').forEach(radio => {
                    radio.disabled = true;
                });
            } else if (submitBtn) {
                submitBtn.addEventListener('click', async () => {
                    if (quizSubmitted) return;

                    const answers = gatherAnswers();
                    const totalQuestions = document.querySelectorAll('.quiz-card').length;

                    if (Object.keys(answers).length === 0) {
                        alert('Please select at least one answer before submitting.');
                        return;
                    }

                    if (Object.keys(answers).length < totalQuestions) {
                        const confirmSubmit = confirm('You have not answered all questions. Submit anyway?');
                        if (!confirmSubmit) return;
                    }

                    quizSubmitted = true;
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Saving...';

                    // Stop timer and auto-save
                    if (timerInterval) {
                        clearInterval(timerInterval);
                        timerInterval = null;
                    }
                    if (autoSaveInterval) {
                        clearInterval(autoSaveInterval);
                        autoSaveInterval = null;
                    }

                    const timeSpent = getTimeSpentSeconds();

                    try {
                        const response = await fetch('{{ route('quiz.submit') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                            },
                            body: JSON.stringify({
                                course_id: '{{ $quizCourseId }}',
                                lesson_id: '{{ $quizLessonId }}',
                                answers: answers,
                                time_spent_seconds: timeSpent
                            })
                        });

                        const result = await response.json();

                        if (result.success) {
                            showSuccessMessage(result.message);
                            submitBtn.innerHTML = 'Submitted';
                            submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                        } else {
                            throw new Error(result.message || 'Submission failed');
                        }
                    } catch (err) {
                        console.error(err);
                        alert('Failed to save quiz. Please try again.');
                        quizSubmitted = false;
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Submit Quiz';
                        // Restart timer and auto-save if duration exists
                        if (durationMinutes > 0 && !timerInterval && document.getElementById('quizTimer')) {
                            timerInterval = setInterval(updateQuizTimer, 1000);
                        }
                        if (!autoSaveInterval) {
                            autoSaveInterval = setInterval(saveElapsedTime, 10000);
                        }
                    }
                });
            }
        @endif
    })();
</script>

<style>
    .quiz-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .quiz-card:hover {
        transform: translateY(-1px);
    }

    .quiz-option {
        transition: all 0.2s ease;
    }

    .prose {
        max-width: none;
    }

    .prose p {
        margin-bottom: 0.75rem;
    }

    .prose-sm {
        font-size: 0.875rem;
    }

    /* Custom scrollbar */
    .overflow-y-auto::-webkit-scrollbar {
        width: 5px;
    }

    .overflow-y-auto::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    .overflow-y-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    @keyframes modal {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-modal {
        animation: modal 0.2s ease-out;
    }
</style>
@endpush