@extends('layouts.admin')

@section('title', 'Edit Blog: ' . $blog->title)
@section('page_title', 'Edit Blog Post')

@push('styles')
<style>
    .ck-editor__editable_inline {
        min-height: 380px;
        font-size: 1rem;
        line-height: 1.7;
    }
    .ck.ck-editor {
        width: 100%;
    }
    .serp-card {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 1.25rem;
    }
    .serp-box {
        background-color: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
        padding: 1rem;
        font-family: Arial, sans-serif;
    }
    .serp-url {
        color: #202124;
        font-size: 0.8rem;
        line-height: 1.3;
    }
    .serp-title {
        color: #1a0dab;
        font-size: 1.15rem;
        line-height: 1.3;
        cursor: pointer;
        font-weight: 500;
    }
    .serp-title:hover {
        text-decoration: underline;
    }
    .serp-desc {
        color: #4d5156;
        font-size: 0.85rem;
        line-height: 1.45;
        margin-top: 0.25rem;
    }
    .char-count {
        font-size: 0.75rem;
        font-weight: 500;
    }
    .char-count.good {
        color: #16a34a;
    }
    .char-count.warn {
        color: #ca8a04;
    }
    .char-count.over {
        color: #dc2626;
    }
    .extra-small {
        font-size: 0.75rem;
    }
    .form-control.is-invalid,
    .is-invalid {
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.18) !important;
    }
</style>
@endpush

@section('content')
<div class="mb-3 d-flex align-items-center justify-content-between">
    <a href="{{ route('admin.blogs.index') }}" class="btn btn-outline-secondary btn-sm rounded-3 d-inline-flex align-items-center gap-1.5">
        <i class="bi bi-arrow-left"></i>
        <span class="ms-1">Back to Blog List</span>
    </a>

    <div class="d-flex align-items-center gap-2">
        <span class="text-muted small">Created: {{ $blog->created_at->format('M d, Y') }}</span>
        @if($blog->updated_at != $blog->created_at)
        <span class="text-muted extra-small">&bull; Updated: {{ $blog->updated_at->diffForHumans() }}</span>
        @endif
    </div>
</div>

