@php
    $article = $article ?? null;
    $oldBody = old('body', $article?->body ?? '');
    $oldTitle = old('title', $article?->title ?? '');
    $oldSlug = old('slug', $article?->slug ?? '');
    $oldExcerpt = old('excerpt', $article?->excerpt ?? '');
    $oldCategory = old('category_id', $article?->category_id);
    $oldAuthor = old('author_id', $article?->author_id);
    $oldStatus = old('status', $article?->status ?? \App\Models\Article::STATUS_DRAFT);
    $oldScope = old('scope', $article?->scope ?? \App\Models\Article::SCOPE_LOCAL);
    $oldFeatured = old('featured_image_url', $article?->featured_image ? \Illuminate\Support\Facades\Storage::url($article->featured_image) : null);
    $oldFeaturedPath = old('featured_image_path', $article?->featured_image);
    $oldFeaturedAlt = old('featured_image_alt', $article?->meta_description);
    $oldMetaTitle = old('meta_title', $article?->meta_title);
    $oldMetaDesc = old('meta_description', $article?->meta_description);
    $oldFeatured = $oldFeatured ?: null;
    $isFeatured = old('is_featured', $article?->is_featured ?? false);
    $isBreaking = old('is_breaking', $article?->is_breaking ?? false);
    $oldScheduled = old('scheduled_at', $article?->scheduled_at?->format('Y-m-d\TH:i'));
    $oldPublished = old('published_at', $article?->published_at?->format('Y-m-d\TH:i'));
