@extends('layouts.admin')

@section('title', __('business.posts.title'))
@section('content')
    <x-admin.page-header
        :title="__('business.posts.title')"
        :description="__('business.posts.description')"
        :eyebrow="__('business.tabs.publishing')"
    />

    @php
        $blogContent = $blogSetting->data();
        $blogCategories = old('categories', $blogContent['categories'] ?? []);
        $selectedPopular = old('popular.post_slugs', $blogContent['popular']['post_slugs'] ?? []);
    @endphp

    {{-- إعدادات صفحة دليل المدونة كما تظهر في الواجهة الأمامية --}}
    <section class="panel form-stack" style="gap: 1.5rem;">
        <div class="section-heading">
            <p class="eyebrow">صفحة المدونة</p>
            <h2>محتوى وترتيب صفحة المدونة في الواجهة الأمامية</h2>
            <p class="field-hint">عدّل رأس الصفحة والتصنيفات والمقال المميز والشائعة وأحدث المقالات والدعوة الختامية من مكان واحد.</p>
        </div>

        <form method="POST" action="{{ route('admin.posts.settings.update') }}" class="form-stack" style="gap: 1.5rem;">
            @csrf @method('PUT')
            <input type="hidden" name="lock_version" value="{{ $blogSetting->lock_version }}">

            <div class="panel" style="border: 1px solid rgba(255,255,255,.1); padding: 1.25rem;">
                <h3>العنوان والوصف</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>عنوان الصفحة</label>
                        <input name="title" required value="{{ old('title', $blogContent['title']) }}">
                    </div>
                    <div class="field">
                        <label>نص زر كل المقالات</label>
                        <input name="all_articles_label" required value="{{ old('all_articles_label', $blogContent['all_articles_label']) }}">
                    </div>
                    <div class="field full">
                        <label>الوصف التعريفي</label>
                        <textarea name="description" rows="3" required>{{ old('description', $blogContent['description']) }}</textarea>
                    </div>
                </div>
                <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end;">
                    <button type="submit" class="button" style="padding: 0.45rem 1.25rem; font-size: 0.85rem;">💾 حفظ إعدادات الصفحة</button>
                </div>
            </div>

            <div class="panel" style="border: 1px solid rgba(255,255,255,.1); padding: 1.25rem;">
                <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;">
                    <div>
                        <h3 style="margin:0;">تصنيفات المقالات</h3>
                        <p class="field-hint">يمكن إضافة التصنيفات أو تعديلها أو حذفها وترتيبها.</p>
                    </div>
                    <button type="button" class="button secondary" data-ui-action="add-blog-category">+ إضافة تصنيف</button>
                </div>
                <div id="blog-categories" class="form-stack" style="margin-top:1rem;">
                    @foreach($blogCategories as $index => $category)
                        <div class="blog-category-row form-grid panel" style="padding:1rem;border:1px solid rgba(255,255,255,.08);">
                            <div class="field">
                                <label>اسم التصنيف</label>
                                <input name="categories[{{ $index }}][name]" required value="{{ $category['name'] ?? '' }}">
                            </div>
                            <div class="field">
                                <label>الرمز (Slug)</label>
                                <input name="categories[{{ $index }}][slug]" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" value="{{ $category['slug'] ?? '' }}">
                            </div>
                            <div class="field">
                                <label>الترتيب</label>
                                <input type="number" min="0" name="categories[{{ $index }}][order]" required value="{{ $category['order'] ?? ($index + 1) }}">
                            </div>
                            <div class="field" style="display:flex;align-items:end;justify-content:space-between;gap:.75rem;">
                                <label class="toggle-control">
                                    <input type="hidden" name="categories[{{ $index }}][is_visible]" value="0">
                                    <input type="checkbox" name="categories[{{ $index }}][is_visible]" value="1" @checked(!isset($category['is_visible']) || $category['is_visible'])>
                                    <span>ظاهر</span>
                                </label>
                                <button type="button" class="button button-danger" data-ui-action="remove-closest" data-ui-arg1=".blog-category-row" data-ui-arg2="blog-categories">حذف</button>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end;">
                    <button type="submit" class="button" style="padding: 0.45rem 1.25rem; font-size: 0.85rem;">💾 حفظ إعدادات الصفحة</button>
                </div>
            </div>

            <div class="panel" style="border:1px solid rgba(255,255,255,.1);padding:1.25rem;">
                <h3>المقال المميز</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>عنوان السيكشن</label>
                        <input name="featured[label]" required value="{{ old('featured.label', $blogContent['featured']['label']) }}">
                    </div>
                    <div class="field">
                        <label>المقال المميز</label>
                        <select name="featured[post_slug]">
                            <option value="">بدون مقال مميز</option>
                            @foreach($posts as $post)
                                <option value="{{ $post->slug }}" @selected(old('featured.post_slug', $blogContent['featured']['post_slug']) === $post->slug)>{{ $post->activeRevision()?->title ?? $post->slug }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field full">
                        <label>نص زر القراءة</label>
                        <input name="featured[button_text]" required value="{{ old('featured.button_text', $blogContent['featured']['button_text']) }}">
                    </div>
                </div>
                <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end;">
                    <button type="submit" class="button" style="padding: 0.45rem 1.25rem; font-size: 0.85rem;">💾 حفظ إعدادات الصفحة</button>
                </div>
            </div>

            <div class="panel" style="border:1px solid rgba(255,255,255,.1);padding:1.25rem;">
                <h3>المقالات الشائعة</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>عنوان السيكشن</label>
                        <input name="popular[title]" required value="{{ old('popular.title', $blogContent['popular']['title']) }}">
                    </div>
                    <div class="field">
                        <label>نص زر القراءة</label>
                        <input name="popular[button_text]" required value="{{ old('popular.button_text', $blogContent['popular']['button_text']) }}">
                    </div>
                    <div class="field full">
                        <label>اختر المقالات الشائعة</label>
                        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.75rem;margin-top:.5rem;">
                            @foreach($posts as $post)
                                <label class="toggle-control" style="border:1px solid rgba(255,255,255,.08);padding:.75rem;border-radius:.75rem;">
                                    <input type="checkbox" name="popular[post_slugs][]" value="{{ $post->slug }}" @checked(in_array($post->slug, $selectedPopular, true))>
                                    <span>{{ $post->activeRevision()?->title ?? $post->slug }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end;">
                    <button type="submit" class="button" style="padding: 0.45rem 1.25rem; font-size: 0.85rem;">💾 حفظ إعدادات الصفحة</button>
                </div>
            </div>

            <div class="panel" style="border:1px solid rgba(255,255,255,.1);padding:1.25rem;">
                <h3>أحدث المقالات والدعوة الختامية</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>عنوان أحدث المقالات</label>
                        <input name="latest[title]" required value="{{ old('latest.title', $blogContent['latest']['title']) }}">
                    </div>
                    <div class="field">
                        <label>نص زر قراءة المقال</label>
                        <input name="latest[button_text]" required value="{{ old('latest.button_text', $blogContent['latest']['button_text']) }}">
                    </div>
                    <div class="field full">
                        <label class="toggle-control">
                            <input type="hidden" name="cta[is_visible]" value="0">
                            <input type="checkbox" name="cta[is_visible]" value="1" @checked(old('cta.is_visible', $blogContent['cta']['is_visible']))>
                            <span>إظهار الدعوة الختامية</span>
                        </label>
                    </div>
                    <div class="field full">
                        <label>عنوان الدعوة</label>
                        <input name="cta[title]" required value="{{ old('cta.title', $blogContent['cta']['title']) }}">
                    </div>
                    <div class="field full">
                        <label>وصف الدعوة</label>
                        <textarea name="cta[description]" rows="2" required>{{ old('cta.description', $blogContent['cta']['description']) }}</textarea>
                    </div>
                    <div class="field">
                        <label>نص الزر</label>
                        <input name="cta[button_text]" required value="{{ old('cta.button_text', $blogContent['cta']['button_text']) }}">
                    </div>
                    <div class="field">
                        <label>رابط الزر</label>
                        <input name="cta[button_url]" required value="{{ old('cta.button_url', $blogContent['cta']['button_url']) }}">
                    </div>
                    <div class="field">
                        <label>فتح الرابط في</label>
                        <select name="cta[button_target]">
                            <option value="_self" @selected(old('cta.button_target', $blogContent['cta']['button_target']) === '_self')>نفس الصفحة</option>
                            <option value="_blank" @selected(old('cta.button_target', $blogContent['cta']['button_target']) === '_blank')>نافذة جديدة</option>
                        </select>
                    </div>
                </div>
                <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: flex-end;">
                    <button type="submit" class="button" style="padding: 0.45rem 1.25rem; font-size: 0.85rem;">💾 حفظ إعدادات الصفحة</button>
                </div>
            </div>

            <div class="form-actions">
                <button class="button" type="submit">💾 حفظ سيكشنات صفحة المدونة</button>
            </div>
        </form>
    </section>

    {{-- 1. لوحة إضافة مقال جديد --}}
    <section class="panel form-stack">
        <div class="section-heading" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h2>{{ __('business.publishing.heading') }}</h2>
                <p class="field-hint">أنشئ مسودة مقال جديد بالكامل (البيانات، الأقسام، صندوق الخلاصة، والـ CTA).</p>
            </div>
            <button type="button" class="button" data-ui-action="toggle-target" data-ui-arg1="create-post-container">
                + {{ __('business.publishing.create_draft') }}
            </button>
        </div>

        <div id="create-post-container" class="hidden" style="margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem;">
            <form class="form-stack" method="POST" action="{{ route('admin.posts.store') }}" style="gap: 2rem;">
                @csrf

                {{-- BLOCK 1: البيانات الأساسية والصورة --}}
                <div style="border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 1.5rem; background: rgba(255,255,255,0.02);">
                    <h3 style="margin: 0 0 1.25rem; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.75rem;">
                        1️⃣ البيانات الأساسية وصورة المقال
                    </h3>
                    <div class="form-grid">
                        <div class="field">
                            <label for="new_post_title">{{ __('business.common.title') }} (عنوان المقال)</label>
                            <input id="new_post_title" name="title" value="{{ old('title') }}" required placeholder="مثال: كيف تغيّر وكلاء الذكاء الاصطناعي طريقة إدارة الأعمال؟">
                        </div>

                        <div class="field">
                            <label for="new_post_slug">{{ __('business.common.slug') }} (الرابط الدائم)</label>
                            <input id="new_post_slug" name="slug" value="{{ old('slug') }}" pattern="[a-z0-9]+(?:-[a-z0-9]+)*" required placeholder="ai-agents-business">
                        </div>

                        <div class="field">
                            <label for="new_post_category">التصنيف (Category)</label>
                            <input id="new_post_category" name="category" value="{{ old('category', 'الذكاء الاصطناعي') }}" placeholder="الذكاء الاصطناعي، أنظمة الإدارة، تطبيقات الجوال">
                        </div>

                        <div class="field">
                            <label for="new_post_reading_time">مدة القراءة</label>
                            <input id="new_post_reading_time" name="reading_time" value="{{ old('reading_time', '6 دقائق') }}" placeholder="6 دقائق">
                        </div>

                        <div class="field">
                            <label for="new_post_author">اسم الكاتب / الجهة</label>
                            <input id="new_post_author" name="author_name" value="{{ old('author_name', 'Seven Tech') }}">
                        </div>

                        <div class="field full" style="border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 1rem; background: rgba(0,0,0,0.2);">
                            <label for="new_post_image">صورة المقال الرئيسية (Hero Cover Image)</label>
                            <x-admin.media-picker
                                name="cover_image_url"
                                id="new_post_image"
                                value-mode="url"
                                :selected="old('cover_image_url')"
                            />
                            <input name="cover_image_alt" value="{{ old('cover_image_alt') }}" placeholder="النص البديل للصورة (ALT text للـ SEO)" style="margin-top: 0.75rem;">
                        </div>

                        <div class="field full">
                            <label for="new_post_excerpt">{{ __('business.publishing.excerpt') }} (الوصف المختصر لكارت المدونة)</label>
                            <textarea id="new_post_excerpt" name="excerpt" rows="2" placeholder="الوصف المختصر الذي يظهر في كارت المقال بدليل المدونة...">{{ old('excerpt') }}</textarea>
                        </div>
                    </div>
                    <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                        <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 إنشاء وحفظ المسودة</button>
                    </div>
                </div>

                {{-- BLOCK 2: مقدمة وأقسام المقال (Dynamic Content Sections) --}}
                <div style="border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 1.5rem; background: rgba(255,255,255,0.02);">
                    <h3 style="margin: 0 0 1.25rem; color: #ff8a3d; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.75rem;">
                        2️⃣ مقدمة وأقسام المقال التفصيلية (محتوى المقال كما بالصورة الثالثة)
                    </h3>

                    <div class="form-stack">
                        <div class="field">
                            <label for="new_post_intro">مقدمة المقال (Intro Paragraph)</label>
                            <p class="field-hint">الفقرة الافتتاحية الكبيرة التي تظهر أعلى المقال تحت الصورة مباشرة.</p>
                            <textarea id="new_post_intro" name="intro" rows="3" placeholder="وكيل الذكاء الاصطناعي مش مجرد شات بوت بيرد على الأسئلة — ده نظام يقدر يفهم هدفًا، يخطط خطوات، وينفذها تلقائيًا...">{{ old('intro') }}</textarea>
                        </div>

                        <div style="border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.25rem; margin-top: 1rem;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                                <div>
                                    <h4 style="margin: 0; font-size: 1.05rem; color: #fff;">أقسام المقال (Dynamic Content Sections)</h4>
                                    <p class="field-hint" style="margin: 0.2rem 0 0;">أضف أي عدد من الأقسام مع عناوينها ومحتواها التفصيلي.</p>
                                </div>
                                <button type="button" class="button secondary" data-ui-action="add-article-section" data-ui-arg1="new_post_sections_container" data-ui-arg2="new" style="font-size: 0.85rem;">
                                    + إضافة قسم جديد
                                </button>
                            </div>

                            <div id="new_post_sections_container" class="form-stack" style="gap: 1rem;">
                                <div class="article-section-card panel" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.25rem; background: rgba(0,0,0,0.25); position: relative;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
                                        <strong style="color: var(--accent, #f97316); font-size: 0.95rem;">
                                            قسم #<span class="section-num">1</span>
                                        </strong>
                                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                                            <label class="toggle-control" style="font-size: 0.8rem; margin: 0;">
                                                <input type="hidden" name="content_sections[0][is_visible]" value="0">
                                                <input type="checkbox" name="content_sections[0][is_visible]" value="1" checked>
                                                <span>إظهار القسم</span>
                                            </label>
                                            <button type="button" class="button secondary" style="padding: 0.2rem 0.5rem; color: #ef4444;" data-ui-action="remove-closest" data-ui-arg1=".article-section-card" data-ui-arg2="new_post_sections_container">
                                                ✕ حذف
                                            </button>
                                        </div>
                                    </div>
                                    <input type="hidden" name="content_sections[0][id]" value="sec-1">
                                    <input type="hidden" name="content_sections[0][sort_order]" value="1" class="section-order-input">
                                    <div class="form-grid">
                                        <div class="field full">
                                            <label>عنوان القسم</label>
                                            <input name="content_sections[0][section_title]" placeholder="مثال: إيه الفرق بين الشات بوت والوكيل الذكي؟">
                                        </div>
                                        <div class="field full">
                                            <label>محتوى القسم</label>
                                            <textarea name="content_sections[0][section_content]" rows="4" placeholder="نص المحتوى والشرح التفصيلي للقسم..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                        <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 إنشاء وحفظ المسودة</button>
                    </div>
                </div>

                {{-- BLOCK 3: صندوق الخلاصة --}}
                <div style="border: 1px solid rgba(255, 120, 32, 0.3); border-radius: 14px; padding: 1.5rem; background: rgba(255, 120, 32, 0.03);">
                    <h3 style="margin: 0 0 1.25rem; color: var(--accent, #f97316); font-size: 1.1rem; border-bottom: 1px solid rgba(255, 120, 32, 0.15); padding-bottom: 0.75rem;">
                        3️⃣ 💡 صندوق الخلاصة (Conclusion Callout Box)
                    </h3>
                    <div class="form-grid">
                        <div class="field" style="display: flex; align-items: center;">
                            <label class="toggle-control">
                                <input type="hidden" name="conclusion[is_visible]" value="0">
                                <input type="checkbox" name="conclusion[is_visible]" value="1" checked>
                                <span>إظهار صندوق الخلاصة في نهاية المقال</span>
                            </label>
                        </div>

                        <div class="field">
                            <label>شارة / عنوان الصندوق (Label)</label>
                            <input name="conclusion[label]" value="{{ old('conclusion.label', 'الخلاصة') }}">
                        </div>

                        <div class="field full">
                            <label>نص الخلاصة المركزة (يظهر داخل البوكس البرتقالي المميز بأسفل المقال)</label>
                            <textarea name="conclusion[text]" rows="3" placeholder="الوكلاء الذكياء بيحولوا الذكاء الاصطناعي من أداة إجابات لموظف رقمي ينفذ شغل حقيقي...">{{ old('conclusion.text') }}</textarea>
                        </div>
                    </div>
                    <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                        <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 إنشاء وحفظ المسودة</button>
                    </div>
                </div>

                {{-- BLOCK 4: كارت الدعوة لاتخاذ إجراء (CTA) --}}
                <div style="border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 1.5rem; background: rgba(255, 255, 255, 0.02);">
                    <h3 style="margin: 0 0 1.25rem; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.75rem;">
                        4️⃣ 🚀 كارت الدعوة لاتخاذ إجراء (Call to Action Card)
                    </h3>
                    <div class="form-grid">
                        <div class="field full">
                            <label class="toggle-control">
                                <input type="hidden" name="cta[is_visible]" value="0">
                                <input type="checkbox" name="cta[is_visible]" value="1" checked>
                                <span>إظهار كارت الـ CTA بعد المقال</span>
                            </label>
                        </div>

                        <div class="field">
                            <label>عنوان الـ CTA</label>
                            <input name="cta[title]" value="{{ old('cta.title', 'هل تبحث عن شريك تقني يفهم تحديات عملك ويشاركك شغف النجاح؟') }}">
                        </div>

                        <div class="field">
                            <label>وصف الـ CTA</label>
                            <input name="cta[description]" value="{{ old('cta.description', 'أكثر من 20 عاماً من الخبرة التقنية نضعها في خدمة نمو مشروعك وبناء حلول رقمية موثوقة.') }}">
                        </div>

                        <div class="field">
                            <label>نص الزر</label>
                            <input name="cta[btn_text]" value="{{ old('cta.btn_text', 'تواصل مع فريقنا الهندسي') }}">
                        </div>

                        <div class="field">
                            <label>رابط الزر</label>
                            <input name="cta[btn_url]" value="{{ old('cta.btn_url', '/contact') }}" placeholder="/contact أو رابط WhatsApp">
                        </div>

                        <div class="field">
                            <label>فتح الرابط في</label>
                            <select name="cta[btn_target]">
                                <option value="_self" selected>نفس الصفحة (_self)</option>
                                <option value="_blank">نافذة جديدة (_blank)</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                        <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 إنشاء وحفظ المسودة</button>
                    </div>
                </div>

                <div class="form-actions full" style="margin-top: 1rem;">
                    <button class="button" style="font-size: 1rem; padding: 0.75rem 2.5rem;">+ {{ __('business.publishing.create_draft') }}</button>
                </div>
            </form>
        </div>
    </section>

    {{-- 2. قائمة المقالات ومحرر كل مقال --}}
    <section class="panel form-stack">
        <div class="section-heading">
            <div>
                <h2>{{ __('business.posts.list') }} ({{ $posts->count() }} مقال)</h2>
                <p class="field-hint">تعديل محتوى كل مقال بالكامل (البيانات، مقدمة المقال والأقسام التفصيلية، صندوق الخلاصة، والـ CTA).</p>
            </div>
        </div>

        <div class="form-stack" style="gap: 2rem;">
            @forelse($posts as $post)
                @php
                    $revision = $post->activeRevision() ?? $post->revisions->first();
                    $sections = $revision ? $revision->articleSections() : [];
                    $conclusion = $revision ? $revision->conclusionData() : ['is_visible' => true, 'label' => 'الخلاصة', 'text' => ''];
                    $cta = $revision ? $revision->ctaData() : ['is_visible' => true, 'title' => 'هل تبحث عن شريك تقني يفهم تحديات عملك ويشاركك شغف النجاح؟', 'description' => 'أكثر من 20 عاماً من الخبرة التقنية نضعها في خدمة نمو مشروعك وبناء حلول رقمية موثوقة.', 'btn_text' => 'تواصل مع فريقنا الهندسي', 'btn_url' => '/contact', 'btn_target' => '_self'];
                    $coverImg = $revision?->cover_image_url ?: ($post->cover_image_url ?: '/images/blog/placeholder.jpg');
                @endphp

                <article class="panel" style="border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 1.75rem; background: rgba(255,255,255,0.02);">
                    {{-- Article Header Bar --}}
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1rem;">
                        <div style="display: flex; align-items: center; gap: 1rem;">
                            <div style="width: 80px; height: 55px; border-radius: 8px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.15);">
                                <img id="post_card_thumb_{{ $post->id }}" src="{{ $coverImg }}" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                            <div>
                                <h3 style="margin: 0 0 0.25rem; font-size: 1.2rem; color: #fff;">
                                    {{ $revision?->title ?? $post->slug }}
                                </h3>
                                <div style="display: flex; gap: 0.75rem; font-size: 0.85rem; color: var(--muted, #888); flex-wrap: wrap;">
                                    <span style="color: var(--accent, #f97316); font-weight: 600;">{{ $revision?->category ?: ($post->category ?: 'عام') }}</span>
                                    <span>&middot;</span>
                                    <span>الرابط: <code>/blog/{{ $post->slug }}</code></span>
                                    <span>&middot;</span>
                                    <span>{{ __('business.publishing.revision', ['number' => $revision?->revision_number ?? 1]) }}</span>
                                    <span>&middot;</span>
                                    <span class="badge" style="background: rgba(255, 120, 32, 0.15); color: #ff8a3d; padding: 0.15rem 0.5rem; border-radius: 4px;">
                                        {{ $revision ? __('business.statuses.'.$revision->status->value) : 'مسودة' }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                            <a href="{{ route('blog.show', $post) }}" target="_blank" class="button secondary" style="font-size: 0.85rem; padding: 0.4rem 0.8rem;">
                                👁️ معاينة المقال بالـ Frontend
                            </a>
                            <x-admin.delete-button entity="posts" :record="$post->slug" />
                        </div>
                    </div>

                    {{-- Form for editing and creating a new revision --}}
                    @if($revision)
                        <form method="POST" action="{{ route('admin.posts.revise', $post) }}" class="form-stack" style="gap: 2rem;">
                            @csrf
                            <input type="hidden" name="lock_version" value="{{ $post->lock_version }}">

                            {{-- BLOCK 1: البيانات الأساسية وصورة المقال --}}
                            <div style="border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.5rem; background: rgba(0,0,0,0.15);">
                                <h4 style="margin: 0 0 1.25rem; color: #fff; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.6rem;">
                                    1️⃣ البيانات الأساسية وصورة المقال
                                </h4>
                                <div class="form-grid">
                                    <div class="field full">
                                        <label>عنوان المقال (Article Title)</label>
                                        <input name="title" value="{{ old('title', $revision->title) }}" required style="font-size: 1.1rem; font-weight: bold;">
                                    </div>

                                    <div class="field">
                                        <label>التصنيف (Category)</label>
                                        <input name="category" value="{{ old('category', $revision->category ?: $post->category) }}" placeholder="الذكاء الاصطناعي">
                                    </div>

                                    <div class="field">
                                        <label>مدة القراءة (Reading Time)</label>
                                        <input name="reading_time" value="{{ old('reading_time', $revision->reading_time ?: '6 دقائق') }}" placeholder="6 دقائق">
                                    </div>

                                    <div class="field">
                                        <label>اسم الكاتب / الجهة</label>
                                        <input name="author_name" value="{{ old('author_name', $revision->author_name ?: 'Seven Tech') }}">
                                    </div>

                                    <div class="field">
                                        <label>الرابط الدائم (Slug)</label>
                                        <input value="{{ $post->slug }}" disabled style="opacity: 0.7;" title="الرابط ثابت للمقال">
                                    </div>

                                    {{-- Image Upload & Preview --}}
                                    <div class="field full" style="border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 1rem; background: rgba(0,0,0,0.2);">
                                        <label>صورة المقال الرئيسية (Hero Cover Image)</label>
                                        <x-admin.media-picker
                                            name="cover_image_url"
                                            :id="'post_img_input_'.$post->id"
                                            value-mode="url"
                                            :selected="old('cover_image_url', $revision->cover_image_url ?: $post->cover_image_url)"
                                        />
                                        <input name="cover_image_alt" value="{{ old('cover_image_alt', $revision->cover_image_alt ?: ($revision->title.' Image')) }}" placeholder="النص البديل للصورة (ALT text للـ SEO)" style="margin-top: 0.75rem;">
                                    </div>

                                    <div class="field full">
                                        <label>الوصف المختصر (Excerpt لكارت المدونة)</label>
                                        <textarea name="excerpt" rows="2" placeholder="الوصف المختصر الذي يظهر في كارت المقال بدليل المدونة...">{{ old('excerpt', $revision->excerpt) }}</textarea>
                                    </div>
                                </div>
                                <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                                    <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 حفظ التعديلات</button>
                                </div>
                            </div>

                            {{-- BLOCK 2: مقدمة وأقسام المقال (Dynamic Content Sections) --}}
                            <div style="border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.5rem; background: rgba(0,0,0,0.15);">
                                <h4 style="margin: 0 0 1.25rem; color: #ff8a3d; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.6rem;">
                                    2️⃣ 📝 مقدمة وأقسام المقال التفصيلية (محتوى المقال كما بالصورة الثالثة)
                                </h4>

                                <div class="form-stack">
                                    <div class="field">
                                        <label>مقدمة المقال (Intro Paragraph)</label>
                                        <p class="field-hint">الفقرة الافتتاحية المميزة التي تظهر تحت الصورة الرئيسية وقبل الأقسام (مثل الصورة الثالثة).</p>
                                        <textarea name="intro" rows="3" placeholder="مقدمة المقال...">{{ old('intro', $revision->intro) }}</textarea>
                                    </div>

                                    <div style="border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.25rem; margin-top: 1rem;">
                                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                                            <div>
                                                <h5 style="margin: 0; font-size: 1rem; color: #fff;">أقسام المقال (Dynamic Content Sections)</h5>
                                                <p class="field-hint" style="margin: 0.2rem 0 0;">أضف أية عناوين وشروحات تفصيلية للمقال.</p>
                                            </div>
                                            <button type="button" class="button secondary" data-ui-action="add-article-section" data-ui-arg1="sections_container_{{ $post->id }}" data-ui-arg2="{{ $post->id }}" style="font-size: 0.85rem;">
                                                + إضافة قسم جديد
                                            </button>
                                        </div>

                                        <div id="sections_container_{{ $post->id }}" class="form-stack" style="gap: 1rem;">
                                            @foreach($sections as $sIdx => $section)
                                                <div class="article-section-card panel" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.25rem; background: rgba(0,0,0,0.3); position: relative;">
                                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
                                                        <strong style="color: var(--accent, #f97316); font-size: 0.95rem;">
                                                            قسم #<span class="section-num">{{ $sIdx + 1 }}</span>
                                                        </strong>
                                                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                                                            <label class="toggle-control" style="font-size: 0.8rem; margin: 0;">
                                                                <input type="hidden" name="content_sections[{{ $sIdx }}][is_visible]" value="0">
                                                                <input type="checkbox" name="content_sections[{{ $sIdx }}][is_visible]" value="1" @checked(!empty($section['is_visible']) || !isset($section['is_visible']))>
                                                                <span>إظهار القسم</span>
                                                            </label>
                                                            <button type="button" class="button secondary" style="padding: 0.2rem 0.5rem; color: #ef4444;" data-ui-action="remove-closest" data-ui-arg1=".article-section-card" data-ui-arg2="sections_container_{{ $post->id }}">
                                                                ✕ حذف
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <input type="hidden" name="content_sections[{{ $sIdx }}][id]" value="{{ $section['id'] ?? ('sec-'.($sIdx+1)) }}">
                                                    <input type="hidden" name="content_sections[{{ $sIdx }}][sort_order]" value="{{ $section['sort_order'] ?? ($sIdx + 1) }}" class="section-order-input">

                                                    <div class="form-grid">
                                                        <div class="field full">
                                                            <label>عنوان القسم</label>
                                                            <input name="content_sections[{{ $sIdx }}][section_title]" value="{{ $section['section_title'] ?? '' }}" placeholder="مثال: إيه الفرق بين الشات بوت والوكيل الذكي؟" required>
                                                        </div>
                                                        <div class="field full">
                                                            <label>محتوى القسم والشرح التفصيلي</label>
                                                            <textarea name="content_sections[{{ $sIdx }}][section_content]" rows="4" placeholder="نص المحتوى والشرح التفصيلي للقسم..." required>{{ $section['section_content'] ?? '' }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                                    <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 حفظ التعديلات</button>
                                </div>
                            </div>

                            {{-- BLOCK 3: صندوق الخلاصة --}}
                            <div style="border: 1px solid rgba(255, 120, 32, 0.3); border-radius: 12px; padding: 1.5rem; background: rgba(255, 120, 32, 0.03);">
                                <h4 style="margin: 0 0 1.25rem; color: var(--accent, #f97316); font-size: 1.05rem; border-bottom: 1px solid rgba(255, 120, 32, 0.15); padding-bottom: 0.6rem;">
                                    3️⃣ 💡 صندوق الخلاصة (Conclusion Callout Box)
                                </h4>

                                <div class="form-grid">
                                    <div class="field" style="display: flex; align-items: center;">
                                        <label class="toggle-control">
                                            <input type="hidden" name="conclusion[is_visible]" value="0">
                                            <input type="checkbox" name="conclusion[is_visible]" value="1" @checked(!empty($conclusion['is_visible']) || !isset($conclusion['is_visible']))>
                                            <span>إظهار صندوق الخلاصة في نهاية المقال</span>
                                        </label>
                                    </div>

                                    <div class="field">
                                        <label>شارة / عنوان الصندوق (Label)</label>
                                        <input name="conclusion[label]" value="{{ old('conclusion.label', $conclusion['label'] ?? 'الخلاصة') }}">
                                    </div>

                                    <div class="field full">
                                        <label>نص الخلاصة المركزة (يظهر بداخل البوكس البرتقالي المميز بأسفل المقال)</label>
                                        <textarea name="conclusion[text]" rows="3" placeholder="اكتب خلاصة المقال المركزة هنا...">{{ old('conclusion.text', $conclusion['text'] ?? '') }}</textarea>
                                    </div>
                                </div>
                                <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                                    <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 حفظ التعديلات</button>
                                </div>
                            </div>

                            {{-- BLOCK 4: كارت الدعوة لاتخاذ إجراء (CTA) --}}
                            <div style="border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 1.5rem; background: rgba(255, 255, 255, 0.02);">
                                <h4 style="margin: 0 0 1.25rem; color: #fff; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.6rem;">
                                    4️⃣ 🚀 كارت الدعوة لاتخاذ إجراء (Call to Action Card)
                                </h4>

                                <div class="form-grid">
                                    <div class="field full">
                                        <label class="toggle-control">
                                            <input type="hidden" name="cta[is_visible]" value="0">
                                            <input type="checkbox" name="cta[is_visible]" value="1" @checked(!empty($cta['is_visible']) || !isset($cta['is_visible']))>
                                            <span>إظهار كارت الـ CTA بعد المقال</span>
                                        </label>
                                    </div>

                                    <div class="field">
                                        <label>عنوان الـ CTA</label>
                                        <input name="cta[title]" value="{{ old('cta.title', $cta['title'] ?? 'هل تبحث عن شريك تقني يفهم تحديات عملك ويشاركك شغف النجاح؟') }}">
                                    </div>

                                    <div class="field">
                                        <label>وصف الـ CTA</label>
                                        <input name="cta[description]" value="{{ old('cta.description', $cta['description'] ?? 'أكثر من 20 عاماً من الخبرة التقنية نضعها في خدمة نمو مشروعك وبناء حلول رقمية موثوقة.') }}">
                                    </div>

                                    <div class="field">
                                        <label>نص الزر</label>
                                        <input name="cta[btn_text]" value="{{ old('cta.btn_text', $cta['btn_text'] ?? 'تواصل مع فريقنا الهندسي') }}">
                                    </div>

                                    <div class="field">
                                        <label>رابط الزر</label>
                                        <input name="cta[btn_url]" value="{{ old('cta.btn_url', $cta['btn_url'] ?? '/contact') }}" placeholder="/contact أو رابط WhatsApp">
                                    </div>

                                    <div class="field">
                                        <label>فتح الرابط في</label>
                                        <select name="cta[btn_target]">
                                            <option value="_self" @selected(($cta['btn_target'] ?? '_self') === '_self')>نفس الصفحة (_self)</option>
                                            <option value="_blank" @selected(($cta['btn_target'] ?? '') === '_blank')>نافذة جديدة (_blank)</option>
                                        </select>
                                    </div>
                                </div>
                                <div style="margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: flex-end;">
                                    <button type="submit" class="button" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">💾 حفظ التعديلات</button>
                                </div>
                            </div>

                            <div class="form-actions" style="margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
                                <button type="submit" class="button" style="font-size: 1rem; padding: 0.65rem 2rem;">
                                    💾 حفظ المقال وإنشاء مراجعة جديدة
                                </button>
                                <span style="font-size: 0.85rem; color: #888;">
                                    آخر تحديث: {{ $revision->updated_at?->diffForHumans() }}
                                </span>
                            </div>
                        </form>

                        {{-- Publishing Status Transitions Form --}}
                        @if($revision->status->transitions() !== [])
                            <div style="margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.06);">
                                <form class="form-grid" method="POST" action="{{ route('admin.posts.transition', $revision) }}">
                                    @csrf @method('PUT')
                                    <div class="field">
                                        <label>{{ __('business.publishing.next_status') }}</label>
                                        <select name="status">
                                            @foreach($revision->status->transitions() as $status)
                                                <option value="{{ $status->value }}">{{ __('business.statuses.'.$status->value) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="field">
                                        <label>{{ __('business.publishing.publish_at') }}</label>
                                        <input name="publish_at" type="datetime-local">
                                    </div>
                                    <div class="form-actions" style="display: flex; align-items: flex-end;">
                                        <button class="button button-secondary">{{ __('business.publishing.update_publication') }}</button>
                                    </div>
                                </form>
                            </div>
                        @endif
                    @endif

                    <div style="margin-top: 1rem;">
                        <x-admin.inline-images :resource="$post" type="post" />
                    </div>
                </article>
            @empty
                <div class="empty-state">{{ __('business.publishing.empty') }}</div>
            @endforelse
        </div>
    </section>

    <script nonce="{{ request()->attributes->get('csp_nonce') }}">
        window.addBlogCategory = function () {
            const container = document.getElementById('blog-categories');
            if (!container) return;

            const indexes = [...container.querySelectorAll('input[name^="categories["]')]
                .map((input) => Number((input.name.match(/^categories\[(\d+)\]/) || [])[1]))
                .filter(Number.isFinite);
            const index = indexes.length ? Math.max(...indexes) + 1 : 0;
            const row = document.createElement('div');
            row.className = 'blog-category-row form-grid panel';
            row.style.cssText = 'padding:1rem;border:1px solid rgba(255,255,255,.08);';
            row.innerHTML = `
                <div class="field"><label>اسم التصنيف</label><input name="categories[${index}][name]" required></div>
                <div class="field"><label>الرمز (Slug)</label><input name="categories[${index}][slug]" required pattern="[a-z0-9]+(?:-[a-z0-9]+)*" placeholder="new-category"></div>
                <div class="field"><label>الترتيب</label><input type="number" min="0" name="categories[${index}][order]" required value="${index + 1}"></div>
                <div class="field" style="display:flex;align-items:end;justify-content:space-between;gap:.75rem;">
                    <label class="toggle-control"><input type="hidden" name="categories[${index}][is_visible]" value="0"><input type="checkbox" name="categories[${index}][is_visible]" value="1" checked><span>ظاهر</span></label>
                    <button type="button" class="button button-danger" data-ui-action="remove-closest" data-ui-arg1=".blog-category-row" data-ui-arg2="blog-categories">حذف</button>
                </div>`;
            container.appendChild(row);
            row.querySelector('input')?.focus();
        };

        function updateImgPreview(url, previewImgId) {
            const img = document.getElementById(previewImgId);
            if (img && url) img.src = url;
        }

        function handleDirectImageUpload(fileInput, targetInputId, previewImgId) {
            if (!fileInput.files || !fileInput.files[0]) return;
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                const targetInput = document.getElementById(targetInputId);
                if (targetInput) targetInput.value = e.target.result;
                if (previewImgId) {
                    const previewImg = document.getElementById(previewImgId);
                    if (previewImg) previewImg.src = e.target.result;
                }
            };
            reader.readAsDataURL(file);
        }

        function addArticleSection(containerId, postId) {
            const container = document.getElementById(containerId);
            if (!container) return;
            const count = container.querySelectorAll('.article-section-card').length;
            const newIdx = count;
            const card = document.createElement('div');
            card.className = 'article-section-card panel';
            card.style.cssText = 'border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.25rem; background: rgba(0,0,0,0.3); position: relative;';
            card.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
                    <strong style="color: var(--accent, #f97316); font-size: 0.95rem;">
                        قسم #<span class="section-num">${newIdx + 1}</span>
                    </strong>
                    <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <label class="toggle-control" style="font-size: 0.8rem; margin: 0;">
                            <input type="hidden" name="content_sections[${newIdx}][is_visible]" value="0">
                            <input type="checkbox" name="content_sections[${newIdx}][is_visible]" value="1" checked>
                            <span>إظهار القسم</span>
                        </label>
                        <button type="button" class="button secondary" style="padding: 0.2rem 0.5rem; color: #ef4444;" data-ui-action="remove-closest" data-ui-arg1=".article-section-card" data-ui-arg2="${containerId}">
                            ✕ حذف
                        </button>
                    </div>
                </div>
                <input type="hidden" name="content_sections[${newIdx}][id]" value="sec-${newIdx + 1}">
                <input type="hidden" name="content_sections[${newIdx}][sort_order]" value="${newIdx + 1}" class="section-order-input">
                <div class="form-grid">
                    <div class="field full">
                        <label>عنوان القسم</label>
                        <input name="content_sections[${newIdx}][section_title]" placeholder="عنوان القسم الجديد (مثال: إيه الفرق بين الشات بوت والوكيل الذكي؟)" required>
                    </div>
                    <div class="field full">
                        <label>محتوى القسم والشرح التفصيلي</label>
                        <textarea name="content_sections[${newIdx}][section_content]" rows="4" placeholder="اكتب محتوى وشرح هذا القسم التفصيلي هنا..." required></textarea>
                    </div>
                </div>
            `;
            container.appendChild(card);
        }

        function renumberSections(containerId) {
            const container = document.getElementById(containerId);
            if (!container) return;
            container.querySelectorAll('.article-section-card').forEach((card, idx) => {
                const numSpan = card.querySelector('.section-num');
                if (numSpan) numSpan.textContent = idx + 1;
                const orderInput = card.querySelector('.section-order-input');
                if (orderInput) orderInput.value = idx + 1;
            });
        }
    </script>
@endsection