{{-- ============================================================
     all.blade.php — resources/views/teacher/grades/all.blade.php
     ============================================================ --}}
@extends('layouts.teacher')
@section('title', 'Nilai Semua Kursus')
@section('header', 'Nilai Semua Kursus')

@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; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .grade-card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; transition:all .2s; text-decoration:none; display:block; }
    .grade-card:hover { border-color:#c7bfb0; box-shadow:0 8px 24px rgba(15,30,56,.09); transform:translateY(-2px); }
</style>

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

    <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);">
        <span class="section-label">Rekap Akademik</span>
        <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">Nilai Semua Kursus</h1>
        <p class="text-sm mt-2" style="color:var(--text-muted);">Klik kursus untuk melihat rekap nilai siswa.</p>
    </div>

    @if($courses->isEmpty())
        <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:4rem 2rem; text-align:center; box-shadow:0 1px 12px rgba(0,0,0,.04);">
            <i class="fa fa-chart-bar text-3xl mb-3 block opacity-20" style="color:var(--navy);"></i>
            <p class="text-sm" style="color:var(--text-muted);">Belum ada kursus.</p>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($courses as $course)
            <a href="{{ route('teacher.courses.grades', $course) }}" class="grade-card">
                <div class="flex items-start gap-3 mb-4">
                    <div class="w-11 h-11 rounded-2xl flex items-center justify-center flex-shrink-0" style="background:var(--gold-light);">
                        <i class="fa fa-chart-bar" style="color:var(--gold); font-size:14px;"></i>
                    </div>
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold leading-snug" style="color:var(--navy);">{{ $course->title }}</h3>
                        <p class="text-xs mt-0.5" style="color:var(--text-muted);">{{ $course->enrollments_count }} siswa terdaftar</p>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs font-semibold" style="color:var(--gold);">Lihat Rekap Nilai →</span>
                    <i class="fa fa-arrow-right text-xs" style="color:var(--gold);"></i>
                </div>
            </a>
            @endforeach
        </div>
    @endif

</div>
@endsection