<form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="space-y-6">
    @csrf
    @if($method === 'PUT')
        @method('PUT')
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-6">
            <div class="bg-white rounded-xl border border-gray-100 p-6 space-y-4">
                <h3 class="text-base font-semibold text-gray-700">Write Article</h3>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                    <input name="title" value="{{ old('title', $blogArticle->title ?? '') }}" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Slug</label>
                    <input name="slug" value="{{ old('slug', $blogArticle->slug ?? '') }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Excerpt</label>
                    <textarea name="excerpt" rows="3" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">{{ old('excerpt', $blogArticle->excerpt ?? '') }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Content</label>
                    <textarea id="content" name="content" rows="16" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">{{ old('content', $blogArticle->content ?? '') }}</textarea>
                </div>
            </div>
        </div>
        <div class="space-y-6">
            <div class="bg-white rounded-xl border border-gray-100 p-6 space-y-4">
                <h3 class="text-base font-semibold text-gray-700">Submission</h3>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                    <select name="blog_category_id" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                        <option value="">Select category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" @selected((string) old('blog_category_id', $blogArticle->blog_category_id ?? '') === (string) $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Featured Image</label>
                    <input type="file" name="featured_image" accept="image/*" class="w-full text-sm" id="employee-blog-cover-input">
                    @if(isset($blogArticle->featured_image) && $blogArticle->featured_image)
                        <img src="{{ $blogArticle->featured_image_url }}" alt="Featured image" class="w-full h-36 object-cover rounded-lg mt-2 border border-gray-200" id="employee-blog-cover-preview">
                    @else
                        <img src="" alt="Featured image preview" class="w-full h-36 object-cover rounded-lg mt-2 border border-gray-200 hidden" id="employee-blog-cover-preview">
                    @endif
                </div>
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm text-gray-600">
                    Drafts stay private. Submitting sends the article to admin for approval before it appears on the website.
                </div>
                @if(isset($blogArticle->status))
                    <div class="text-sm text-gray-600">
                        Current status:
                        <span class="inline-flex px-2 py-1 rounded-full text-xs {{ $blogArticle->statusBadge() }}">{{ $blogArticle->statusLabel() }}</span>
                    </div>
                @endif
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-6 space-y-3">
                <h3 class="text-base font-semibold text-gray-700">SEO</h3>
                <input name="seo_title" value="{{ old('seo_title', $blogArticle->seo_title ?? '') }}" placeholder="SEO title" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                <textarea name="seo_description" rows="3" placeholder="SEO description" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">{{ old('seo_description', $blogArticle->seo_description ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit" name="submit_action" value="pending" class="bg-green-600 hover:bg-green-700 text-white font-semibold text-sm px-6 py-2.5 rounded-lg">
            Submit For Approval
        </button>
        <button type="submit" name="submit_action" value="draft" class="bg-gray-900 hover:bg-black text-white font-semibold text-sm px-6 py-2.5 rounded-lg">
            Save Draft
        </button>
        <a href="{{ route('employee.blog-articles.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold text-sm px-6 py-2.5 rounded-lg">Cancel</a>
    </div>
</form>

<script>
(() => {
    const input = document.getElementById('employee-blog-cover-input');
    const preview = document.getElementById('employee-blog-cover-preview');
    if (!input || !preview) return;

    input.addEventListener('change', () => {
        const file = input.files && input.files[0];
        if (!file) return;
        preview.src = URL.createObjectURL(file);
        preview.classList.remove('hidden');
    });
})();
</script>
