@csrf

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Title</label>
        <input type="text" name="title" value="{{ old('title', $post->title ?? '') }}" required class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('title')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Slug</label>
        <input type="text" name="slug" value="{{ old('slug', $post->slug ?? '') }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('slug')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Excerpt</label>
        <textarea name="excerpt" rows="2" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900">{{ old('excerpt', $post->excerpt ?? '') }}</textarea>
        <x-input-error :messages="$errors->get('excerpt')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Body</label>
        <textarea id="body_input" name="body" class="hidden">{{ old('body', $post->body ?? '') }}</textarea>
        <div id="body_editor" class="mt-1 bg-white rounded-md border border-gray-300"></div>
        <x-input-error :messages="$errors->get('body')" class="mt-2" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700">Author name</label>
        <input type="text" name="author_name" value="{{ old('author_name', $post->author_name ?? '') }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('author_name')" class="mt-2" />
    </div>

    <div>
        <label class="text-sm font-medium text-gray-700">Published at</label>
        <input type="date" name="published_at" value="{{ old('published_at', optional($post->published_at ?? null)->toDateString()) }}" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900" />
        <x-input-error :messages="$errors->get('published_at')" class="mt-2" />
    </div>

    <div class="flex items-center gap-2 pt-6">
        <input type="checkbox" name="is_published" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" @checked(old('is_published', $post->is_published ?? false)) />
        <span class="text-sm text-gray-700">Published</span>
    </div>

    <div class="sm:col-span-2">
        <label class="text-sm font-medium text-gray-700">Cover image</label>
        <input type="file" name="cover_image" accept="image/*" class="mt-1 w-full text-sm" />
        <x-input-error :messages="$errors->get('cover_image')" class="mt-2" />
        @if (!empty($post?->cover_image_path))
            <div class="mt-3 flex items-center gap-3 text-sm">
                <img src="{{ asset('storage/'.$post->cover_image_path) }}" class="w-24 h-14 object-cover rounded-md border border-gray-200" alt="" />
                <label class="inline-flex items-center gap-2">
                    <input type="checkbox" name="remove_cover_image" value="1" class="rounded border-gray-300 text-gray-900 focus:ring-gray-900" />
                    <span>Remove</span>
                </label>
            </div>
        @endif
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <button type="submit" class="rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Save</button>
    <a href="{{ route('admin.blog-posts.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Cancel</a>
</div>