@extends('layouts.student')
@section('title', 'Kursus Tersedia')

@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; }
    .course-card { background:white; border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:all .25s ease; }
    .course-card:hover { border-color:#c7bfb0; box-shadow:0 12px 32px rgba(15,30,56,.10); transform:translateY(-3px); }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .enroll-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:.75rem; border-radius:14px; font-size:13px; font-weight:600; background:var(--navy); color:white; border:none; cursor:pointer; transition:opacity .2s; }
    .enroll-btn:hover { opacity:.87; }
</style>

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

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <span class="section-label">Eksplorasi</span>
                <h1 class="edu-font-display text-4xl font-bold mt-1" style="color:var(--navy);">Kursus Tersedia</h1>
                <p class="text-sm mt-2" style="color:var(--text-muted);">Temukan kursus yang ingin kamu pelajari dan daftarkan dirimu.</p>
            </div>
            <a href="{{ route('student.dashboard') }}" class="inline-flex items-center gap-2 text-sm font-medium px-4 py-2.5 rounded-xl hover:opacity-80 transition self-start" style="background:var(--cream); border:1px solid var(--border); color:var(--navy);">
                <i class="fa fa-arrow-left text-xs"></i> Kembali ke Dashboard
            </a>
        </div>
    </div>

    @if($availableCourses->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-search text-2xl" style="color:var(--gold);"></i>
            </div>
            <h3 class="edu-font-display text-xl font-semibold" style="color:var(--navy);">Tidak ada kursus tersedia</h3>
            <p class="text-sm mt-2" style="color:var(--text-muted);">Silakan cek kembali nanti.</p>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
            @foreach($availableCourses as $course)
            <div class="course-card">
                @if($course->thumbnail)
                    <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="{{ $course->title }}" style="width:100%; height:180px; object-fit:cover;">
                @else
                    <div style="width:100%; height:180px; background:linear-gradient(135deg,var(--navy),var(--navy-mid)); display:flex; align-items:center; justify-content:center;">
                        <i class="fa fa-book-open text-3xl text-white opacity-30"></i>
                    </div>
                @endif

                <div style="padding:1.25rem;">
                    <span class="text-xs font-semibold" style="color:var(--gold);">{{ $course->category?->name ?? 'Tanpa Kategori' }}</span>
                    <h3 class="edu-font-display text-lg font-semibold mt-1.5" style="color:var(--navy);">{{ $course->title }}</h3>
                    <p class="text-xs mt-2 leading-relaxed line-clamp-2" style="color:var(--text-muted);">{{ $course->description ?? 'Tidak ada deskripsi' }}</p>

                    <div class="flex items-center justify-between mt-4 mb-4 text-xs" style="color:var(--text-muted);">
                        <span><i class="fa fa-chalkboard-teacher mr-1.5" style="color:var(--gold);"></i>{{ $course->teacher->name }}</span>
                        <span><i class="fa fa-users mr-1.5" style="color:var(--gold);"></i>{{ $course->enrollments_count }} siswa</span>
                    </div>

                    <form action="{{ route('student.courses.enroll', $course) }}" method="POST">
                        @csrf
                        <button type="submit" class="enroll-btn">
                            <i class="fa fa-plus text-xs"></i> Daftar Kursus
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>

        <div class="mt-4">{{ $availableCourses->links() }}</div>
    @endif

</div>
@endsection