@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp


<style>
    .form-check-label {
        font-weight: 500;
        color: #6c757d;
    }

    .form-check-input:checked+.form-check-label {
        color: #198754;
    }
</style>
<div class="page-content">
    <div class="container-fluid">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card shadow-sm mb-4">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">

                    <div>
                        <h4 class="mb-1">{{ __('Blog Create') }}</h4>

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-transparent p-0 m-0">
                                <li class="breadcrumb-item">
                                    <a href="{{ route('Admin.Dashboard') }}" class="link-primary text-decoration-none">
                                        <i class="fa-solid fa-house me-1"></i> Dashboard
                                    </a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('blogs.index') }}" class="link-primary text-decoration-none">
                                        Blog
                                    </a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    Blog Create
                                </li>
                            </ol>
                        </nav>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="{{ route('blogs.index') }}" class="btn btn-primary global-list-btn">
                            <i class="bi bi-list me-1"></i> Blog List
                        </a>
                       
                    </div>
                </div>
            </div>
        </div>

        <form id="blog-create-form" method="POST" action="{{ route('blogs.store') }}" enctype="multipart/form-data"
            autocomplete="off" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" name="created_by" value="{{ $logged_in_user->id }}">
            <div class="row">
                <div class="col-xl-9 col-lg-8">
                    <!-- Blog Details -->
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex">
                                <div class="avatar-sm me-3">
                                    <div class="avatar-title rounded-circle bg-light text-primary fs-20">
                                        <i class="bi bi-file-earmark-text"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="card-title mb-1">Blog Details</h5>
                                    <p class="text-muted mb-0">Enter essential blog information below.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Title -->
                            <div class="mb-3">
                                <label class="form-label" for="blog-title-input">Blog Title <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control addTitle" name="title" id="blog-title-input"
                                    placeholder="e.g. How to Use Power Tools Safely" value="{{ old('title') }}"
                                    required>
                                <div class="invalid-feedback">Please enter a blog title.</div>
                            </div>

                            <!-- Permalink -->
                            <div class="form-group mb-3">
                                <label class="form-control-label active">Permalink: <span
                                        class="tx-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend custom-permalink">
                                        <span class="input-group-text">{{ url('/') }}/blog/</span>
                                    </div>
                                    <input class="form-control restrict-input-alphabets permalink" id="permalink"
                                        type="text" name="permalink" value="{{ old('permalink') }}"
                                        placeholder="how-to-use-power-tools-safely" required>
                                </div>
                                <div class="text-danger permalink_error"></div>
                                <input type="hidden" class="permalink_status" name="permalink_status"
                                    value="{{ old('permalink_status') }}" required>
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label class="form-label">Short Description</label>
                                <textarea name="description" class="form-control" rows="4" placeholder="Short description of the blog post...">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Blog Categories -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Blog Categories</h5>
                            <small class="text-muted">Organize your blog post by selecting relevant categories.</small>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Categories</label>
                                <select name="blog_category_ids[]" id="blog-categories"
                                    class="form-select select2-multiple" multiple size="5"
                                    style="width: 100%">
                                    <option></option> <!-- for placeholder -->
                                    @if (isset($blogCategories))
                                        @foreach ($blogCategories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ in_array($category->id, old('blog_category_ids', [])) ? 'selected' : '' }}>
                                                {{ $category->title }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                                <small class="text-muted">You can select multiple categories</small>
                            </div>
                        </div>
                    </div>

                     <!-- Main Blog Content Section -->
                     <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Main Blog Content</h5>
                            <small class="text-muted">Add detailed content for your blog post including formatting and
                                media.</small>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Blog Content</label>
                                <textarea name="content" class="form-control rich-editor" rows="15">{{ old('content') }}</textarea>
                            </div>
                        </div>
                    </div>


                    <!-- Image Section -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Image Section</h5>
                            <small class="text-muted">Add tagline and description that appear with your featured images.</small>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Image Tagline</label>
                                <input type="text" name="image_tagline" class="form-control" 
                                    value="{{ old('image_tagline') }}" 
                                    placeholder="Enter a tagline for your image section">
                                <small class="text-muted">A short tagline or heading for the image section.</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Image</label>
                                <input type="file" name="image" class="form-control" accept="image/*"
                                    id="imageInput">
                                <small class="text-muted">Upload an image for your image section.</small>
                                <div id="imagePreview" class="mt-2"></div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Image Alt Text</label>
                                <input type="text" name="image_alt_text" class="form-control"
                                    value="{{ old('image_alt_text') }}"
                                    placeholder="Enter a alt text for your image section">
                                <small class="text-muted">A short alt text for your image section.</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Image Description</label>
                                <textarea name="image_description" class="form-control rich-editor" rows="4" 
                                    placeholder="Enter description for your image section...">{{ old('image_description') }}</textarea>
                                <small class="text-muted">A detailed description that appears with your images.</small>
                            </div>
                        </div>
                    </div>

                     <!-- Video Section -->
                     <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Video Section</h5>
                            <small class="text-muted">Add video URL and content that appears after the video.</small>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Video URL</label>
                                <input type="url" name="video_url" class="form-control" 
                                    value="{{ old('video_url') }}" 
                                    placeholder="https://www.youtube.com/watch?v=... or https://vimeo.com/...">
                                <small class="text-muted">Enter a YouTube or Vimeo video URL to embed it in your blog post.</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Content After Video</label>
                                <textarea name="video_content" class="form-control rich-editor" rows="10" 
                                    placeholder="Add content that appears after the video...">{{ old('video_content') }}</textarea>
                                <small class="text-muted">This content will be displayed after the video section.</small>
                            </div>
                        </div>
                    </div>

                    

                    <!-- SEO -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">SEO Information <small class="text-muted">(Optional)</small>
                            </h5>
                        </div>
                        <div class="card-body">

                            <div class="mb-3">
                                <label class="form-label">SEO Title</label>
                                <input type="text" name="_seo_title" class="form-control"
                                    value="{{ old('_seo_title') }}" placeholder="SEO Title...">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">SEO Tags</label>
                                <input type="text" name="_seo_tags" class="form-control"
                                    value="{{ old('_seo_tags') }}" placeholder="SEO Tags...">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">SEO Description</label>
                                <textarea name="_seo_description" class="form-control" rows="3" placeholder="SEO Description...">{{ old('_seo_description') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Canonical URL</label>
                                <input type="url" name="_canonical_url" class="form-control"
                                    value="{{ old('_canonical_url') }}" placeholder="https://example.com/page-url">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Schema Markup (JSON-LD)</label>
                                <textarea name="_schema_markup" class="form-control" rows="6"
                                    placeholder='{ "@context": "https://schema.org", "@type": "BlogPosting", "headline": "Blog Title", "url": "https://example.com/blog-url" }'>{{ old('_schema_markup') }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Page Index</label>
                                <div class="form-check form-switch">
                                    <!-- Hidden input comes BEFORE checkbox to be overridden when checked -->
                                    <input type="hidden" name="_page_index" value="0">
                                    <input class="form-check-input" type="checkbox" id="pageIndexToggle"
                                        name="_page_index" value="1"
                                        {{ old('_page_index') == '1' ? 'checked' : '' }}>
                                    
                                </div>
                            </div>

                        </div>
                    </div>



                   
                </div>

                <!-- Sidebar Column -->
                <div class="col-xl-3 col-lg-4">
                    <!-- Status -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Status</h5>
                        </div>
                        <div class="card-body">
                            <label for="blog-status" class="form-label">Active Status</label>
                            <select name="active" class="form-select" id="blog-status">
                                <option value="0" @if (old('active') == 0) selected @endif>Draft</option>
                                <option value="1" @if (old('active') == 1) selected @endif>Published
                                </option>
                                <option value="2" @if (old('active') == 2) selected @endif>Private
                                </option>
                                
                            </select>
                        </div>
                    </div>

                    <!-- Media -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Blog Images</h5>
                        </div>
                        <div class="card-body">
                            <!-- Cover Image -->
                            <div class="mb-3">
                                <label class="form-label">Cover Image</label>
                                <input class="form-control" type="file" name="cover_image" accept="image/*"
                                    id="coverImageInput">
                                <small class="text-muted">Recommended: 1200x630px</small>
                                <div id="coverImagePreview" class="mt-2"></div>
                            </div>

                            <!-- Featured Images -->
                            <div class="mb-3">
                                <label class="form-label">Featured Images</label>
                                <input class="form-control" type="file" name="featured_images[]" accept="image/*"
                                    id="featuredImagesInput" multiple>
                                <div id="featuredImagesPreview" class="mt-2"></div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="blog-title-input">Feature Image alt Text </label>
                                <input type="text" class="form-control " name="fimage_alt_text"
                                    id="fimage_alt_text" placeholder="Please enter a Feature Image alt Text"
                                    value="{{ old('fimage_alt_text') }}" required>
                                <div class="invalid-feedback">Please enter a Feature Image alt Text.</div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Featured Blog</label>
                                <div class="form-check form-switch">
                                    <!-- Hidden input comes BEFORE checkbox to be overridden when checked -->
                                    <input type="hidden" name="is_featured" value="0">
                                    <input class="form-check-input" type="checkbox" id="isFeaturedToggle"
                                        name="is_featured" value="1"
                                        {{ old('is_featured') == '1' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="isFeaturedToggle">
                                        Mark this blog as featured
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end mb-3">
                        <button type="submit" class="btn btn-success w-100">
                            <i class="bi bi-plus-circle me-1"></i>Create Blog
                        </button>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>

<script>
    // Wait for document ready
    $(document).ready(function() {
        // Title to permalink conversion
        $('.addTitle').on('input', function() {
            var title = $(this).val();
            var permalink = title.replace(/\s+/g, '-').toLowerCase().replace(/[^\w\-]+/g, '');
            $('.permalink').val(permalink);
            validate_permalink();
        });

        $('.permalink').on('input', function() {
            validate_permalink();
        });

        // Image preview functionality
        const coverInput = document.getElementById('coverImageInput');
        const coverPreview = document.getElementById('coverImagePreview');
        const featuredInput = document.getElementById('featuredImagesInput');
        const featuredPreview = document.getElementById('featuredImagesPreview');
        const imageInput = document.getElementById('imageInput');
        const imagePreview = document.getElementById('imagePreview');

        // Cover image preview
        if (coverInput && coverPreview) {
            coverInput.addEventListener('change', function(event) {
                showPreviewImage(event.target.files[0], coverPreview);
            });
        }

        // Image preview
        if (imageInput && imagePreview) {
            imageInput.addEventListener('change', function(event) {
                showPreviewImage(event.target.files[0], imagePreview);
            });
        }

        // Featured images preview
        if (featuredInput && featuredPreview) {
            featuredInput.addEventListener('change', function(event) {
                showMultiplePreviewImages(event.target.files, featuredPreview);
            });
        }

        function showPreviewImage(file, container) {
            if (!file) {
                container.innerHTML = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '100%';
                img.style.maxHeight = '200px';
                img.style.objectFit = 'contain';
                img.className = "rounded border";

                container.innerHTML = '';
                container.appendChild(img);
            };
            reader.readAsDataURL(file);
        }

        function showMultiplePreviewImages(files, container) {
            container.innerHTML = '';

            if (!files || files.length === 0) {
                return;
            }

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(e) {
                    const div = document.createElement('div');
                    div.className = 'mb-2';

                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '100%';
                    img.style.maxHeight = '150px';
                    img.style.objectFit = 'contain';
                    img.className = "rounded border";

                    const caption = document.createElement('small');
                    caption.className = 'text-muted d-block mt-1';
                    caption.textContent = file.name;

                    div.appendChild(img);
                    div.appendChild(caption);
                    container.appendChild(div);
                };

                reader.readAsDataURL(file);
            }
        }
    });

    // Auto-dismiss alerts
    setTimeout(function() {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            alert.classList.remove('show');
            alert.classList.add('fade');
            setTimeout(() => alert.remove(), 500);
        });
    }, 5000);

    // Permalink validation function
    function validate_permalink() {
        var permalink = $('#permalink').val();

        if (!permalink) {
            $('.permalink_status').val('');
            $('.permalink_error').html('<small class="text-danger">Permalink is required.</small>');
            return;
        }

        $.ajax({
            url: '{{ route('blogs.check.permalink') }}',
            method: 'POST',
            data: {
                permalink: permalink,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            success: function(response) {
                if (response.available) {
                    $('.permalink_status').val('1');
                    $('.permalink_error').html('<small class="text-success">✓ ' + response.message + '</small>');
                } else {
                    $('.permalink_status').val('');
                    $('.permalink_error').html('<small class="text-danger">✗ ' + response.message + '</small>');
                }
            },
            error: function(xhr, status, error) {
                $('.permalink_status').val('');
                $('.permalink_error').html('<small class="text-danger">✗ Error checking permalink. Please try again.</small>');
            }
        });
    }
</script>

<script>
    $(document).ready(function() {
  
        
        // Check if Summernote is loaded
        if (typeof $.fn.summernote === 'undefined') {
            return;
        }
        
        // Initialize Summernote for video_content
        if ($('textarea[name="video_content"]').length && !$('textarea[name="video_content"]').hasClass('note-editable')) {
            $('textarea[name="video_content"]').summernote({
                height: 300,
                minHeight: 200,
                maxHeight: 500,
                focus: false,
                disableDragAndDrop: true,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                followingToolbar: false,
                dialogsInBody: true,
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
                shortcuts: false,
                callbacks: {
                    onPaste: function(e) {
                        setTimeout(() => {
                            var content = $(this).summernote('code');
                            content = content.replace(/<meta[^>]*>/gi, '');
                            content = content.replace(/<link[^>]*>/gi, '');
                            content = content.replace(/<!\[if[^>]*>.*?<!\[endif\]>/gsi, '');
                            content = content.replace(/<!--.*?-->/gs, '');
                            content = content.replace(/\s*style\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*class\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*data-[a-zA-Z0-9\-]*\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/<o:p[^>]*>.*?<\/o:p>/gsi, '');
                            content = content.replace(/<w:[^>]*>.*?<\/w:[^>]*>/gsi, '');
                            content = content.replace(/<m:[^>]*>.*?<\/m:[^>]*>/gsi, '');
                            content = content.replace(/<v:[^>]*>.*?<\/v:[^>]*>/gsi, '');
                            content = content.replace(/<font[^>]*>(.*?)<\/font>/gsi, '$1');
                            content = content.replace(/<p[^>]*><\/p>/gi, '');
                            content = content.replace(/<p[^>]*>/gi, '<p>');
                            content = content.replace(/<span[^>]*font-weight:\s*bold[^>]*>(.*?)<\/span>/gsi, '<strong>$1</strong>');
                            content = content.replace(/<span[^>]*font-style:\s*italic[^>]*>(.*?)<\/span>/gsi, '<em>$1</em>');
                            content = content.replace(/<span[^>]*>/gi, '');
                            content = content.replace(/<\/span>/gi, '');
                            content = content.replace(/<div[^>]*>/gi, '');
                            content = content.replace(/<\/div>/gi, '');
                            content = content.replace(/\s+/g, ' ');
                            content = content.replace(/\u00A0/g, ' ');
                            content = content.replace(/&nbsp;/g, ' ');
                            if (content.length > 50000) {
                                content = content.substring(0, 50000) + '...';
                            }
                            $(this).summernote('code', content);
                        }, 100);
                    },
                    onChange: function(contents, $editable) {
                        $(this).val(contents);
                    }
                }
            });
        }
        
        // Initialize Summernote for image_description
        if ($('textarea[name="image_description"]').length && !$('textarea[name="image_description"]').hasClass('note-editable')) {
            $('textarea[name="image_description"]').summernote({
                height: 300,
                minHeight: 200,
                maxHeight: 500,
                focus: false,
                disableDragAndDrop: true,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                followingToolbar: false,
                dialogsInBody: true,
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
                shortcuts: false,
                callbacks: {
                    onPaste: function(e) {
                        setTimeout(() => {
                            var content = $(this).summernote('code');
                            content = content.replace(/<meta[^>]*>/gi, '');
                            content = content.replace(/<link[^>]*>/gi, '');
                            content = content.replace(/<!\[if[^>]*>.*?<!\[endif\]>/gsi, '');
                            content = content.replace(/<!--.*?-->/gs, '');
                            content = content.replace(/\s*style\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*class\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*data-[a-zA-Z0-9\-]*\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/<o:p[^>]*>.*?<\/o:p>/gsi, '');
                            content = content.replace(/<w:[^>]*>.*?<\/w:[^>]*>/gsi, '');
                            content = content.replace(/<m:[^>]*>.*?<\/m:[^>]*>/gsi, '');
                            content = content.replace(/<v:[^>]*>.*?<\/v:[^>]*>/gsi, '');
                            content = content.replace(/<font[^>]*>(.*?)<\/font>/gsi, '$1');
                            content = content.replace(/<p[^>]*><\/p>/gi, '');
                            content = content.replace(/<p[^>]*>/gi, '<p>');
                            content = content.replace(/<span[^>]*font-weight:\s*bold[^>]*>(.*?)<\/span>/gsi, '<strong>$1</strong>');
                            content = content.replace(/<span[^>]*font-style:\s*italic[^>]*>(.*?)<\/span>/gsi, '<em>$1</em>');
                            content = content.replace(/<span[^>]*>/gi, '');
                            content = content.replace(/<\/span>/gi, '');
                            content = content.replace(/<div[^>]*>/gi, '');
                            content = content.replace(/<\/div>/gi, '');
                            content = content.replace(/\s+/g, ' ');
                            content = content.replace(/\u00A0/g, ' ');
                            content = content.replace(/&nbsp;/g, ' ');
                            if (content.length > 50000) {
                                content = content.substring(0, 50000) + '...';
                            }
                            $(this).summernote('code', content);
                        }, 100);
                    },
                    onChange: function(contents, $editable) {
                        $(this).val(contents);
                    }
                }
            });
        }
        
        // Ensure Summernote is initialized for blog content
        if ($('textarea[name="content"]').length && !$('textarea[name="content"]').hasClass('note-editable')) {
            $('textarea[name="content"]').summernote({
                height: 400,
                minHeight: 300,
                maxHeight: 600,
                focus: false,
                disableDragAndDrop: true,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                followingToolbar: false,
                dialogsInBody: true,
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '36', '48'],
                shortcuts: false,
                popover: {
                    image: [
                        ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                        ['float', ['floatLeft', 'floatRight', 'floatNone']],
                        ['remove', ['removeMedia']]
                    ],
                    link: [
                        ['link', ['linkDialogShow', 'unlink']]
                    ],
                    table: [
                        ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
                        ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
                    ],
                    air: [
                        ['color', ['color']],
                        ['font', ['bold', 'underline', 'clear']]
                    ]
                },
                callbacks: {
                    onPaste: function(e) {
                        setTimeout(() => {
                            var content = $(this).summernote('code');
                            // Clean Google Docs content
                            content = content.replace(/<meta[^>]*>/gi, '');
                            content = content.replace(/<link[^>]*>/gi, '');
                            content = content.replace(/<!\[if[^>]*>.*?<!\[endif\]>/gsi, '');
                            content = content.replace(/<!--.*?-->/gs, '');
                            content = content.replace(/\s*style\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*class\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/\s*data-[a-zA-Z0-9\-]*\s*=\s*["'][^"']*["']/gi, '');
                            content = content.replace(/<o:p[^>]*>.*?<\/o:p>/gsi, '');
                            content = content.replace(/<w:[^>]*>.*?<\/w:[^>]*>/gsi, '');
                            content = content.replace(/<m:[^>]*>.*?<\/m:[^>]*>/gsi, '');
                            content = content.replace(/<v:[^>]*>.*?<\/v:[^>]*>/gsi, '');
                            content = content.replace(/<font[^>]*>(.*?)<\/font>/gsi, '$1');
                            content = content.replace(/<p[^>]*><\/p>/gi, '');
                            content = content.replace(/<p[^>]*>/gi, '<p>');
                            content = content.replace(/<span[^>]*font-weight:\s*bold[^>]*>(.*?)<\/span>/gsi, '<strong>$1</strong>');
                            content = content.replace(/<span[^>]*font-style:\s*italic[^>]*>(.*?)<\/span>/gsi, '<em>$1</em>');
                            content = content.replace(/<span[^>]*>/gi, '');
                            content = content.replace(/<\/span>/gi, '');
                            content = content.replace(/<div[^>]*>/gi, '');
                            content = content.replace(/<\/div>/gi, '');
                            content = content.replace(/\s+/g, ' ');
                            content = content.replace(/\u00A0/g, ' ');
                            content = content.replace(/&nbsp;/g, ' ');
                            if (content.length > 50000) {
                                content = content.substring(0, 50000) + '...';
                            }
                            $(this).summernote('code', content);
                        }, 100);
                    },
                    onChange: function(contents, $editable) {
                        $(this).val(contents);
                    },
                    onInit: function() {
                        
                        // Fix dropdown menus after initialization
                        setTimeout(function() {
                            var $editor = $('textarea[name="content"]').next('.note-editor');
                            if ($editor.length) {
                                
                                // Fix style dropdown
                                $editor.find('.note-toolbar .note-btn-group').each(function() {
                                    var $group = $(this);
                                    var $btn = $group.find('.note-btn');
                                    
                                    if ($btn.hasClass('dropdown-toggle')) {
                                        $btn.on('click', function(e) {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            
                                            // Close other dropdowns
                                            $editor.find('.note-btn-group').removeClass('open');
                                            
                                            // Toggle current dropdown
                                            $group.toggleClass('open');
                                        });
                                    }
                                });
                                
                                // Close dropdowns when clicking outside
                                $(document).on('click', function(e) {
                                    if (!$(e.target).closest('.note-editor').length) {
                                        $editor.find('.note-btn-group').removeClass('open');
                                    }
                                });
                            }
                        }, 500);
                    }
                }
            });
        }
    });
</script>




<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2-multiple').select2({
        placeholder: "Select options",
        allowClear: true,
        width: 'resolve' // adapts to the container width
    });

    // Process base64 images before form submission to reduce payload size
    $('#blog-create-form').on('submit', function(e) {
        e.preventDefault();
        const form = $(this);
        
        // Show loading indicator
        const submitBtn = form.find('button[type="submit"]');
        const originalBtnText = submitBtn.html();
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing images...');
        
        // Process content, video_content, and image_description fields
        processSummernoteImages(form.find('textarea[name="content"]'), 'content', function() {
            processSummernoteImages(form.find('textarea[name="video_content"]'), 'video_content', function() {
                processSummernoteImages(form.find('textarea[name="image_description"]'), 'image_description', function() {
                    // All images processed, submit form
                    form.off('submit').submit();
                });
            });
        });
    });
});

// Function to process base64 and external images in Summernote content
function processSummernoteImages($textarea, fieldName, callback) {
    let content = $textarea.val();
    
    // First, check for external HTTP/HTTPS image URLs (not already local)
    const externalPattern = /<img([^>]*?)src="(https?:\/\/[^"]+)"([^>]*?)>/gi;
    const externalMatches = [];
    let externalMatch;
    
    while ((externalMatch = externalPattern.exec(content)) !== null) {
        const imageUrl = externalMatch[2];
        // Skip if already our local image
        if (imageUrl.indexOf('/blogs/content-images/') === -1 && 
            imageUrl.indexOf(window.location.origin + '/blogs/content-images/') === -1) {
            externalMatches.push({
                fullMatch: externalMatch[0],
                beforeSrc: externalMatch[1],
                imageUrl: imageUrl,
                afterSrc: externalMatch[3]
            });
        }
    }
    
    // Then, check if content has base64 images
    const base64Pattern = /<img([^>]*?)src="data:image\/([^;]+);base64,([^"]+)"([^>]*?)>/gi;
    const base64Matches = [];
    let base64Match;
    
    while ((base64Match = base64Pattern.exec(content)) !== null) {
        base64Matches.push({
            fullMatch: base64Match[0],
            beforeSrc: base64Match[1],
            imageType: base64Match[2],
            base64Data: base64Match[3],
            afterSrc: base64Match[4]
        });
    }
    
    const allMatches = externalMatches.map(m => ({...m, type: 'external'}))
        .concat(base64Matches.map(m => ({...m, type: 'base64'})));
    
    if (allMatches.length === 0) {
        // No images to process, proceed immediately
        if (callback) callback();
        return;
    }
    
    // Process images one by one
    let processedCount = 0;
    const totalImages = allMatches.length;
    
    allMatches.forEach(function(imgMatch, index) {
        if (imgMatch.type === 'external') {
            // Handle external URL
            $.ajax({
                url: '/admin/blogs/upload-content-image',
                method: 'POST',
                data: {
                    image_url: imgMatch.imageUrl,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success && response.url) {
                        // Replace external URL with local URL
                        const newImgTag = '<img' + imgMatch.beforeSrc + 'src="' + response.url + '"' + imgMatch.afterSrc + '>';
                        content = content.replace(imgMatch.fullMatch, newImgTag);
                        
                        processedCount++;
                        
                        // Update textarea value
                        $textarea.val(content);
                        
                        // If this is Summernote, update its code too
                        if ($textarea.hasClass('rich-editor') || $textarea.next('.note-editor').length > 0) {
                            $textarea.summernote('code', content);
                        }
                        
                        // All images processed
                        if (processedCount === totalImages) {
                            if (callback) callback();
                        }
                    } else {
                        console.error('Failed to download external image:', response);
                        // Continue even if one image fails
                        processedCount++;
                        if (processedCount === totalImages) {
                            if (callback) callback();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error downloading external image:', error);
                    // Continue even if one image fails
                    processedCount++;
                    if (processedCount === totalImages) {
                        if (callback) callback();
                    }
                }
            });
        } else {
            // Handle base64 image
            const base64Data = imgMatch.base64Data;
            const imageType = imgMatch.imageType;
            const mimeType = 'image/' + imageType;
            
            // Decode base64
            const byteCharacters = atob(base64Data);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: mimeType });
            
            // Create FormData for upload
            const formData = new FormData();
            formData.append('image', blob, 'blog_image_' + Date.now() + '_' + index + '.' + imageType);
            formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
            
            // Upload image via AJAX
            $.ajax({
                url: '/admin/blogs/upload-content-image',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success && response.url) {
                        // Replace base64 image with URL
                        const newImgTag = '<img' + imgMatch.beforeSrc + 'src="' + response.url + '"' + imgMatch.afterSrc + '>';
                        content = content.replace(imgMatch.fullMatch, newImgTag);
                        
                        processedCount++;
                        
                        // Update textarea value
                        $textarea.val(content);
                        
                        // If this is Summernote, update its code too
                        if ($textarea.hasClass('rich-editor') || $textarea.next('.note-editor').length > 0) {
                            $textarea.summernote('code', content);
                        }
                        
                        // All images processed
                        if (processedCount === totalImages) {
                            if (callback) callback();
                        }
                    } else {
                        console.error('Failed to upload image:', response);
                        // Continue even if one image fails
                        processedCount++;
                        if (processedCount === totalImages) {
                            if (callback) callback();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error uploading image:', error);
                    // Continue even if one image fails
                    processedCount++;
                    if (processedCount === totalImages) {
                        if (callback) callback();
                    }
                }
            });
        }
    });
}
</script>