@php
    $isEdit = isset($post);
    $selectedImageId = old('featured_image_id', $post->featured_image_id ?? null);
    $editorId = $isEdit ? 'blog-detail-editor-edit' : 'blog-detail-editor-create';
    $inputId = $isEdit ? 'blog-detail-input-edit' : 'blog-detail-input-create';
@endphp

<div class="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
    <div class="space-y-6">
        <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
            <div class="p-8 space-y-6">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Title</label>
                    <input type="text" name="title" value="{{ old('title', $post->title ?? '') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" required>
                    @error('title') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>

                <div class="grid gap-6 md:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-semibold text-slate-700">Slug</label>
                        <input type="text" name="slug" value="{{ old('slug', $post->slug ?? '') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" placeholder="Auto-generate from title if blank">
                        @error('slug') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="mb-2 block text-sm font-semibold text-slate-700">Status</label>
                        <select name="status" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500">
                            @foreach (['draft', 'published'] as $status)
                                <option value="{{ $status }}" @selected(old('status', $post->status ?? 'draft') === $status)>{{ ucfirst($status) }}</option>
                            @endforeach
                        </select>
                        @error('status') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Excerpt</label>
                    <textarea name="excerpt" rows="4" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" placeholder="Short summary used in listings or previews">{{ old('excerpt', $post->excerpt ?? '') }}</textarea>
                    @error('excerpt') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>

                <div>
                    <div class="mb-2 flex items-center justify-between gap-3">
                        <label class="block text-sm font-semibold text-slate-700">Detail</label>
                        <a href="{{ route('admin.media-library.index') }}" target="_blank" class="text-xs font-semibold text-brand-600 hover:text-brand-700">Open Media Library</a>
                    </div>
                    <input type="hidden" name="detail" id="{{ $inputId }}" value="{{ old('detail', $post->detail ?? '') }}">
                    <div id="{{ $editorId }}" class="min-h-[320px] rounded-[24px] border border-slate-200 bg-white"></div>
                    <p class="mt-2 text-xs text-slate-500">Use the rich text editor for headings, lists, images, and formatted blog content.</p>
                    @error('detail') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 px-8 py-5">
                <h3 class="text-base font-semibold text-slate-900">SEO Fields</h3>
            </div>
            <div class="space-y-6 p-8">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">SEO Title</label>
                    <input type="text" name="seo_title" value="{{ old('seo_title', $post->seo_title ?? '') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500">
                    @error('seo_title') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">SEO Keywords</label>
                    <input type="text" name="seo_keywords" value="{{ old('seo_keywords', $post->seo_keywords ?? '') }}" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500" placeholder="biology, fsc, entry test, preparation">
                    @error('seo_keywords') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">SEO Description</label>
                    <textarea name="seo_description" rows="4" class="w-full rounded-2xl border-slate-200 px-4 py-3 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500">{{ old('seo_description', $post->seo_description ?? '') }}</textarea>
                    @error('seo_description') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-6">
        <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 px-6 py-4">
                <h3 class="text-base font-semibold text-slate-900">Featured Image</h3>
            </div>
            <div class="space-y-4 p-6">
                <div class="grid gap-3">
                    <label class="flex cursor-pointer items-center gap-3 rounded-2xl border border-slate-200 p-3 transition hover:border-brand-300 hover:bg-brand-50/50">
                        <input type="radio" name="featured_image_id" value="" class="text-brand-600 focus:ring-brand-500" @checked(blank($selectedImageId))>
                        <span class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">None</span>
                        <span class="text-sm font-medium text-slate-700">No featured image</span>
                    </label>

                    @foreach($images->take(8) as $image)
                        <label class="flex cursor-pointer items-center gap-3 rounded-2xl border border-slate-200 p-3 transition hover:border-brand-300 hover:bg-brand-50/50">
                            <input type="radio" name="featured_image_id" value="{{ $image->id }}" class="text-brand-600 focus:ring-brand-500" @checked((string) $selectedImageId === (string) $image->id)>
                            <img src="{{ $image->urlFor('small') ?? $image->urlFor() }}" alt="{{ $image->alt_text ?: $image->title }}" class="h-14 w-14 rounded-2xl object-cover">
                            <span class="min-w-0 truncate text-sm font-medium text-slate-700">{{ $image->title ?: $image->original_name }}</span>
                        </label>
                    @endforeach
                </div>
                @error('featured_image_id') <span class="mt-2 block text-xs text-rose-600">{{ $message }}</span> @enderror
            </div>
        </div>

        <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
            <div class="p-6">
                <div class="rounded-3xl bg-slate-50 p-5 text-sm text-slate-600">
                    <p class="font-semibold text-slate-900">Publishing tips</p>
                    <ul class="mt-3 space-y-2">
                        <li>Use a clean slug for SEO-friendly URLs.</li>
                        <li>Set SEO fields when the post targets search traffic.</li>
                        <li>Choose a featured image from the media library for consistent blog cards.</li>
                    </ul>
                </div>

                <div class="mt-6 flex items-center justify-end gap-3">
                    <a href="{{ route('admin.blog-posts.index') }}" class="rounded-2xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700">Cancel</a>
                    <button type="submit" class="rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700">{{ $isEdit ? 'Update Post' : 'Create Post' }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const hiddenInput = document.getElementById(@json($inputId));
        const editorElement = document.getElementById(@json($editorId));

        const quill = new Quill(editorElement, {
            theme: 'snow',
            placeholder: 'Write the blog content here...',
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'blockquote'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            }
        });

        if (hiddenInput.value) {
            quill.clipboard.dangerouslyPasteHTML(hiddenInput.value);
        }

        const form = editorElement.closest('form');
        form.addEventListener('submit', function () {
            hiddenInput.value = quill.root.innerHTML;
        });
    });
</script>