@extends('layouts.teacher')
@section('title', 'Kursus Saya')
@section('header', 'Kursus Saya')

@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; }
    .course-card { background:white; border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:all .25s; }
    .course-card:hover { border-color:#c7bfb0; box-shadow:0 12px 32px rgba(15,30,56,.10); transform:translateY(-2px); }
    .form-select { border:1.5px solid var(--border); border-radius:14px; padding:.625rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; }
    .form-select:focus { border-color:var(--navy); }
    .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; border:none; cursor:pointer; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .btn-sm { font-size:12px; padding:.5rem .875rem; border-radius:10px; font-weight:500; text-align:center; text-decoration:none; display:block; transition:background .15s; }
    .mini-stat { background:var(--cream); border-radius:10px; padding:.5rem; text-align:center; font-size:11px; }
</style>

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

    {{-- Header --}}
    <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 lg:flex-row lg:items-center lg:justify-between gap-4">
            <div>
                <span class="section-label">Manajemen Pembelajaran</span>
                <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">Kursus Saya</h1>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <form method="GET" class="flex items-center gap-2">
                    <select name="category_id" class="form-select">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn-primary" style="padding:.625rem 1rem;">
                        <i class="fa fa-filter" style="font-size:11px;"></i> Filter
                    </button>
                    @if(request('category_id'))
                    <a href="{{ route('teacher.courses.index') }}" class="text-sm font-medium hover:underline" style="color:var(--text-muted);">Reset</a>
                    @endif
                </form>
                <a href="{{ route('teacher.courses.create') }}" class="btn-primary">
                    <i class="fa fa-plus" style="font-size:11px;"></i> Buat Kursus
                </a>
            </div>
        </div>
    </div>

    {{-- Content --}}
    @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);">
            <div class="w-20 h-20 mx-auto mb-5 rounded-full flex items-center justify-center" style="background:var(--cream);">
                <i class="fa fa-book-open text-2xl" style="color:var(--gold);"></i>
            </div>
            <h3 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Belum ada kursus</h3>
            <p class="text-sm mt-2" style="color:var(--text-muted);">Mulai buat kursus pertamamu!</p>
            <a href="{{ route('teacher.courses.create') }}" class="btn-primary mt-5 mx-auto" style="width:fit-content;">
                <i class="fa fa-plus" style="font-size:11px;"></i> Buat Kursus
            </a>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($courses as $course)
            <div class="course-card">
                <div style="height:150px; overflow:hidden; background:var(--cream);">
                    @if($course->thumbnail)
                        <img src="{{ Storage::url($course->thumbnail) }}" class="w-full h-full object-cover">
                    @else
                        <div class="w-full h-full flex items-center justify-center" style="background:linear-gradient(135deg,var(--navy),#1a3259);">
                            <i class="fa fa-book-open text-3xl text-white opacity-30"></i>
                        </div>
                    @endif
                </div>
                <div style="padding:1.25rem;">
                    <div class="flex items-start justify-between gap-2 mb-1">
                        <h3 class="text-sm font-semibold leading-snug" style="color:var(--navy);">{{ $course->title }}</h3>
                        <span class="text-xs font-semibold px-2 py-0.5 rounded-full flex-shrink-0" style="{{ $course->is_published ? 'background:#d1fae5;color:#065f46;' : 'background:#f3f4f6;color:#9ca3af;' }}">
                            {{ $course->is_published ? 'Publik' : 'Draft' }}
                        </span>
                    </div>
                    <p class="text-xs mb-3" style="color:var(--gold);">{{ $course->category->name }}</p>

                    <div class="grid grid-cols-3 gap-2 mb-4">
                        <div class="mini-stat">
                            <p class="font-bold" style="color:var(--navy);">{{ $course->enrollments_count }}</p>
                            <p style="color:var(--text-muted);">Siswa</p>
                        </div>
                        <div class="mini-stat">
                            <p class="font-bold" style="color:var(--navy);">{{ $course->materials_count }}</p>
                            <p style="color:var(--text-muted);">Materi</p>
                        </div>
                        <div class="mini-stat">
                            <p class="font-bold" style="color:var(--navy);">{{ $course->assignments_count }}</p>
                            <p style="color:var(--text-muted);">Tugas</p>
                        </div>
                    </div>

                    <div class="flex gap-2">
                        <a href="{{ route('teacher.courses.show', $course) }}" class="btn-sm flex-1" style="background:var(--navy); color:white;">Kelola</a>
                        <a href="{{ route('teacher.courses.edit', $course) }}" class="btn-sm flex-1" style="background:var(--cream); color:var(--navy); border:1px solid var(--border);">Edit</a>
                        <a href="{{ route('teacher.courses.materials.index', $course) }}" class="btn-sm flex-1" style="background:var(--gold); color:var(--navy);">Materi</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="mt-4">{{ $courses->links() }}</div>
    @endif

</div>
@endsection