@extends('layouts.dashboard')
@section('title', $course->title)
@section('page_title', __('Learning'))

@php
    $total = $course->sections->sum(fn ($s) => $s->lessons->count());
    $doneCount = count($completedIds);

    $media = $current ? \App\Support\Video::resolve($current, true) : ['kind' => 'none', 'url' => null, 'hls' => false, 'subtitles' => [], 'poster' => null, 'downloadable' => false, 'provider' => null];

    // YouTube's own control bar keeps a clickable logo/title/related-videos
    // overlay that opens youtube.com — no embed param removes it. Instead we
    // render the raw player with native controls off and skin it with our
    // own play/seek/mute/fullscreen bar, so nothing inside the iframe is
    // reachable by a click.
    $ytId = null;
    if ($media['kind'] === 'iframe' && \Illuminate\Support\Str::contains((string) $media['url'], ['youtube.com', 'youtube-nocookie.com', 'youtu.be'])) {
        preg_match('#/embed/([A-Za-z0-9_-]{6,})#', (string) $media['url'], $ytMatch);
        $ytId = $ytMatch[1] ?? null;
    }
@endphp

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center">
        <a href="{{ route('student.courses') }}" class="btn btn-light btn-sm me-3"><i class="bi bi-arrow-left"></i></a>
        <h5 class="mb-0 fw-bold">{{ $course->title }}</h5>
    </div>
    @if($total === 0 && $course->quizzes->isNotEmpty())
        @php
            $passedTests = $course->quizzes->filter(fn ($q) => $q->resultsPublished() && $quizAttempts->get($q->id, collect())->where('is_passed', true)->isNotEmpty())->count();
        @endphp
        <span class="badge bg-light text-dark">{{ __(':done/:total tests passed', ['done' => $passedTests, 'total' => $course->quizzes->count()]) }}</span>
    @else
        <span class="badge bg-light text-dark">{{ __(':done/:total lessons', ['done' => $doneCount, 'total' => $total]) }}</span>
    @endif
</div>

