@extends('layouts.admin')

@section('title', 'Tambah Buku')
@section('page-title', 'Tambah Buku Baru')
@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">Tambah</span>
@endsection

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

        <!-- Info Dasar -->
        <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') }}"
                               class="admin-input @error('title') is-error @enderror" required>
                        @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="admin-label">Penulis *</label>
                        <input type="text" name="author" value="{{ old('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') }}" 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') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="admin-label">ISBN</label>
                        <input type="text" name="isbn" value="{{ old('isbn') }}" class="admin-input" placeholder="978-xxx-xxxx-xx-x">
                    </div>
                    <div>
                        <label class="admin-label">Tahun Terbit</label>
                        <input type="number" name="published_year" value="{{ old('published_year', date('Y')) }}" min="1900" max="{{ date('Y') }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Penerbit</label>
                        <input type="text" name="publisher" value="{{ old('publisher') }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Nomor WhatsApp CTA</label>
                        <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number') }}" class="admin-input" placeholder="6281234567890">
                        <p class="text-gray-400 text-xs mt-1">Kosongkan untuk menggunakan nomor global di Pengaturan</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Deskripsi -->
        <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 * <span class="text-gray-400 font-normal">(tampil di kartu buku)</span></label>
                    <textarea name="short_description" rows="2" class="admin-textarea" required>{{ old('short_description') }}</textarea>
                    @error('short_description')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="admin-label">Deskripsi Lengkap * <span class="text-gray-400 font-normal">(mendukung format teks)</span></label>
                    <textarea name="description" id="description" rows="6" class="admin-textarea">{{ old('description') }}</textarea>
                    @error('description')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
            </div>
        </div>

        <!-- Sampul & Setting -->
        <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>
                <div class="mb-5" x-data="{ preview: null }">
                    <label class="admin-label">Sampul Buku</label>
                    <input type="file" name="cover_image" accept="image/*"
                           @change="preview = URL.createObjectURL($event.target.files[0])"
                           class="admin-input">
                    <p class="text-gray-400 text-xs mt-1">Format: JPG, PNG, WebP. Maks 2MB. Akan diresize otomatis ke 400×560px.</p>
                    <img x-show="preview" :src="preview" class="mt-3 h-40 object-cover rounded-xl border border-gray-200" alt="Preview">
                </div>
                <div class="flex flex-wrap gap-6">
                    <label class="admin-toggle">
                        <input type="checkbox" name="is_published" value="1" {{ old('is_published', 1) ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-700 text-sm">Publish</span>
                            <p class="text-gray-400 text-xs">Tampilkan ke publik</p>
                        </div>
                    </label>
                    <label class="admin-toggle">
                        <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-700 text-sm">Unggulan (Featured)</span>
                            <p class="text-gray-400 text-xs">Tampil di Landing Page</p>
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <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>
                Simpan 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