@extends('admin.layouts.app')

@section('title', 'Add New Blog Post')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.blogs.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 mb-2 text-xs transition-colors">
            <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
            Back to List
        </a>
        <h1 class="text-xl font-bold text-white tracking-tight">Add New Blog Post</h1>
    </div>

    <form action="{{ route('admin.blogs.store') }}" method="POST" enctype="multipart/form-data" class="pb-20">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                <!-- Content Card -->
                <div class="bg-[#101828] border border-white/5 rounded-xl p-6 space-y-5">
                    <div class="grid gap-5">
                        <div>
                            <label class="form-label">Post Title</label>
                            <input type="text" name="title" value="{{ old('title') }}"
                                class="form-input w-full rounded-lg px-4 py-2.5" placeholder="e.g. The Future of Astrology"
                                required>
                            @error('title') <p class="text-red-500 text-xs mt-1.5">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="form-label">Excerpt</label>
                            <textarea name="excerpt" id="excerpt" rows="2" class="form-input w-full rounded-lg px-4 py-2.5"
                                placeholder="Brief summary of the post...">{{ old('excerpt') }}</textarea>
                            @error('excerpt') <p class="text-red-500 text-xs mt-1.5">{{ $message }}</p> @enderror
                        </div>

                        <div>
                            <label class="form-label">Content</label>
                            <textarea name="content" id="content" rows="12"
                                class="form-input w-full rounded-lg px-4 py-2.5 font-mono text-sm"
                                placeholder="Write your content here...">{{ old('content') }}</textarea>
                            @error('content') <p class="text-red-500 text-xs mt-1.5">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <!-- SEO Card -->
                <div class="bg-[#101828] border border-white/5 rounded-xl p-6 space-y-5">
                    <div class="flex items-center gap-2 pb-2 border-b border-white/5">
                        <i data-lucide="search" class="w-4 h-4 text-indigo-400"></i>
                        <h3 class="text-sm font-semibold text-white">Search Engine Optimization</h3>
                    </div>

                    <div class="grid gap-5">
                        <div>
                            <label class="form-label">Meta Title</label>
                            <input type="text" name="meta_title" value="{{ old('meta_title') }}"
                                class="form-input w-full rounded-lg px-4 py-2.5" placeholder="SEO Optimized Title">
                        </div>
                        <div>
                            <label class="form-label">Meta Description</label>
                            <textarea name="meta_description" rows="2" class="form-input w-full rounded-lg px-4 py-2.5"
                                placeholder="SEO Optimized Description">{{ old('meta_description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-6">
                <!-- Publishing Sidebar -->
                <div class="bg-[#101828] border border-white/5 rounded-xl p-6 space-y-6">
                    <div>
                        <label class="form-label">Status</label>
                        <select name="status"
                            class="form-input w-full rounded-lg px-4 py-2.5 appearance-none cursor-pointer">
                            <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                        </select>
                    </div>

                    <div>
                        <label class="form-label">Featured Image</label>
                        <div
                            class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-[#344054] border-dashed rounded-lg hover:border-indigo-500/50 transition-colors cursor-pointer group">
                            <div class="space-y-1 text-center">
                                <i data-lucide="image"
                                    class="mx-auto h-10 w-10 text-slate-500 group-hover:text-indigo-400 transition-colors"></i>
                                <div class="flex text-xs text-slate-400">
                                    <label
                                        class="relative cursor-pointer rounded-md font-medium text-indigo-400 hover:text-indigo-300">
                                        <span>Upload a file</span>
                                        <input type="file" name="image" class="sr-only" accept="image/*">
                                    </label>
                                    <p class="pl-1">or drag and drop</p>
                                </div>
                                <p class="text-[10px] text-slate-500 uppercase tracking-tighter">PNG, JPG, WEBP up to 2MB
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                            class="w-full bg-[#444ce7] hover:bg-[#3538cd] text-white font-semibold py-2.5 rounded-lg shadow-sm transition-all text-sm">
                            Create Post
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        .ck-editor__editable {
            min-height: 200px !important;
            background-color: #101828 !important;
            color: #fff !important;
            border-color: #344054 !important;
        }

        .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
            border-color: #344054 !important;
        }

        .ck.ck-toolbar {
            background-color: #1d2939 !important;
            border-color: #344054 !important;
        }

        .ck.ck-toolbar__items {
            background-color: #1d2939 !important;
        }

        .ck.ck-button {
            background-color: #1d2939 !important;
            color: #fff !important;
        }

        .ck.ck-button:hover {
            background-color: #344054 !important;
        }

        .ck.ck-button.ck-on {
            background-color: #444ce7 !important;
        }

        .ck.ck-icon {
            color: #fff !important;
        }

        .ck.ck-dropdown__panel {
            background-color: #1d2939 !important;
            border-color: #344054 !important;
        }

        .ck.ck-list {
            background-color: #1d2939 !important;
        }

        .ck.ck-list__item {
            color: #fff !important;
        }

        .ck.ck-list__item:hover {
            background-color: #344054 !important;
        }

        .ck.ck-editor__editable_inline {
            padding: 0 20px !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            ClassicEditor
                .create(document.querySelector('#excerpt'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
                })
                .catch(error => {
                    console.error(error);
                });

            ClassicEditor
                .create(document.querySelector('#content'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote',
                        'insertTable', 'mediaEmbed', 'undo', 'redo'
                    ],
                })
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
@endpush