{% extends "admin/layout.html" %}
{% block title %}{% if blog %}Edit Blog Post{% else %}New Blog Post{% endif %} – Admin{% endblock %}

{% block body %}
<style>.ck-content {
    color: #000000;          /* black text */
    font-size: 1rem;         /* base size ~16px */
    line-height: 1.6;        /* comfortable spacing */
}

/* Make paragraphs larger */
.ck-content p {
    color: #000000;
    font-size: 1.125rem;     /* ~18px for paragraphs */
    line-height: 1.7;
   
}
</style>
<div class="flex items-center gap-3 mb-6">
    <a href="{{ full_url('/admin/blogs') }}" class="inline-flex items-center gap-2 text-sm text-primary dark:text-primary-light hover:underline">
        <i class="fa fa-arrow-left"></i> {% trans %}Back to Blogs{% endtrans %}
    </a>
    <span class="text-gray-300 dark:text-gray-600">/</span>
    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{% if blog %}{% trans %}Edit Blog Post{% endtrans %}{% else %}{% trans %}New Blog Post{% endtrans %}{% endif %}</h1>
</div>

{% if blog and blog.author_username %}
<div class="mb-5 px-4 py-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 flex items-center gap-3" data-testid="banner-submitter">
    <i class="fa fa-user-pen text-blue-500"></i>
    <div class="text-sm">
        <span class="font-semibold text-blue-800 dark:text-blue-300">{% trans %}User Submission{% endtrans %}</span>
        <span class="text-blue-600 dark:text-blue-400 ml-2">{% trans %}by{% endtrans %} <strong>{{ blog.author_username }}</strong>{% if blog.author_email %} ({{ blog.author_email }}){% endif %}</span>
    </div>
    <span class="ml-auto px-2.5 py-0.5 rounded-full text-xs font-bold
        {% if blog.status == 'published' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
        {% elif blog.status == 'pending_review' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
        {% elif blog.status == 'rejected' %}bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400
        {% else %}bg-gray-100 dark:bg-gray-800 text-gray-500{% endif %}">
        {{ blog.status|replace('_',' ')|title if blog.status else 'Draft' }}
    </span>
</div>
{% endif %}

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-5">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Title{% endtrans %} <span class="text-red-500">*</span></label>
                    <input type="text" class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-lg title" value="{{ blog.title if blog else '' }}" required data-testid="input-title">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Summary{% endtrans %} <span class="text-red-500">*</span></label>
                    <textarea class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all summary" rows="3" required data-testid="input-summary">{{ blog.summary if blog else '' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Content{% endtrans %}</label>
                    <textarea name="page-content" data-testid="input-content">{{ blog.content if blog else '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-5">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">{% trans %}Publish Settings{% endtrans %}</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide">{% trans %}Status{% endtrans %}</label>
                    <select class="status-select w-full px-3 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 text-sm" data-testid="select-status">
                        {% for s in ['draft', 'pending_review', 'pending_payment', 'published', 'rejected'] %}
                        <option value="{{ s }}" {% if blog and blog.status == s %}selected{% elif not blog and s == 'draft' %}selected{% endif %}>{{ s|replace('_',' ')|title }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link">
                    <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1.5 uppercase tracking-wide">{% trans %}Feature Image{% endtrans %}</label>
                    {% if blog and blog.image %}
                    <div class="mb-2 rounded-lg overflow-hidden h-28 bg-gray-100 dark:bg-gray-800">
                        <img src="/static/blogs/{{ blog.image }}" alt="" class="w-full h-full object-cover">
                    </div>
                    <p class="text-xs text-gray-400 mb-2">{% trans %}Current:{% endtrans %} {{ blog.image }}</p>
                    {% endif %}
                    <input type="file" class="w-full text-sm text-gray-500 dark:text-gray-400 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-primary/10 file:text-primary file:text-sm file:font-medium hover:file:bg-primary/20 transition-all featured-image" accept="image/*" data-testid="input-image">
                </div>
                <input type="hidden" class="featured-current" value="{{ blog.image if blog else '' }}">
                <button class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold shadow-lg shadow-primary/20 transition-all duration-300" type="button" id="submit" data-testid="button-submit">
                    <i class="fa fa-save"></i>{% if blog %}{% trans %}Save Changes{% endtrans %}{% else %}{% trans %}Create Post{% endtrans %}{% endif %}
                </button>
                {% if blog and blog.status == 'published' %}
                <a href="{{ full_url('/blogs/' ~ blog.slug) }}" target="_blank" class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-green-300 dark:border-green-700 text-green-700 dark:text-green-400 text-sm font-medium hover:bg-green-50 dark:hover:bg-green-900/20 transition-all">
                    <i class="fa fa-external-link-alt"></i> {% trans %}View Live Post{% endtrans %}
                </a>
                {% endif %}
            </div>
        </div>

        {% if blog and blog.created_at %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{% trans %}Details{% endtrans %}</h3>
            <div class="space-y-1.5 text-xs text-gray-500 dark:text-gray-400">
                <div class="flex justify-between"><span>{% trans %}Submitted{% endtrans %}</span><span>{{ blog.created_at[:10] if blog.created_at else '–' }}</span></div>
                {% if blog.updated_at and blog.updated_at != blog.created_at %}
                <div class="flex justify-between"><span>{% trans %}Updated{% endtrans %}</span><span>{{ blog.updated_at[:10] }}</span></div>
                {% endif %}
                {% if blog.publish_fee %}
                <div class="flex justify-between"><span>{% trans %}Publish Fee{% endtrans %}</span><span class="font-semibold text-orange-500">${{ '%.2f'|format(blog.publish_fee) }}</span></div>
                {% endif %}
                {% if blog.payment_status %}
                <div class="flex justify-between"><span>{% trans %}Payment{% endtrans %}</span><span>{{ blog.payment_status|replace('_',' ')|title }}</span></div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- CKEditor 5 Free Classic Build CDN -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
let editorInstance;

// Initialize CKEditor 5 Classic Editor (free version, no license key needed)
ClassicEditor
    .create(document.querySelector('[name="page-content"]'))
    .then(editor => { editorInstance = editor; 
        const editableElement = editor.ui.view.editable.element;
        editableElement.style.minHeight = '300px';  // or 400px
        editableElement.style.height = 'auto';       // allows expansion
        editableElement.style.overflowY = 'auto';   // scroll if content exceeds height

        // Optional: bigger font
        editableElement.style.fontSize = '1.125rem';
        editableElement.style.lineHeight = '1.6';
        editableElement.style.color = '#000000';
                })
    .catch(error => { console.error('CKEditor initialization error:', error); });

// Submit button handler
$("#submit").on("click", function() {
    const $btn = $(this);
    $btn.prop("disabled", true).html('<i class="fa fa-spinner fa-spin mr-2"></i>Saving...');

    const data = new FormData();
    const imgFiles = $('.featured-image')[0].files;
    if (imgFiles.length > 0) data.append('image', imgFiles[0]);

    // Get content from CKEditor 5
    data.append('content', editorInstance.getData());
    data.append('title', $(".title").val());
    data.append('summary', $(".summary").val());
    data.append('status', $(".status-select").val());
    data.append('featured', $(".featured-current").val());

    $.ajax({
        url: window.location.href,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        success: function(res) {
            $btn.prop("disabled", false).html('<i class="fa fa-save mr-2"></i>{{ "Save Changes" if blog else "Create Post" }}');
            if (res.status === "OK") {
                toastr.success("Blog post saved successfully.");
                setTimeout(() => { window.location.href = "{{ url('/admin/blogs') }}"; }, 1000);
            } else {
                toastr.error(res.message || "Unable to save blog post.");
            }
        },
        error: function() {
            $btn.prop("disabled", false).html('<i class="fa fa-save mr-2"></i>{{ "Save Changes" if blog else "Create Post" }}');
            toastr.error("An error occurred while saving.");
        }
    });
});
</script>
{% endblock %}