@extends('layouts.admin')
@section('title', 'Edit Buku')
@section('page-title', 'Edit Buku')
@section('breadcrumb')
<a href="{{ route('admin.books.index') }}">Buku</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">Edit</span>
@endsection

@section('content')
<div class="max-w-4xl">
    <form action="{{ route('admin.books.update', $book) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf @method('PUT')

        <div class="admin-card">
            <div class="admin-card-body">
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Informasi Dasar
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="md:col-span-2">
                        <label class="admin-label">Judul Buku *</label>
                        <input type="text" name="title" value="{{ old('title', $book->title) }}" class="admin-input" required>
                    </div>
                    <div>
                        <label class="admin-label">Penulis *</label>
                        <input type="text" name="author" value="{{ old('author', $book->author) }}" class="admin-input" required maxlength="350">
                        @error('author')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="admin-label">Penyunting / Editor</label>
                        <input type="text" name="editor" value="{{ old('editor', $book->editor) }}" class="admin-input" maxlength="255">
                        @error('editor')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="admin-label">Kategori *</label>
                        <select name="category_id" class="admin-select" required>
                            <option value="">-- Pilih Kategori --</option>
                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $book->category_id) == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="admin-label">ISBN</label>
                        <input type="text" name="isbn" value="{{ old('isbn', $book->isbn) }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Tahun Terbit</label>
                        <input type="number" name="published_year" value="{{ old('published_year', $book->published_year) }}" min="1900" max="{{ date('Y') }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Penerbit</label>
                        <input type="text" name="publisher" value="{{ old('publisher', $book->publisher) }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Nomor WhatsApp CTA</label>
                        <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $book->whatsapp_number) }}" class="admin-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <div class="admin-card-body">
                <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="M4 6h16M4 12h16M4 18h7"/></svg>
                    Deskripsi
                </div>
                <div class="mb-5">
                    <label class="admin-label">Deskripsi Singkat *</label>
                    <textarea name="short_description" rows="2" class="admin-textarea" required>{{ old('short_description', $book->short_description) }}</textarea>
                </div>
                <div>
                    <label class="admin-label">Deskripsi Lengkap *</label>
                    <textarea name="description" id="description" rows="6" class="admin-textarea">{{ old('description', $book->description) }}</textarea>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <div class="admin-card-body">
                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Sampul & Pengaturan
                </div>

                @if($book->cover_image)
                <div class="mb-4">
                    <p class="admin-label">Sampul Saat Ini:</p>
                    <img src="{{ $book->cover_url }}" alt="{{ $book->title }}" class="h-36 rounded-xl border border-gray-200 shadow-sm">
                    <p class="text-gray-400 text-xs mt-1">Upload file baru untuk mengganti sampul.</p>
                </div>
                @endif

                <div class="mb-5" x-data="{ preview: null }">
                    <label class="admin-label">Ganti Sampul Buku</label>
                    <input type="file" name="cover_image" accept="image/*"
                           @change="preview = URL.createObjectURL($event.target.files[0])"
                           class="admin-input">
                    <img x-show="preview" :src="preview" class="mt-3 h-40 object-cover rounded-xl border border-gray-200">
                </div>

                <div class="flex gap-6">
                    <label class="admin-toggle">
                        <input type="checkbox" name="is_published" value="1" {{ old('is_published', $book->is_published) ? 'checked' : '' }}>
                        <span class="font-semibold text-gray-700 text-sm">Publish</span>
                    </label>
                    <label class="admin-toggle">
                        <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $book->is_featured) ? 'checked' : '' }}>
                        <span class="font-semibold text-gray-700 text-sm">Unggulan (Featured)</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="flex 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>
                Update Buku
            </button>
            <a href="{{ route('admin.books.index') }}" class="admin-btn admin-btn-secondary">Batal</a>
        </div>
    </form>
</div>

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