@extends('layouts.admin')
@section('title', $course->title)
@section('header', 'Detail Kursus')

@section('content')
<style>
    :root { --navy:#0d1b2a; --navy-2:#1a2e45; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .serif { font-family:'Cormorant Garamond',Georgia,serif; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:24px; transition:color .15s; }
    .back-link:hover { color:var(--navy); }
    .badge { font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-block; }
    .badge-green { background:#d1fae5; color:#065f46; }
    .badge-gray { background:#f3f0eb; color:var(--muted); }
    .badge-blue { background:#eff6ff; color:#1d4ed8; }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }

    .page-layout { display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start; }
    @media(max-width:960px) { .page-layout { grid-template-columns:1fr; } }

    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .panel-head { padding:18px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .panel-body { padding:20px 24px; }
    .panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--navy); }

    /* Hero */
    .hero { display:flex; gap:0; }
    .hero-thumb { width:220px; flex-shrink:0; background:var(--navy-2); display:flex; align-items:center; justify-content:center; }
    .hero-thumb img { width:100%; height:100%; object-fit:cover; }
    .hero-thumb .no-img { color:rgba(255,255,255,.2); font-size:40px; }
    .hero-content { flex:1; padding:24px 28px; }
    @media(max-width:700px) { .hero { flex-direction:column; } .hero-thumb { width:100%; height:180px; } }

    .hero-category { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--gold-light); color:var(--gold); margin-bottom:10px; }
    .hero-title { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:700; color:var(--navy); line-height:1.25; margin-bottom:6px; }
    .hero-teacher { font-size:13px; color:var(--muted); margin-bottom:10px; }
    .hero-teacher strong { color:var(--navy); font-weight:500; }
    .hero-desc { font-size:13px; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

    /* Stats row */
    .stats-row { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); }
    .stat-item { text-align:center; padding:16px; border-right:1px solid var(--border); }
    .stat-item:last-child { border-right:none; }
    .stat-num { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--navy); line-height:1; }
    .stat-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px; }

    /* Students list */
    .student-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f5f2ec; }
    .student-row:last-child { border-bottom:none; }
    .av { width:36px; height:36px; border-radius:10px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
    .prog-wrap { background:#f0ede6; border-radius:100px; height:4px; overflow:hidden; flex:1; max-width:80px; }
    .prog-fill { height:4px; border-radius:100px; background:var(--navy); }
    .empty-state { text-align:center; padding:40px; color:var(--muted); font-size:13px; }

    /* Action buttons */
    .action-btn { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:500; padding:10px 16px; border-radius:10px; text-decoration:none; text-align:center; transition:all .15s; cursor:pointer; font-family:'Inter',sans-serif; border:none; width:100%; margin-bottom:8px; }
    .action-btn:last-child { margin-bottom:0; }
    .btn-navy { background:var(--navy); color:#fff; }
    .btn-navy:hover { opacity:.87; }
    .btn-amber { background:var(--gold-light); color:var(--gold); border:1px solid rgba(184,150,46,.2); }
    .btn-amber:hover { background:#f0e5c0; }
    .btn-red { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
    .btn-red:hover { background:#fee2e2; }

    /* Info card */
    .info-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f5f2ec; }
    .info-row:last-child { border-bottom:none; }
    .info-key { font-size:12px; color:var(--muted); }
    .info-val { font-size:12px; font-weight:500; color:var(--navy); }
</style>

<a href="{{ route('admin.courses.index') }}" class="back-link">
    <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali ke Daftar Kursus
</a>

<div class="page-layout">
    {{-- Left --}}
    <div>
        {{-- Hero Card --}}
        <div class="panel" style="margin-bottom:16px;">
            <div class="hero">
                <div class="hero-thumb" style="min-height:200px;">
                    @if($course->thumbnail)
                        <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}">
                    @else
                        <i class="fa fa-book no-img"></i>
                    @endif
                </div>
                <div class="hero-content">
                    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px;">
                        <div style="flex:1;">
                            <span class="hero-category">{{ $course->category->name ?? '—' }}</span>
                            <div class="hero-title">{{ $course->title }}</div>
                            <div class="hero-teacher">Oleh <strong>{{ $course->teacher->name }}</strong></div>
                        </div>
                        <span class="badge {{ $course->is_published ? 'badge-green' : 'badge-gray' }}">
                            {{ $course->is_published ? 'Publik' : 'Draft' }}
                        </span>
                    </div>
                    <div class="hero-desc">{{ $course->description ?? 'Tidak ada deskripsi.' }}</div>
                </div>
            </div>
            <div class="stats-row">
                <div class="stat-item">
                    <div class="stat-num">{{ $course->enrollments->count() }}</div>
                    <div class="stat-label">Siswa</div>
                </div>
                <div class="stat-item">
                    <div class="stat-num">{{ $course->materials->count() }}</div>
                    <div class="stat-label">Materi</div>
                </div>
                <div class="stat-item">
                    <div class="stat-num">{{ $course->assignments->count() }}</div>
                    <div class="stat-label">Tugas</div>
                </div>
            </div>
        </div>

        {{-- Students --}}
        <div class="panel">
            <div class="panel-head">
                <div class="panel-title">Siswa Terdaftar</div>
                <a href="{{ route('admin.enrollments.index', $course) }}"
                   style="font-size:12px; color:var(--gold); text-decoration:none; font-weight:500;">Kelola →</a>
            </div>
            <div class="panel-body">
                @forelse($course->enrollments->load('student') as $enrollment)
                <div class="student-row">
                    <div class="av">{{ strtoupper(substr($enrollment->student->name ?? 'S', 0, 1)) }}</div>
                    <div style="flex:1; min-width:0;">
                        <div style="font-size:13px; font-weight:500; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $enrollment->student->name ?? '—' }}</div>
                        <div style="font-size:11px; color:var(--muted);">{{ $enrollment->student->email ?? '' }}</div>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px; flex-shrink:0;">
                        <div class="prog-wrap">
                            <div class="prog-fill" style="width:{{ $enrollment->progress ?? 0 }}%;"></div>
                        </div>
                        <span style="font-size:11px; font-weight:600; color:var(--navy); min-width:30px; text-align:right;">{{ $enrollment->progress ?? 0 }}%</span>
                    </div>
                </div>
                @empty
                <div class="empty-state">
                    <i class="fa fa-users" style="font-size:22px; display:block; margin-bottom:8px; opacity:.3;"></i>
                    Belum ada siswa terdaftar.
                </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Right Sidebar --}}
    <div>
        {{-- Actions --}}
        <div class="panel" style="overflow:visible; margin-bottom:14px;">
            <div class="panel-head">
                <div class="panel-title">Aksi</div>
            </div>
            <div class="panel-body">
                <a href="{{ route('admin.courses.edit', $course) }}" class="action-btn btn-navy">
                    <i class="fa fa-pen" style="font-size:11px;"></i> Edit Kursus
                </a>
                <a href="{{ route('admin.enrollments.index', $course) }}" class="action-btn btn-amber">
                    <i class="fa fa-users" style="font-size:11px;"></i> Kelola Siswa
                </a>
                <form method="POST" action="{{ route('admin.courses.publish', $course) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="action-btn" style="background:var(--cream-2); color:var(--navy); border:1px solid var(--border);">
                        <i class="fa {{ $course->is_published ? 'fa-eye-slash' : 'fa-eye' }}" style="font-size:11px;"></i>
                        {{ $course->is_published ? 'Sembunyikan' : 'Publikasikan' }}
                    </button>
                </form>
                <form method="POST" action="{{ route('admin.courses.destroy', $course) }}"
                      onsubmit="return confirm('Hapus kursus ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="action-btn btn-red">
                        <i class="fa fa-trash" style="font-size:11px;"></i> Hapus Kursus
                    </button>
                </form>
            </div>
        </div>

        {{-- Course Info --}}
        <div class="panel">
            <div class="panel-head">
                <div class="panel-title">Informasi</div>
            </div>
            <div class="panel-body">
                <div class="info-row">
                    <div class="info-key">Kategori</div>
                    <div class="info-val">{{ $course->category->name ?? '—' }}</div>
                </div>
                <div class="info-row">
                    <div class="info-key">Pengajar</div>
                    <div class="info-val">{{ $course->teacher->name }}</div>
                </div>
                <div class="info-row">
                    <div class="info-key">Progress Min</div>
                    <div class="info-val">{{ $course->progress_min ?? 80 }}%</div>
                </div>
                <div class="info-row">
                    <div class="info-key">Status</div>
                    <div class="info-val">
                        <span class="badge {{ $course->is_published ? 'badge-green' : 'badge-gray' }}">
                            {{ $course->is_published ? 'Publik' : 'Draft' }}
                        </span>
                    </div>
                </div>
                <div class="info-row">
                    <div class="info-key">Dibuat</div>
                    <div class="info-val">{{ $course->created_at->format('d M Y') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection