@extends('admin.layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h2 class="text-4xl font-extrabold">Create Blog Post</h2>
        <p class="text-gray-400 mt-2">Write a professional post with images, embeds, publish time and SEO.</p>
    </div>

    @if(session('success'))
        <div class="bg-green-600/20 border border-green-600 text-green-300 p-4 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.posts.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">Post Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Slug</label>
                    <input type="text" name="slug" value="{{ old('slug') }}" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3" placeholder="optional-auto-generated">
                </div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Excerpt</label>
                <textarea name="excerpt" rows="3" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">{{ old('excerpt') }}</textarea>
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">Featured Image</label>
                    <input type="file" name="featured_image" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Publish Date & Time</label>
                    <input type="datetime-local" name="published_at" value="{{ old('published_at') }}" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">
                </div>
            </div>

            <label class="inline-flex items-center gap-3">
                <input type="checkbox" name="is_published" value="1" {{ old('is_published', true) ? 'checked' : '' }}>
                <span class="text-gray-300">Publish Post</span>
            </label>
        </div>

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <div class="flex items-center justify-between">
                <h3 class="text-2xl font-bold">Post Content</h3>
                <p class="text-sm text-gray-400">Upload images, paste embed links, add headings, quotes, tables and media.</p>
            </div>

            <textarea id="editor" name="content" rows="18" class="w-full rounded-2xl bg-black border border-gray-700 text-white px-4 py-4">{{ old('content') }}</textarea>
        </div>

        <div class="glass-card rounded-[1.6rem] p-6 space-y-5">
            <h3 class="text-2xl font-bold">SEO Settings</h3>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Title</label>
                <input type="text" name="meta_title" value="{{ old('meta_title') }}" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Description</label>
                <textarea name="meta_description" rows="3" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3">{{ old('meta_description') }}</textarea>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Meta Keywords</label>
                <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}" class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3" placeholder="stonebwoy, news, blog, ghana music">
            </div>
        </div>

        <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl font-semibold text-white">
            Create Blog Post
        </button>
    </form>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
    class LaravelUploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }

        upload() {
            return this.loader.file.then(file => new Promise((resolve, reject) => {
                const data = new FormData();
                data.append('upload', file);

                fetch('{{ route('admin.editor.upload') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: data
                })
                .then(response => response.json())
                .then(result => {
                    if (result.url) {
                        resolve({ default: result.url });
                    } else {
                        reject('Upload failed');
                    }
                })
                .catch(error => reject(error));
            }));
        }

        abort() {}
    }

    function LaravelUploadAdapterPlugin(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
            return new LaravelUploadAdapter(loader);
        };
    }

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