@php
    $isEdit = $blog->exists;
    $publishedDate = old('published_at', optional($blog->published_at)->format('Y-m-d') ?: now()->format('Y-m-d'));
    $tagsValue = old('tags', is_array($blog->tags) ? implode(', ', $blog->tags) : '');
@endphp

@include('admin.header', [
    'title' => $isEdit ? 'Edit Blog' : 'Create Blog',
    'active' => 'blog',
    'searchPlaceholder' => 'Search blog titles, categories, authors...'
])

<section class="page-hero mb-3">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
        <div>
            <h1 class="page-title mb-2">{{ $isEdit ? 'Edit Blog' : 'Create Blog' }}</h1>
            <p class="mb-0 text-secondary">Manage the title, content, image, and publishing status for this blog post.</p>
        </div>
        <a class="btn-outline-earth" href="{{ route('admin.blog.index') }}">
            <i class="bi bi-arrow-left"></i>
            Back to Blog
        </a>
    </div>
</section>

<form action="{{ $isEdit ? route('admin.blog.update', $blog) : route('admin.blog.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @if ($isEdit)
        @method('PATCH')
    @endif

    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <section class="content-card">
                <div class="card-head">
                    <h2 class="card-title"><span class="title-icon"><i class="bi bi-journal-text"></i></span>Blog Content</h2>
                </div>
                <div class="card-body-pad">
                    <div class="mb-3">
                        <label class="form-label fw-bold" for="title">Title</label>
                        <input class="form-control @error('title') is-invalid @enderror" id="title" name="title" type="text" value="{{ old('title', $blog->title) }}" required>
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="slug">Slug</label>
                        <input class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" type="text" value="{{ old('slug', $blog->slug) }}" placeholder="Auto-generated from title if left blank">
                        @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="excerpt">Excerpt</label>
                        <textarea class="form-control @error('excerpt') is-invalid @enderror" id="excerpt" name="excerpt" rows="3">{{ old('excerpt', $blog->excerpt) }}</textarea>
                        @error('excerpt')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="content">Content</label>
                        <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="12" required>{{ old('content', $blog->content) }}</textarea>
                        @error('content')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </section>
        </div>

        <div class="col-12 col-xl-4">
            <section class="content-card mb-3">
                <div class="card-head">
                    <h2 class="card-title"><span class="title-icon"><i class="bi bi-send-check"></i></span>Publish</h2>
                </div>
                <div class="card-body-pad">
                    <div class="mb-3">
                        <label class="form-label fw-bold" for="category">Category</label>
                        <input class="form-control @error('category') is-invalid @enderror" id="category" name="category" type="text" value="{{ old('category', $blog->category) }}" placeholder="Organic Ginger">
                        @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="status">Status</label>
                        <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                            @foreach (['draft' => 'Draft', 'published' => 'Published', 'scheduled' => 'Scheduled'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('status', $blog->status ?: 'draft') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="published_at">Published Date</label>
                        <input class="form-control @error('published_at') is-invalid @enderror" id="published_at" name="published_at" type="date" value="{{ $publishedDate }}">
                        @error('published_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" id="is_featured" name="is_featured" type="checkbox" value="1" @checked(old('is_featured', $blog->is_featured))>
                        <label class="form-check-label fw-bold" for="is_featured">Feature this blog</label>
                    </div>

                    <button class="btn-earth w-100" type="submit">
                        <i class="bi bi-save"></i>
                        {{ $isEdit ? 'Update Blog' : 'Save Blog' }}
                    </button>
                </div>
            </section>

            <section class="content-card">
                <div class="card-head">
                    <h2 class="card-title"><span class="title-icon"><i class="bi bi-image"></i></span>Featured Image</h2>
                </div>
                <div class="card-body-pad">
                    <div class="mb-3">
                        <label class="form-label fw-bold" for="featured_image">Image</label>
                        <input class="form-control @error('featured_image') is-invalid @enderror" id="featured_image" name="featured_image" type="file" accept="image/*">
                        @error('featured_image')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="featured_image_alt">Image Alt Text</label>
                        <input class="form-control @error('featured_image_alt') is-invalid @enderror" id="featured_image_alt" name="featured_image_alt" type="text" value="{{ old('featured_image_alt', $blog->featured_image_alt) }}">
                        @error('featured_image_alt')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="tags">Tags</label>
                        <input class="form-control @error('tags') is-invalid @enderror" id="tags" name="tags" type="text" value="{{ $tagsValue }}" placeholder="ginger, organic, export">
                        @error('tags')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold" for="meta_title">Meta Title</label>
                        <input class="form-control @error('meta_title') is-invalid @enderror" id="meta_title" name="meta_title" type="text" value="{{ old('meta_title', $blog->meta_title) }}">
                        @error('meta_title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div>
                        <label class="form-label fw-bold" for="meta_description">Meta Description</label>
                        <textarea class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" name="meta_description" rows="3">{{ old('meta_description', $blog->meta_description) }}</textarea>
                        @error('meta_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </section>
        </div>
    </div>
</form>

@push('styles')
    <style>
        .ck-editor__editable_inline {
            min-height: 420px;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
    <script>
        const blogContent = document.querySelector('#content');

        if (blogContent && window.ClassicEditor) {
            ClassicEditor
                .create(blogContent, {
                    toolbar: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        '|',
                        'blockQuote',
                        'insertTable',
                        'undo',
                        'redo'
                    ],
                    table: {
                        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
                    }
                })
                .then((editor) => {
                    blogContent.closest('form')?.addEventListener('submit', () => {
                        blogContent.value = editor.getData();
                    });
                })
                .catch((error) => console.error(error));
        }
    </script>
@endpush

@include('admin.footer')