@endphp

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-white shadow rounded-lg p-6 space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700">Title</label>
                <input type="text" name="title" value="{{ $oldTitle }}" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-lg" required>
                @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Slug</label>
                <input type="text" name="slug" value="{{ $oldSlug }}" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2" required>
                @error('slug')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Excerpt</label>
                <textarea name="excerpt" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2">{{ $oldExcerpt }}</textarea>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <div class="flex items-center justify-between mb-3">
                <label class="block text-sm font-medium text-gray-700">Body</label>
                <span class="text-xs text-gray-400">Drag images into the editor, or click the image button</span>
            </div>
            <textarea id="body-editor" name="body" class="hidden">{!! $oldBody !!}</textarea>
            @error('body')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
        </div>

        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-sm font-medium text-gray-700 mb-3">SEO &amp; social</h3>
            <div class="space-y-3">
                <div>
                    <label class="block text-xs font-medium text-gray-500">Meta title</label>
                    <input type="text" name="meta_title" value="{{ $oldMetaTitle }}" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500">Meta description</label>
                    <textarea name="meta_description" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">{{ $oldMetaDesc }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-6">
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-sm font-medium text-gray-700 mb-3">Featured image</h3>
            <div id="featured-dropzone" class="relative border-2 border-dashed border-gray-300 rounded-lg p-4 text-center text-sm text-gray-500 hover:border-red-500 cursor-pointer transition">
                <input type="file" id="featured-input" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                <div id="featured-empty" class="{{ $oldFeatured ? 'hidden' : '' }} py-6">
                    <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    <p class="mt-2">Click or drop an image here</p>
                    <p class="text-xs text-gray-400">JPG, PNG, WebP &middot; up to 8 MB</p>
                </div>
                <div id="featured-preview" class="{{ $oldFeatured ? '' : 'hidden' }} relative">
                    <img id="featured-image" src="{{ $oldFeatured }}" alt="Featured preview" class="rounded-md w-full object-cover max-h-72">
                    <button type="button" id="featured-remove" class="absolute top-2 right-2 bg-white/90 hover:bg-white text-red-600 text-xs px-2 py-1 rounded shadow">Remove</button>
                    <p id="featured-filename" class="mt-2 text-xs text-gray-500 truncate"></p>
                </div>
            </div>
            <input type="hidden" name="featured_image_path_existing" id="featured_image_path_existing" value="{{ $oldFeaturedPath }}">
            <input type="hidden" name="remove_featured_image" id="remove_featured_image" value="0">
            <p class="text-xs text-gray-400 mt-2">You can change this image at any time without re-saving the article.</p>
        </div>

        <div class="bg-white shadow rounded-lg p-6 space-y-4">
            <h3 class="text-sm font-medium text-gray-700">Publishing</h3>
            <div>
                <label class="block text-xs font-medium text-gray-500">Status</label>
                <select name="status" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm" required>
                    @foreach(\App\Models\Article::getStatuses() as $value => $label)
                        <option value="{{ $value }}" {{ $oldStatus == $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Scope</label>
                <select name="scope" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm" required>
                    @foreach(\App\Models\Article::getScopes() as $value => $label)
                        <option value="{{ $value }}" {{ $oldScope == $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Category</label>
                <select name="category_id" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm" required>
                    <option value="">Select category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ $oldCategory == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Author</label>
                <select name="author_id" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                    <option value="">Select author</option>
                    @foreach($authors as $author)
                        <option value="{{ $author->id }}" {{ $oldAuthor == $author->id ? 'selected' : '' }}>{{ $author->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="grid grid-cols-2 gap-3">
<div>
                <label class="block text-xs font-medium text-gray-500">Reading time (min)</label>
                <input type="number" name="reading_time" value="{{ old('reading_time', $article?->reading_time ?? 2) }}" min="1" max="60" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Scheduled at</label>
                <input type="datetime-local" name="scheduled_at" value="{{ $oldScheduled }}" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500">Published at</label>
                <input type="datetime-local" name="published_at" value="{{ $oldPublished }}" class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
            </div>
            </div>
            <div class="flex items-center gap-4">
                <label class="flex items-center text-sm">
                    <input type="checkbox" name="is_featured" value="1" {{ $isFeatured ? 'checked' : '' }} class="h-4 w-4 text-red-600 border-gray-300 rounded">
                    <span class="ml-2">Featured</span>
                </label>
                <label class="flex items-center text-sm">
                    <input type="checkbox" name="is_breaking" value="1" {{ $isBreaking ? 'checked' : '' }} class="h-4 w-4 text-red-600 border-gray-300 rounded">
                    <span class="ml-2">Breaking</span>
                </label>
            </div>
        </div>

        <div class="bg-white shadow rounded-lg p-6 space-y-3">
            <h3 class="text-sm font-medium text-gray-700">Tags</h3>
            <select name="tags[]" multiple class="block w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-32">
                @foreach($tags as $tag)
                    <option value="{{ $tag->id }}" {{ in_array($tag->id, old('tags', $article?->tags?->pluck('id')->toArray() ?? [])) ? 'selected' : '' }}>{{ $tag->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="bg-white shadow rounded-lg p-6 space-y-3">
            <h3 class="text-sm font-medium text-gray-700">Locations</h3>
            <select name="locations[]" multiple class="block w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-32">
                @foreach($locations as $location)
                    <option value="{{ $location->id }}" {{ in_array($location->id, old('locations', $article?->locations?->pluck('id')->toArray() ?? [])) ? 'selected' : '' }}>{{ $location->name }} ({{ ucfirst($location->type) }})</option>
                @endforeach
            </select>
        </div>
    </div>
</div>

@once
    @push('scripts')
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            (function () {
                const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                tinymce.init({
                    selector: '#body-editor',
                    height: 520,
                    menubar: 'file edit view insert format tools table',
                    plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
                    toolbar: 'undo redo | blocks | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | blockquote hr | removeformat | code fullscreen | help',
                    branding: false,
                    promotion: false,
                    skin: 'oxide',
                    content_css: 'default',
                    images_upload_handler: function (blobInfo, progress) {
                        return new Promise(function (resolve, reject) {
                            const formData = new FormData();
                            formData.append('file', blobInfo.blob(), blobInfo.filename());
                            formData.append('alt_text', blobInfo.alt() || blobInfo.filename());
                            fetch('{{ route('admin.media.upload') }}', {
                                method: 'POST',
                                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                                body: formData,
                            })
                            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
                            .then(function (res) {
                                if (!res.ok) { reject(res.j.message || 'Upload failed'); return; }
                                resolve(res.j.url);
                            })
                            .catch(function (err) { reject(err.message || 'Network error'); });
                        });
                    },
                    file_picker_types: 'image',
                    file_picker_callback: function (cb, value, meta) {
                        const input = document.createElement('input');
                        input.type = 'file';
                        input.accept = 'image/*';
                        input.onchange = function () {
                            const file = this.files[0];
                            const formData = new FormData();
                            formData.append('file', file);
                            formData.append('alt_text', file.name);
                            fetch('{{ route('admin.media.upload') }}', {
                                method: 'POST',
                                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                                body: formData,
                            })
                            .then(function (r) { return r.json(); })
                            .then(function (j) { cb(j.url, { title: file.name, alt: j.alt || file.name }); });
                        };
                        input.click();
                    },
                    paste_data_images: true,
                    automatic_uploads: true,
                });

                const dropzone = document.getElementById('featured-dropzone');
                const input = document.getElementById('featured-input');
                const preview = document.getElementById('featured-preview');
                const empty = document.getElementById('featured-empty');
                const image = document.getElementById('featured-image');
                const removeBtn = document.getElementById('featured-remove');
                const filenameEl = document.getElementById('featured-filename');
                const removeFlag = document.getElementById('remove_featured_image');
                const pathExisting = document.getElementById('featured_image_path_existing');
                const inlineUrl = @json($article ? route('admin.articles.image', $article) : null);

                function showPreview(src, name) {
                    image.src = src;
                    filenameEl.textContent = name || '';
                    preview.classList.remove('hidden');
                    empty.classList.add('hidden');
                }
                function clearPreview() {
                    image.src = '';
                    filenameEl.textContent = '';
                    preview.classList.add('hidden');
                    empty.classList.remove('hidden');
                    input.value = '';
                    removeFlag.value = '1';
                    pathExisting.value = '';
                }
                removeBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (inlineUrl) {
                        fetch(inlineUrl, {
                            method: 'POST',
                            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json', 'Content-Type': 'application/json' },
                            body: JSON.stringify({ _method: 'DELETE' }),
                        }).finally(function () { clearPreview(); });
                    } else {
                        clearPreview();
                    }
                });
                input.addEventListener('change', function () { handleFile(this.files[0]); });
                ['dragenter','dragover'].forEach(function (evt) {
                    dropzone.addEventListener(evt, function (e) { e.preventDefault(); dropzone.classList.add('border-red-500'); });
                });
                ['dragleave','drop'].forEach(function (evt) {
                    dropzone.addEventListener(evt, function (e) { e.preventDefault(); dropzone.classList.remove('border-red-500'); });
                });
                dropzone.addEventListener('drop', function (e) {
                    const f = e.dataTransfer.files[0];
                    if (f) handleFile(f);
                });

                function handleFile(file) {
                    if (!file || !file.type.startsWith('image/')) return;
                    if (inlineUrl) {
                        const fd = new FormData();
                        fd.append('featured_image', file);
                        fetch(inlineUrl, {
                            method: 'POST',
                            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                            body: fd,
                        })
                        .then(function (r) { return r.json(); })
                        .then(function (j) {
                            if (j.url) {
                                showPreview(j.url, file.name);
                                removeFlag.value = '0';
                            }
                        });
                    } else {
                        const reader = new FileReader();
                        reader.onload = function (ev) {
                            showPreview(ev.target.result, file.name);
                            removeFlag.value = '0';
                        };
                        reader.readAsDataURL(file);
                    }
                }
            })();
        </script>
    @endpush
@endonce