{{-- AVAILABLE COURSES --}}
@extends('layouts.student')
@section('title', 'Kursus Tersedia')
@section('topbar-title', 'Kursus Tersedia')

@section('content')
<style>
    :root { --navy:#0d1b2a; --navy-2:#1a2e45; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .serif { font-family:'Cormorant Garamond',Georgia,serif; }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
    .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); }
    .page-header { background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 26px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    @media(max-width:1100px) { .course-grid{grid-template-columns:repeat(2,1fr);} }
    @media(max-width:700px) { .course-grid{grid-template-columns:1fr;} }
    .course-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
    .course-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(13,27,42,.1); border-color:#d4ccbc; }
    .card-thumb { height:160px; background:var(--navy-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .card-thumb img { width:100%; height:100%; object-fit:cover; }
    .card-body { padding:16px 18px; }
    .card-cat { font-size:10px; font-weight:600; color:var(--gold); }
    .card-title { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600; color:var(--navy); margin:4px 0 4px; line-height:1.3; }
    .card-desc { font-size:11px; color:var(--muted); line-height:1.6; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:11px; color:var(--muted); }
    .enroll-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:10px; font-size:12px; font-weight:600; background:var(--navy); color:#fff; border:none; cursor:pointer; transition:opacity .2s; font-family:'Inter',sans-serif; }
    .enroll-btn:hover { opacity:.87; }
    .empty-state { background:#fff; border:1px solid var(--border); border-radius:16px; padding:60px 32px; text-align:center; }
</style>

<div class="page-header">
    <div>
        <div class="section-label">Eksplorasi</div>
        <h1 class="serif" style="font-size:24px;font-weight:600;color:var(--navy);margin-top:3px;">Kursus Tersedia</h1>
        <p style="font-size:12px;color:var(--muted);margin-top:3px;">Temukan kursus yang ingin kamu pelajari.</p>
    </div>
    <a href="{{ route('student.dashboard') }}"
       style="display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--navy);background:var(--cream-2);border:1px solid var(--border);padding:8px 14px;border-radius:10px;text-decoration:none;flex-shrink:0;">
        <i class="fa fa-arrow-left" style="font-size:10px;"></i> Dashboard
    </a>
</div>

@if($availableCourses->isEmpty())
<div class="empty-state">
    <div style="width:52px;height:52px;border-radius:16px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
        <i class="fa fa-search" style="font-size:20px;color:var(--muted);opacity:.5;"></i>
    </div>
    <p style="font-size:15px;font-weight:500;color:var(--navy);">Tidak ada kursus tersedia</p>
    <p style="font-size:12px;color:var(--muted);margin-top:5px;">Silakan cek kembali nanti.</p>
</div>
@else
<div class="course-grid">
    @foreach($availableCourses as $course)
    <div class="course-card">
        <div class="card-thumb">
            @if($course->thumbnail)
                <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="{{ $course->title }}">
            @else
                <i class="fa fa-book-open" style="font-size:32px;color:rgba(255,255,255,.2);"></i>
            @endif
        </div>
        <div class="card-body">
            <div class="card-cat">{{ $course->category?->name ?? 'Tanpa Kategori' }}</div>
            <div class="card-title">{{ $course->title }}</div>
            <div class="card-desc">{{ $course->description ?? 'Tidak ada deskripsi' }}</div>
            <div class="card-meta">
                <span><i class="fa fa-chalkboard-user" style="color:var(--gold);margin-right:4px;"></i>{{ $course->teacher->name }}</span>
                <span><i class="fa fa-users" style="color:var(--gold);margin-right:4px;"></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" style="font-size:10px;"></i> Daftar Kursus
                </button>
            </form>
        </div>
    </div>
    @endforeach
</div>
<div style="margin-top:16px;">{{ $availableCourses->links() }}</div>
@endif

@endsection