@extends('layouts.admin')
@section('title', 'Manajemen Kursus')
@section('header', 'Manajemen Kursus')

@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; }
    .badge { font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; }
    .badge-green { background:#d1fae5; color:#065f46; }
    .badge-gray { background:#f3f0eb; color:var(--muted); }

    /* Filter bar */
    .filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
    .filter-group { display:flex; gap:8px; align-items:center; }
    .el-input {
        border:1px solid var(--border); border-radius:10px;
        padding:9px 14px; font-size:13px; background:#fff; color:var(--navy);
        outline:none; font-family:'Inter',sans-serif; transition:border-color .15s;
    }
    .el-input:focus { border-color:var(--gold-2); }
    .el-select { appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6560'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 12px) center; cursor:pointer; }
    .btn-filter { background:var(--cream-2); border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-size:12px; font-weight:500; color:var(--navy); cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s; }
    .btn-filter:hover { background:#ece8de; }
    .btn-primary { display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-size:13px; font-weight:500; padding:9px 18px; border-radius:10px; text-decoration:none; transition:opacity .15s; border:none; cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-primary:hover { opacity:.87; }

    /* Course grid */
    .courses-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    @media(max-width:1100px) { .courses-grid { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:700px) { .courses-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(-2px); box-shadow:0 10px 30px rgba(13,27,42,.08); }

    .course-thumb {
        height:148px; background:var(--navy-2);
        display:flex; align-items:center; justify-content:center;
        overflow:hidden; position:relative;
    }
    .course-thumb img { width:100%; height:100%; object-fit:cover; }
    .course-thumb .no-img { color:rgba(255,255,255,.2); font-size:36px; }
    .thumb-overlay {
        position:absolute; top:10px; right:10px;
    }

    .course-body { padding:16px 18px; }
    .course-title { font-size:14px; font-weight:500; color:var(--navy); line-height:1.35; margin-bottom:4px; }
    .course-meta { font-size:11px; color:var(--muted); margin-bottom:12px; }

    .course-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 0; border-top:1px solid #f5f2ec; border-bottom:1px solid #f5f2ec; margin-bottom:12px; }
    .cs-item { text-align:center; }
    .cs-num { font-size:14px; font-weight:600; color:var(--navy); }
    .cs-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:1px; }

    .course-actions { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
    .ca-btn { font-size:11px; font-weight:500; padding:5px 10px; border-radius:7px; text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif; border:none; background:transparent; transition:background .12s; }
    .ca-btn:hover { background:var(--cream-2); }
    .ca-btn.blue { color:#3b82f6; }
    .ca-btn.blue:hover { background:#eff6ff; }
    .ca-btn.red { color:#dc2626; }
    .ca-btn.red:hover { background:#fef2f2; }

    /* Empty state */
    .empty-state { background:#fff; border:1px solid var(--border); border-radius:16px; padding:64px 32px; text-align:center; }

    /* Alert */
    .alert-success { background:#d1fae5; border:1px solid #a7f3d0; border-radius:12px; padding:12px 16px; font-size:13px; color:#065f46; margin-bottom:20px; }

    /* Divider form */
    .form-action { display:inline; }
</style>

@if(session('success'))
<div class="alert-success"><i class="fa fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}</div>
@endif

<div class="filter-bar">
    <form method="GET" class="filter-group">
        <input name="search" value="{{ request('search') }}" placeholder="Cari kursus..." class="el-input" style="width:220px;">
        <select name="category" class="el-input el-select" style="width:170px;">
            <option value="">Semua Kategori</option>
            @foreach($categories as $cat)
            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn-filter">
            <i class="fa fa-filter" style="font-size:11px; margin-right:5px;"></i>Filter
        </button>
    </form>
    <a href="{{ route('admin.courses.create') }}" class="btn-primary">
        <i class="fa fa-plus" style="font-size:11px;"></i> Tambah Kursus
    </a>
</div>

@if($courses->isEmpty())
<div class="empty-state">
    <div style="width:56px; height:56px; border-radius:16px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;">
        <i class="fa fa-book-open" style="font-size:22px; color:var(--muted);"></i>
    </div>
    <p style="font-size:15px; font-weight:500; color:var(--navy); margin-bottom:6px;">Belum ada kursus</p>
    <p style="font-size:13px; color:var(--muted);">Mulai dengan menambahkan kursus pertama Anda.</p>
</div>
@else
<div class="courses-grid">
    @foreach($courses as $course)
    <div class="course-card">
        <div class="course-thumb">
            @if($course->thumbnail)
                <img src="{{ Storage::url($course->thumbnail) }}" alt="{{ $course->title }}">
            @else
                <i class="fa fa-book-open no-img"></i>
            @endif
            <div class="thumb-overlay">
                <span class="badge {{ $course->is_published ? 'badge-green' : 'badge-gray' }}">
                    {{ $course->is_published ? 'Publik' : 'Draft' }}
                </span>
            </div>
        </div>
        <div class="course-body">
            <div class="course-title">{{ $course->title }}</div>
            <div class="course-meta">
                {{ $course->teacher->name }} &nbsp;·&nbsp; {{ $course->category->name }}
            </div>

            <div class="course-stats">
                <div class="cs-item">
                    <div class="cs-num">{{ $course->enrollments_count }}</div>
                    <div class="cs-label">Siswa</div>
                </div>
                <div class="cs-item">
                    <div class="cs-num">{{ $course->materials_count ?? 0 }}</div>
                    <div class="cs-label">Materi</div>
                </div>
                <div class="cs-item">
                    <div class="cs-num">{{ $course->assignments_count ?? 0 }}</div>
                    <div class="cs-label">Tugas</div>
                </div>
            </div>

            <div class="course-actions">
                <a href="{{ route('admin.enrollments.index', $course) }}" class="ca-btn blue">Siswa</a>
                <form class="form-action" method="POST" action="{{ route('admin.courses.publish', $course) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="ca-btn">{{ $course->is_published ? 'Sembunyikan' : 'Publikasi' }}</button>
                </form>
                <a href="{{ route('admin.courses.edit', $course) }}" class="ca-btn">Edit</a>
                <form class="form-action" method="POST" action="{{ route('admin.courses.destroy', $course) }}"
                      onsubmit="return confirm('Hapus kursus ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="ca-btn red">Hapus</button>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>
<div style="margin-top:20px;">{{ $courses->links() }}</div>
@endif

@endsection