<div class="progress mb-4" style="height:8px;">
    <div class="progress-bar" role="progressbar" style="width: {{ (int) $enrollment->progress_percentage }}%;background:var(--lf-primary);"></div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            @if ($current)
                <div class="bg-dark ratio ratio-16x9 position-relative lf-player-shell">
                    @include('partials.video-watermark')
                    <div id="lfFocusShield" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center text-white text-center p-4" style="background:rgba(0,0,0,.92);z-index:6;">
                        <div><i class="bi bi-shield-lock display-5 d-block mb-2"></i><strong>{{ __('Playback paused') }}</strong><div class="small mt-1">{{ __('Return to this window to continue protected content.') }}</div></div>
                    </div>
                    @if ($current->lesson_type === 'scorm' && $current->scorm_launch)
                        <iframe src="{{ route('scorm.launch', $current) }}" title="{{ $current->title }}" allow="autoplay; fullscreen" allowfullscreen style="border:0;"></iframe>
                    @elseif ($media['kind'] === 'iframe' && $ytId)
                        <div class="w-100 h-100 position-relative" id="lfYtWrap" data-video-id="{{ $ytId }}">
                            <div id="lfYtFrame" class="w-100 h-100"></div>
                            <div id="lfYtClick" class="position-absolute top-0 start-0 w-100 h-100" style="z-index:2;cursor:pointer;"></div>
                            <div id="lfYtBigPlay" class="position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center" style="z-index:3;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6);cursor:pointer;">
                                <i class="bi bi-play-fill text-white fs-2"></i>
                            </div>
                            <div class="position-absolute bottom-0 start-0 w-100 px-3 pb-2 pt-4" style="z-index:3;background:linear-gradient(transparent,rgba(0,0,0,.75));">
                                <input type="range" id="lfYtSeek" min="0" max="1000" value="0" class="form-range mb-1">
                                <div class="d-flex align-items-center text-white gap-3">
                                    <button type="button" id="lfYtPlayBtn" class="btn btn-sm btn-link text-white p-0" aria-label="{{ __('Play/Pause') }}"><i class="bi bi-play-fill fs-5"></i></button>
                                    <button type="button" id="lfYtMuteBtn" class="btn btn-sm btn-link text-white p-0" aria-label="{{ __('Mute/Unmute') }}"><i class="bi bi-volume-up"></i></button>
                                    <span class="small font-monospace" id="lfYtTime">0:00 / 0:00</span>
                                    <span class="ms-auto"></span>
                                    <button type="button" id="lfYtFsBtn" class="btn btn-sm btn-link text-white p-0" aria-label="{{ __('Fullscreen') }}"><i class="bi bi-arrows-fullscreen"></i></button>
                                </div>
                            </div>
                        </div>
                    @elseif ($media['kind'] === 'iframe')
                        <iframe src="{{ $media['url'] }}" title="{{ $current->title }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen style="border:0;"></iframe>
                    @elseif ($media['kind'] === 'video')
                        <video id="lfPlayer" controls playsinline disablepictureinpicture
                               @unless($media['downloadable']) oncontextmenu="return false;" @endunless
                               controlslist="{{ $media['downloadable'] ? '' : 'nodownload noplaybackrate noremoteplayback' }}" class="w-100 h-100" @if($media['poster']) poster="{{ $media['poster'] }}" @endif @if(!$media['hls']) src="{{ $media['url'] }}" @endif data-src="{{ $media['url'] }}" data-hls="{{ $media['hls'] ? 1 : 0 }}">
                            @foreach($media['subtitles'] as $i => $sub)
                                <track kind="subtitles" src="{{ $sub['url'] }}" srclang="{{ $sub['lang'] }}" label="{{ $sub['label'] }}" @if($i === 0) default @endif>
                            @endforeach
                        </video>
                    @elseif ($media['kind'] === 'audio')
                        <div class="d-flex flex-column align-items-center justify-content-center w-100 h-100 text-white">
                            <i class="bi bi-headphones display-4 mb-3"></i>
                            <audio controls src="{{ $media['url'] }}" style="width:80%"></audio>
                        </div>
                    @elseif ($media['kind'] === 'pdf')
                        <iframe src="{{ $media['url'] }}" title="{{ $current->title }}" style="border:0;"></iframe>
                    @else
                        <div class="d-flex align-items-center justify-content-center w-100 h-100 text-white">
                            <i class="bi bi-file-text display-4"></i>
                        </div>
                    @endif
                    <div id="lfCueOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center p-3" style="background:rgba(0,0,0,.78);z-index:5;">
                        <div class="card border-0 shadow" style="max-width:420px;width:100%;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start gap-2">
                                    <h6 class="fw-bold mb-1" id="lfCueTitle"></h6>
                                    <button type="button" class="btn-close d-none" id="lfCueSkip" aria-label="{{ __('Skip') }}"></button>
                                </div>
                                <p class="small text-muted mb-2" id="lfCueBody"></p>
                                <div class="d-grid gap-2" id="lfCueOptions"></div>
                                <div class="small fw-semibold mt-2 d-none" id="lfCueHint"></div>
                                <button type="button" class="btn btn-primary btn-sm w-100 mt-2 d-none" id="lfCueResume">{{ __('Resume video') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
@push('scripts')
<script>
(function () {
    var v = document.getElementById('lfPlayer');
    var box = document.getElementById('lfCueOverlay');
    var shield = document.getElementById('lfFocusShield');
    if (!v || !box) return;
    function protectOnBlur() {
        if (document.hidden || !document.hasFocus()) {
            v.pause();
            if (shield) { shield.classList.remove('d-none'); shield.classList.add('d-flex'); }
        }
    }
    function protectOnFocus() {
        if (shield) { shield.classList.add('d-none'); shield.classList.remove('d-flex'); }
    }
    document.addEventListener('visibilitychange', protectOnBlur);
    window.addEventListener('blur', protectOnBlur);
    window.addEventListener('focus', protectOnFocus);

    // Resume where the learner left off and report the playhead every few
    // seconds so the next visit (web or app) starts there and the instructor's
    // minimum-watch gate has real numbers.
    var resumeAt = {{ (int) ($resume ?? 0) }};
    var positionUrl = @json($current ? route('student.lesson.position', $current) : '');
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var watched = 0, lastTick = null, lastSent = 0;
    function sendPosition(force) {
        var now = Date.now();
        if (!force && now - lastSent < 10000) return;
        lastSent = now;
        var body = new FormData();
        body.append('position', Math.floor(v.currentTime || 0));
        body.append('watched', Math.floor(watched));
        if (csrf) body.append('_token', csrf.getAttribute('content'));
        try {
            if (force && navigator.sendBeacon) { navigator.sendBeacon(positionUrl, body); return; }
            fetch(positionUrl, { method: 'POST', body: body, credentials: 'same-origin', keepalive: true }).catch(function () {});
        } catch (e) {}
    }
    v.addEventListener('loadedmetadata', function () {
        if (resumeAt > 3 && isFinite(v.duration) && resumeAt < v.duration - 3) { v.currentTime = resumeAt; }
    });
    v.addEventListener('timeupdate', function () {
        var t = v.currentTime;
        if (lastTick !== null && t > lastTick && t - lastTick < 2) watched += t - lastTick;
        lastTick = t;
        if (!v.paused) sendPosition(false);
    });
    v.addEventListener('seeked', function () { lastTick = v.currentTime; });
    v.addEventListener('pause', function () { sendPosition(false); });
    v.addEventListener('ended', function () { sendPosition(true); });
    window.addEventListener('pagehide', function () { sendPosition(true); });

    var cues = @json($cues ?? []);
    if (!cues.length) return;
    var fired = {};
    function fmt(s) { s = Math.max(0, Math.floor(s)); var m = Math.floor(s / 60), ss = s % 60; return m + ':' + String(ss).padStart(2, '0'); }
    function el(id) { return document.getElementById(id); }
    function show(cue) {
        v.pause();
        el('lfCueTitle').textContent = cue.title || (cue.kind === 'question' ? '{{ __('Quick check') }}' : '{{ __('Note') }}');
        el('lfCueBody').textContent = cue.body || '';
        el('lfCueBody').style.display = cue.body ? '' : 'none';
        var opts = el('lfCueOptions'); opts.innerHTML = '';
        var hint = el('lfCueHint'); hint.classList.add('d-none'); hint.textContent = '';
        var resume = el('lfCueResume'); resume.classList.add('d-none');
        var skip = el('lfCueSkip');
        function done() { box.classList.add('d-none'); box.classList.remove('d-flex'); try { v.play(); } catch (e) {} }
        if (cue.kind === 'question' && cue.options && cue.options.length) {
            skip.classList.add('d-none');
            cue.options.forEach(function (text, i) {
                var b = document.createElement('button');
                b.type = 'button'; b.className = 'btn btn-outline-secondary btn-sm text-start'; b.textContent = text;
                b.addEventListener('click', function () {
                    var ok = cue.correct === null || cue.correct === undefined || i === cue.correct;
                    if (ok) {
                        b.classList.remove('btn-outline-secondary'); b.classList.add('btn-success');
                        hint.textContent = '{{ __('Correct!') }}'; hint.className = 'small fw-semibold mt-2 text-success';
                        resume.classList.remove('d-none');
                        resume.onclick = done;
                    } else if (cue.required) {
                        b.classList.remove('btn-outline-secondary'); b.classList.add('btn-danger'); b.disabled = true;
                        hint.textContent = '{{ __('Not quite — try again.') }}'; hint.className = 'small fw-semibold mt-2 text-danger';
                    } else {
                        hint.textContent = '{{ __('The answer was: ') }}' + (cue.options[cue.correct] || '');
                        hint.className = 'small fw-semibold mt-2 text-muted';
                        resume.classList.remove('d-none');
                        resume.onclick = done;
                    }
                });
                opts.appendChild(b);
            });
            if (!cue.required) { skip.classList.remove('d-none'); skip.onclick = done; }
        } else {
            resume.classList.remove('d-none');
            resume.onclick = done;
            if (!cue.required) { skip.classList.remove('d-none'); skip.onclick = done; }
            else { skip.classList.add('d-none'); }
        }
        box.classList.remove('d-none'); box.classList.add('d-flex');
    }
    v.addEventListener('timeupdate', function () {
        for (var i = 0; i < cues.length; i++) {
            if (v.currentTime >= cues[i].at && !fired[cues[i].id]) { fired[cues[i].id] = true; show(cues[i]); break; }
        }
    });
    v.addEventListener('seeked', function () {
        cues.forEach(function (c) { if (c.at > v.currentTime + 0.5) delete fired[c.id]; });
    });
})();
</script>
@endpush

                <div class="card-body">
                    {{-- Previous / Next: keyboard ← → also work (see script below). --}}
                    <div class="d-flex align-items-center justify-content-between gap-2 mb-3 lf-lesson-nav">
                        @if($prevLesson)
                            <a href="{{ route('student.learn', [$course, 'lesson' => $prevLesson->id]) }}" class="btn btn-light btn-sm" id="lfPrevLesson" title="{{ $prevLesson->title }}"><i class="bi bi-chevron-left me-1"></i>{{ __('Previous') }}</a>
                        @else
                            <span class="btn btn-light btn-sm disabled"><i class="bi bi-chevron-left me-1"></i>{{ __('Previous') }}</span>
                        @endif
                        <span class="small text-muted text-nowrap">{{ __('Lesson :n of :total', ['n' => $lessonPosition, 'total' => $lessonTotal]) }}</span>
                        @if($nextLesson && empty($locks[$nextLesson->id]))
                            <a href="{{ route('student.learn', [$course, 'lesson' => $nextLesson->id]) }}" class="btn btn-primary btn-sm" id="lfNextLesson" title="{{ $nextLesson->title }}">{{ __('Next') }}<i class="bi bi-chevron-right ms-1"></i></a>
                        @elseif($nextLesson)
                            <span class="btn btn-light btn-sm disabled" title="{{ $locks[$nextLesson->id] }}"><i class="bi bi-lock me-1"></i>{{ __('Next') }}</span>
                        @else
                            <span class="btn btn-light btn-sm disabled">{{ __('Last lesson') }}</span>
                        @endif
                    </div>

                    <h5 class="fw-bold mb-3">{{ $current->title }}</h5>

                    @if ($current->content)
                        <div class="mb-4">{!! nl2br(e($current->content)) !!}</div>
                    @endif

                    {{-- Primary action + downloads on one line, the same size, vertically centred. --}}
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        @if (in_array($current->id, $completedIds))
                            <button class="btn btn-success btn-sm" disabled><i class="bi bi-check-circle me-1"></i> {{ __('Completed') }}</button>
                        @else
                            <form action="{{ route('student.lesson.complete', $current) }}" method="POST" class="d-inline">
                                @csrf
                                <button class="btn btn-primary btn-sm"><i class="bi bi-check-lg me-1"></i> {{ __('Mark as Complete') }}</button>
                            </form>
                        @endif
                        @if($media['downloadable'] && $media['url'] && ($canDownloadResources ?? true))
                            <a href="{{ ($media['provider'] ?? '') === 'local' ? \App\Support\Video::signedUrl($current, true, auth()->id()) : $media['url'] }}" class="btn btn-light btn-sm" download><i class="bi bi-download me-1"></i>{{ __('Download lesson file') }}</a>
                        @endif
                        @if($canDownloadResources ?? true)
                            <a href="{{ route('student.package', $course) }}" class="btn btn-light btn-sm"><i class="bi bi-file-zip me-1"></i>{{ __('Download all resources (.zip)') }}</a>
                        @endif
                    </div>

                    <div class="d-flex flex-wrap gap-2 mt-2">
                        <form action="{{ route('bookmarks.toggle', $current) }}" method="POST" class="d-inline">@csrf
                            <button class="btn btn-outline-secondary btn-sm"><i class="bi {{ $isBookmarked ? 'bi-bookmark-fill' : 'bi-bookmark' }}"></i> {{ $isBookmarked ? __('Bookmarked') : __('Bookmark') }}</button>
                        </form>
                        <a href="{{ route('qna.index', $course) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-chat-dots"></i> {{ __('Discussion') }}</a>
                        <a href="{{ route('qna.index', [$course, 'lesson_id' => $current->id]) }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-patch-question"></i> {{ __('Lesson questions') }}</a>
                    </div>

                    <hr class="my-4">
                    <h6 class="fw-semibold"><i class="bi bi-journal-text me-1"></i>{{ __('My Notes') }}</h6>
                    <form action="{{ route('notes.store', $current) }}" method="POST" class="mb-3">@csrf
                        <textarea name="note" class="form-control mb-2 @error('note') is-invalid @enderror" rows="2"
                                  maxlength="5000" required
                                  placeholder="{{ __('Write a note for this lesson…') }}">{{ old('note') }}</textarea>
                        @error('note')
                            <div class="invalid-feedback d-block mb-2">{{ $message }}</div>
                        @enderror
                        <button class="btn btn-sm btn-primary">{{ __('Add note') }}</button>
                    </form>
                    @forelse ($lessonNotes as $note)
                        <div class="border rounded p-2 mb-2 d-flex justify-content-between align-items-start">
                            <div class="small">{{ $note->note }}<div class="text-muted">{{ $note->created_at->diffForHumans() }}</div></div>
                            <form action="{{ route('notes.destroy', $note) }}" method="POST">@csrf @method('DELETE')<button class="btn btn-sm btn-link text-danger p-0"><i class="bi bi-x-lg"></i></button></form>
                        </div>
                    @empty
                        <p class="text-muted small mb-0">{{ __('No notes for this lesson yet.') }}</p>
                    @endforelse
                </div>
            @elseif ($course->quizzes->isNotEmpty())
                {{-- Quiz-only course (test series): the tests are the content. --}}
                <div class="card-body p-4">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-4">
                        <div>
                            <h5 class="fw-bold mb-1">{{ $course->isTestSeries() ? __('Your tests') : __('Quizzes') }}</h5>
                            <p class="text-muted small mb-0">{{ $course->isTestSeries() ? __('Pass every test to complete this test series.') : __('Pass every test to complete this course.') }}</p>
                        </div>
                        @if($course->quizzes->contains(fn ($q) => $q->isScheduled()))
                            <a href="{{ route('student.exams.calendar') }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-calendar-event me-1"></i>{{ __('Exam Calendar') }}</a>
                        @endif
                    </div>
                    <div class="d-grid gap-3">
                        @foreach($course->quizzes as $quiz)
                            @php
                                $attempts = $quizAttempts->get($quiz->id, collect());
                                $published = $quiz->resultsPublished();
                                $best = $published ? $attempts->max('percentage') : null;
                                $passed = $published && $attempts->where('is_passed', true)->isNotEmpty();
                                $outOfAttempts = (int) $quiz->max_attempts > 0 && $attempts->count() >= (int) $quiz->max_attempts;
                                $status = $quiz->examStatus();
                            @endphp
                            <div class="border rounded-3 p-3 d-flex align-items-start gap-3">
                                <i class="bi {{ $passed ? 'bi-patch-check-fill text-success' : ($status === 'upcoming' ? 'bi-calendar-event text-info' : 'bi-ui-checks-grid text-primary') }} fs-3 lh-1"></i>
                                <div class="flex-grow-1" style="min-width:0">
                                    <div class="fw-semibold">{{ $quiz->title }}</div>
                                    <div class="small text-muted">
                                        {{ __('Passing score') }}: {{ (float) $quiz->passing_score }}%
                                        @if($quiz->duration_minutes) · {{ __(':count min', ['count' => $quiz->duration_minutes]) }} @endif
                                        · {{ (int) $quiz->max_attempts > 0 ? __(':used/:max attempts', ['used' => $attempts->count(), 'max' => (int) $quiz->max_attempts]) : trans_choice(':count attempt|:count attempts', $attempts->count(), ['count' => $attempts->count()]) }}
                                        @if($best !== null) · {{ __('best') }} {{ round((float) $best) }}%@endif
                                        @if($attempts->isNotEmpty() && ! $published) · <span class="text-warning-emphasis">{{ __('Result pending') }}</span>@endif
                                    </div>
                                    @include('partials.quiz.schedule', ['quiz' => $quiz])
                                <div class="d-flex flex-wrap gap-2 mt-2">
                                    @if($attempts->isNotEmpty())
                                        <a href="{{ route('student.quiz.result', $attempts->sortByDesc('id')->first()) }}" class="btn btn-sm btn-outline-secondary">{{ $published ? __('View results') : __('Submitted') }}</a>
                                    @endif
                                    @if($quiz->meritListVisible() && $attempts->isNotEmpty())
                                        <a href="{{ route('student.quiz.merit', $quiz) }}" class="btn btn-sm btn-outline-primary"><i class="bi bi-trophy"></i><span class="visually-hidden">{{ __('Merit list') }}</span></a>
                                    @endif
                                    @if($status === 'upcoming')
                                        <a href="{{ route('student.quiz.ics', $quiz) }}" class="btn btn-sm btn-light"><i class="bi bi-calendar-plus me-1"></i>{{ __('Add to calendar') }}</a>
                                    @elseif($status !== 'ended' && ! $outOfAttempts)
                                        <a href="{{ route('student.quiz.show', $quiz) }}" class="btn btn-sm {{ $passed ? 'btn-outline-primary' : 'btn-primary' }}">{{ $attempts->isEmpty() ? __('Start test') : __('Retake') }}</a>
                                    @endif
                                </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                @if(isset($seriesSubjects) && $seriesSubjects->isNotEmpty())
                    <div class="card-body pt-0 px-4 pb-4">
                        @include('partials.quiz.subject-analysis', ['subjects' => $seriesSubjects, 'title' => __('Your performance by subject')])
                    </div>
                @endif
            @else
                <div class="card-body text-center text-muted py-5">
                    <i class="bi bi-emoji-frown display-5 d-block mb-2"></i>
                    {{ __('This course has no lessons yet.') }}
                </div>
            @endif
        </div>
    </div>

    <div class="col-lg-4">
        @if($course->sections->isNotEmpty())
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-white fw-semibold py-3">{{ __('Course Content') }}</div>
            <div class="accordion accordion-flush" id="learnSidebar">
                @foreach ($course->sections as $section)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button {{ $section->lessons->contains('id', $current?->id) ? '' : 'collapsed' }} small" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#learnSection{{ $section->id }}">
                                {{ $section->title }}
                            </button>
                        </h2>
                        <div id="learnSection{{ $section->id }}" class="accordion-collapse collapse {{ $section->lessons->contains('id', $current?->id) ? 'show' : '' }}" data-bs-parent="#learnSidebar">
                            <div class="list-group list-group-flush">
                                @foreach ($section->lessons as $lesson)
                                    @php
                                        $isDone = in_array($lesson->id, $completedIds);
                                        $isActive = $current && $current->id === $lesson->id;
                                        $lock = $locks[$lesson->id] ?? null;
                                    @endphp
                                    @if ($lock)
                                        {{-- Dripped or sequenced: shown, but not openable yet. --}}
                                        <div class="list-group-item d-flex align-items-center text-muted" title="{{ $lock }}">
                                            <i class="bi bi-lock-fill me-2"></i>
                                            <span class="small flex-grow-1">
                                                {{ $lesson->title }}
                                                <span class="d-block" style="font-size:.72rem">{{ $lock }}</span>
                                            </span>
                                        </div>
                                    @else
                                    <a href="{{ route('student.learn', [$course, 'lesson' => $lesson->id]) }}"
                                       class="list-group-item list-group-item-action d-flex align-items-center {{ $isActive ? 'active' : '' }}"
                                       @if($isActive) @endif>
                                        @if ($isDone)
                                            <i class="bi bi-check-circle-fill {{ $isActive ? 'text-white' : 'text-success' }} me-2"></i>
                                        @else
                                            <i class="bi bi-circle {{ $isActive ? 'text-white' : 'text-muted' }} me-2"></i>
                                        @endif
                                        <span class="small flex-grow-1">{{ $lesson->title }}</span>
                                        @if ($lesson->duration)
                                            <small class="{{ $isActive ? 'text-white-50' : 'text-muted' }}">{{ __(':count min', ['count' => $lesson->duration]) }}</small>
                                        @endif
                                    </a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @endif
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold py-3"><i class="bi bi-grid-3x3-gap text-primary me-1"></i>{{ __('More') }}</div>
            <div class="card-body">
                @if($certificate)
                    <div class="p-3 rounded-3 mb-3 text-white" style="background:var(--lf-grad);">
                        <div class="d-flex align-items-center gap-3">
                            <i class="bi bi-award display-6"></i>
                            <div class="flex-grow-1">
                                <div class="fw-bold">{{ __('Certificate earned!') }}</div>
                                <div class="small opacity-75">{{ __('No.') }} {{ $certificate->certificate_no }}</div>
                            </div>
                            <a href="{{ route('student.certificates') }}" class="btn btn-light btn-sm">{{ __('View') }}</a>
                        </div>
                    </div>
                @endif

                @if($course->quizzes->isNotEmpty())
                    <h6 class="fw-semibold small text-uppercase text-muted mb-2">{{ __('Quizzes') }}</h6>
                    <div class="list-group list-group-flush mb-3">
                        @foreach($course->quizzes as $quiz)
                            @php
                                $attempts = $quizAttempts->get($quiz->id, collect());
                                $best = $quiz->resultsPublished() ? $attempts->max('percentage') : null;
                                $passed = $quiz->resultsPublished() && $attempts->where('is_passed', true)->isNotEmpty();
                            @endphp
                            <a href="{{ route('student.quiz.show', $quiz) }}" class="list-group-item list-group-item-action px-0 d-flex align-items-center">
                                <i class="bi {{ $passed ? 'bi-patch-check-fill text-success' : 'bi-ui-checks-grid text-warning' }} me-2"></i>
                                <span class="flex-grow-1">
                                    <span class="fw-semibold small d-block">{{ $quiz->title }}</span>
                                    <span class="text-muted small">
                                        {{ (int) $quiz->max_attempts > 0 ? __(':used/:max attempts', ['used' => $attempts->count(), 'max' => (int) $quiz->max_attempts]) : trans_choice(':count attempt|:count attempts', $attempts->count(), ['count' => $attempts->count()]) }}
                                        · {{ __('pass') }} {{ (float) $quiz->passing_score }}%
                                        @if($best !== null) · {{ __('best') }} {{ round((float) $best) }}%@endif
                                    </span>
                                </span>
                                <i class="bi bi-chevron-right text-muted"></i>
                            </a>
                        @endforeach
                    </div>
                @endif

                @if($course->assignments->isNotEmpty())
                    <h6 class="fw-semibold small text-uppercase text-muted mb-2">{{ __('Assignments') }}</h6>
                    <div class="list-group list-group-flush mb-3">
                        @foreach($course->assignments as $assignment)
                            @php
                                $submission = $assignmentSubmissions->get($assignment->id);
                                $status = $submission?->status;
                                $icon = $status === 'reviewed' ? 'bi-clipboard2-check-fill text-success' : ($status === 'submitted' ? 'bi-send-check text-info' : 'bi-clipboard2 text-primary');
                            @endphp
                            <a href="{{ route('student.assignment.show', $assignment) }}" class="list-group-item list-group-item-action px-0 d-flex align-items-center">
                                <i class="bi {{ $icon }} me-2"></i>
                                <span class="flex-grow-1">
                                    <span class="fw-semibold small d-block">{{ $assignment->title }}</span>
                                    <span class="text-muted small">
                                        @if($status === 'reviewed')
                                            {{ __('Graded') }}: {{ $submission->marks_obtained ?? '-' }}/{{ $assignment->max_marks }}
                                        @elseif($status === 'submitted')
                                            {{ __('Submitted · awaiting review') }}
                                        @elseif($assignment->due_date)
                                            {{ __('Due') }} {{ \Carbon\Carbon::parse($assignment->due_date)->format('d M Y') }}
                                        @else
                                            {{ __('Not submitted') }}
                                        @endif
                                    </span>
                                </span>
                                <i class="bi bi-chevron-right text-muted"></i>
                            </a>
                        @endforeach
                    </div>
                @endif

                <h6 class="fw-semibold small text-uppercase text-muted mb-2">{{ __('Community') }}</h6>
                <div class="list-group list-group-flush">
                    <a href="{{ route('qna.index', $course) }}" class="list-group-item list-group-item-action px-0">
                        <i class="bi bi-chat-dots me-2 text-primary"></i>{{ __('Discussion (Q&A)') }}
                    </a>
                    @if(module_enabled('liveclass') && \Illuminate\Support\Facades\Route::has('student.liveclasses.index'))
                        <a href="{{ route('student.liveclasses.index') }}" class="list-group-item list-group-item-action px-0">
                            <i class="bi bi-camera-video me-2 text-primary"></i>{{ __('Live classes') }}
                        </a>
                    @endif
                </div>

                <div class="border-top mt-3 pt-3">
                    <h6 class="fw-semibold mb-2">{{ __('Write a review') }}</h6>
                    <form action="{{ route('reviews.store', $course) }}" method="POST">
                        @csrf
                        <div class="row g-2">
                            <div class="col-4">
                                <select name="rating" class="form-select form-select-sm" required>
                                    @for($i = 5; $i >= 1; $i--)
                                        <option value="{{ $i }}" @selected((int) old('rating', $myReview?->rating ?? 5) === $i)>{{ $i }} ★</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-8">
                                <input type="text" name="comment" class="form-control form-control-sm" maxlength="2000" value="{{ old('comment', $myReview?->review) }}" placeholder="{{ __('Share your experience') }}" required>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-primary w-100 mt-2">{{ $myReview ? __('Update review') : __('Submit review') }}</button>
                    </form>
                    @if($myReview)
                        <form action="{{ route('reviews.destroy', $course) }}" method="POST" class="mt-2" onsubmit="return confirm('{{ __('Remove your review?') }}');">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger w-100"><i class="bi bi-trash me-1"></i>{{ __('Remove my review') }}</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
        {{-- Shown only when the tutor can actually answer: enabled, and a key
             is configured. Otherwise a learner would type a question and get an
             administrator's error message back. --}}
        @if(module_enabled('ai')
            && tenant_setting('ai_tutor_enabled', '1') === '1'
            && app(\Modules\Ai\Services\AiClient::class)->isConfigured())
            @include('ai::partials.tutor')
        @endif
    </div>
</div>
@endsection

@if($ytId)
@push('scripts')
<script>
(function () {
    var wrap = document.getElementById('lfYtWrap');
    if (!wrap) return;
    var videoId = wrap.dataset.videoId;
    var clickShield = document.getElementById('lfYtClick');
    var bigPlay = document.getElementById('lfYtBigPlay');
    var seek = document.getElementById('lfYtSeek');
    var playBtn = document.getElementById('lfYtPlayBtn');
    var muteBtn = document.getElementById('lfYtMuteBtn');
    var fsBtn = document.getElementById('lfYtFsBtn');
    var timeLabel = document.getElementById('lfYtTime');
    var player = null, duration = 0, seeking = false, poll = null;

    function fmt(s) {
        s = Math.max(0, Math.floor(s || 0));
        var m = Math.floor(s / 60), ss = s % 60;
        return m + ':' + String(ss).padStart(2, '0');
    }
    function setPlayIcon(playing) {
        playBtn.innerHTML = playing ? '<i class="bi bi-pause-fill fs-5"></i>' : '<i class="bi bi-play-fill fs-5"></i>';
        bigPlay.style.display = playing ? 'none' : 'flex';
    }
    function togglePlay() {
        if (!player || !player.getPlayerState) return;
        player.getPlayerState() === 1 ? player.pauseVideo() : player.playVideo();
    }
    function tick() {
        if (!player || seeking || !player.getCurrentTime) return;
        var t = player.getCurrentTime();
        duration = player.getDuration() || duration;
        seek.value = duration ? Math.round((t / duration) * 1000) : 0;
        timeLabel.textContent = fmt(t) + ' / ' + fmt(duration);
    }
    function boot() {
        player = new YT.Player('lfYtFrame', {
            videoId: videoId,
            width: '100%',
            height: '100%',
            playerVars: {
                controls: 0, modestbranding: 1, rel: 0, iv_load_policy: 3,
                disablekb: 1, fs: 0, playsinline: 1, origin: window.location.origin
            },
            events: {
                onReady: function () { setPlayIcon(false); poll = setInterval(tick, 250); },
                onStateChange: function (e) { setPlayIcon(e.data === 1); }
            }
        });
    }

    if (window.YT && window.YT.Player) {
        boot();
    } else {
        var prevReady = window.onYouTubeIframeAPIReady;
        window.onYouTubeIframeAPIReady = function () { if (prevReady) prevReady(); boot(); };
        var tag = document.createElement('script');
        tag.src = 'https://www.youtube.com/iframe_api';
        document.head.appendChild(tag);
    }

    clickShield.addEventListener('click', togglePlay);
    bigPlay.addEventListener('click', togglePlay);
    playBtn.addEventListener('click', togglePlay);

    muteBtn.addEventListener('click', function () {
        if (!player) return;
        if (player.isMuted()) { player.unMute(); muteBtn.innerHTML = '<i class="bi bi-volume-up"></i>'; }
        else { player.mute(); muteBtn.innerHTML = '<i class="bi bi-volume-mute"></i>'; }
    });

    ['mousedown', 'touchstart'].forEach(function (evt) { seek.addEventListener(evt, function () { seeking = true; }); });
    seek.addEventListener('input', function () {
        timeLabel.textContent = fmt((seek.value / 1000) * duration) + ' / ' + fmt(duration);
    });
    seek.addEventListener('change', function () {
        if (player && duration) player.seekTo((seek.value / 1000) * duration, true);
        seeking = false;
    });

    fsBtn.addEventListener('click', function () {
        if (document.fullscreenElement) { document.exitFullscreen(); }
        else if (wrap.requestFullscreen) { wrap.requestFullscreen(); }
        else if (wrap.webkitRequestFullscreen) { wrap.webkitRequestFullscreen(); }
    });

    window.addEventListener('pagehide', function () { if (poll) clearInterval(poll); });
})();
</script>
@endpush
@endif

@push('scripts')
@if(($media['kind'] ?? '') === 'video' && (($media['hls'] ?? false) || ($media['drm'] ?? false)))
<script src="{{ ($media['drm'] ?? false) ? 'https://cdn.jsdelivr.net/npm/shaka-player@4.12.8/dist/shaka-player.compiled.min.js' : 'https://cdn.jsdelivr.net/npm/hls.js@1.5.15/dist/hls.min.js' }}"></script>
<script>
(function () {
    var v = document.getElementById('lfPlayer'); if (!v) return;
    var src = v.dataset.src;
    var drm = @json($media['drm'] ?? false);
    var servers = @json($media['drm_servers'] ?? []);
    if (drm && window.shaka) {
        shaka.polyfill.installAll();
        var player = new shaka.Player(v);
        player.configure({ drm: { servers: {
            'com.widevine.alpha': servers.widevine || '',
            'com.apple.fps': servers.fairplay || ''
        } } });
        player.load(src).catch(function (error) { console.error('DRM playback failed', error); });
    } else if (v.canPlayType('application/vnd.apple.mpegurl')) { v.src = src; }
    else if (window.Hls && Hls.isSupported()) { var h = new Hls(); h.loadSource(src); h.attachMedia(v); }
})();
</script>
@endif
@endpush

@push('scripts')
<script>
// ← / → jump between lessons unless the learner is typing in a field.
document.addEventListener('keydown', function (e) {
    if (e.altKey || e.ctrlKey || e.metaKey) return;
    var t = e.target; if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
    var el = e.key === 'ArrowRight' ? document.getElementById('lfNextLesson') : (e.key === 'ArrowLeft' ? document.getElementById('lfPrevLesson') : null);
    if (el) { e.preventDefault(); window.location.href = el.href; }
});
</script>
@endpush