@extends('layouts.vertical', ['title' => 'Edit Blog Post'])

@section('css')
    @vite(['node_modules/quill/dist/quill.core.css', 'node_modules/quill/dist/quill.snow.css'])
@endsection

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">Edit Blog Post</h4>
    </div>

    <div class="text-end">
        <ol class="breadcrumb m-0 py-0">
            <li class="breadcrumb-item"><a href="/dashboard/index">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('blog-posts.index') }}">Blog Posts</a></li>
            <li class="breadcrumb-item active">Edit</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Post Information</h5>
            </div>

            <div class="card-body">
                <x-form.form id="blogPostForm" method="POST" action="{{ route('blog-posts.update', $blogPost->id) }}" enctype="multipart/form-data">
                    @method('PUT')
                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="title" 
                                label="Title" 
                                :required="true"
                                :value="$blogPost->title"
                                placeholder="Enter blog post title"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="slug" 
                                label="Slug" 
                                :value="$blogPost->slug"
                                placeholder="Leave empty to auto-generate from title"
                                help="URL-friendly version of the title"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="excerpt" 
                                label="Excerpt" 
                                rows="3"
                                :value="$blogPost->excerpt"
                                placeholder="Short summary of the post (optional)"
                                help="This will be displayed in post listings"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <label for="content" class="form-label">
                                Content <span class="text-danger">*</span>
                            </label>
                            <div id="quill-editor" style="height: 400px;">{!! $blogPost->content !!}</div>
                            <textarea name="content" id="content" style="display: none;">{{ $blogPost->content }}</textarea>
                            @error('content')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            @if($blogPost->featured_image)
                                <div class="mb-2">
                                    <label class="form-label">Current Featured Image</label>
                                    <div>
                                        <img src="{{ asset('storage/' . $blogPost->featured_image) }}" alt="Featured Image" class="img-thumbnail" style="max-height: 200px;">
                                    </div>
                                </div>
                            @endif
                            <x-form.file 
                                name="featured_image" 
                                label="Featured Image" 
                                accept="image/*"
                                help="Upload a new image to replace the current one (optional)"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.select 
                                name="categories" 
                                label="Categories" 
                                :options="$categories->pluck('name', 'id')->toArray()"
                                :value="$blogPost->categories->pluck('id')->toArray()"
                                :multiple="true"
                                help="Select one or more categories for this post"
                            />
                        </div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">SEO Settings</h5>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.input 
                                name="seo_title" 
                                label="SEO Title" 
                                :value="$blogPost->seo_title"
                                placeholder="Leave empty to use post title"
                                help="Meta title for search engines (optional)"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="seo_description" 
                                label="SEO Description" 
                                rows="3"
                                :value="$blogPost->seo_description"
                                placeholder="Meta description for search engines (optional)"
                            />
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <x-form.textarea 
                                name="seo_keywords" 
                                label="SEO Keywords" 
                                rows="2"
                                :value="$blogPost->seo_keywords"
                                placeholder="Comma-separated keywords (optional)"
                            />
                        </div>
                    </div>

                    <hr class="my-4">
                    <h5 class="mb-3">Publishing</h5>

                    <div class="row">
                        <div class="col-md-6">
                            <x-form.checkbox 
                                name="is_active" 
                                label="Active" 
                                :checked="$blogPost->is_active"
                                help="Inactive posts won't be visible"
                            />
                        </div>
                        <div class="col-md-6">
                            <x-form.date 
                                name="published_at" 
                                label="Publish Date" 
                                type="datetime-local"
                                :value="$blogPost->published_at ? $blogPost->published_at->format('Y-m-d\TH:i') : null"
                                help="Schedule post for future publication (optional)"
                            />
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">Update Post</button>
                            <a href="{{ route('blog-posts.index') }}" class="btn btn-light">Cancel</a>
                        </div>
                    </div>
                </x-form.form>
            </div>
        </div>
    </div>
</div>

</div> <!-- container-fluid -->

@endsection

@section('script')
    @vite(['resources/js/pages/quilljs.init.js'])
    {{-- Fallback: load Quill from CDN to ensure global Quill is available --}}
    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Quill editor
            var quill = new Quill('#quill-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'script': 'sub'}, { 'script': 'super' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['link', 'image', 'video'],
                        ['clean']
                    ]
                }
            });

            // Get initial content
            var contentField = document.getElementById('content');
            if (contentField && contentField.value) {
                quill.root.innerHTML = contentField.value;
            }

            // Update hidden textarea before form submission
            var form = document.getElementById('blogPostForm');
            
            if (form && contentField) {
                form.addEventListener('submit', function(e) {
                    // Ensure content is set before submission
                    var quillContent = quill.root.innerHTML;
                    
                    // Validate that content is not empty
                    if (!quillContent || quillContent.trim() === '' || quillContent === '<p><br></p>') {
                        e.preventDefault();
                        alert('Please enter some content for the post.');
                        return false;
                    }
                    
                    // Set the content field value
                    contentField.value = quillContent;
                    
                    // Double-check it was set
                    if (contentField.value !== quillContent) {
                        console.error('Failed to set content field!');
                        e.preventDefault();
                        alert('Error: Content field could not be set. Please try again.');
                        return false;
                    }
                    
                    // Log for debugging
                    console.log('Form submitting with content length:', quillContent.length);
                    console.log('Content field value length:', contentField.value.length);
                    console.log('Content preview:', quillContent.substring(0, 100));
                });
            } else {
                console.error('blogPostForm or content textarea not found; Quill content will not be saved correctly.');
            }
        });
    </script>
@endsection