{% extends "admin_base.html" %}
{% block content %}
<h1>{% if blog %}Edit{% else %}Add{% endif %} Blog Post</h1>
<form method="POST" enctype="multipart/form-data" id="blogForm">
    <div class="mb-3">
        {{ form.title.label(class="form-label") }}
        {{ form.title(class="form-control") }}
    </div>
    <div class="mb-3">
        {{ form.content.label(class="form-label") }}
        {{ form.content(class="form-control", id="editor", style="min-height: 400px;", required=False) }}
        <div class="invalid-feedback" id="content-error" style="display: none;">Content is required</div>
    </div>
    <div class="mb-3">
        {{ form.feature_image.label(class="form-label") }}
        {{ form.feature_image(class="form-control") }}
        <small class="form-text text-muted">Upload a featured image for your blog post</small>
        {% if blog and blog.feature_image %}
            <div class="mt-2">
                <p>Current image: {{ blog.feature_image }}</p>
                <img src="{{ url_for('static', filename='uploads/' + blog.feature_image) }}" alt="Feature image" class="img-thumbnail" style="max-height: 100px;">
            </div>
        {% endif %}
    </div>
    {% for i in range(1, 4) %}
    <div class="mb-3">
        {{ form['gallery_image_' + i|string].label(class="form-label") }}
        {{ form['gallery_image_' + i|string](class="form-control") }}
        <small class="form-text text-muted">Upload gallery image {{ i }}</small>
        {% set gallery_image = 'gallery_image_' + i|string %}
        {% if blog and blog[gallery_image] %}
            <div class="mt-2">
                <p>Current image: {{ blog[gallery_image] }}</p>
                <img src="{{ url_for('static', filename='uploads/' + blog[gallery_image]) }}" alt="Gallery image {{ i }}" class="img-thumbnail" style="max-height: 100px;">
            </div>
        {% endif %}
    </div>
    {% endfor %}
    <div class="mb-3">
        {{ form.meta_description.label(class="form-label") }}
        {{ form.meta_description(class="form-control") }}
        <small class="form-text text-muted">SEO description (max 160 characters)</small>
    </div>
    <div class="mb-3">
        {{ form.meta_keywords.label(class="form-label") }}
        {{ form.meta_keywords(class="form-control") }}
        <small class="form-text text-muted">SEO keywords, comma separated</small>
    </div>
    {{ form.submit(class="btn btn-primary") }}
</form>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.tiny.cloud/1/zvgzufaj3os715ov8ji6cl4nt3cej4fpiniamr9pavttjtlx/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        tinymce.init({
            selector: '#editor',
            height: 500,
            plugins: [
                'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 
                'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 
                'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | image | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            automatic_uploads: true,
            file_picker_types: 'image',
            /* TinyMCE's image upload handler */
            images_upload_url: "{{ url_for('admin_blueprint.upload_image_ckeditor') }}",
            images_upload_handler: function (blobInfo, success, failure) {
                var xhr, formData;
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', "{{ url_for('admin_blueprint.upload_image_ckeditor') }}");
                
                xhr.onload = function() {
                    var json;
                    if (xhr.status !== 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }
                    json = JSON.parse(xhr.responseText);
                    if (!json || !json.url) {
                        failure('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    success(json.url);
                };
                
                formData = new FormData();
                formData.append('upload', blobInfo.blob(), blobInfo.filename());
                xhr.send(formData);
            },
            setup: function(editor) {
                editor.on('init', function() {
                    {% if blog and blog.content %}
                        editor.setContent({{ blog.content|tojson|safe }});
                    {% endif %}
                });
            }
        });
        
        // Fix for form submission issue
        document.getElementById('blogForm').addEventListener('submit', function(e) {
            // Make sure any TinyMCE content is saved to form before submission
            if (typeof tinymce !== 'undefined') {
                tinymce.triggerSave();
                
                // Add custom validation for the content field
                var content = document.getElementById('editor').value.trim();
                if (!content) {
                    e.preventDefault(); // Stop the form submission
                    document.getElementById('content-error').style.display = 'block';
                    return false;
                } else {
                    document.getElementById('content-error').style.display = 'none';
                }
            }
        });

        // Override the form's submit method with the proper one
        var form = document.getElementById('blogForm');
        // Store the original HTMLFormElement.prototype.submit
        var originalSubmit = HTMLFormElement.prototype.submit;
        // Override the form's submit property
        Object.defineProperty(form, 'submit', {
            value: function() {
                return originalSubmit.apply(this, arguments);
            },
            writable: true,
            configurable: true
        });
    });
</script>
{% endblock %}