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

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:20px; }
    .back-link:hover { color:var(--navy); }
    .alert-success { background:#d1fae5; border:1px solid #a7f3d0; border-radius:12px; padding:12px 16px; font-size:13px; color:#065f46; margin-bottom:20px; }

    .course-banner { background:var(--navy); border-radius:14px; padding:18px 22px; margin-bottom:20px; }
    .course-banner .label { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.35); font-weight:600; margin-bottom:4px; }
    .course-banner .title { font-size:17px; font-weight:600; color:#fff; font-family:'Cormorant Garamond',serif; }
    .course-banner .meta { font-size:12px; color:rgba(255,255,255,.45); margin-top:4px; }

    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    @media(max-width:800px) { .grid-2 { grid-template-columns:1fr; } }

    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; }
    .panel-head { padding:18px 20px 16px; border-bottom:1px solid var(--border); }
    .panel-body { padding:16px 20px; }
    .panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--navy); }

    .student-checkbox {
        display:flex; align-items:center; gap:10px;
        padding:10px 12px; border-radius:10px; border:1px solid transparent;
        cursor:pointer; transition:all .12s;
    }
    .student-checkbox:hover { background:var(--cream); border-color:var(--border); }
    .student-checkbox input { width:15px; height:15px; accent-color:var(--navy); cursor:pointer; }
    .av-sm { width:30px; height:30px; border-radius:8px; background:var(--cream-2); color:var(--muted); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
    .av-green { background:#d1fae5; color:#065f46; }

    .scroll-box { max-height:300px; overflow-y:auto; padding-right:4px; }
    .scroll-box::-webkit-scrollbar { width:4px; }
    .scroll-box::-webkit-scrollbar-track { background:var(--cream); border-radius:4px; }
    .scroll-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    .enrolled-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; background:var(--cream); margin-bottom:6px; }
    .enrolled-row:last-child { margin-bottom:0; }

    .prog-wrap { background:#e5e0d5; border-radius:100px; height:4px; width:60px; overflow:hidden; }
    .prog-fill { height:4px; border-radius:100px; background:var(--navy); }

    .btn-submit { display:block; width:100%; background:var(--navy); color:#fff; font-size:13px; font-weight:500; padding:10px; border-radius:10px; border:none; cursor:pointer; font-family:'Inter',sans-serif; margin-top:14px; text-align:center; }
    .btn-submit:hover { opacity:.87; }
    .btn-remove { font-size:11px; font-weight:500; color:#dc2626; background:transparent; border:none; cursor:pointer; font-family:'Inter',sans-serif; padding:4px 8px; border-radius:6px; transition:background .12s; }
    .btn-remove:hover { background:#fef2f2; }
    .empty-state { text-align:center; padding:32px; color:var(--muted); font-size:13px; }
    .field-error { font-size:11px; color:#dc2626; margin-top:4px; }
</style>

@if(session('success'))
<div class="alert-success"><i class="fa fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}</div>
@endif

<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="course-banner">
    <div class="label">Mengelola Siswa</div>
    <div class="title">{{ $course->title }}</div>
    <div class="meta">{{ $enrollments->count() }} siswa terdaftar</div>
</div>

<div class="grid-2">
    {{-- Tambah Siswa --}}
    <div class="panel">
        <div class="panel-head">
            <div class="panel-title">Tambah Siswa</div>
        </div>
        <div class="panel-body">
            @if($students->isEmpty())
            <div class="empty-state">
                <i class="fa fa-user-check" style="font-size:22px; display:block; margin-bottom:8px; opacity:.3;"></i>
                Semua siswa sudah terdaftar.
            </div>
            @else
            <form action="{{ route('admin.enrollments.store', $course) }}" method="POST">
                @csrf
                <div class="scroll-box">
                    @foreach($students as $student)
                    <label class="student-checkbox">
                        <input type="checkbox" name="student_ids[]" value="{{ $student->id }}">
                        <div class="av-sm">{{ strtoupper(substr($student->name, 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;">{{ $student->name }}</div>
                            <div style="font-size:11px; color:var(--muted);">{{ $student->email }}</div>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('student_ids')
                <div class="field-error">{{ $message }}</div>
                @enderror
                <button type="submit" class="btn-submit">
                    <i class="fa fa-user-plus" style="font-size:11px; margin-right:6px;"></i> Daftarkan Siswa Terpilih
                </button>
            </form>
            @endif
        </div>
    </div>

    {{-- Siswa Terdaftar --}}
    <div class="panel">
        <div class="panel-head">
            <div class="panel-title">Siswa Terdaftar</div>
        </div>
        <div class="panel-body">
            <div class="scroll-box">
                @forelse($enrollments as $enrollment)
                <div class="enrolled-row">
                    <div style="display:flex; align-items:center; gap:10px; min-width:0; flex:1;">
                        <div class="av-sm av-green">{{ strtoupper(substr($enrollment->student->name, 0, 1)) }}</div>
                        <div style="min-width:0; flex:1;">
                            <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="display:flex; align-items:center; gap:6px; margin-top:3px;">
                                <div class="prog-wrap"><div class="prog-fill" style="width:{{ $enrollment->progress }}%;"></div></div>
                                <span style="font-size:10px; color:var(--muted);">{{ $enrollment->progress }}%</span>
                            </div>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('admin.enrollments.destroy', [$course, $enrollment]) }}"
                          onsubmit="return confirm('Keluarkan siswa ini?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn-remove">Keluarkan</button>
                    </form>
                </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>
</div>

@endsection