@extends('layouts.self-paced-dashboard')

@section('title', $course->title)
@section('page-title', $course->title)
@section('page-subtitle', 'Course management hub')

@section('hero-actions')
    @can('edit self-paced courses')
    <a href="{{ route('self-paced.dashboard.courses.edit', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
        <i class="fas fa-pencil"></i> Edit Course
    </a>
    @endcan
    <a href="{{ route('self-paced.dashboard.courses.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back
    </a>
@endsection

@section('content')
<div x-data="courseHub()" x-init="init()">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
        <a href="{{ route('self-paced.dashboard.index') }}" class="hover:text-indigo-600 transition">Dashboard</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.index') }}" class="hover:text-indigo-600 transition">Courses</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">{{ Str::limit($course->title, 50) }}</span>
    </nav>

    {{-- Course Header Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-5">
        <div class="flex flex-col md:flex-row gap-0">
            @if($course->featured_image)
            <div class="md:w-56 flex-shrink-0">
                <img src="{{ asset('storage/' . $course->featured_image) }}" alt="{{ $course->title }}"
                     class="w-full h-44 md:h-full object-cover">
            </div>
            @else
            <div class="md:w-56 flex-shrink-0 bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center h-44 md:h-auto">
                <i class="fas fa-book-open text-white/40 text-5xl"></i>
            </div>
            @endif
            <div class="flex-1 p-5">
                <div class="flex flex-wrap items-start justify-between gap-3 mb-2">
                    <div>
                        <h1 class="text-lg font-bold text-gray-800">{{ $course->title }}</h1>
                        <div class="flex flex-wrap items-center gap-2 mt-1.5">
                            @php $statusMap = ['published'=>'bg-green-100 text-green-700','draft'=>'bg-amber-100 text-amber-700','archived'=>'bg-gray-100 text-gray-500']; @endphp
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold {{ $statusMap[$course->status] ?? 'bg-gray-100 text-gray-500' }}">
                                <i class="fas fa-circle text-[8px]"></i> {{ ucfirst($course->status) }}
                            </span>
                            @if($course->category)
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                <i class="fas fa-tag text-xs"></i> {{ $course->category->name }}
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xl font-bold text-indigo-700">{{ $course->getFormattedFee() }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">{{ $course->getFormattedDuration() }}</p>
                    </div>
                </div>
                <p class="text-sm text-gray-500 leading-relaxed line-clamp-2 mb-3">{{ $course->description }}</p>
                @if($course->instructor)
                <div class="flex items-center gap-2 text-xs text-gray-500">
                    <span class="w-6 h-6 bg-indigo-100 rounded-full flex items-center justify-center text-xs font-bold text-indigo-600">
                        {{ strtoupper(substr($course->instructor->name, 0, 1)) }}
                    </span>
                    Instructor: <strong>{{ $course->instructor->name }}</strong>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-indigo-700">{{ number_format($activeEnrollments) }}</p>
            <p class="text-xs text-gray-400 mt-1 flex items-center justify-center gap-1"><i class="fas fa-users text-indigo-300"></i> Active Enrollments</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-teal-700">{{ number_format($course->topics_count) }}</p>
            <p class="text-xs text-gray-400 mt-1 flex items-center justify-center gap-1"><i class="fas fa-list-ul text-teal-300"></i> Topics</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-purple-700">{{ number_format($course->exam_questions_count) }}</p>
            <p class="text-xs text-gray-400 mt-1 flex items-center justify-center gap-1"><i class="fas fa-question-circle text-purple-300"></i> Exam Questions</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-2xl font-bold text-green-700">{{ number_format($course->certificates_count) }}</p>
            <p class="text-xs text-gray-400 mt-1 flex items-center justify-center gap-1"><i class="fas fa-certificate text-green-300"></i> Certificates</p>
        </div>
    </div>

    {{-- ================================================================
         TAB NAVIGATION
    ================================================================ --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-5 overflow-hidden">
        <div class="flex overflow-x-auto scrollbar-hide border-b border-gray-100">
            @php
                $tabs = [
                    ['id' => 'overview',   'label' => 'Overview',   'icon' => 'fa-info-circle',        'color' => 'indigo'],
                    ['id' => 'topics',     'label' => 'Topics',     'icon' => 'fa-list-ul',             'color' => 'teal'],
                    ['id' => 'downloads',  'label' => 'Downloads',  'icon' => 'fa-file-download',       'color' => 'amber'],
                    ['id' => 'exams',      'label' => 'Exam Questions', 'icon' => 'fa-clipboard-question', 'color' => 'purple'],
                    ['id' => 'enrollments','label' => 'Enrollments','icon' => 'fa-users',               'color' => 'rose'],
                ];
                $colorMap = [
                    'indigo' => ['active' => 'border-indigo-500 text-indigo-700 bg-indigo-50', 'inactive' => 'border-transparent text-gray-500 hover:text-indigo-600 hover:bg-indigo-50/50'],
                    'teal'   => ['active' => 'border-teal-500 text-teal-700 bg-teal-50',       'inactive' => 'border-transparent text-gray-500 hover:text-teal-600 hover:bg-teal-50/50'],
                    'amber'  => ['active' => 'border-amber-500 text-amber-700 bg-amber-50',    'inactive' => 'border-transparent text-gray-500 hover:text-amber-600 hover:bg-amber-50/50'],
                    'purple' => ['active' => 'border-purple-500 text-purple-700 bg-purple-50', 'inactive' => 'border-transparent text-gray-500 hover:text-purple-600 hover:bg-purple-50/50'],
                    'rose'   => ['active' => 'border-rose-500 text-rose-700 bg-rose-50',       'inactive' => 'border-transparent text-gray-500 hover:text-rose-600 hover:bg-rose-50/50'],
                ];
            @endphp
            @foreach($tabs as $tab)
            <button type="button"
                    @click="activeTab = '{{ $tab['id'] }}'"
                    :class="activeTab === '{{ $tab['id'] }}' ? '{{ $colorMap[$tab['color']]['active'] }}' : '{{ $colorMap[$tab['color']]['inactive'] }}'"
                    class="flex items-center gap-2 px-5 py-3.5 text-sm font-semibold border-b-2 transition whitespace-nowrap flex-shrink-0">
                <i class="fas {{ $tab['icon'] }} text-xs"></i>
                {{ $tab['label'] }}
            </button>
            @endforeach
        </div>
    </div>

    {{-- ================================================================
         TAB: OVERVIEW
    ================================================================ --}}
    <div x-show="activeTab === 'overview'" x-cloak>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

            {{-- Exam Settings --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-clipboard-question text-purple-500"></i> Exam Settings
                </h2>
                <div class="space-y-3">
                    @foreach([['fa-percent','Passing Score',$course->passing_score.'%'],['fa-redo','Max Attempts',$course->exam_attempts_allowed],['fa-stopwatch','Time Limit',$course->exam_time_limit.' min'],['fa-question-circle','Questions/Attempt',$course->exam_questions_per_attempt]] as [$icon,$label,$val])
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-500 flex items-center gap-1.5"><i class="fas {{ $icon }} text-gray-300 w-4"></i> {{ $label }}</span>
                        <span class="font-semibold text-gray-700">{{ $val }}</span>
                    </div>
                    @endforeach
                </div>
                @can('manage self-paced exams')
                <a href="{{ route('self-paced.dashboard.exams.settings', $course) }}"
                   class="mt-4 flex items-center gap-2 text-xs text-purple-600 hover:text-purple-800 font-medium transition">
                    <i class="fas fa-cog"></i> Edit Exam Settings
                </a>
                @endcan
            </div>

            {{-- Course Info --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-info-circle text-blue-400"></i> Course Info
                </h2>
                <div class="space-y-2 text-xs text-gray-500">
                    <div class="flex justify-between"><span>Created by</span><span class="font-medium text-gray-700">{{ $course->creator?->name ?? '—' }}</span></div>
                    <div class="flex justify-between"><span>Created at</span><span class="font-medium text-gray-700">{{ $course->created_at?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span>Last updated</span><span class="font-medium text-gray-700">{{ $course->updated_at?->diffForHumans() ?? '—' }}</span></div>
                    <div class="flex justify-between"><span>Slug</span><span class="font-mono text-gray-600 text-xs truncate max-w-[120px]">{{ $course->slug }}</span></div>
                    <div class="flex justify-between"><span>Passed results</span><span class="font-medium text-gray-700">{{ $passedResults }}</span></div>
                </div>
            </div>

            {{-- Quick Actions --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-bolt text-amber-500"></i> Quick Actions
                </h2>
                <div class="space-y-2">
                    @can('edit self-paced courses')
                    <a href="{{ route('self-paced.dashboard.courses.edit', $course) }}"
                       class="flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 text-sm font-medium transition">
                        <i class="fas fa-pencil w-4 text-center"></i> Edit Course Details
                    </a>
                    @endcan
                    @can('manage self-paced topics')
                    <button @click="activeTab = 'topics'"
                            class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-teal-50 hover:bg-teal-100 text-teal-700 text-sm font-medium transition">
                        <i class="fas fa-list-ul w-4 text-center"></i> Manage Topics
                    </button>
                    @endcan
                    @can('manage self-paced exams')
                    <button @click="activeTab = 'exams'"
                            class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-purple-50 hover:bg-purple-100 text-purple-700 text-sm font-medium transition">
                        <i class="fas fa-clipboard-question w-4 text-center"></i> Manage Exam Questions
                    </button>
                    @endcan
                    @can('manage self-paced media')
                    <button @click="activeTab = 'downloads'"
                            class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-700 text-sm font-medium transition">
                        <i class="fas fa-download w-4 text-center"></i> Manage Downloads
                    </button>
                    @endcan
                    @can('view self-paced enrollments')
                    <button @click="activeTab = 'enrollments'"
                            class="w-full flex items-center gap-2.5 px-3 py-2.5 rounded-lg bg-rose-50 hover:bg-rose-100 text-rose-700 text-sm font-medium transition">
                        <i class="fas fa-users w-4 text-center"></i> View Enrollments
                    </button>
                    @endcan
                </div>
            </div>
        </div>

        {{-- Objectives & Prerequisites --}}
        @if($course->objectives || $course->prerequisites)
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
            @if($course->objectives)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-bullseye text-green-500"></i> Learning Objectives
                </h2>
                <div class="text-sm text-gray-600 leading-relaxed whitespace-pre-line">{{ $course->objectives }}</div>
            </div>
            @endif
            @if($course->prerequisites)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <i class="fas fa-list-check text-amber-500"></i> Prerequisites
                </h2>
                <div class="text-sm text-gray-600 leading-relaxed whitespace-pre-line">{{ $course->prerequisites }}</div>
            </div>
            @endif
        </div>
        @endif
    </div>

    {{-- ================================================================
         TAB: TOPICS
    ================================================================ --}}
    <div x-show="activeTab === 'topics'" x-cloak>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-list-ul text-teal-500"></i> Topics
                    <span class="ml-1 px-2 py-0.5 bg-teal-100 text-teal-700 text-xs rounded-full font-medium">{{ $course->topics_count }}</span>
                </h2>
                <div class="flex items-center gap-2">
                    @can('manage self-paced topics')
                    <a href="{{ route('self-paced.dashboard.courses.topics.create', $course) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-lg transition">
                        <i class="fas fa-plus"></i> Add Topic
                    </a>
                    @endcan
                    <a href="{{ route('self-paced.dashboard.courses.topics.index', $course) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs font-semibold rounded-lg transition">
                        <i class="fas fa-expand-alt"></i> Full View
                    </a>
                </div>
            </div>

            @if($course->topics->isEmpty())
            <div class="px-5 py-14 text-center">
                <i class="fas fa-list-ul text-5xl text-gray-200 mb-4 block"></i>
                <p class="text-gray-400 text-sm font-medium">No topics yet</p>
                <p class="text-gray-300 text-xs mt-1 mb-4">Topics are the main sections of your course. Add the first one to get started.</p>
                @can('manage self-paced topics')
                <a href="{{ route('self-paced.dashboard.courses.topics.create', $course) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold rounded-lg transition">
                    <i class="fas fa-plus"></i> Add First Topic
                </a>
                @endcan
            </div>
            @else
            <div class="divide-y divide-gray-50">
                @foreach($course->topics as $idx => $topic)
                <div class="px-5 py-4 hover:bg-gray-50/50 transition">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-3 flex-1 min-w-0">
                            <span class="w-7 h-7 bg-teal-100 rounded-full flex items-center justify-center text-xs font-bold text-teal-700 flex-shrink-0 mt-0.5">
                                {{ $idx + 1 }}
                            </span>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 flex-wrap">
                                    <p class="text-sm font-semibold text-gray-800">{{ $topic->title }}</p>
                                    @if($topic->is_published)
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                            <i class="fas fa-eye text-xs"></i> Published
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                                            <i class="fas fa-eye-slash text-xs"></i> Hidden
                                        </span>
                                    @endif
                                </div>
                                @if($topic->description)
                                <p class="text-xs text-gray-400 mt-0.5 line-clamp-1">{{ $topic->description }}</p>
                                @endif
                                {{-- Sub-topics inline list --}}
                                @if($topic->subtopics->isNotEmpty())
                                <div class="mt-2 space-y-1">
                                    @foreach($topic->subtopics as $si => $subtopic)
                                    <div class="flex items-center gap-2 pl-2 border-l-2 border-teal-100">
                                        <span class="text-xs text-gray-400 w-4 text-right flex-shrink-0">{{ $si + 1 }}.</span>
                                        <span class="text-xs text-gray-600 font-medium truncate">{{ $subtopic->title }}</span>
                                        @if($subtopic->media->count() > 0)
                                        <span class="inline-flex items-center gap-1 text-xs text-blue-500 flex-shrink-0">
                                            <i class="fas fa-photo-video text-xs"></i> {{ $subtopic->media->count() }}
                                        </span>
                                        @endif
                                        @if($subtopic->is_published)
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-600 flex-shrink-0">✓</span>
                                        @else
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-400 flex-shrink-0">–</span>
                                        @endif
                                        <div class="flex items-center gap-1 ml-auto flex-shrink-0">
                                            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.show', [$course, $topic, $subtopic]) }}"
                                               class="w-6 h-6 flex items-center justify-center rounded bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition" title="View subtopic">
                                                <i class="fas fa-eye text-xs"></i>
                                            </a>
                                            @can('manage self-paced topics')
                                            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.edit', [$course, $topic, $subtopic]) }}"
                                               class="w-6 h-6 flex items-center justify-center rounded bg-amber-50 hover:bg-amber-100 text-amber-600 transition" title="Edit subtopic">
                                                <i class="fas fa-pencil text-xs"></i>
                                            </a>
                                            @endcan
                                            @can('manage self-paced media')
                                            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.media.index', [$course, $topic, $subtopic]) }}"
                                               class="w-6 h-6 flex items-center justify-center rounded bg-purple-50 hover:bg-purple-100 text-purple-600 transition" title="Manage media">
                                                <i class="fas fa-photo-video text-xs"></i>
                                            </a>
                                            @endcan
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                            </div>
                        </div>
                        {{-- Topic actions --}}
                        <div class="flex items-center gap-1 flex-shrink-0">
                            <a href="{{ route('self-paced.dashboard.courses.topics.show', [$course, $topic]) }}"
                               class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition" title="View topic">
                                <i class="fas fa-eye text-xs"></i>
                            </a>
                            @can('manage self-paced topics')
                            <a href="{{ route('self-paced.dashboard.courses.topics.subtopics.create', [$course, $topic]) }}"
                               class="w-7 h-7 flex items-center justify-center rounded-lg bg-teal-50 hover:bg-teal-100 text-teal-600 transition" title="Add sub-topic">
                                <i class="fas fa-plus text-xs"></i>
                            </a>
                            <a href="{{ route('self-paced.dashboard.courses.topics.edit', [$course, $topic]) }}"
                               class="w-7 h-7 flex items-center justify-center rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-600 transition" title="Edit topic">
                                <i class="fas fa-pencil text-xs"></i>
                            </a>
                            <button type="button"
                                    @click="topicToDelete = { id: {{ $topic->id }}, title: '{{ addslashes($topic->title) }}' }; showTopicDeleteModal = true"
                                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition" title="Delete topic">
                                <i class="fas fa-trash text-xs"></i>
                            </button>
                            <form :id="'del-topic-' + {{ $topic->id }}"
                                  action="{{ route('self-paced.dashboard.courses.topics.destroy', [$course, $topic]) }}"
                                  method="POST" class="hidden">
                                @csrf @method('DELETE')
                            </form>
                            @endcan
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>

    {{-- ================================================================
         TAB: DOWNLOADS
    ================================================================ --}}
    <div x-show="activeTab === 'downloads'" x-cloak>
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-5">

            {{-- Upload Form --}}
            @can('manage self-paced media')
            <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="text-sm font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-upload text-amber-500"></i> Upload Download File
                </h2>
                <form action="{{ route('self-paced.dashboard.courses.downloads.store', $course) }}"
                      method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Title <span class="text-red-500">*</span></label>
                            <input type="text" name="title" value="{{ old('title') }}" placeholder="e.g. Course Handbook"
                                   class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-400 transition @error('title') border-red-400 @enderror">
                            @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">Attach to Topic <span class="text-gray-400 font-normal">(optional)</span></label>
                            <select name="topic_id" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-400 transition bg-white">
                                <option value="">— Course-level —</option>
                                @foreach($course->topics as $t)
                                    <option value="{{ $t->id }}" {{ old('topic_id') == $t->id ? 'selected' : '' }}>{{ $t->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1.5">File <span class="text-red-500">*</span></label>
                            <input type="file" name="download_file"
                                   class="w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100 transition @error('download_file') border-red-400 @enderror">
                            <p class="text-xs text-gray-400 mt-1">PDF, Excel, Word, ZIP, CSV — max 500 MB</p>
                            @error('download_file')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        <button type="submit"
                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-sm font-semibold rounded-lg transition">
                            <i class="fas fa-upload"></i> Upload
                        </button>
                    </div>
                </form>
            </div>
            @endcan

            {{-- Downloads List --}}
            <div class="{{ auth()->user()->can('manage self-paced media') ? 'lg:col-span-3' : 'lg:col-span-5' }} space-y-4">
                {{-- Course-level --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100">
                        <h3 class="text-xs font-semibold text-gray-700 flex items-center gap-2">
                            <i class="fas fa-book-open text-indigo-400"></i> Course-Level Downloads
                        </h3>
                    </div>
                    @php $courseDownloads = $course->downloads()->whereNull('topic_id')->get(); @endphp
                    @if($courseDownloads->isEmpty())
                    <div class="px-5 py-8 text-center">
                        <i class="fas fa-file-download text-3xl text-gray-200 mb-2 block"></i>
                        <p class="text-gray-400 text-xs">No course-level downloads yet.</p>
                    </div>
                    @else
                    <div class="divide-y divide-gray-50">
                        @foreach($courseDownloads as $dl)
                        <div class="flex items-center justify-between px-5 py-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-file-download text-amber-600 text-sm"></i>
                                </span>
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-700 truncate">{{ $dl->title }}</p>
                                    <p class="text-xs text-gray-400">{{ $dl->file_name }} · {{ number_format($dl->file_size / 1024, 1) }} KB</p>
                                </div>
                            </div>
                            @can('manage self-paced media')
                            <form action="{{ route('self-paced.dashboard.courses.downloads.destroy', [$course, $dl]) }}"
                                  method="POST" onsubmit="return confirm('Delete this download?')" class="flex-shrink-0 ml-3">
                                @csrf @method('DELETE')
                                <button type="submit" class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </form>
                            @endcan
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- Topic-level --}}
                @foreach($course->topics as $t)
                @php $topicDls = $t->downloads; @endphp
                @if($topicDls->isNotEmpty())
                <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="px-5 py-3 border-b border-gray-100">
                        <h3 class="text-xs font-semibold text-gray-700 flex items-center gap-2">
                            <i class="fas fa-list-ul text-teal-400"></i> {{ $t->title }}
                            <span class="px-1.5 py-0.5 bg-teal-100 text-teal-700 text-xs rounded-full">{{ $topicDls->count() }}</span>
                        </h3>
                    </div>
                    <div class="divide-y divide-gray-50">
                        @foreach($topicDls as $dl)
                        <div class="flex items-center justify-between px-5 py-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <span class="w-7 h-7 bg-teal-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-file text-teal-600 text-xs"></i>
                                </span>
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-700 truncate">{{ $dl->title }}</p>
                                    <p class="text-xs text-gray-400">{{ $dl->file_name }} · {{ number_format($dl->file_size / 1024, 1) }} KB</p>
                                </div>
                            </div>
                            @can('manage self-paced media')
                            <form action="{{ route('self-paced.dashboard.courses.downloads.destroy', [$course, $dl]) }}"
                                  method="POST" onsubmit="return confirm('Delete this download?')" class="flex-shrink-0 ml-3">
                                @csrf @method('DELETE')
                                <button type="submit" class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </form>
                            @endcan
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
                @endforeach
            </div>
        </div>
    </div>

    {{-- ================================================================
         TAB: EXAM QUESTIONS
    ================================================================ --}}
    <div x-show="activeTab === 'exams'" x-cloak>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-clipboard-question text-purple-500"></i> Exam Questions
                    <span class="ml-1 px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium">{{ $course->exam_questions_count }}</span>
                </h2>
                @can('manage self-paced exams')
                <div class="flex items-center gap-2">
                    <a href="{{ route('self-paced.dashboard.exams.import', $course) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs font-semibold rounded-lg transition">
                        <i class="fas fa-file-csv"></i> Import CSV
                    </a>
                    <a href="{{ route('self-paced.dashboard.exams.settings', $course) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs font-semibold rounded-lg transition">
                        <i class="fas fa-cog"></i> Settings
                    </a>
                    <a href="{{ route('self-paced.dashboard.exams.create', $course) }}"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs font-semibold rounded-lg transition">
                        <i class="fas fa-plus"></i> Add Question
                    </a>
                </div>
                @endcan
            </div>

            @php $questions = $course->examQuestions()->orderBy('sort_order')->take(20)->get(); @endphp

            @if($questions->isEmpty())
            <div class="px-5 py-14 text-center">
                <i class="fas fa-clipboard-question text-5xl text-gray-200 mb-4 block"></i>
                <p class="text-gray-400 text-sm font-medium">No exam questions yet</p>
                <p class="text-gray-300 text-xs mt-1 mb-4">Add questions manually or import them from a CSV file.</p>
                @can('manage self-paced exams')
                <div class="flex items-center justify-center gap-3">
                    <a href="{{ route('self-paced.dashboard.exams.create', $course) }}"
                       class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-lg transition">
                        <i class="fas fa-plus"></i> Add Question
                    </a>
                    <a href="{{ route('self-paced.dashboard.exams.import', $course) }}"
                       class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                        <i class="fas fa-file-csv"></i> Import CSV
                    </a>
                </div>
                @endcan
            </div>
            @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-10">#</th>
                            <th class="bg-purple-50 text-purple-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Question</th>
                            <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-24">Answer</th>
                            <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-20">Status</th>
                            <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-24">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($questions as $qi => $q)
                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-purple-50/40 transition-colors border-b border-gray-100 last:border-0">
                            <td class="px-4 py-3 text-gray-400 text-xs font-medium">{{ $qi + 1 }}</td>
                            <td class="px-4 py-3">
                                <div class="flex items-start gap-2">
                                    <p class="text-sm text-gray-700 line-clamp-2 flex-1">{{ $q->question_text }}</p>
                                    @if($q->hasMedia())
                                    @php $mediaIconMap = ['image'=>'fa-image text-blue-500','video'=>'fa-film text-rose-500','pdf'=>'fa-file-pdf text-red-500','presentation'=>'fa-file-powerpoint text-orange-500','excel'=>'fa-file-excel text-green-600']; @endphp
                                    <span class="flex-shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-purple-100 text-purple-700 font-medium" title="{{ ucfirst($q->question_media_type) }} attached">
                                        <i class="fas {{ ($mediaIconMap[$q->question_media_type] ?? 'fa-file text-gray-400') }} text-xs"></i>
                                        {{ ucfirst($q->question_media_type) }}
                                    </span>
                                    @endif
                                    @if($q->upload_required)
                                    <span class="flex-shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-amber-100 text-amber-700 font-medium" title="Learner upload required">
                                        <i class="fas fa-upload text-xs"></i> Upload
                                    </span>
                                    @endif
                                </div>
                                <div class="flex flex-wrap gap-1 mt-1">
                                    @foreach(['A' => $q->option_a, 'B' => $q->option_b, 'C' => $q->option_c, 'D' => $q->option_d] as $opt => $val)
                                    <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs {{ $q->correct_answer === $opt ? 'bg-green-100 text-green-700 font-semibold' : 'bg-gray-100 text-gray-500' }}">
                                        {{ $opt }}. {{ Str::limit($val, 30) }}
                                    </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700">
                                    <i class="fas fa-check text-xs"></i> {{ $q->correct_answer }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                @if($q->is_active)
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
                                @else
                                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">Inactive</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @can('manage self-paced exams')
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('self-paced.dashboard.exams.edit', [$course, $q]) }}"
                                       class="w-7 h-7 flex items-center justify-center rounded-lg bg-amber-50 hover:bg-amber-100 text-amber-600 transition">
                                        <i class="fas fa-pencil text-xs"></i>
                                    </a>
                                    <form action="{{ route('self-paced.dashboard.exams.destroy', [$course, $q]) }}"
                                          method="POST" onsubmit="return confirm('Delete this question?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="w-7 h-7 flex items-center justify-center rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition">
                                            <i class="fas fa-trash text-xs"></i>
                                        </button>
                                    </form>
                                </div>
                                @endcan
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($course->exam_questions_count > 20)
            <div class="px-5 py-3 border-t border-gray-100 text-center">
                <a href="{{ route('self-paced.dashboard.exams.course-questions', $course) }}"
                   class="text-xs text-purple-600 hover:text-purple-800 font-medium transition">
                    View all {{ $course->exam_questions_count }} questions <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            @endif
            @endif
        </div>
    </div>

    {{-- ================================================================
         TAB: ENROLLMENTS
    ================================================================ --}}
    <div x-show="activeTab === 'enrollments'" x-cloak>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-800 flex items-center gap-2">
                    <i class="fas fa-users text-rose-500"></i> Enrollments
                    <span class="ml-1 px-2 py-0.5 bg-rose-100 text-rose-700 text-xs rounded-full font-medium">{{ $course->enrollments_count }}</span>
                </h2>
                <a href="{{ route('self-paced.dashboard.enrollments.index', ['course_id' => $course->id]) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold rounded-lg transition">
                    <i class="fas fa-expand-alt"></i> Full Enrollments View
                </a>
            </div>
            @php $recentEnrollments = $course->enrollments()->with('user')->latest()->take(10)->get(); @endphp
            @if($recentEnrollments->isEmpty())
            <div class="px-5 py-14 text-center">
                <i class="fas fa-users text-5xl text-gray-200 mb-4 block"></i>
                <p class="text-gray-400 text-sm font-medium">No enrollments yet</p>
                <p class="text-gray-300 text-xs mt-1">Enrollments will appear here once learners register.</p>
            </div>
            @else
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Learner</th>
                            <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Status</th>
                            <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Payment</th>
                            <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Enrolled</th>
                            <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($recentEnrollments as $ei => $enr)
                        @php
                            $statusColors = ['active'=>'bg-green-100 text-green-700','pending'=>'bg-amber-100 text-amber-700','cancelled'=>'bg-red-100 text-red-700','completed'=>'bg-blue-100 text-blue-700'];
                        @endphp
                        <tr class="odd:bg-white even:bg-gray-50 hover:bg-rose-50/40 transition-colors border-b border-gray-100 last:border-0">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <span class="w-7 h-7 bg-rose-100 rounded-full flex items-center justify-center text-xs font-bold text-rose-600 flex-shrink-0">
                                        {{ strtoupper(substr($enr->user->name ?? '?', 0, 1)) }}
                                    </span>
                                    <div>
                                        <p class="text-sm font-medium text-gray-700">{{ $enr->user->name ?? 'Unknown' }}</p>
                                        <p class="text-xs text-gray-400">{{ $enr->user->email ?? '' }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$enr->status] ?? 'bg-gray-100 text-gray-500' }}">
                                    {{ ucfirst($enr->status) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-600">
                                {{ $enr->payment_method ?? '—' }}
                                @if($enr->amount_paid)
                                    <span class="text-gray-400">· {{ number_format($enr->amount_paid) }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-500">
                                {{ $enr->enrolled_at?->format('d M Y') ?? $enr->created_at->format('d M Y') }}
                            </td>
                            <td class="px-4 py-3">
                                <a href="{{ route('self-paced.dashboard.enrollments.show', $enr) }}"
                                   class="w-7 h-7 flex items-center justify-center rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 transition">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if($course->enrollments_count > 10)
            <div class="px-5 py-3 border-t border-gray-100 text-center">
                <a href="{{ route('self-paced.dashboard.enrollments.index', ['course_id' => $course->id]) }}"
                   class="text-xs text-rose-600 hover:text-rose-800 font-medium transition">
                    View all {{ $course->enrollments_count }} enrollments <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            @endif
            @endif
        </div>
    </div>

    {{-- ================================================================
         TOPIC DELETE MODAL
    ================================================================ --}}
    <div x-show="showTopicDeleteModal"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/40" @click="showTopicDeleteModal = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden z-10">
            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-2xl">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-trash"></i> Delete Topic
                </h3>
                <button type="button" @click="showTopicDeleteModal = false" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
            <p class="text-sm text-gray-500 mb-4">This will also delete all sub-topics and media.</p>
            <p class="text-sm text-gray-600 mb-5">
                Are you sure you want to delete <strong x-text="topicToDelete.title"></strong>?
            </p>
            <div class="flex gap-3 justify-end">
                <button @click="showTopicDeleteModal = false"
                        class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                    Cancel
                </button>
                <button @click="document.getElementById('del-topic-' + topicToDelete.id)?.submit()"
                        class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition">
                    <i class="fas fa-trash mr-1.5"></i> Delete
                </button>
            </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function courseHub() {
    return {
        activeTab: 'overview',
        showTopicDeleteModal: false,
        topicToDelete: { id: null, title: '' },

        init() {
            // Restore tab from URL hash
            const hash = window.location.hash.replace('#', '');
            const validTabs = ['overview', 'topics', 'downloads', 'exams', 'enrollments'];
            if (hash && validTabs.includes(hash)) {
                this.activeTab = hash;
            }

            // Update hash on tab change
            this.$watch('activeTab', tab => {
                history.replaceState(null, '', '#' + tab);
            });
        },
    };
}
</script>
@endpush
