@extends('layouts.admin')

@section('title', $course->title)
@section('page-title', trans('admin.Course'))
@section('page-subtitle', $course->title)

@section('content')

@php
    $canUpdate = auth('user')->user()->has_permission('update-courses');
    $canCreateExams = auth('user')->user()->has_permission('create-exams');
    $canUpdateExam = auth('user')->user()->has_permission('update-exams');
    $exam = $course->exam;
    if ($exam && $canUpdateExam) {
        $exam->load(['questions.options', 'questions.media']);
        $questionsData = $exam->questions->map(function($question){
            return [
                'id'         => $question->id,
                'question'   => $question->question,
                'type'       => $question->type ?: 'multiple_choice',
                'options'    => $question->options->pluck('option_text'),
                'correct'    => $question->options->search(function($option){
                    return $option->is_correct;
                }),
                'attachment' => $question->attachment,
            ];
        })->values();
        $courses = collect([$course]);
    }
@endphp

<section class="dpage active">
    <div class="card cd-hero">
        <div class="cd-hero-thumb" id="cdThumb">
            @if($course->getImage())
                <img src="{{ $course->getImage() }}" alt="{{ $course->title }}">
            @else
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M21 16l-5.5-5-4 4-2-2L3 18"/></svg>
            @endif
        </div>
        <div class="cd-hero-info">
            <div class="cd-hero-top">
                <span class="pill {{ $course->status === 'published' ? 'pill-green' : 'pill-muted' }}" id="cdStatusPill">{{ trans('admin.'.ucfirst($course->status)) }}</span>
                <span class="pill pill-muted">{{ trans('admin.'.ucfirst($course->level)) }}</span>
                <span class="eyebrow">{{ $course->category->name ?? trans('admin.Course') }}</span>
            </div>
            <h2 id="cdTitle">{{ $course->title }}</h2>
            <p class="cd-by">{{ trans('admin.by') }} {{ $course->instructor->user->name ?? '—' }}</p>
            <p class="cd-desc">{{ $course->description ?: trans('admin.No description yet') }}</p>
            <div class="cd-hero-actions">
                <button type="button" class="btn btn-ghost btn-sm" onclick="dashToast('✓', '{{ trans('admin.Coming soon') }}')">{{ trans('admin.Preview') }}</button>
                @if($course->exam && $canUpdateExam)
                    <button type="button" class="btn btn-soft btn-sm" onclick="openExamEditModal()">{{ trans('admin.Edit exam') }}</button>
                @elseif($course->exam)
                    <a href="{{ route('dashboard.exams.show', $course->exam->id) }}?edit=1" class="btn btn-soft btn-sm">{{ trans('admin.Edit exam') }}</a>
                @elseif($canCreateExams)
                    <button type="button" class="btn btn-soft btn-sm" onclick="openExamBuilder()">＋ {{ trans('admin.Add exam') }}</button>
                @endif
                @if($canUpdate)
                    <button class="btn btn-primary btn-sm" onclick="openEditCourseModal()">{{ trans('admin.Edit course') }}</button>
                @endif
            </div>
        </div>
    </div>

    <div class="two-col" style="margin-bottom:16px;">
        <div style="display:flex;flex-direction:column;gap:16px;">
        <div class="card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Course intro') }}</h3><div class="sub">{{ trans('admin.Course intro subtitle') }}</div></div>
            </div>
            <div class="intro-video-wrap">
                @if($course->getVideoUrl())
                    <div class="intro-player">
                        @if($course->video_type === 'youtube' && $course->youtube_video_id)
                            <iframe src="{{ $course->getVideoUrl() }}" style="width:100%;height:100%;position:absolute;inset:0;border:0;" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                        @else
                            <video controls style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;" src="{{ $course->getVideoUrl() }}"></video>
                        @endif
                    </div>
                    <div class="intro-meta-row">
                        <div>
                            <h4>{{ $course->video_title ?: trans('admin.Course intro') }}</h4>
                            <div class="sub">{{ trans('admin.Visible to everyone') }}</div>
                        </div>
                        @if($canUpdate)
                            <div class="intro-actions">
                                <button type="button" class="btn btn-ghost btn-sm" onclick="openIntroVideoModal()">{{ trans('admin.Replace / edit') }}</button>
                            </div>
                        @endif
                    </div>
                    @if($course->video_description)
                        <p style="font-size:12.5px;color:var(--text-muted);line-height:1.6;margin:12px 0 0;">{{ $course->video_description }}</p>
                    @endif
                @else
                    <div class="intro-empty">
                        <div class="ic">🎬</div>
                        <b>{{ trans('admin.No intro video yet') }}</b>
                        <span>{{ trans('admin.No intro video yet body') }}</span>
                        @if($canUpdate)
                            <div style="margin-top:16px;"><button type="button" class="btn btn-primary btn-sm" onclick="openIntroVideoModal()">＋ {{ trans('admin.Upload intro video') }}</button></div>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Reel video') }}</h3><div class="sub">{{ trans('admin.Reel video hint') }}</div></div>
            </div>
            <div class="intro-video-wrap">
                @if($course->hasOwnReel())
                    <div class="intro-player">
                        @if($course->getReelVideoType() === 'youtube')
                            <iframe src="{{ $course->getReelUrl() }}" style="width:100%;height:100%;position:absolute;inset:0;border:0;" allowfullscreen allow="autoplay; encrypted-media"></iframe>
                        @else
                            <video controls style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;" src="{{ $course->getReelUrl() }}"></video>
                        @endif
                    </div>
                    <div class="intro-meta-row">
                        <div>
                            <h4>{{ trans('admin.Custom reel set') }}</h4>
                            <div class="sub">{{ trans('admin.Visible in the Reels feed') }}</div>
                        </div>
                        @if($canUpdate)
                            <div class="intro-actions">
                                <button type="button" class="btn btn-ghost btn-sm" onclick="openReelVideoModal()">{{ trans('admin.Replace / edit') }}</button>
                            </div>
                        @endif
                    </div>
                @else
                    <div class="intro-empty">
                        <div class="ic">🎬</div>
                        <b>{{ trans('admin.No reel video yet') }}</b>
                        <span>{{ trans('admin.Reel video hint') }}</span>
                        @if($canUpdate)
                            <div style="margin-top:16px;"><button type="button" class="btn btn-primary btn-sm" onclick="openReelVideoModal()">＋ {{ trans('admin.Upload reel video') }}</button></div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
        </div>

        <div class="card">
            <div class="section-sub-head">
                <div><h3>{{ trans('admin.Lessons') }}</h3><div class="sub">{{ $course->lessons->count() }} {{ trans('admin.Lessons') }}</div></div>
                @if($canUpdate)
                    <button class="btn btn-soft btn-sm" onclick="openLessonModal()">＋ {{ trans('admin.Add') }}</button>
                @endif
            </div>
            <div id="cdLessonsList">
                @forelse($course->lessons as $i => $lesson)
                    <div class="lesson-row" id="lessonRow{{ $lesson->id }}" data-id="{{ $lesson->id }}">
                        @if($canUpdate)
                            <span class="lesson-drag-handle" draggable="true" title="{{ trans('admin.Drag to reorder') }}" style="cursor:grab;color:var(--text-faint);display:flex;align-items:center;flex-shrink:0;touch-action:none;">
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><circle cx="8" cy="6" r="1.4"/><circle cx="8" cy="12" r="1.4"/><circle cx="8" cy="18" r="1.4"/><circle cx="16" cy="6" r="1.4"/><circle cx="16" cy="12" r="1.4"/><circle cx="16" cy="18" r="1.4"/></svg>
                            </span>
                        @endif
                        <div class="lesson-play" role="button" title="{{ trans('admin.Play') }}" style="cursor:pointer;" onclick="openLessonVideoModal({{ $lesson->id }})"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
                        <div class="lesson-info">
                            <b><span class="lesson-num">{{ $i + 1 }}</span>. {{ $lesson->title }}</b>
                            <div class="lesson-meta"><span>{{ $lesson->duration ?: '—' }}</span></div>
                        </div>
                        @if($canUpdate)
                            <div class="row-actions">
                                <button type="button" title="{{ trans('admin.Edit') }}" onclick="openLessonModal({{ $lesson->id }})">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20l3.5-1L19 7.5a1.8 1.8 0 000-2.5l-1-1a1.8 1.8 0 00-2.5 0L4 15.5z"/></svg>
                                </button>
                                <a href="#" class="delete-popup text-danger" title="{{ trans('admin.Delete') }}" data-url="{{ route('dashboard.courses.lessons.destroy', [$course->id, $lesson->id]) }}">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
                                </a>
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="empty-state">
                        <div class="ic">🎬</div>
                        <b>{{ trans('admin.No lessons yet') }}</b>
                        <span>{{ trans('admin.No lessons yet body') }}</span>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="stat-grid">
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--primary-soft);color:var(--primary-ink);">👁</div></div><div class="stat-val">{{ $course->views_count }}</div><div class="stat-label">{{ trans('admin.Total views') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--gold-soft);color:var(--gold-ink);">💬</div></div><div class="stat-val">{{ $course->ratings_count }}</div><div class="stat-label">{{ trans('admin.Reviews') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--green-soft);color:var(--green);">🎓</div></div><div class="stat-val">{{ $course->students_count }}</div><div class="stat-label">{{ trans('admin.Enrolled students') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--red-soft);color:var(--coral);">★</div></div><div class="stat-val">{{ $course->ratings_avg_rating ? number_format($course->ratings_avg_rating, 1) : '—' }}</div><div class="stat-label">{{ trans('admin.Average rating') }}</div></div>
    </div>

    <div class="two-col">
        <div class="card">
            <div class="card-head"><h3>{{ trans('admin.Views over time') }}</h3></div>
            @if($course->views_count > 0)
                @php
                    $max = max($viewsSeries->max(), 1);
                    $stepX = $viewsSeries->count() > 1 ? 560 / ($viewsSeries->count() - 1) : 0;
                    $points = $viewsSeries->values()->map(function($v, $i) use ($max, $stepX){
                        $x = round($i * $stepX);
                        $y = round(150 - ($v / $max) * 130);
                        return "{$x},{$y}";
                    })->implode(' ');
                @endphp
                <div class="chart-wrap">
                    <svg viewBox="0 0 560 160" preserveAspectRatio="none">
                        <polyline points="{{ $points }}" fill="none" stroke="var(--primary)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            @else
                <div class="empty-state">
                    <div class="ic">📈</div>
                    <b>{{ trans('admin.No views yet') }}</b>
                </div>
            @endif
        </div>
        <div class="card">
            <div class="card-head"><h3>{{ trans('admin.Recent reviews') }}</h3></div>
            <div style="padding:6px 22px 18px;">
                @forelse($course->ratings as $review)
                    <div style="padding:12px 0;border-bottom:1px solid var(--border);">
                        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
                            <b style="font-size:12.5px;">{{ $review->reviewer_name ?: '—' }}</b>
                            <span style="font-size:11.5px;color:var(--gold-ink);">{{ str_repeat('★', $review->rating) }}{{ str_repeat('☆', 5 - $review->rating) }}</span>
                        </div>
                        <div style="font-size:12.5px;color:var(--text-muted);margin-top:2px;">{{ $review->comment }}</div>
                    </div>
                @empty
                    <p class="hint" style="padding:14px 0;">{{ trans('admin.No reviews yet') }}</p>
                @endforelse
            </div>
        </div>
    </div>

</section>

@if($canUpdate)
<!-- ============ MODAL: Edit course ============ -->
<div class="modal-backdrop" id="courseEditModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3>{{ trans('admin.Edit course') }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('courseEditModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <form id="courseEditForm" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <div class="form-grid">
                    <div class="field full">
                        <label>{{ trans('admin.Thumbnail') }}</label>
                        <div class="upload-box" style="padding:16px;" onclick="document.getElementById('editCourseImage').click()">
                            <img id="editCourseImagePreview" src="{{ $course->getImage() }}" alt="" style="{{ $course->getImage() ? '' : 'display:none;' }}max-width:100%;max-height:140px;border-radius:8px;margin-bottom:8px;object-fit:cover;">
                            <svg id="editCourseImageIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20" style="{{ $course->getImage() ? 'display:none;' : '' }}"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3"/></svg>
                            <b>{{ trans('admin.Replace thumbnail') }}</b>
                            <span id="editCourseImageName">{{ $course->getFirstMedia(\App\Models\Course::COLLECTION_THUMBNAIL)?->file_name ?: trans('admin.PNG, JPG up to 5MB') }}</span>
                        </div>
                        <input type="file" name="image" id="editCourseImage" accept="image/png,image/jpeg,image/webp" style="display:none;">
                    </div>
                    @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="field full">
                            <label>{{ trans('admin.Course title') }} ({{ $properties['native'] }}){{ $localeCode !== config('app.locale') ? ' — ' . trans('admin.optional') : '' }}</label>
                            <input type="text" name="{{ $localeCode }}[title]" id="editCourseTitle_{{ $localeCode }}" value="{{ optional($course->translate($localeCode))->title }}" @if($localeCode === config('app.locale')) required @endif>
                        </div>
                    @endforeach
                    <div class="field">
                        <label>{{ trans('admin.Category') }}</label>
                        <select name="category_id" id="editCourseCategory">
                            <option value="">—</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @selected($category->id == $course->category_id)>{{ $category->translated_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>{{ trans('admin.Price') }}</label>
                        <input type="number" name="price" id="editCoursePrice" step="0.01" min="0" value="{{ round($course->price) }}">
                    </div>
                    @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="field full">
                            <label>{{ trans('admin.Short description') }} ({{ $properties['native'] }})</label>
                            <textarea name="{{ $localeCode }}[description]" id="editCourseDesc_{{ $localeCode }}">{{ optional($course->translate($localeCode))->description }}</textarea>
                        </div>
                    @endforeach
                    <div class="field">
                        <label>{{ trans('admin.Status') }}</label>
                        <select name="status" id="editCourseStatus">
                            <option value="draft" @selected($course->status === 'draft')>{{ trans('admin.Draft') }}</option>
                            <option value="published" @selected($course->status === 'published')>{{ trans('admin.Published') }}</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>{{ trans('admin.Level') }}</label>
                        <select name="level" id="editCourseLevel">
                            <option value="beginner" @selected($course->level === 'beginner')>{{ trans('admin.Beginner') }}</option>
                            <option value="intermediate" @selected($course->level === 'intermediate')>{{ trans('admin.Intermediate') }}</option>
                            <option value="advanced" @selected($course->level === 'advanced')>{{ trans('admin.Advanced') }}</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>{{ trans('admin.Access type') }}</label>
                        <select name="access_type" id="editCourseAccessType">
                            <option value="buy_once" @selected($course->access_type === 'buy_once')>{{ trans('admin.Buy once') }}</option>
                            <option value="subscription" @selected($course->access_type === 'subscription')>{{ trans('admin.Included in subscription') }}</option>
                        </select>
                    </div>
                </div>
                <div id="courseEditProgressWrap" style="display:none;margin-top:14px;">
                    <div style="height:8px;border-radius:6px;background:var(--bg-alt);overflow:hidden;">
                        <div id="courseEditProgressBar" style="height:100%;width:0%;background:var(--primary);transition:width .15s ease;"></div>
                    </div>
                    <span class="hint" id="courseEditProgressText">{{ trans('admin.Uploading') }}… 0%</span>
                </div>
                <div class="hint" id="courseEditErrors" style="color:var(--red);margin-top:14px;"></div>
            </div>
            <div class="modal-foot">
                <button type="button" class="btn btn-ghost" onclick="closeModal('courseEditModal')">{{ trans('admin.Cancel') }}</button>
                <button type="submit" class="btn btn-primary" id="courseEditSubmitBtn">{{ trans('admin.Save') }}</button>
            </div>
        </form>
    </div>
</div>

<!-- ============ MODAL: Course intro video ============ -->
<div class="modal-backdrop" id="introVideoModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3>{{ trans('admin.Course intro video') }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('introVideoModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <form id="introVideoForm" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <div class="form-grid">
                    @include('Dashboard.courses._video_source_fields', [
                        'prefix' => 'intro',
                        'currentType' => $course->video_type,
                        'currentFileLabel' => $course->getFirstMedia(\App\Models\Course::COLLECTION_VIDEO)?->file_name,
                        'currentYoutubeUrl' => $course->getYoutubeWatchUrl(),
                    ])
                </div>
                <div id="introVideoProgressWrap" style="display:none;margin-top:10px;">
                    <div style="height:8px;border-radius:6px;background:var(--bg-alt);overflow:hidden;">
                        <div id="introVideoProgressBar" style="height:100%;width:0%;background:var(--primary);transition:width .15s ease;"></div>
                    </div>
                    <span class="hint" id="introVideoProgressText">0%</span>
                </div>
                <div class="hint" id="introVideoErrors" style="color:var(--red);margin-top:14px;"></div>
            </div>
            <div class="modal-foot">
                <button type="button" class="btn btn-ghost" onclick="closeModal('introVideoModal')">{{ trans('admin.Cancel') }}</button>
                <button type="submit" class="btn btn-primary" id="introVideoSubmitBtn">{{ trans('admin.Save') }}</button>
            </div>
        </form>
    </div>
</div>

<!-- ============ MODAL: Course reel video ============ -->
<div class="modal-backdrop" id="reelVideoModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3>{{ trans('admin.Reel video') }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('reelVideoModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <form id="reelVideoForm" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <p class="hint" style="margin-bottom:14px;">{{ trans('admin.Reel video hint') }}</p>
                <div class="form-grid">
                    @include('Dashboard.courses._video_source_fields', [
                        'prefix' => 'reelEdit',
                        'currentType' => $course->reel_type ?? 'youtube',
                        'currentFileLabel' => $course->getFirstMedia(\App\Models\Course::COLLECTION_REEL)?->file_name,
                        'currentYoutubeUrl' => $course->reel_type === 'youtube' && $course->reel_youtube_video_id ? "https://www.youtube.com/watch?v={$course->reel_youtube_video_id}" : null,
                    ])
                </div>
                <div id="reelVideoProgressWrap" style="display:none;margin-top:10px;">
                    <div style="height:8px;border-radius:6px;background:var(--bg-alt);overflow:hidden;">
                        <div id="reelVideoProgressBar" style="height:100%;width:0%;background:var(--primary);transition:width .15s ease;"></div>
                    </div>
                    <span class="hint" id="reelVideoProgressText">0%</span>
                </div>
                <div class="hint" id="reelVideoErrors" style="color:var(--red);margin-top:14px;"></div>
            </div>
            <div class="modal-foot">
                <button type="button" class="btn btn-ghost" onclick="closeModal('reelVideoModal')">{{ trans('admin.Cancel') }}</button>
                <button type="submit" class="btn btn-primary" id="reelVideoSubmitBtn">{{ trans('admin.Save') }}</button>
            </div>
        </form>
    </div>
</div>

<!-- ============ MODAL: Add / Edit lesson ============ -->
<div class="modal-backdrop" id="lessonModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3 id="lessonModalTitle">{{ trans('admin.Add lesson') }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('lessonModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <form id="lessonForm" enctype="multipart/form-data">
            @csrf
            <input type="hidden" id="lessonId" value="">
            <div class="modal-body">
                <div class="form-grid">
                    @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="field full">
                            <label>{{ trans('admin.Lesson title') }} ({{ $properties['native'] }}){{ $localeCode !== config('app.locale') ? ' — ' . trans('admin.optional') : '' }}</label>
                            <input type="text" name="{{ $localeCode }}[title]" id="lessonTitle_{{ $localeCode }}" @if($localeCode === config('app.locale')) required @endif>
                        </div>
                    @endforeach
                    @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                        <div class="field full">
                            <label>{{ trans('admin.Description') }} ({{ $properties['native'] }}){{ $localeCode !== config('app.locale') ? ' — ' . trans('admin.optional') : '' }}</label>
                            <textarea name="{{ $localeCode }}[description]" id="lessonDescription_{{ $localeCode }}"></textarea>
                        </div>
                    @endforeach
                    @include('Dashboard.courses._video_source_fields', ['prefix' => 'lesson', 'currentType' => 'youtube'])
                    <div class="field full">
                        <div id="lessonUploadProgressWrap" style="display:none;">
                            <div style="height:8px;border-radius:6px;background:var(--bg-alt);overflow:hidden;">
                                <div id="lessonUploadProgressBar" style="height:100%;width:0%;background:var(--primary);transition:width .15s ease;"></div>
                            </div>
                            <span class="hint" id="lessonUploadProgressText">0%</span>
                        </div>
                    </div>
                </div>
                <div class="hint" id="lessonErrors" style="color:var(--red);margin-top:14px;"></div>
            </div>
            <div class="modal-foot">
                <button type="button" class="btn btn-ghost" onclick="closeModal('lessonModal')">{{ trans('admin.Cancel') }}</button>
                <button type="submit" class="btn btn-primary" id="lessonSubmitBtn">{{ trans('admin.Save') }}</button>
            </div>
        </form>
    </div>
</div>
@endif

<!-- ============ MODAL: Watch lesson video ============ -->
<div class="modal-backdrop" id="lessonVideoModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3 id="lessonVideoModalTitle">{{ trans('admin.Lesson video') }}</h3>
            <button type="button" class="modal-close" onclick="closeLessonVideoModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <div class="modal-body">
            <video id="lessonVideoPlayer" controls style="width:100%;border-radius:12px;display:block;"></video>
            <iframe id="lessonVideoFrame" style="width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:none;" allowfullscreen allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
</div>

@if($exam && $canUpdateExam)
  @include('Dashboard.exams._edit_modal')
@endif

@if($canCreateExams)
  @include('Dashboard.exams._create_modal', ['fixedCourseId' => $course->id])
@endif

@endsection

@section('script')
<script type="text/javascript">
    var courseId = {{ $course->id }};

    @include('Dashboard.courses._video_source_script')

    function openEditCourseModal(){
        $('#courseEditErrors').html('');
        $('#courseEditProgressWrap').hide();
        $('#courseEditProgressBar').css('width', '0%');
        $('#courseEditProgressText').text("{{ trans('admin.Uploading') }}… 0%");
        openModal('courseEditModal');
    }

    $('#editCourseImage').on('change', function(){
        var file = this.files.length ? this.files[0] : null;
        $('#editCourseImageName').text(file ? file.name : "{{ trans('admin.PNG, JPG up to 5MB') }}");

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e){
                $('#editCourseImagePreview').attr('src', e.target.result).show();
                $('#editCourseImageIcon').hide();
            };
            reader.readAsDataURL(file);
        }
    });

    $('#courseEditForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#courseEditSubmitBtn');
        $('#courseEditErrors').html('');
        $btn.prop('disabled', true);

        var hasUpload = $('#editCourseImage')[0].files.length > 0;
        if (hasUpload) {
            $('#courseEditProgressWrap').show();
            $('#courseEditProgressBar').css('width', '0%');
            $('#courseEditProgressText').text("{{ trans('admin.Uploading') }}… 0%");
        }

        $.ajax({
            url: "{{ url('dashboard/courses') }}/" + courseId + "/edit",
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if (hasUpload && xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt){
                        if (!evt.lengthComputable) return;
                        var pct = Math.round((evt.loaded / evt.total) * 100);
                        $('#courseEditProgressBar').css('width', pct + '%');
                        $('#courseEditProgressText').text("{{ trans('admin.Uploading') }}… " + pct + '%');
                    }, false);
                }
                return xhr;
            },
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                setTimeout(function(){ location.reload(); }, 400);
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#courseEditErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
                $('#courseEditProgressWrap').hide();
            }
        });
    });

    function openIntroVideoModal(){
        $('#introVideoErrors').html('');
        $('#introVideoProgressWrap').hide();
        $('#introVideoProgressBar').css('width', '0%');
        $('#introVideoProgressText').text('0%');
        setVideoSourceMode('intro', @json($course->video_type ?? 'file'));
        openModal('introVideoModal');
    }

    $('#introVideoForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#introVideoSubmitBtn');
        $('#introVideoErrors').html('');
        $btn.prop('disabled', true);

        var hasVideo = $('#introVideoSource').val() !== 'youtube' && $('#introVideoFile')[0].files.length > 0;
        if (hasVideo) {
            $('#introVideoProgressWrap').show();
            $('#introVideoProgressBar').css('width', '0%');
            $('#introVideoProgressText').text('0%');
        }

        $.ajax({
            url: "{{ url('dashboard/courses') }}/" + courseId + "/video/edit",
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if (hasVideo && xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt){
                        if (!evt.lengthComputable) return;
                        var pct = Math.round((evt.loaded / evt.total) * 100);
                        $('#introVideoProgressBar').css('width', pct + '%');
                        $('#introVideoProgressText').text(pct + '%');
                    }, false);
                }
                return xhr;
            },
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                setTimeout(function(){ location.reload(); }, 400);
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#introVideoErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
                $('#introVideoProgressWrap').hide();
            }
        });
    });

    function openReelVideoModal(){
        $('#reelVideoErrors').html('');
        $('#reelVideoProgressWrap').hide();
        $('#reelVideoProgressBar').css('width', '0%');
        $('#reelVideoProgressText').text('0%');
        setVideoSourceMode('reelEdit', @json($course->reel_type ?? 'youtube'));
        openModal('reelVideoModal');
    }

    $('#reelVideoForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#reelVideoSubmitBtn');
        $('#reelVideoErrors').html('');
        $btn.prop('disabled', true);

        var hasVideo = $('#reelEditVideoSource').val() !== 'youtube' && $('#reelEditVideoFile')[0].files.length > 0;
        if (hasVideo) {
            $('#reelVideoProgressWrap').show();
            $('#reelVideoProgressBar').css('width', '0%');
            $('#reelVideoProgressText').text('0%');
        }

        $.ajax({
            url: "{{ url('dashboard/courses') }}/" + courseId + "/reel/edit",
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if (hasVideo && xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt){
                        if (!evt.lengthComputable) return;
                        var pct = Math.round((evt.loaded / evt.total) * 100);
                        $('#reelVideoProgressBar').css('width', pct + '%');
                        $('#reelVideoProgressText').text(pct + '%');
                    }, false);
                }
                return xhr;
            },
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                setTimeout(function(){ location.reload(); }, 400);
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#reelVideoErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
                $('#reelVideoProgressWrap').hide();
            }
        });
    });

    var lessons = @json($course->lessons->keyBy('id'));

    function openLessonModal(id){
        $('#lessonForm')[0].reset();
        $('#lessonId').val('');
        $('#lessonErrors').html('');
        setVideoSourceMode('lesson', 'youtube');
        $('#lessonVideoFileName').text("{{ trans('admin.Click to upload or drag and drop') }}");
        $('#lessonYoutubeInput').val('');
        $('#lessonUploadProgressWrap').hide();
        $('#lessonUploadProgressBar').css('width', '0%');
        $('#lessonUploadProgressText').text('0%');

        if (id) {
            var lesson = lessons[id];
            $('#lessonModalTitle').text("{{ trans('admin.Edit lesson') }}");
            $('#lessonId').val(id);
            var translationsByLocale = {};
            (lesson.translations || []).forEach(function(t){ translationsByLocale[t.locale] = t; });
            @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                $('#lessonTitle_{{ $localeCode }}').val((translationsByLocale['{{ $localeCode }}'] || {}).title || '');
                $('#lessonDescription_{{ $localeCode }}').val((translationsByLocale['{{ $localeCode }}'] || {}).description || '');
            @endforeach
            if (lesson.video_type === 'youtube' && lesson.youtube_video_id) {
                setVideoSourceMode('lesson', 'youtube');
                $('#lessonYoutubeInput').val('https://www.youtube.com/watch?v=' + lesson.youtube_video_id);
            } else if (lesson.video_url) {
                setVideoSourceMode('lesson', 'file');
                $('#lessonVideoFileName').text(lesson.video_url.split('/').pop());
            }
        } else {
            $('#lessonModalTitle').text("{{ trans('admin.Add lesson') }}");
        }
        openModal('lessonModal');
    }

    $('#lessonForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#lessonSubmitBtn');
        var id = $('#lessonId').val();
        var url = id
            ? "{{ url('dashboard/courses') }}/" + courseId + "/lessons/" + id + "/edit"
            : "{{ route('dashboard.courses.lessons.store', $course->id) }}";
        $('#lessonErrors').html('');
        $btn.prop('disabled', true);

        var hasVideo = $('#lessonVideoSource').val() !== 'youtube' && $('#lessonVideoFile')[0].files.length > 0;
        if (hasVideo) {
            $('#lessonUploadProgressWrap').show();
            $('#lessonUploadProgressBar').css('width', '0%');
            $('#lessonUploadProgressText').text('0%');
        }

        $.ajax({
            url: url,
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if (hasVideo && xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt){
                        if (!evt.lengthComputable) return;
                        var pct = Math.round((evt.loaded / evt.total) * 100);
                        $('#lessonUploadProgressBar').css('width', pct + '%');
                        $('#lessonUploadProgressText').text(pct + '%');
                    }, false);
                }
                return xhr;
            },
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                setTimeout(function(){ location.reload(); }, 400);
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#lessonErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
                $('#lessonUploadProgressWrap').hide();
            }
        });
    });

    /* ============ Lesson reordering (drag and drop) ============ */
    (function(){
        var list = document.getElementById('cdLessonsList');
        if (!list) return;
        var dragRow = null;

        list.addEventListener('dragstart', function(e){
            var handle = e.target.closest('.lesson-drag-handle');
            if (!handle) { e.preventDefault(); return; }
            dragRow = handle.closest('.lesson-row');
            if (!dragRow) return;
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', dragRow.dataset.id);
            dragRow.style.opacity = '0.5';
        });

        list.addEventListener('dragend', function(){
            if (dragRow) dragRow.style.opacity = '';
            dragRow = null;
        });

        list.addEventListener('dragover', function(e){
            if (!dragRow) return;
            e.preventDefault();
            var row = e.target.closest('.lesson-row');
            if (!row || row === dragRow) return;
            var rect = row.getBoundingClientRect();
            var placeAfter = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
            list.insertBefore(dragRow, placeAfter ? row.nextSibling : row);
        });

        list.addEventListener('drop', function(e){
            e.preventDefault();
            refreshLessonNumbers();
            saveLessonOrder();
        });

        function refreshLessonNumbers(){
            var rows = list.querySelectorAll('.lesson-row');
            rows.forEach(function(row, i){
                var numEl = row.querySelector('.lesson-num');
                if (numEl) numEl.textContent = (i + 1);
            });
        }

        function saveLessonOrder(){
            var rows = list.querySelectorAll('.lesson-row');
            var order = [];
            rows.forEach(function(row){ order.push(row.dataset.id); });
            if (!order.length) return;

            $.ajax({
                url: "{{ url('dashboard/courses') }}/" + courseId + "/lessons/reorder",
                method: 'POST',
                data: { order: order, _token: "{{ csrf_token() }}" },
                error: function(){ dashToast('✕', "{{ trans('admin.faild') }}"); }
            });
        }
    })();

    /* ============ Watch lesson video ============ */
    function openLessonVideoModal(id){
        var lesson = lessons[id];
        if (!lesson || !lesson.video_url) {
            dashToast('✕', "{{ trans('admin.No video for this lesson') }}");
            return;
        }
        $('#lessonVideoModalTitle').text(lesson.title);
        if (lesson.video_type === 'youtube') {
            $('#lessonVideoPlayer').hide();
            $('#lessonVideoFrame').attr('src', lesson.video_url).show();
        } else {
            $('#lessonVideoFrame').hide().attr('src', '');
            $('#lessonVideoPlayer').attr('src', lesson.video_url).show();
        }
        openModal('lessonVideoModal');
    }

    function closeLessonVideoModal(){
        var player = document.getElementById('lessonVideoPlayer');
        player.pause();
        player.removeAttribute('src');
        player.load();
        document.getElementById('lessonVideoFrame').setAttribute('src', '');
        closeModal('lessonVideoModal');
    }

    document.getElementById('lessonVideoModal').addEventListener('click', function(e){
        if (e.target === this) closeLessonVideoModal();
    });

    @if($canCreateExams)
    /* ============ Exam builder (shared partial) ============ */
    function onExamPublished(res){
        if (res.id) {
            setTimeout(function(){ location.href = "{{ url('dashboard/exams') }}/" + res.id; }, 400);
        }
    }

    @include('Dashboard.exams._builder_script')
    @endif

    @if($exam && $canUpdateExam)
    /* ============ Exam edit (shared partial) ============ */
    @include('Dashboard.exams._edit_script')
    @endif
</script>
@endsection