@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Add Blog Post</h2>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.blogs.index') }}" class="text-gray-600 border border-gray-300 px-4 py-2 rounded bg-white font-semibold flex items-center gap-2">
                &larr; Back
            </a>
            <button type="submit" form="blog-form" class="bg-green-600 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Publish
            </button>
        </div>
    </div>

    @if ($errors->any())
        <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc pl-5">@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
        </div>
    @endif

    <form id="blog-form" action="{{ route('admin.blogs.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col gap-6">
        @csrf
        
        <!-- Blog Details Block -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 font-bold text-gray-700">
                Blog Details
            </div>
            
            <div class="p-6 flex flex-col gap-5">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Title <span class="text-red-500">*</span></label>
                    <input type="text" name="title" value="{{ old('title') }}" placeholder="title" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500" required>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Slug <span class="text-blue-500 font-normal">(Auto-generated if left empty)</span></label>
                    <input type="text" name="slug" value="{{ old('slug') }}" placeholder="blog-post-slug" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500">
                </div>

                <div class="flex items-center justify-between gap-6 py-2">
                    <label class="block text-sm font-bold text-gray-700 w-1/4">Image <span class="text-gray-400 font-normal">(size 600/600)</span></label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 relative flex-1">
                        <input type="file" name="image" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                        <div class="text-yellow-600 font-bold text-sm flex items-center justify-center gap-2">
                            <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                            Click or Drag & Drop Your Image Here
                        </div>
                    </div>
                    <div class="w-1/4 flex flex-col items-center justify-center text-gray-400">
                        <svg class="w-8 h-8 mb-2" 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"></path></svg>
                        <span class="text-xs">No file uploaded</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Choose Category</label>
                    <select name="blog_category_id" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500">
                        <option value="">Select Category</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ old('blog_category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Short Description <span class="text-red-500">(max 50 words)*</span></label>
                    <textarea name="short_description" rows="3" placeholder="short desc" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500" required>{{ old('short_description') }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Description <span class="text-red-500">*</span></label>
                    <textarea name="description" id="editor" rows="10" class="w-full border rounded px-3 py-2" required>{{ old('description') }}</textarea>
                </div>
            </div>
        </div>

        <!-- SEO Settings Block -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 font-bold text-gray-700">
                SEO Settings
            </div>
            
            <div class="p-6 flex flex-col gap-5">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Meta Title</label>
                    <input type="text" name="meta_title" value="{{ old('meta_title') }}" placeholder="Meta title for SEO" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Meta Description</label>
                    <textarea name="meta_description" rows="2" placeholder="Meta description for SEO" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500">{{ old('meta_description') }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Meta Keywords</label>
                    <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}" placeholder="Meta keywords, comma separated" class="w-full border rounded px-3 py-2 outline-none focus:border-green-500">
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Add CKEditor 4 script to match the exact look of your screenshot -->
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('editor');
</script>
@endsection