@extends('admin.layouts.app')

@section('page-title', 'Add Blog Post')

@section('content')
<form action="{{ route('admin.posts.store') }}" method="POST" class="space-y-8 pb-12">
    @csrf
    
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-gray-950 dark:text-white">New Blog Post</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">Share your latest updates with the community.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.posts.index') }}" class="inline-flex items-center rounded-lg bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-gray-950/10 transition hover:bg-gray-50 dark:bg-white/5 dark:text-gray-200 dark:ring-white/10 dark:hover:bg-white/10">
                Cancel
            </a>
            <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-primary-600 transition hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                <i data-lucide="check" class="h-4 w-4"></i>
                <span>Publish</span>
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <!-- Main Form Content -->
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 space-y-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-950 dark:text-white mb-2">Title</label>
                    <input type="text" name="title" required class="block w-full rounded-lg border-0 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-gray-500" placeholder="Enter post title...">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-950 dark:text-white mb-2">Slug</label>
                    <div class="flex rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-primary-600">
                        <span class="flex select-none items-center pl-3 text-gray-500 text-xs font-mono dark:text-gray-400">/blog/</span>
                        <input type="text" name="slug" required class="block flex-1 border-0 bg-transparent py-2.5 pl-1 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-0 dark:text-white dark:placeholder:text-gray-500" placeholder="post-url-slug">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-950 dark:text-white mb-2">Excerpt</label>
                    <textarea name="excerpt" rows="3" class="block w-full rounded-lg border-0 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-gray-500" placeholder="Brief summary for listing..."></textarea>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-950 dark:text-white mb-2">Content</label>
                    <textarea name="content" rows="12" required class="block w-full rounded-lg border-0 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-gray-500 font-mono" placeholder="Write your content here..."></textarea>
                </div>
            </div>
        </div>

        <!-- Sidebar Options -->
        <div class="space-y-6">
            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 space-y-6">
                <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest">Settings</h3>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Category</label>
                        <select name="blog_category_id" class="block w-full rounded-lg border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10">
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Author</label>
                        <select name="blog_author_id" class="block w-full rounded-lg border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10">
                            <option value="">Select Author</option>
                            @foreach($authors as $author)
                                <option value="{{ $author->id }}">{{ $author->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Publish Date</label>
                        <input type="date" name="published_at" class="block w-full rounded-lg border-0 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10">
                    </div>
                </div>
            </div>

            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 space-y-4">
                <h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest">Featured Image</h3>
                <div class="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-200 dark:border-white/10 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5 transition cursor-pointer">
                    <i data-lucide="image-plus" class="h-8 w-8 text-gray-300 mb-2"></i>
                    <span class="text-xs text-gray-400">Upload cover image</span>
                </div>
            </div>

            <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="featured" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-white/10 dark:bg-white/5">
                    <span class="text-sm font-medium text-gray-900 dark:text-white">Featured Post</span>
                </label>
            </div>
        </div>
    </div>
</form>
@endsection