@extends('layouts.teacher')
@section('title', 'Dashboard Guru')
@section('header', 'Dashboard')

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root {
        --navy: #0f1e38; --navy-mid: #1a3259; --gold: #c9a84c; --gold-light: #f5e9cc;
        --cream: #faf8f4; --text-muted: #6b7280; --border: #e8e4dc;
    }
    .stat-card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; position:relative; overflow:hidden; transition:transform .2s,box-shadow .2s; }
    .stat-card:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(15,30,56,.08); }
    .stat-card::before { content:''; position:absolute; top:0; right:0; width:70px; height:70px; border-radius:0 20px 0 70px; opacity:.07; }
    .stat-card.blue::before { background:#3b82f6; }
    .stat-card.green::before { background:#10b981; }
    .stat-card.amber::before { background:#f59e0b; }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .course-row { background:var(--cream); border:1px solid var(--border); border-radius:16px; padding:1rem 1.25rem; transition:border-color .15s,box-shadow .15s; }
    .course-row:hover { border-color:#c7bfb0; box-shadow:0 4px 16px rgba(0,0,0,.06); }
    .mini-stat { background:white; border:1px solid var(--border); border-radius:12px; padding:.625rem; text-align:center; }
    .submission-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.875rem 1rem; border-radius:14px; background:var(--cream); border:1px solid transparent; transition:all .15s; }
    .submission-row:hover { border-color:var(--gold); background:var(--gold-light); }
    .avatar { width:36px; height:36px; border-radius:12px; background:var(--navy); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.625rem 1.25rem; border-radius:14px; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .btn-secondary { display:inline-flex; align-items:center; gap:6px; background:white; color:var(--navy); font-size:13px; font-weight:500; padding:.625rem 1.25rem; border-radius:14px; border:1px solid var(--border); transition:background .15s; text-decoration:none; }
    .btn-secondary:hover { background:var(--cream); }
</style>

<div class="edu-font-body space-y-6">

    {{-- Greeting --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:1.75rem 2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <span class="section-label">Dashboard Guru</span>
                <h2 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">
                    Halo, <span style="color:var(--gold);">{{ Auth::user()->name }}</span>
                </h2>
                <p class="text-sm mt-1" style="color:var(--text-muted);">{{ now()->translatedFormat('l, d F Y') }}</p>
            </div>
            <a href="{{ route('teacher.courses.create') }}" class="btn-primary self-start sm:self-auto">
                <i class="fa fa-plus" style="font-size:11px;"></i> Buat Kursus Baru
            </a>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="stat-card blue">
            <span class="section-label">Kursus Saya</span>
            <p class="edu-font-display text-4xl font-bold mt-2" style="color:var(--navy);">{{ $stats['total_courses'] }}</p>
            <p class="text-xs mt-1" style="color:var(--text-muted);">Kursus aktif</p>
        </div>
        <div class="stat-card green">
            <span class="section-label">Total Siswa</span>
            <p class="edu-font-display text-4xl font-bold mt-2" style="color:#065f46;">{{ $stats['total_siswa'] }}</p>
            <p class="text-xs mt-1" style="color:var(--text-muted);">Siswa terdaftar</p>
        </div>
        <div class="stat-card amber">
            <span class="section-label">Perlu Dinilai</span>
            <p class="edu-font-display text-4xl font-bold mt-2" style="color:#92400e;">{{ $stats['pending_submission'] }}</p>
            <p class="text-xs mt-1" style="color:var(--text-muted);">Tugas menunggu</p>
        </div>
    </div>

    {{-- Main Grid --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- Kursus Saya --}}
        <div class="card">
            <div class="flex items-center justify-between mb-5">
                <div>
                    <span class="section-label">Ikhtisar</span>
                    <h3 class="edu-font-display text-xl font-semibold mt-0.5" style="color:var(--navy);">Kursus Saya</h3>
                </div>
                <a href="{{ route('teacher.courses.index') }}" class="text-sm font-medium hover:underline" style="color:var(--gold);">Semua →</a>
            </div>

            <div class="space-y-3">
                @forelse($courses as $course)
                <div class="course-row">
                    <div class="flex items-start justify-between gap-3 mb-3">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="w-10 h-10 rounded-2xl flex items-center justify-center flex-shrink-0" style="background:var(--gold-light);">
                                <i class="fa fa-book" style="color:var(--gold); font-size:13px;"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold truncate" style="color:var(--navy);">{{ $course->title }}</p>
                                <p class="text-xs mt-0.5" style="color:var(--text-muted);">{{ $course->enrollments_count }} siswa terdaftar</p>
                            </div>
                        </div>
                        <span class="text-xs font-semibold px-2.5 py-1 rounded-full flex-shrink-0" style="{{ $course->is_published ? 'background:#d1fae5;color:#065f46;' : 'background:#f3f4f6;color:#9ca3af;' }}">
                            {{ $course->is_published ? 'Publik' : 'Draft' }}
                        </span>
                    </div>
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <div class="mini-stat">
                            <p class="text-sm font-bold" style="color:var(--navy);">{{ $course->materials_count }}</p>
                            <p class="text-xs" style="color:var(--text-muted);">Materi</p>
                        </div>
                        <div class="mini-stat">
                            <p class="text-sm font-bold" style="color:var(--navy);">{{ $course->assignments_count }}</p>
                            <p class="text-xs" style="color:var(--text-muted);">Tugas</p>
                        </div>
                        <div class="mini-stat">
                            <p class="text-sm font-bold" style="color:var(--navy);">{{ $course->quizzes_count }}</p>
                            <p class="text-xs" style="color:var(--text-muted);">Quiz</p>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ route('teacher.courses.show', $course) }}" class="btn-primary flex-1 justify-center" style="font-size:12px; padding:.5rem;">
                            Buka Kursus
                        </a>
                        <a href="{{ route('teacher.courses.edit', $course) }}" class="btn-secondary flex-1 justify-center" style="font-size:12px; padding:.5rem;">
                            Edit
                        </a>
                    </div>
                </div>
                @empty
                <div class="text-center py-10" style="color:var(--text-muted);">
                    <i class="fa fa-book-open text-3xl mb-3 block opacity-20"></i>
                    <p class="text-sm">Belum ada kursus.</p>
                    <a href="{{ route('teacher.courses.create') }}" class="text-sm font-semibold mt-2 inline-block hover:underline" style="color:var(--gold);">Buat kursus pertama →</a>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Perlu Dinilai --}}
        <div class="card">
            <div class="flex items-center justify-between mb-5">
                <div>
                    <span class="section-label">Menunggu Aksi</span>
                    <h3 class="edu-font-display text-xl font-semibold mt-0.5" style="color:var(--navy);">Perlu Dinilai</h3>
                </div>
                @if($stats['pending_submission'] > 0)
                <span class="text-xs font-bold px-3 py-1.5 rounded-full" style="background:#fef3c7; color:#92400e;">
                    {{ $stats['pending_submission'] }} tugas
                </span>
                @endif
            </div>

            <div class="space-y-2">
                @forelse($pendingSubmissions as $sub)
                <div class="submission-row">
                    <div class="flex items-start gap-3 min-w-0">
                        <div class="avatar">{{ strtoupper(substr($sub->student->name, 0, 1)) }}</div>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold" style="color:var(--navy);">{{ $sub->student->name }}</p>
                            <p class="text-xs mt-0.5 truncate" style="color:var(--text-muted);">
                                {{ $sub->assignment->title }}
                                <span style="color:#d1d5db; margin:0 4px;">·</span>
                                {{ $sub->assignment->course->title }}
                            </p>
                        </div>
                    </div>
                    <span class="text-xs font-medium flex-shrink-0" style="color:var(--gold);">
                        {{ $sub->submitted_at->diffForHumans() }}
                    </span>
                </div>
                @empty
                <div class="text-center py-10" style="color:var(--text-muted);">
                    <div class="w-14 h-14 rounded-2xl mx-auto mb-3 flex items-center justify-center" style="background:#d1fae5;">
                        <i class="fa fa-check text-xl" style="color:#10b981;"></i>
                    </div>
                    <p class="text-sm font-medium">Semua tugas sudah dinilai!</p>
                </div>
                @endforelse
            </div>
        </div>

    </div>
</div>

@endsection