{{-- ============================================================
     resources/views/teacher/courses/create.blade.php
     Salin juga ke edit.blade.php dengan penyesuaian noted di bawah
     ============================================================ --}}
@extends('layouts.teacher')
@section('title', isset($course) ? 'Edit Kursus' : 'Buat Kursus')
@section('header', isset($course) ? 'Edit Kursus' : 'Buat Kursus Baru')

@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; }
    .form-label { display:block; font-size:13px; font-weight:600; margin-bottom:.5rem; color:var(--navy); }
    .form-label span { font-weight:400; color:#ef4444; }
    .form-input { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; box-sizing:border-box; }
    .form-input:focus { border-color:var(--navy); }
    .form-select { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; box-sizing:border-box; appearance:none; }
    .form-select:focus { border-color:var(--navy); }
    .form-textarea { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.875rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; resize:none; transition:border-color .15s; box-sizing:border-box; }
    .form-textarea:focus { border-color:var(--navy); }
    .file-area { border:2px dashed var(--border); border-radius:16px; padding:1.75rem; text-align:center; cursor:pointer; background:var(--cream); transition:border-color .2s,background .2s; }
    .file-area:hover { border-color:#c7bfb0; background:#f5f0e8; }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.75rem 1.5rem; border-radius:14px; border:none; cursor:pointer; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .btn-cancel { display:inline-flex; align-items:center; gap:6px; background:var(--cream); color:var(--navy); font-size:13px; font-weight:500; padding:.75rem 1.5rem; border-radius:14px; border:1px solid var(--border); text-decoration:none; transition:background .15s; }
    .btn-cancel:hover { background:#f0ece3; }
    .error-text { font-size:12px; color:#dc2626; margin-top:.375rem; }
    .toggle-wrap { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; background:var(--cream); border-radius:14px; border:1px solid var(--border); }
    .toggle-wrap input[type=checkbox] { width:18px; height:18px; accent-color:var(--navy); border-radius:4px; cursor:pointer; }
</style>

<div class="edu-font-body" style="max-width:680px; margin:0 auto;">

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:1.75rem 2rem; margin-bottom:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex items-center justify-between">
            <div>
                <span class="section-label">{{ isset($course) ? 'Perubahan Data' : 'Kursus Baru' }}</span>
                <h1 class="edu-font-display text-2xl font-bold mt-1" style="color:var(--navy);">
                    {{ isset($course) ? 'Edit Kursus' : 'Buat Kursus Baru' }}
                </h1>
            </div>
            <a href="{{ isset($course) ? route('teacher.courses.show', $course) : route('teacher.courses.index') }}"
               class="btn-cancel" style="padding:.5rem 1rem; font-size:12px;">
                <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali
            </a>
        </div>
    </div>

    {{-- Form --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <form method="POST"
              action="{{ isset($course) ? route('teacher.courses.update', $course) : route('teacher.courses.store') }}"
              enctype="multipart/form-data"
              class="space-y-5">
            @csrf
            @if(isset($course)) @method('PUT') @endif

            {{-- Error summary --}}
            @if($errors->any())
            <div style="background:#fee2e2; border:1px solid #fca5a5; border-radius:14px; padding:1rem 1.25rem;">
                <p class="text-sm font-semibold mb-1" style="color:#dc2626;">Terdapat kesalahan:</p>
                <ul class="text-xs space-y-0.5" style="color:#dc2626; list-style:disc; padding-left:1rem;">
                    @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
                </ul>
            </div>
            @endif

            {{-- Judul --}}
            <div>
                <label class="form-label">Judul Kursus <span>*</span></label>
                <input type="text" name="title" value="{{ old('title', $course->title ?? '') }}"
                       class="form-input" placeholder="Contoh: Matematika XI — Semester Ganjil">
                @error('title') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Kategori --}}
            <div>
                <label class="form-label">Kategori <span>*</span></label>
                <div style="position:relative;">
                    <select name="category_id" class="form-select">
                        <option value="">— Pilih Kategori —</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $course->category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    <i class="fa fa-chevron-down" style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-muted); pointer-events:none;"></i>
                </div>
                @error('category_id') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Deskripsi --}}
            <div>
                <label class="form-label">Deskripsi</label>
                <textarea name="description" rows="4" class="form-textarea"
                          placeholder="Deskripsi singkat kursus...">{{ old('description', $course->description ?? '') }}</textarea>
                @error('description') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Thumbnail --}}
            <div>
                <label class="form-label">Thumbnail</label>
                @if(isset($course) && $course->thumbnail)
                <div class="mb-3">
                    <img src="{{ Storage::url($course->thumbnail) }}" class="rounded-2xl object-cover" style="width:160px; height:100px;">
                    <p class="text-xs mt-1.5" style="color:var(--text-muted);">Thumbnail saat ini. Upload baru untuk mengganti.</p>
                </div>
                @endif
                <div class="file-area" onclick="document.getElementById('thumb-input').click();">
                    <i class="fa fa-image text-2xl mb-2 block" style="color:var(--gold);"></i>
                    <p class="text-sm font-medium" style="color:var(--navy);">Klik untuk pilih gambar</p>
                    <p class="text-xs mt-1" style="color:var(--text-muted);">JPG, PNG, WebP — maks. 2MB</p>
                    <p class="text-xs mt-2 font-semibold" id="thumb-name" style="color:var(--gold); display:none;"></p>
                </div>
                <input type="file" id="thumb-input" name="thumbnail" accept="image/*" style="display:none;"
                       onchange="document.getElementById('thumb-name').textContent=this.files[0]?.name||''; document.getElementById('thumb-name').style.display=this.files[0]?'block':'none';">
                @error('thumbnail') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Progress Min --}}
            <div>
                <label class="form-label">Progress Minimum Lulus (%)</label>
                <input type="number" name="progress_min" value="{{ old('progress_min', $course->progress_min ?? 80) }}"
                       min="0" max="100" class="form-input" placeholder="80">
                <p class="text-xs mt-1.5" style="color:var(--text-muted);">Siswa dianggap lulus jika progress melebihi angka ini.</p>
                @error('progress_min') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Publikasi (hanya di edit) --}}
            @if(isset($course))
            <div class="toggle-wrap">
                <input type="checkbox" name="is_published" id="is_published" value="1"
                       {{ old('is_published', $course->is_published) ? 'checked' : '' }}>
                <div>
                    <label for="is_published" class="text-sm font-semibold cursor-pointer" style="color:var(--navy);">Publikasikan kursus ini</label>
                    <p class="text-xs mt-0.5" style="color:var(--text-muted);">Siswa dapat melihat dan mendaftar kursus ini.</p>
                </div>
            </div>
            @endif

            {{-- Actions --}}
            <div class="flex gap-3 pt-2">
                <button type="submit" class="btn-primary">
                    <i class="fa fa-save" style="font-size:11px;"></i>
                    {{ isset($course) ? 'Simpan Perubahan' : 'Buat Kursus' }}
                </button>
                <a href="{{ isset($course) ? route('teacher.courses.show', $course) : route('teacher.courses.index') }}"
                   class="btn-cancel">Batal</a>
            </div>
        </form>
    </div>

</div>
@endsection