@extends('layouts.admin')
@section('title', $series->exists ? 'Kelola Series' : 'Series Baru')
@section('page-title', $series->exists ? 'Kelola Series' : 'Tambah Series')

@section('content')
<div class="mx-auto max-w-3xl space-y-6">
<form method="POST" enctype="multipart/form-data" action="{{ $series->exists ? route('admin.series.update', $series) : route('admin.series.store') }}" class="card space-y-4 p-6">
    @csrf @if($series->exists) @method('PUT') @endif

    <div><label class="label">Judul Series</label><input name="title" value="{{ old('title', $series->title) }}" required class="field"></div>
    <div><label class="label">Deskripsi</label><textarea name="description" rows="3" class="field">{{ old('description', $series->description) }}</textarea></div>
    <div class="grid grid-cols-2 gap-3">
        <div><label class="label">Level</label>
            <select name="level" class="field">
                @foreach(['Dasar','Menengah','Lanjut'] as $lv)<option @selected(old('level',$series->level)===$lv)>{{ $lv }}</option>@endforeach
            </select>
        </div>
        <div><label class="label">Kategori</label>
            <select name="category_id" class="field"><option value="">— Tanpa —</option>
                @foreach($categories as $c)<option value="{{ $c->id }}" @selected(old('category_id',$series->category_id)==$c->id)>{{ $c->name }}</option>@endforeach
            </select>
        </div>
    </div>
    <x-admin.media-field name="cover" label="Cover (opsional)" :current="$series->cover" :preview="$series->cover ? $series->coverUrl() : null" />
    <div class="flex gap-6">
        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_published" value="1" @checked(old('is_published',$series->is_published)) class="rounded bg-surface-2 border-outline text-primary"> Publish</label>
        <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_premium" value="1" @checked(old('is_premium',$series->is_premium)) class="rounded bg-surface-2 border-outline text-primary"> Premium</label>
    </div>

    @if($series->exists)
    {{-- Assign episode (urutan via nomor) --}}
    <div class="border-t border-outline pt-4">
        <h3 class="text-h4 mb-1">Episode</h3>
        <p class="text-small text-muted mb-3">Isi nomor urut pada video yang ingin dijadikan episode (kosongkan untuk melepas). Video standalone tampil di sini.</p>
        <div class="space-y-2 max-h-80 overflow-y-auto pr-1">
            @forelse($available as $v)
            <div class="flex items-center gap-3 rounded-lg bg-surface-2 p-2.5">
                <img src="{{ $v->thumbnailUrl() }}" class="h-9 w-16 rounded object-cover" alt="">
                <span class="flex-1 text-sm truncate">{{ $v->title }}</span>
                <input type="number" min="0" name="order[{{ $v->id }}]" value="{{ $v->series_id === $series->id ? $v->episode_number : '' }}"
                    placeholder="—" class="field !py-1.5 w-20 text-center" title="Urutan episode">
            </div>
            @empty<p class="text-small text-muted">Tidak ada video tersedia. Tambah video dulu di menu Video.</p>@endforelse
        </div>
    </div>
    @endif

    <div class="flex gap-2 pt-2"><button class="btn-filled flex-1">Simpan</button><a href="{{ route('admin.series.index') }}" class="btn-outline">Kembali</a></div>
</form>
</div>
@endsection