@extends('layouts.admin')

@section('title', isset($article) ? 'Edit Artikel' : 'Tambah Artikel')
@section('page-title', isset($article) ? 'Edit Artikel' : 'Tambah Artikel Baru')
@section('breadcrumb')
<a href="{{ route('admin.articles.index') }}">Artikel</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="current">{{ isset($article) ? 'Edit' : 'Tambah' }}</span>
@endsection

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

        <div class="admin-card">
            <div class="admin-card-body space-y-5">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2"/></svg>
                    Detail Artikel
                </div>
                <div>
                    <label class="admin-label">Judul *</label>
                    <input type="text" name="title" value="{{ old('title', $article->title ?? '') }}" required class="admin-input">
                    @error('title') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="admin-label">Penulis</label>
                        <input type="text" name="author" value="{{ old('author', $article->author ?? 'Admin Instrudigi') }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Kategori</label>
                        <input type="text" name="category" value="{{ old('category', $article->category ?? '') }}" placeholder="Contoh: Web Development" class="admin-input">
                    </div>
                </div>

                <div>
                    <label class="admin-label">Ringkasan / Excerpt *</label>
                    <textarea name="excerpt" rows="3" required class="admin-textarea">{{ old('excerpt', $article->excerpt ?? '') }}</textarea>
                    @error('excerpt') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="admin-label">Konten *</label>
                    <textarea id="editor-content" name="content" rows="12" class="admin-textarea">{{ old('content', $article->content ?? '') }}</textarea>
                    @error('content') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="admin-label">Cover Image</label>
                    @if(isset($article) && $article->cover_image)
                    <img src="{{ $article->cover_url }}" class="w-32 h-20 object-cover rounded-xl mb-2 border border-gray-200">
                    @endif
                    <input type="file" name="cover_image" accept="image/*" class="admin-input">
                </div>

                <label class="admin-toggle">
                    <input type="hidden" name="is_published" value="0">
                    <input type="checkbox" name="is_published" value="1"
                           {{ old('is_published', $article->is_published ?? true) ? 'checked' : '' }}>
                    <span class="text-sm font-medium text-gray-700">Publikasikan</span>
                </label>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="admin-btn admin-btn-primary">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                {{ isset($article) ? 'Perbarui' : 'Simpan' }}
            </button>
            <a href="{{ route('admin.articles.index') }}" class="admin-btn admin-btn-secondary">Batal</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
    ClassicEditor.create(document.querySelector('#editor-content'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'undo', 'redo']
    }).catch(error => console.error(error));
</script>
@endpush
@endsection