<form id="blogEditForm" method="POST" action="{{ route('admin.blogs.update', $blog->id) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <input type="hidden" id="remove_featured_image" name="remove_featured_image" value="0">

    <div class="row g-4">
        <!-- Main Form Column (Title, Description, CKEditor) -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <!-- Title -->
                    <div class="mb-4">
                        <label for="title" class="form-label fw-bold text-dark fs-6">
                            Blog Title <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-lg rounded-3" id="title" name="title" value="{{ old('title', $blog->title) }}" placeholder="Enter an engaging blog title..." required>
                    </div>

                    <!-- Slug Input -->
                    <div class="mb-4">
                        <label for="slug" class="form-label small fw-semibold text-muted d-flex align-items-center justify-content-between">
                            <span>Permalink Slug</span>
                            <span class="extra-small text-secondary"><i class="bi bi-link-45deg me-1"></i>Live article URL key</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-light text-muted small border-end-0">/blog/</span>
                            <input type="text" class="form-control border-start-0 ps-1" id="slug" name="slug" value="{{ old('slug', $blog->slug) }}" placeholder="custom-slug-url">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="autoGenerateSlugBtn" title="Regenerate slug from current title">
                                <i class="bi bi-magic"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Description with CKEditor -->
                    <div class="mb-3">
                        <label for="description" class="form-label fw-bold text-dark fs-6 d-flex align-items-center justify-content-between">
                            <span>Blog Content <span class="text-danger">*</span></span>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle extra-small">CKEditor 5</span>
                        </label>
                        <textarea class="form-control" id="description" name="description" rows="12">{!! old('description', $blog->description) !!}</textarea>
                        <div id="descriptionError" class="invalid-feedback-custom d-none">Please provide blog content.</div>
                    </div>
                </div>
            </div>

            <!-- SEO & Meta Fields Card -->
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-header bg-white py-3 px-4 border-0 d-flex align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="bi bi-globe2 text-primary"></i>
                        <span>Search Engine Optimization (SEO & Meta Fields)</span>
                    </h6>
                    <span class="badge bg-info-subtle text-info border border-info-subtle extra-small">Google Preview</span>
                </div>
                <div class="card-body p-4 pt-1">
                    <p class="text-muted small mb-4">
                        Optimize how your blog appears in Google and other search engines to drive organic traffic.
                    </p>

                    <!-- Meta Title -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <label for="meta_title" class="form-label small fw-semibold text-dark m-0">Meta Title</label>
                            <span id="metaTitleCount" class="char-count good">0 / 60 characters</span>
                        </div>
                        <input type="text" class="form-control rounded-3" id="meta_title" name="meta_title" value="{{ old('meta_title', $blog->meta_title) }}" placeholder="e.g. 10 Essential Laravel SaaS Practices in 2026" maxlength="100">
                        <div class="form-text extra-small text-muted">Recommended: 50-60 characters for optimal display on search result pages.</div>
                    </div>

                    <!-- Meta Description -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <label for="meta_description" class="form-label small fw-semibold text-dark m-0">Meta Description</label>
                            <span id="metaDescCount" class="char-count good">0 / 160 characters</span>
                        </div>
                        <textarea class="form-control rounded-3" id="meta_description" name="meta_description" rows="3" placeholder="Provide a concise, enticing summary of your article..." maxlength="300">{{ old('meta_description', $blog->meta_description) }}</textarea>
                        <div class="form-text extra-small text-muted">Recommended: 140-160 characters to avoid truncation in search snippets.</div>
                    </div>

                    <!-- Meta Keywords -->
                    <div class="mb-4">
                        <label for="meta_keywords" class="form-label small fw-semibold text-dark mb-1">Meta Keywords</label>
                        <input type="text" class="form-control rounded-3 font-monospace small" id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords', $blog->meta_keywords) }}" placeholder="laravel, saas, boilerplate, web development, php">
                        <div class="form-text extra-small text-muted">Separate keywords or tags with commas.</div>
                    </div>

                    <!-- Live Google SERP Snippet Box -->
                    <div class="serp-card">
                        <div class="d-flex align-items-center gap-2 mb-2 text-muted extra-small fw-bold text-uppercase">
                            <i class="bi bi-google"></i> Live Google SERP Snippet Preview
                        </div>
                        <div class="serp-box shadow-sm">
                            <div class="serp-url text-truncate" id="serpLiveUrl">
                                {{ url('/blog') }}/<span id="serpLiveSlug">{{ $blog->slug }}</span>
                            </div>
                            <div class="serp-title text-truncate mt-0.5" id="serpLiveTitle">
                                {{ $blog->meta_title ?: $blog->title }}
                            </div>
                            <div class="serp-desc" id="serpLiveDesc">
                                {{ $blog->meta_description ?: 'Provide a meta description to preview how your summary appears in Google search engine result pages.' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar Column (Publishing Options & Actions) -->
        <div class="col-lg-4">
             <!-- Featured Image Card -->
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 px-4 border-0 d-flex align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="bi bi-image text-primary"></i>
                        <span>Featured Image</span>
                    </h6>
                    <span class="badge bg-light text-muted border extra-small">Cover</span>
                </div>
                <div class="card-body p-4 pt-1">
                    <div class="featured-image-upload-wrapper text-center p-3 rounded-3 border border-2 border-dashed bg-light-subtle position-relative" id="dropArea">
                        <input type="file" class="d-none" id="featured_image" name="featured_image" accept="image/jpeg,image/png,image/jpg,image/webp,image/gif">
                        
                        <div id="uploadPlaceholder" class="py-3 {{ !empty($blog->featured_image_url) ? 'd-none' : '' }}">
                            <div class="mb-2 text-primary">
                                <i class="bi bi-cloud-arrow-up fs-1"></i>
                            </div>
                            <div class="fw-semibold text-dark small mb-1">Click to upload new image</div>
                            <div class="text-muted extra-small mb-2">JPG, PNG, WEBP, or GIF (max. 5MB)</div>
                            <button type="button" class="btn btn-sm btn-outline-primary rounded-3" id="browseImageBtn">
                                Browse Image
                            </button>
                        </div>

                        <div id="imagePreviewContainer" class="{{ empty($blog->featured_image_url) ? 'd-none' : '' }} position-relative">
                            <img id="imagePreview" src="{{ $blog->featured_image_url ?? '' }}" alt="Featured Image Preview" class="img-fluid rounded-3 shadow-xs border w-100" style="max-height: 200px; object-fit: cover;">
                            <div class="mt-2.5 d-flex justify-content-between align-items-center">
                                <span id="imageFileInfo" class="extra-small text-muted text-truncate font-monospace" style="max-width: 170px;">
                                    {{ !empty($blog->featured_image) ? basename($blog->featured_image) : '' }}
                                </span>
                                <button type="button" class="btn btn-outline-danger btn-sm rounded-pill py-0.5 px-2.5 extra-small" id="removeImageBtn">
                                    <i class="bi bi-trash3 me-1"></i>Remove
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Image Alt Tag -->
                    <div class="mt-3 text-start">
                        <label for="featured_image_alt" class="form-label small fw-semibold text-dark mb-1">
                            Image Alt Tag (SEO & Accessibility)
                        </label>
                        <input type="text" class="form-control rounded-3" id="featured_image_alt" name="featured_image_alt" value="{{ old('featured_image_alt', $blog->featured_image_alt) }}" placeholder="Brief descriptive alt text..." maxlength="255">
                        <div class="form-text extra-small text-muted">Describe the image for screen readers and search engines.</div>
                    </div>
                </div>
            </div>

            <!-- Publishing Action Card -->
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white py-3 px-4 border-0">
                    <h6 class="m-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="bi bi-send-check text-primary"></i>
                        <span>Publish Settings</span>
                    </h6>
                </div>
                <div class="card-body p-4 pt-1">
                    <!-- Status -->
                    @php
                        $currentStatus = $blog->effective_status;
                    @endphp
                    <div class="mb-4">
                        <label for="status" class="form-label small fw-semibold text-dark">Publication Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="published" {{ $currentStatus === 'published' ? 'selected' : '' }}>Published (Live immediately)</option>
                            <option value="scheduled" {{ $currentStatus === 'scheduled' ? 'selected' : '' }}>Scheduled (Future date)</option>
                            <option value="draft" {{ $currentStatus === 'draft' ? 'selected' : '' }}>Draft (Saved privately)</option>
                            <option value="archived" {{ $currentStatus === 'archived' ? 'selected' : '' }}>Archived</option>
                        </select>
                    </div>

                    <!-- Publish Date -->
                    <div class="mb-4">
                        <label for="published_at" class="form-label small fw-semibold text-dark">
                            Publish Date <span class="text-danger">*</span>
                        </label>
                        <input type="date" class="form-control rounded-3" id="published_at" name="published_at" value="{{ old('published_at', $blog->published_at ? $blog->published_at->format('Y-m-d') : date('Y-m-d')) }}" required>
                        <div class="form-text extra-small text-muted" id="publishDateHint">Date the article is scheduled or published.</div>
                    </div>

                    <!-- Author Name -->
                    <div class="mb-4">
                        <label for="author_name" class="form-label small fw-semibold text-dark">
                            Author Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control rounded-3 @error('author_name') is-invalid @enderror" id="author_name" name="author_name" value="{{ old('author_name', $blog->author_name ?: ($blog->user?->name ?? 'Admin')) }}" placeholder="e.g. John Doe, Dr. Jane Smith" maxlength="100" required>
                        <div class="form-text extra-small text-muted" id="authorNameHint">Mandatory. Alphabets, spaces, and single dots following a letter only.</div>
                        <div id="authorNameError" class="text-danger extra-small mt-1 fw-semibold d-none"></div>
                        @error('author_name')
                        <div class="text-danger extra-small mt-1 fw-semibold"><i class="bi bi-exclamation-circle-fill me-1"></i>{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg rounded-3 fs-6 fw-semibold d-flex align-items-center justify-content-center gap-2 shadow-sm" id="updateBlogBtn">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Update Blog Post</span>
                        </button>
                        <a href="{{ route('admin.blogs.index') }}" class="btn btn-light rounded-3 text-secondary">
                            Discard Changes
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<!-- CKEditor 5 Classic Official Open-Source Build -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.3.1/classic/ckeditor.js"></script>

<script type="module">
    $(document).ready(function () {
        let blogEditor;

        // Initialize CKEditor 5 Classic Editor
        ClassicEditor
            .create(document.querySelector('#description'), {
                toolbar: {
                    items: [
                        'heading', '|',
                        'bold', 'italic', 'link', '|',
                        'bulletedList', 'numberedList', '|',
                        'outdent', 'indent', '|',
                        'insertTable', 'blockQuote', 'mediaEmbed', '|',
                        'undo', 'redo'
                    ],
                    shouldNotGroupWhenFull: true
                },
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                    ]
                },
                placeholder: 'Write your comprehensive blog post content here...'
            })
            .then(editor => {
                blogEditor = editor;

                // Sync data to underlying textarea on editor change
                editor.model.document.on('change:data', () => {
                    const data = editor.getData();
                    $('#description').val(data);
                    if (data.trim().length > 0) {
                        $('#descriptionError').addClass('d-none');
                        $('.ck-editor').removeClass('border border-danger rounded');
                    }
                });
            })
            .catch(error => {
                console.error('Error initializing CKEditor 5:', error);
            });

        // Helper: Convert string to slug
        function slugify(text) {
            return text.toString().toLowerCase().trim()
                .replace(/\s+/g, '-')
                .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .replace(/^-+/, '')
                .replace(/-+$/, '');
        }

        // Slug management
        $('#slug').on('input', function () {
            const slugVal = slugify($(this).val());
            $('#serpLiveSlug').text(slugVal || 'your-blog-slug');
        });

        $('#autoGenerateSlugBtn').on('click', function () {
            const titleVal = $('#title').val();
            const generatedSlug = slugify(titleVal);
            $('#slug').val(generatedSlug);
            $('#serpLiveSlug').text(generatedSlug || 'your-blog-slug');
        });

        // Meta Title Live Counting & SERP Preview
        function updateSerpTitle() {
            const metaTitle = $('#meta_title').val().trim();
            const titleVal = $('#title').val().trim();
            const displayTitle = metaTitle || titleVal || 'Your Blog Post Title Here';
            $('#serpLiveTitle').text(displayTitle);
        }

        function updateMetaTitleCount() {
            const count = $('#meta_title').val().length;
            const counterEl = $('#metaTitleCount');
            counterEl.text(`${count} / 60 characters`);

            if (count === 0 || (count >= 40 && count <= 60)) {
                counterEl.attr('class', 'char-count good');
            } else if (count > 60) {
                counterEl.attr('class', 'char-count over');
            } else {
                counterEl.attr('class', 'char-count warn');
            }

            updateSerpTitle();
        }

        $('#title').on('input', updateSerpTitle);
        $('#meta_title').on('input', updateMetaTitleCount);

        // Meta Description Live Counting & SERP Preview
        function updateMetaDescCount() {
            const count = $('#meta_description').val().length;
            const counterEl = $('#metaDescCount');
            counterEl.text(`${count} / 160 characters`);

            if (count === 0 || (count >= 130 && count <= 160)) {
                counterEl.attr('class', 'char-count good');
            } else if (count > 160) {
                counterEl.attr('class', 'char-count over');
            } else {
                counterEl.attr('class', 'char-count warn');
            }

            const descVal = $('#meta_description').val().trim();
            $('#serpLiveDesc').text(descVal || 'Provide a meta description to preview how your summary appears in Google search engine result pages.');
        }

        $('#meta_description').on('input', updateMetaDescCount);

        // Run initial counter updates
        updateMetaTitleCount();
        updateMetaDescCount();

        // Sync Publish Date & Status automatically
        function syncPublishDateAndStatus() {
            const dateVal = $('#published_at').val();
            const todayStr = new Date().toISOString().split('T')[0];
            const currentStatus = $('#status').val();

            if (dateVal && dateVal > todayStr) {
                if (currentStatus === 'published') {
                    $('#status').val('scheduled');
                }
                updateButtonState('scheduled');
                $('#publishDateHint').html('<span class="text-primary fw-semibold"><i class="bi bi-clock-history me-1"></i>Scheduled for future publication on ' + dateVal + '</span>');
            } else {
                if (currentStatus === 'scheduled') {
                    $('#status').val('published');
                }
                updateButtonState($('#status').val());
                $('#publishDateHint').text('Date the article is scheduled or published.');
            }
        }

        function updateButtonState(status) {
            if (status === 'published') {
                $('#updateBlogBtn').html('<i class="bi bi-check-circle-fill me-1"></i> <span>Update Blog Post</span>');
            } else if (status === 'scheduled') {
                $('#updateBlogBtn').html('<i class="bi bi-clock-history me-1"></i> <span>Update Scheduled Blog</span>');
            } else if (status === 'draft') {
                $('#updateBlogBtn').html('<i class="bi bi-file-earmark-diff me-1"></i> <span>Save as Draft</span>');
            } else {
                $('#updateBlogBtn').html('<i class="bi bi-archive me-1"></i> <span>Save Archived</span>');
            }
        }

        $('#published_at').on('change input', syncPublishDateAndStatus);
        $('#status').on('change', function () {
            updateButtonState($(this).val());
        });

        // Initialize state on load
        syncPublishDateAndStatus();

        // Featured Image Preview & Drag-Drop Handling
        $('#browseImageBtn').on('click', function () {
            $('#featured_image').click();
        });

        $('#featured_image').on('change', function () {
            const file = this.files[0];
            if (file) {
                if (file.size > 5 * 1024 * 1024) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'File Too Large',
                        text: 'Featured image must be less than 5MB.'
                    });
                    $(this).val('');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#imagePreview').attr('src', e.target.result);
                    $('#imageFileInfo').text(file.name + ' (' + (file.size / 1024).toFixed(0) + ' KB)');
                    $('#uploadPlaceholder').addClass('d-none');
                    $('#imagePreviewContainer').removeClass('d-none');
                    $('#remove_featured_image').val('0');
                };
                reader.readAsDataURL(file);
            }
        });

        $('#removeImageBtn').on('click', function (e) {
            e.preventDefault();
            $('#featured_image').val('');
            $('#imagePreview').attr('src', '');
            $('#imageFileInfo').text('');
            $('#imagePreviewContainer').addClass('d-none');
            $('#uploadPlaceholder').removeClass('d-none');
            $('#remove_featured_image').val('1');
        });

        // Drag & drop support
        const dropArea = $('#dropArea');
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea[0].addEventListener(eventName, (e) => {
                e.preventDefault();
                dropArea.addClass('border-primary bg-primary-subtle');
            }, false);
        });
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea[0].addEventListener(eventName, (e) => {
                e.preventDefault();
                dropArea.removeClass('border-primary bg-primary-subtle');
            }, false);
        });
        dropArea[0].addEventListener('drop', (e) => {
            const dt = e.dataTransfer;
            const files = dt.files;
            if (files.length) {
                $('#featured_image')[0].files = files;
                $('#featured_image').trigger('change');
            }
        }, false);

        // Author Name Validation helper
        function validateAuthorName(val) {
            if (!val || !val.trim()) {
                return 'Author name is mandatory.';
            }
            const trimmed = val.trim();
            if (trimmed.startsWith('.')) {
                return 'Author name cannot start with a dot.';
            }
            if (trimmed.includes('..')) {
                return 'Author name cannot contain consecutive dots.';
            }
            if (!/^[a-zA-Z\s.]+$/.test(trimmed)) {
                return 'Author name can only contain alphabets, spaces, and single dots.';
            }
            if (!/[a-zA-Z]/.test(trimmed)) {
                return 'Author name must contain at least one alphabet letter.';
            }
            if (/[^a-zA-Z]\./.test(trimmed)) {
                return 'Dots can only appear immediately after an alphabet letter.';
            }
            return null;
        }

        function showAuthorError(msg) {
            $('#author_name').addClass('is-invalid');
            $('#authorNameError').html('<i class="bi bi-exclamation-circle-fill me-1"></i> ' + msg).removeClass('d-none');
        }

        function clearAuthorError() {
            $('#author_name').removeClass('is-invalid');
            $('#authorNameError').empty().addClass('d-none');
        }

        $('#author_name').on('input keyup blur', function () {
            const err = validateAuthorName($(this).val());
            if (err) {
                showAuthorError(err);
            } else {
                clearAuthorError();
            }
        });

        // Form Submit Validation & AJAX
        $('#blogEditForm').on('submit', function (e) {
            e.preventDefault();

            // Validate Author Name with Red Border Highlighting
            const authorErr = validateAuthorName($('#author_name').val());
            if (authorErr) {
                showAuthorError(authorErr);
                $('#author_name').focus();
                $('html, body').animate({ scrollTop: $('#author_name').offset().top - 140 }, 200);
                Swal.fire({
                    icon: 'error',
                    title: 'Author Name Validation',
                    text: authorErr
                });
                return false;
            } else {
                clearAuthorError();
            }

            // Pull content from CKEditor
            let editorData = '';
            if (blogEditor) {
                editorData = blogEditor.getData();
                $('#description').val(editorData);
            }

            const descriptionContent = $('#description').val().trim();
            if (!descriptionContent) {
                $('#descriptionError').removeClass('d-none');
                $('.ck-editor').addClass('border border-danger rounded');
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please write some content in the blog description editor.'
                });
                return false;
            }

            const form = $(this);
            const submitBtn = $('#updateBlogBtn');
            const originalBtnHtml = submitBtn.html();

            // Build FormData for multipart file upload with PUT method spoofing
            const formData = new FormData(this);
            formData.set('description', editorData);
            formData.set('_method', 'PUT');

            $.ajax({
                url: form.attr('action'),
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Updating...');
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'Blog post updated successfully.',
                        timer: 1500,
                        showConfirmButton: false
                    });

                    setTimeout(() => {
                        window.location.href = response.redirect || "{{ route('admin.blogs.index') }}";
                    }, 1200);
                },
                error: function (xhr) {
                    submitBtn.prop('disabled', false).html(originalBtnHtml);

                    if (xhr.status === 422) {
                        const res = xhr.responseJSON;
                        let msg = res.message || 'Please check the required fields.';
                        if (res && res.errors) {
                            if (res.errors.author_name) {
                                showAuthorError(res.errors.author_name[0]);
                                $('#author_name').focus();
                                $('html, body').animate({ scrollTop: $('#author_name').offset().top - 140 }, 200);
                            }
                            const firstError = Object.values(res.errors)[0];
                            if (firstError) msg = firstError[0];
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Failed',
                            text: msg
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message || 'Something went wrong while updating the blog.'
                        });
                    }
                }
            });
        });
    });
</script>
@endpush