@extends('voyager::master')

@section('page_title', ($policy->exists ? 'Edit' : 'Add') . ' Policy')

@section('css')
<style>
    /* Sidebar offset & left padding fix */
    .app-container .side-body {
        margin-left: 35px !important;
        padding-left: 15px !important;
        padding-right: 25px !important;
    }
    .app-container.expanded .side-body {
        margin-left: 225px !important;
        padding-left: 15px !important;
        padding-right: 25px !important;
    }
    @media (max-width: 768px) {
        .app-container .side-body,
        .app-container.expanded .side-body {
            margin-left: 0 !important;
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
    }

    .policy-builder-wrapper {
        margin-top: 5px;
        margin-bottom: 90px;
    }
    
    /* Header layout overrides to prevent Voyager float issues */
    .policy-admin-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
        margin-bottom: 20px;
        padding-bottom: 14px;
        border-bottom: 1px solid #e2e8f0;
    }
    .policy-admin-header .page-title {
        float: none !important;
        padding: 0 !important;
        margin: 0 0 6px 0 !important;
        font-size: 24px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        height: auto !important;
        position: static !important;
    }
    .policy-admin-header .page-title > i {
        position: static !important;
        font-size: 24px !important;
        color: #166534;
        margin: 0 !important;
    }
    .policy-admin-header p.text-muted {
        margin: 0 !important;
        font-size: 13.5px;
        color: #64748b;
    }
    .policy-admin-header .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .policy-admin-header .header-actions .btn {
        float: none !important;
        margin: 0 !important;
        font-weight: 600;
    }

    .panel-policy {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        background: #fff;
        margin-bottom: 24px;
        overflow: hidden;
    }
    .panel-policy .panel-heading {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 16px 20px;
    }
    .panel-policy .panel-title {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    /* Section Box Styling */
    .section-card {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #ffffff;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03);
        transition: all 0.2s ease;
    }
    .section-card:hover {
        border-color: #94a3b8;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
    .section-card-header {
        background: #f1f5f9;
        padding: 12px 18px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }
    .section-card-header .sec-info {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
    }
    .sec-num-badge {
        background: #14532d;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        border-radius: 6px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sec-icon-swatch {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }
    .sec-icon-swatch i,
    .icon-addon-preview i,
    .card-item-box .icon-addon-preview i {
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome, sans-serif !important;
        font-weight: 900;
        font-style: normal;
        line-height: 1;
    }
    .sec-title-display {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
    }
    .section-card-body {
        padding: 20px;
    }

    /* Rock-Solid Unified Icon Input Component */
    .icon-input-group {
        display: flex !important;
        align-items: stretch;
        width: 100%;
        position: relative;
    }
    .icon-input-group .icon-addon-preview {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 32px;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-right: none;
        border-radius: 4px 0 0 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #166534;
        font-size: 14px;
        flex-shrink: 0;
        user-select: none;
    }
    .icon-input-group .form-control {
        border-radius: 0 !important;
        height: 32px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        border: 1px solid #cbd5e1 !important;
        flex: 1;
        min-width: 0;
        margin: 0 !important;
        box-shadow: none !important;
    }
    .icon-input-group .form-control:focus {
        border-color: #22a7f0 !important;
        position: relative;
        z-index: 2;
    }
    .icon-input-group .btn-icon-browse {
        height: 32px !important;
        padding: 0 10px !important;
        border-radius: 0 4px 4px 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-left: none !important;
        background: #f8fafc !important;
        color: #0284c7 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .icon-input-group .btn-icon-browse:hover {
        background: #e0f2fe !important;
        border-color: #bae6fd !important;
        color: #0369a1 !important;
    }

    /* Blocks Area inside Section */
    .blocks-container {
        margin-top: 15px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 6px;
        border: 1px dashed #cbd5e1;
    }
    .block-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 16px;
        margin-bottom: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        position: relative;
    }
    .block-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
    }
    .block-badge {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .block-badge-text { background: #e0e7ff; color: #3730a3; }
    .block-badge-cards { background: #dcfce7; color: #166534; }
    .block-badge-table { background: #ffedd5; color: #9a3412; }
    .block-badge-callout { background: #fef3c7; color: #92400e; }
    .block-badge-hero_card { background: #f3e8ff; color: #6b21a8; }
    .block-badge-custom { background: #e2e8f0; color: #334155; }

    /* Nested Card item */
    .card-item-box {
        background: #fcfcfd;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        position: relative;
    }

    /* Responsive Sticky Bottom Action Bar */
    .sticky-submit-bar {
        position: fixed;
        bottom: 0;
        left: 75px; /* Voyager collapsed sidebar offset */
        right: 0;
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        padding: 14px 28px;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: left 0.25s ease;
    }
    .expanded .sticky-submit-bar {
        left: 265px; /* Voyager expanded sidebar offset */
    }
    @media (max-width: 768px) {
        .sticky-submit-bar,
        .expanded .sticky-submit-bar {
            left: 0;
            padding: 10px 15px;
        }
    }
</style>
@stop

@section('page_header')
    <div class="container-fluid">
        <div class="policy-admin-header">
            <div>
                <h1 class="page-title">
                    <i class="voyager-file-text"></i> {{ $policy->exists ? 'Edit' : 'Add New' }} Policy
                </h1>
                <p class="text-muted">
                    Configure policy metadata, structured multi-block sections, cards, tables, and SEO.
                </p>
            </div>
            <div class="header-actions">
                <a href="{{ route('voyager.policies.index') }}" class="btn btn-default">
                    <i class="voyager-angle-left"></i> Back to All Policies
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="page-content policy-builder-wrapper container-fluid">
    @include('voyager::alerts')

    <form id="policyForm" action="{{ $policy->exists ? route('voyager.policies.update', $policy->id) : route('voyager.policies.store') }}" method="POST" enctype="multipart/form-data">
        {{ csrf_field() }}
        @if($policy->exists)
            {{ method_field('PUT') }}
        @endif

        {{-- Hidden JSON storage for all dynamic sections and multi-blocks --}}
        <input type="hidden" name="sections_json" id="sections_json" value="">

        <div class="row">
            {{-- Main Column (Policy Content & Dynamic Multi-Block Section Builder) --}}
            <div class="col-md-8">
                <!-- Main Policy Information -->
                <div class="panel panel-policy">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-info-large"></i> Primary Policy Details</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="title"><strong>Policy Title</strong> <span class="text-danger">*</span></label>
                            <input type="text" class="form-control input-lg" id="title" name="title" value="{{ old('title', $policy->title) }}" placeholder="e.g. Privacy Policy, Donation & Refund Policy..." required>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="slug"><strong>Slug / URL Path</strong> <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-addon" style="font-family: monospace;">/</span>
                                        <input type="text" class="form-control" id="slug" name="slug" value="{{ old('slug', $policy->slug) }}" placeholder="e.g. privacy-policy" required>
                                    </div>
                                    <small class="text-muted">Direct URL for visitors (e.g. /privacy-policy)</small>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="badge_text"><strong>Category Badge Text</strong></label>
                                    <input type="text" class="form-control" id="badge_text" name="badge_text" value="{{ old('badge_text', $policy->badge_text) }}" placeholder="e.g. Data Protection & Privacy">
                                    <small class="text-muted">Displays as pill badge above the title</small>
                                </div>
                            </div>
                        </div>

                        <!-- Hero Banner Image -->
                        <div class="form-group" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9;">
                            <label for="banner_image_file"><strong>Hero Banner Image</strong></label>
                            <div style="display: flex; gap: 15px; align-items: flex-start; flex-wrap: wrap;">
                                <div style="width: 140px; height: 75px; border-radius: 6px; overflow: hidden; border: 1px solid #cbd5e1; background: #09383a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); position: relative;">
                                    <img id="banner_preview" src="{{ $policy->banner_url }}" alt="Banner Preview" style="width: 100%; height: 100%; object-fit: cover;">
                                </div>
                                <div style="flex: 1; min-width: 260px;">
                                    <input type="file" class="form-control" id="banner_image_file" name="banner_image_file" accept="image/*" onchange="previewBannerImage(this)">
                                    <div style="margin-top: 8px; display: flex; align-items: center; gap: 8px;">
                                        <span class="text-muted" style="font-size: 12px; white-space: nowrap;">Or enter custom path / URL:</span>
                                        <input type="text" class="form-control input-sm" id="banner_image" name="banner_image" value="{{ old('banner_image', $policy->banner_image) }}" placeholder="e.g. banners/grievances-banner.webp or https://..." oninput="$('#banner_preview').attr('src', this.value || '{{ $policy->banner_url }}')">
                                    </div>
                                    <small class="text-muted" style="display: block; margin-top: 4px;">
                                        Recommended: High-resolution widescreen forest canopy banner (1920 &times; 480 or similar). Automatically matches <code>storage/banners/{slug}-banner.*</code> if omitted.
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: 15px;">
                            <label for="hero_summary"><strong>Hero Summary / Policy Overview</strong></label>
                            <textarea class="form-control" id="hero_summary" name="hero_summary" rows="3" placeholder="Brief executive summary displayed prominently at the top of the policy page...">{{ old('hero_summary', $policy->hero_summary) }}</textarea>
                            <small class="text-muted">A clear, reassuring introduction introducing the scope of this policy.</small>
                        </div>
                    </div>
                </div>

                <!-- Dynamic Multi-Block Section Builder -->
                <div class="panel panel-policy">
                    <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
                        <h3 class="panel-title">
                            <i class="voyager-list"></i> Policy Sections & Multi-Block Builder
                        </h3>
                        <button type="button" class="btn btn-sm btn-success" id="addSectionBtn" style="font-weight: 600;">
                            <i class="voyager-plus"></i> Add New Section
                        </button>
                    </div>
                    <div class="panel-body">
                        <p class="text-muted" style="margin-bottom: 20px;">
                            Build structured policy sections. Each section includes a number, title, icon (via Icons Library), and can contain <strong>multiple stacked blocks</strong> (Rich Text, Info Cards, Data Tables, Callout Boxes, Hero Summaries, or Custom Templates).
                        </p>

                        <div id="sectionsContainer">
                            {{-- Dynamically populated via JS --}}
                        </div>

                        <div style="text-align: center; margin-top: 20px; padding: 20px; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 8px;">
                            <button type="button" class="btn btn-primary btn-lg" id="addSectionBtnFooter">
                                <i class="voyager-plus"></i> Add Section / Bullet
                            </button>
                        </div>
                    </div>
                </div>

                <!-- SEO Metadata -->
                <div class="panel panel-policy">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-search"></i> Search Engine Optimization (SEO)</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="meta_title"><strong>Meta Title</strong></label>
                            <input type="text" class="form-control" id="meta_title" name="meta_title" value="{{ old('meta_title', $policy->meta_title) }}" placeholder="Custom page title for search engines">
                        </div>
                        <div class="form-group">
                            <label for="meta_description"><strong>Meta Description</strong></label>
                            <textarea class="form-control" id="meta_description" name="meta_description" rows="2" placeholder="Brief SEO description for Google snippet...">{{ old('meta_description', $policy->meta_description) }}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="meta_keywords"><strong>Meta Keywords</strong></label>
                            <input type="text" class="form-control" id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords', $policy->meta_keywords) }}" placeholder="comma, separated, keywords">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar Column (Publish Settings & Attributes) --}}
            <div class="col-md-4">
                <div class="panel panel-policy">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-params"></i> Publishing & Layout</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="status"><strong>Policy Status</strong></label>
                            <select name="status" id="status" class="form-control">
                                <option value="ACTIVE" {{ old('status', $policy->status) === 'ACTIVE' ? 'selected' : '' }}>Active (Publicly Visible)</option>
                                <option value="INACTIVE" {{ old('status', $policy->status) === 'INACTIVE' ? 'selected' : '' }}>Inactive (Draft / Hidden)</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="effective_date"><strong>Effective / Last Revised Date</strong></label>
                            <input type="text" class="form-control" id="effective_date" name="effective_date" value="{{ old('effective_date', $policy->effective_date ?? 'October 2024') }}" placeholder="e.g. October 2024">
                            <small class="text-muted">Displayed in top bar & hero header badge</small>
                        </div>

                        <div class="form-group">
                            <label for="sort_order"><strong>Display Order</strong></label>
                            <input type="number" class="form-control" id="sort_order" name="sort_order" value="{{ old('sort_order', $policy->sort_order ?? 1) }}" min="0">
                            <small class="text-muted">Controls order in switcher sidebar & footer links</small>
                        </div>

                        <hr style="margin: 20px 0;">

                        <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 14px; font-size: 13px; color: #166534;">
                            <strong style="display: block; margin-bottom: 4px;"><i class="fa fa-info-circle"></i> Live Preview Note:</strong>
                            Once saved, this policy will be available immediately at:
                            <div style="font-family: monospace; font-size: 12px; margin-top: 5px; word-break: break-all; color: #14532d;">
                                {{ url('/') }}/<span id="slugPreview">{{ $policy->slug ?: 'privacy-policy' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Help / Documentation Tips -->
                <div class="panel panel-policy">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="voyager-question"></i> Block Types Guide</h3>
                    </div>
                    <div class="panel-body" style="font-size: 13px; color: #475569; line-height: 1.6;">
                        <ul style="padding-left: 18px; margin-bottom: 0;">
                            <li><strong style="color: #3730a3;">Plain / Rich Text:</strong> Standard paragraphs, explanations, legal clauses, bullet points.</li>
                            <li><strong style="color: #166534;">Info Cards:</strong> Highlights key terms or categories in a responsive card grid.</li>
                            <li><strong style="color: #9a3412;">Data Table:</strong> Formats tabular data such as retention schedules or grievance matrix.</li>
                            <li><strong style="color: #92400e;">Callout Box:</strong> Important statutory warnings, 80G tax notices, or security disclaimers.</li>
                            <li><strong style="color: #6b21a8;">Policy Hero Card:</strong> Featured focal block with badge, summary, and bullet points.</li>
                            <li><strong style="color: #334155;">Custom Template:</strong> Advanced block with custom heading, colors, and HTML content.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sticky Bottom Bar -->
        <div class="sticky-submit-bar">
            <div>
                <a href="{{ route('voyager.policies.index') }}" class="btn btn-default">
                    Cancel
                </a>
            </div>
            <div style="display: flex; gap: 10px; align-items: center;">
                @if($policy->exists)
                    <a href="{{ url($policy->slug) }}" target="_blank" class="btn btn-info">
                        <i class="voyager-eye"></i> View Live Policy
                    </a>
                @endif
                <button type="submit" class="btn btn-success btn-lg" id="savePolicyBtn" style="min-width: 160px; font-weight: 700;">
                    <i class="voyager-check"></i> {{ $policy->exists ? 'Save Changes' : 'Create Policy' }}
                </button>
            </div>
        </div>
    </form>
</div>
@stop

@section('javascript')
<script>
(function() {
    // Initial data from server
    let initialSections = @json($policy->sections ?? []);
    if (!Array.isArray(initialSections)) {
        initialSections = [];
    }

    // Local in-memory state
    let sections = initialSections;

    // Helper: format icon class safely (supports React names like RiLeafLine, FaSeedling, BsShieldCheck, and CSS classes)
    function getFaClass(iconStr) {
        if (typeof window.getUnifiedIconClass === 'function') {
            return window.getUnifiedIconClass(iconStr);
        }
        if (!iconStr) return 'fa fa-bookmark';
        iconStr = String(iconStr).trim();
        if (iconStr.startsWith('ri-') || iconStr.startsWith('bi-') || iconStr.startsWith('fa-')) {
            return iconStr;
        }
        return 'fa fa-' + iconStr;
    }

    // Auto slug from title if empty
    $('#title').on('input', function() {
        if (!$('#policyForm').data('slug-touched') && !@json($policy->exists)) {
            let slug = $(this).val().toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .trim()
                .replace(/\s+/g, '-');
            $('#slug').val(slug);
            $('#slugPreview').text(slug || 'policy-slug');
        }
    });
    $('#slug').on('input', function() {
        $('#policyForm').data('slug-touched', true);
        $('#slugPreview').text($(this).val() || 'policy-slug');
    });

    // Banner image preview handler
    window.previewBannerImage = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#banner_preview').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    };

    // RENDER ALL SECTIONS
    function renderSections() {
        const container = $('#sectionsContainer');
        container.empty();

        if (sections.length === 0) {
            container.html(`
                <div class="text-center" style="padding: 40px; color: #94a3b8; background: #fff; border-radius: 6px; border: 1px dashed #cbd5e1;">
                    <i class="voyager-list" style="font-size: 32px; display: block; margin-bottom: 10px;"></i>
                    No sections added yet. Click <strong>"Add New Section"</strong> to add policy bullets.
                </div>
            `);
            return;
        }

        sections.forEach((sec, sIdx) => {
            const secHtml = renderSectionHtml(sec, sIdx);
            container.append(secHtml);
        });

        // Initialize block contents & cards
        sections.forEach((sec, sIdx) => {
            renderBlocksForSection(sIdx);
        });
    }

    // Single section HTML container
    function renderSectionHtml(sec, sIdx) {
        const num = sec.number || String(sIdx + 1).padStart(2, '0');
        const icon = sec.icon || 'fa-bookmark';
        const title = sec.title || 'Untitled Section';

        return `
            <div class="section-card" data-sec-index="${sIdx}" id="sec_card_${sIdx}">
                <div class="section-card-header" onclick="toggleSectionCollapse(${sIdx})">
                    <div class="sec-info">
                        <div class="sec-icon-swatch" id="sec_preview_${sIdx}">
                            <i class="${getFaClass(icon)}"></i>
                        </div>
                        <span class="sec-num-badge">${escapeHtml(num)}</span>
                        <div class="sec-title-display" id="sec_title_display_${sIdx}">${escapeHtml(title)}</div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 6px;" onclick="event.stopPropagation();">
                        <button type="button" class="btn btn-xs btn-default" title="Move Up" onclick="moveSection(${sIdx}, -1)">
                            <i class="voyager-angle-up"></i>
                        </button>
                        <button type="button" class="btn btn-xs btn-default" title="Move Down" onclick="moveSection(${sIdx}, 1)">
                            <i class="voyager-angle-down"></i>
                        </button>
                        <button type="button" class="btn btn-xs btn-danger" title="Remove Section" onclick="removeSection(${sIdx})">
                            <i class="voyager-trash"></i>
                        </button>
                        <i class="voyager-angle-down collapse-icon" id="collapse_icon_${sIdx}" style="margin-left: 8px; color: #94a3b8; transition: transform 0.2s ease;"></i>
                    </div>
                </div>

                <div class="section-card-body" id="sec_body_${sIdx}">
                    <!-- Section Meta Fields: Perfectly Aligned Icon, Number, Title -->
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label style="font-size: 12px; font-weight: 600;">Section Icon</label>
                                <div class="icon-input-group">
                                    <span class="icon-addon-preview" id="sec_icon_addon_${sIdx}">
                                        <i class="${getFaClass(icon)}"></i>
                                    </span>
                                    <input type="text" class="form-control" id="sec_icon_input_${sIdx}" value="${escapeHtml(icon)}" oninput="updateSecIcon(${sIdx}, this.value)" placeholder="e.g. fa-database">
                                    <button class="btn-icon-browse" type="button" data-toggle="fa-picker" data-target="#sec_icon_input_${sIdx}" data-preview="#sec_icon_addon_${sIdx}" title="Open Icons Library">
                                        <i class="fas fa-icons"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group">
                                <label style="font-size: 12px; font-weight: 600;">Bullet Number</label>
                                <input type="text" class="form-control input-sm" value="${escapeHtml(num)}" oninput="updateSecField(${sIdx}, 'number', this.value)" style="height: 32px;">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size: 12px; font-weight: 600;">Section Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control input-sm" value="${escapeHtml(title)}" oninput="updateSecTitle(${sIdx}, this.value)" placeholder="e.g. Information We Collect" style="height: 32px;">
                            </div>
                        </div>
                    </div>

                    <!-- Stacked Multi-Blocks Container -->
                    <div class="blocks-container">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-weight: 700; font-size: 13px; color: #334155; text-transform: uppercase; letter-spacing: 0.5px;">
                                <i class="voyager-window-list"></i> Section Content Blocks
                            </span>

                            <!-- Add Block Dropdown -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="voyager-plus"></i> Add Block to Section <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'text')"><i class="fa fa-align-left text-primary"></i> Rich / Plain Text</a></li>
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'cards')"><i class="fa fa-th-large text-success"></i> Info Cards Grid</a></li>
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'table')"><i class="fa fa-table text-warning"></i> Data Table</a></li>
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'callout')"><i class="fa fa-exclamation-circle text-info"></i> Notice / Callout Box</a></li>
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'hero_card')"><i class="fa fa-star text-purple"></i> Policy Hero Card</a></li>
                                    <li><a href="javascript:void(0)" onclick="addBlock(${sIdx}, 'custom')"><i class="fa fa-paint-brush text-muted"></i> Custom Styled Template</a></li>
                                </ul>
                            </div>
                        </div>

                        <div id="blocks_wrapper_${sIdx}">
                            {{-- Blocks rendered here --}}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // Render Blocks inside a Section
    function renderBlocksForSection(sIdx) {
        const wrapper = $('#blocks_wrapper_' + sIdx);
        wrapper.empty();

        const blocks = sections[sIdx].blocks || [];
        if (blocks.length === 0) {
            wrapper.html(`
                <div style="text-align: center; padding: 20px; color: #94a3b8; font-size: 13px;">
                    No blocks in this section yet. Click <strong>"Add Block to Section"</strong> above to insert text, cards, tables, or callouts.
                </div>
            `);
            return;
        }

        blocks.forEach((block, bIdx) => {
            let bHtml = renderSingleBlock(sIdx, bIdx, block);
            wrapper.append(bHtml);
        });
    }

    // Single Block Renderer based on Type
    function renderSingleBlock(sIdx, bIdx, block) {
        const type = block.type || 'text';
        let badgeClass = 'block-badge-' + type;
        let badgeName = type.toUpperCase();
        let bodyHtml = '';

        if (type === 'text') {
            badgeName = 'Plain / Rich Text';
            const textContent = block.content || block.text || '';
            bodyHtml = `
                <div class="form-group" style="margin-bottom: 0;">
                    <textarea class="form-control" rows="4" placeholder="Enter paragraph text, legal explanations, or lists..." oninput="updateTextBlock(${sIdx}, ${bIdx}, this.value)">${escapeHtml(textContent)}</textarea>
                </div>
            `;
        } else if (type === 'cards') {
            badgeName = 'Info Cards Grid';
            const cards = block.cards || block.items || [];
            let cardsListHtml = '';

            cards.forEach((c, cIdx) => {
                const cIcon = c.icon || 'fa-info-circle';
                const cDesc = c.desc || c.description || '';
                cardsListHtml += `
                    <div class="card-item-box" id="card_${sIdx}_${bIdx}_${cIdx}">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <span style="font-size: 12px; font-weight: 700; color: #475569;">Card #${cIdx + 1}</span>
                            <button type="button" class="btn btn-xs btn-danger" onclick="removeCardItem(${sIdx}, ${bIdx}, ${cIdx})"><i class="voyager-trash"></i></button>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group" style="margin-bottom: 8px;">
                                    <label style="font-size: 11px; font-weight: 600;">Card Icon</label>
                                    <div class="icon-input-group">
                                        <span class="icon-addon-preview" id="card_addon_${sIdx}_${bIdx}_${cIdx}">
                                            <i class="${getFaClass(cIcon)}"></i>
                                        </span>
                                        <input type="text" class="form-control" id="card_icon_${sIdx}_${bIdx}_${cIdx}" value="${escapeHtml(cIcon)}" oninput="updateCardItem(${sIdx}, ${bIdx}, ${cIdx}, 'icon', this.value)" placeholder="e.g. fa-seedling">
                                        <button class="btn-icon-browse" type="button" data-toggle="fa-picker" data-target="#card_icon_${sIdx}_${bIdx}_${cIdx}" data-preview="#card_addon_${sIdx}_${bIdx}_${cIdx}" title="Open Icons Library">
                                            <i class="fas fa-icons"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <div class="form-group" style="margin-bottom: 8px;">
                                    <label style="font-size: 11px; font-weight: 600;">Card Title</label>
                                    <input type="text" class="form-control input-sm" value="${escapeHtml(c.title || '')}" oninput="updateCardItem(${sIdx}, ${bIdx}, ${cIdx}, 'title', this.value)" placeholder="Card Heading" style="height: 32px;">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group" style="margin-bottom: 8px;">
                                    <label style="font-size: 11px; font-weight: 600;">Badge (optional)</label>
                                    <input type="text" class="form-control input-sm" value="${escapeHtml(c.badge || '')}" oninput="updateCardItem(${sIdx}, ${bIdx}, ${cIdx}, 'badge', this.value)" placeholder="e.g. Required" style="height: 32px;">
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="font-size: 11px; font-weight: 600;">Card Description</label>
                            <textarea class="form-control input-sm" rows="2" oninput="updateCardItem(${sIdx}, ${bIdx}, ${cIdx}, 'desc', this.value)" placeholder="Short descriptive summary">${escapeHtml(cDesc)}</textarea>
                        </div>
                    </div>
                `;
            });

            bodyHtml = `
                <div>
                    <div id="cards_list_${sIdx}_${bIdx}">
                        ${cardsListHtml}
                    </div>
                    <button type="button" class="btn btn-xs btn-success" onclick="addCardItem(${sIdx}, ${bIdx})" style="margin-top: 5px;">
                        <i class="voyager-plus"></i> Add Another Card
                    </button>
                </div>
            `;
        } else if (type === 'table') {
            badgeName = 'Data Table';
            const headers = block.headers || ['Category', 'Specifications', 'Details'];
            const rows = block.rows || [];
            
            let ths = headers.map((h, hIdx) => `
                <th style="padding: 6px;">
                    <input type="text" class="form-control input-sm" value="${escapeHtml(h)}" oninput="updateTableHeader(${sIdx}, ${bIdx}, ${hIdx}, this.value)" placeholder="Header ${hIdx + 1}" style="height: 30px;">
                </th>
            `).join('');

            let trs = '';
            rows.forEach((r, rIdx) => {
                let tds = '';
                headers.forEach((_, hIdx) => {
                    const cellVal = (r && r[hIdx]) ? r[hIdx] : '';
                    tds += `
                        <td style="padding: 6px;">
                            <input type="text" class="form-control input-sm" value="${escapeHtml(cellVal)}" oninput="updateTableCell(${sIdx}, ${bIdx}, ${rIdx}, ${hIdx}, this.value)" style="height: 30px;">
                        </td>
                    `;
                });
                trs += `
                    <tr>
                        ${tds}
                        <td style="width: 40px; text-align: center; vertical-align: middle;">
                            <button type="button" class="btn btn-xs btn-danger" onclick="removeTableRow(${sIdx}, ${bIdx}, ${rIdx})"><i class="voyager-trash"></i></button>
                        </td>
                    </tr>
                `;
            });

            bodyHtml = `
                <div class="table-responsive">
                    <table class="table table-bordered table-condensed" style="margin-bottom: 8px; background: #fff;">
                        <thead>
                            <tr style="background: #f1f5f9;">
                                ${ths}
                                <th style="width: 40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            ${trs}
                        </tbody>
                    </table>
                    <div style="display: flex; gap: 8px;">
                        <button type="button" class="btn btn-xs btn-success" onclick="addTableRow(${sIdx}, ${bIdx})">
                            <i class="voyager-plus"></i> Add Row
                        </button>
                        <button type="button" class="btn btn-xs btn-default" onclick="addTableColumn(${sIdx}, ${bIdx})">
                            <i class="voyager-plus"></i> Add Column
                        </button>
                    </div>
                </div>
            `;
        } else if (type === 'callout') {
            badgeName = 'Notice / Callout Box';
            const tone = block.tone || 'info';
            const cIcon = block.icon || '';
            const title = block.title || '';
            const message = block.message || block.text || '';
            
            const defaultIcon = (tone === 'warning') ? 'fa-triangle-exclamation' :
                                (tone === 'success') ? 'fa-circle-check' :
                                (tone === 'danger') ? 'fa-shield-exclamation' : 'fa-circle-info';
            const displayIcon = cIcon || defaultIcon;

            bodyHtml = `
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Tone / Style</label>
                            <select class="form-control input-sm" onchange="updateBlockProp(${sIdx}, ${bIdx}, 'tone', this.value)" style="height: 32px;">
                                <option value="info" ${tone === 'info' ? 'selected' : ''}>Info (Blue)</option>
                                <option value="warning" ${tone === 'warning' ? 'selected' : ''}>Warning (Amber)</option>
                                <option value="success" ${tone === 'success' ? 'selected' : ''}>Success (Emerald)</option>
                                <option value="danger" ${tone === 'danger' ? 'selected' : ''}>Danger / Caution (Red)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Callout Icon</label>
                            <div class="icon-input-group">
                                <span class="icon-addon-preview" id="callout_addon_${sIdx}_${bIdx}">
                                    <i class="${getFaClass(displayIcon)}"></i>
                                </span>
                                <input type="text" class="form-control" id="callout_icon_${sIdx}_${bIdx}" value="${escapeHtml(cIcon)}" placeholder="${defaultIcon}" oninput="updateCalloutIcon(${sIdx}, ${bIdx}, this.value)">
                                <button class="btn-icon-browse" type="button" data-toggle="fa-picker" data-target="#callout_icon_${sIdx}_${bIdx}" data-preview="#callout_addon_${sIdx}_${bIdx}" title="Open Icons Library">
                                    <i class="fas fa-icons"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Callout Title</label>
                            <input type="text" class="form-control input-sm" value="${escapeHtml(title)}" oninput="updateBlockProp(${sIdx}, ${bIdx}, 'title', this.value)" placeholder="e.g. Statutory 80G Certificate Notice" style="height: 32px;">
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label style="font-size: 11.5px; font-weight: 600;">Callout Message / Text</label>
                    <textarea class="form-control input-sm" rows="3" oninput="updateCalloutMessage(${sIdx}, ${bIdx}, this.value)" placeholder="Important statutory note, disclaimer or requirement...">${escapeHtml(message)}</textarea>
                </div>
            `;
        } else if (type === 'hero_card') {
            badgeName = 'Policy Hero Card';
            const title = block.title || '';
            const badge = block.badge || '';
            const summary = block.summary || block.subtitle || '';
            const rawHighlights = block.highlights || block.items || [];
            const items = Array.isArray(rawHighlights) ? rawHighlights : (typeof rawHighlights === 'string' ? rawHighlights.split('\n') : []);
            const itemsText = items.join('\n');

            bodyHtml = `
                <div class="row">
                    <div class="col-sm-5">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Hero Card Title</label>
                            <input type="text" class="form-control input-sm" value="${escapeHtml(title)}" oninput="updateBlockProp(${sIdx}, ${bIdx}, 'title', this.value)" placeholder="e.g. Direct High-Impact Forestry Deployment" style="height: 32px;">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Badge / Pill (optional)</label>
                            <input type="text" class="form-control input-sm" value="${escapeHtml(badge)}" oninput="updateBlockProp(${sIdx}, ${bIdx}, 'badge', this.value)" placeholder="e.g. Stewardship Guarantee" style="height: 32px;">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label style="font-size: 11.5px; font-weight: 600;">Summary / Subtitle</label>
                            <input type="text" class="form-control input-sm" value="${escapeHtml(summary)}" oninput="updateHeroSummary(${sIdx}, ${bIdx}, this.value)" placeholder="Short summary sentence..." style="height: 32px;">
                        </div>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label style="font-size: 11.5px; font-weight: 600;">Highlight Bullet Points (1 bullet per line)</label>
                    <textarea class="form-control input-sm" rows="3" oninput="updateHeroItems(${sIdx}, ${bIdx}, this.value)" placeholder="100% Eligible for Section 80G Tax Deductions&#10;Geotagged & Satellite Verified Plantations&#10;Direct Tribal & Smallholder Farmer Livelihood Support">${escapeHtml(itemsText)}</textarea>
                </div>
            `;
        } else if (type === 'custom') {
            badgeName = 'Custom Styled Template';
            const heading = block.heading || block.title || '';
            const accentColor = block.accent_color || '#14532d';
            const bgColor = block.bg_color || '#f0fdf4';
            const borderColor = block.border_color || '#bbf7d0';
            const textColor = block.text_color || '#0f172a';
            const content = block.custom_html || block.content || '';

            bodyHtml = `
                <div class="row">
                    <div class="col-sm-8">
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label style="font-size: 11.5px; font-weight: 600;">Heading / Title (optional)</label>
                            <input type="text" class="form-control input-sm" value="${escapeHtml(heading)}" oninput="updateBlockProp(${sIdx}, ${bIdx}, 'heading', this.value)" placeholder="e.g. Designated Grievance Redressal Officer" style="height: 32px;">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label style="font-size: 11.5px; font-weight: 600;">Heading Color</label>
                            <div class="icon-input-group">
                                <span class="icon-addon-preview" style="padding: 0;">
                                    <input type="color" value="${accentColor}" onchange="updateCustomAccent(${sIdx}, ${bIdx}, this.value)" style="border: none; background: transparent; cursor: pointer; height: 26px; width: 26px;">
                                </span>
                                <input type="text" class="form-control" id="custom_accent_${sIdx}_${bIdx}" value="${accentColor}" oninput="updateCustomAccent(${sIdx}, ${bIdx}, this.value)">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-bottom: 10px;">
                    <div class="col-sm-4">
                        <label style="font-size: 11.5px; font-weight: 600;">Background Color</label>
                        <div class="icon-input-group">
                            <span class="icon-addon-preview" style="padding: 0;">
                                <input type="color" value="${bgColor}" onchange="updateCustomBg(${sIdx}, ${bIdx}, this.value)" style="border: none; background: transparent; cursor: pointer; height: 26px; width: 26px;">
                            </span>
                            <input type="text" class="form-control" id="custom_bg_${sIdx}_${bIdx}" value="${bgColor}" oninput="updateCustomBg(${sIdx}, ${bIdx}, this.value)">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label style="font-size: 11.5px; font-weight: 600;">Border Color</label>
                        <div class="icon-input-group">
                            <span class="icon-addon-preview" style="padding: 0;">
                                <input type="color" value="${borderColor}" onchange="updateCustomBorder(${sIdx}, ${bIdx}, this.value)" style="border: none; background: transparent; cursor: pointer; height: 26px; width: 26px;">
                            </span>
                            <input type="text" class="form-control" id="custom_border_${sIdx}_${bIdx}" value="${borderColor}" oninput="updateCustomBorder(${sIdx}, ${bIdx}, this.value)">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <label style="font-size: 11.5px; font-weight: 600;">Text Color</label>
                        <div class="icon-input-group">
                            <span class="icon-addon-preview" style="padding: 0;">
                                <input type="color" value="${textColor}" onchange="updateCustomText(${sIdx}, ${bIdx}, this.value)" style="border: none; background: transparent; cursor: pointer; height: 26px; width: 26px;">
                            </span>
                            <input type="text" class="form-control" id="custom_text_${sIdx}_${bIdx}" value="${textColor}" oninput="updateCustomText(${sIdx}, ${bIdx}, this.value)">
                        </div>
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 0;">
                    <label style="font-size: 11.5px; font-weight: 600;">Custom HTML or Formatted Content</label>
                    <textarea class="form-control input-sm" rows="4" oninput="updateCustomContent(${sIdx}, ${bIdx}, this.value)" placeholder="Enter custom HTML or styled content...">${escapeHtml(content)}</textarea>
                </div>
            `;
        }

        return `
            <div class="block-card" id="block_${sIdx}_${bIdx}">
                <div class="block-header">
                    <span class="block-badge ${badgeClass}">${badgeName}</span>
                    <div style="display: flex; gap: 4px; align-items: center;">
                        <button type="button" class="btn btn-xs btn-default" title="Move Up" onclick="moveBlock(${sIdx}, ${bIdx}, -1)">
                            <i class="voyager-angle-up"></i>
                        </button>
                        <button type="button" class="btn btn-xs btn-default" title="Move Down" onclick="moveBlock(${sIdx}, ${bIdx}, 1)">
                            <i class="voyager-angle-down"></i>
                        </button>
                        <button type="button" class="btn btn-xs btn-danger" title="Remove Block" onclick="removeBlock(${sIdx}, ${bIdx})">
                            <i class="voyager-trash"></i>
                        </button>
                    </div>
                </div>
                ${bodyHtml}
            </div>
        `;
    }

    // SECTION OPERATIONS
    window.toggleSectionCollapse = function(sIdx) {
        const body = $('#sec_body_' + sIdx);
        const icon = $('#collapse_icon_' + sIdx);
        body.slideToggle(180);
        icon.toggleClass('voyager-angle-down voyager-angle-up');
    };

    window.updateSecField = function(sIdx, field, val) {
        sections[sIdx][field] = val;
    };

    window.updateSecTitle = function(sIdx, val) {
        sections[sIdx].title = val;
        $('#sec_title_display_' + sIdx).text(val || 'Untitled Section');
    };

    window.updateSecIcon = function(sIdx, val) {
        sections[sIdx].icon = val;
        const faCls = getFaClass(val || 'fa-bookmark');
        $('#sec_preview_' + sIdx + ' i').attr('class', faCls);
        $('#sec_icon_addon_' + sIdx + ' i').attr('class', faCls);
    };

    window.moveSection = function(sIdx, dir) {
        const target = sIdx + dir;
        if (target < 0 || target >= sections.length) return;
        const temp = sections[sIdx];
        sections[sIdx] = sections[target];
        sections[target] = temp;
        renderSections();
    };

    window.removeSection = function(sIdx) {
        if (confirm('Are you sure you want to remove this section and all its blocks?')) {
            sections.splice(sIdx, 1);
            renderSections();
        }
    };

    $('#addSectionBtn, #addSectionBtnFooter').on('click', function() {
        const nextNum = String(sections.length + 1).padStart(2, '0');
        sections.push({
            id: 'sec-' + nextNum,
            number: nextNum,
            icon: 'fa-bookmark',
            title: 'New Policy Section',
            blocks: [
                {
                    type: 'text',
                    content: ''
                }
            ]
        });
        renderSections();
        $('html, body').animate({
            scrollTop: $('#sec_card_' + (sections.length - 1)).offset().top - 80
        }, 300);
    });

    // BLOCK OPERATIONS
    window.addBlock = function(sIdx, type) {
        if (!sections[sIdx].blocks) {
            sections[sIdx].blocks = [];
        }

        let newBlock = { type: type };
        if (type === 'text') {
            newBlock.content = '';
            newBlock.text = '';
        } else if (type === 'cards') {
            newBlock.cards = [
                { title: 'Card 1', desc: 'Description here', description: 'Description here', icon: 'fa-check-circle', badge: '' }
            ];
        } else if (type === 'table') {
            newBlock.headers = ['Category', 'Specifications', 'Details'];
            newBlock.rows = [
                ['Item 1', 'Standard condition', 'Active']
            ];
        } else if (type === 'callout') {
            newBlock.tone = 'info';
            newBlock.icon = 'fa-circle-info';
            newBlock.title = 'Important Notice';
            newBlock.message = '';
            newBlock.text = '';
        } else if (type === 'hero_card') {
            newBlock.title = 'Policy Highlights';
            newBlock.badge = 'Highlights';
            newBlock.summary = 'Key provisions at a glance';
            newBlock.subtitle = 'Key provisions at a glance';
            newBlock.items = ['Mandatory compliance requirements', 'Quarterly verification audits'];
            newBlock.highlights = ['Mandatory compliance requirements', 'Quarterly verification audits'];
        } else if (type === 'custom') {
            newBlock.heading = 'Custom Information';
            newBlock.bg_color = '#f0fdf4';
            newBlock.border_color = '#bbf7d0';
            newBlock.text_color = '#0f172a';
            newBlock.accent_color = '#14532d';
            newBlock.content = '<p>Custom styled content here...</p>';
            newBlock.custom_html = '<p>Custom styled content here...</p>';
        }

        sections[sIdx].blocks.push(newBlock);
        renderBlocksForSection(sIdx);
    };

    window.moveBlock = function(sIdx, bIdx, dir) {
        const blocks = sections[sIdx].blocks;
        const target = bIdx + dir;
        if (target < 0 || target >= blocks.length) return;
        const temp = blocks[bIdx];
        blocks[bIdx] = blocks[target];
        blocks[target] = temp;
        renderBlocksForSection(sIdx);
    };

    window.removeBlock = function(sIdx, bIdx) {
        sections[sIdx].blocks.splice(bIdx, 1);
        renderBlocksForSection(sIdx);
    };

    window.updateBlockProp = function(sIdx, bIdx, prop, val) {
        sections[sIdx].blocks[bIdx][prop] = val;
    };

    window.updateTextBlock = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].content = val;
        sections[sIdx].blocks[bIdx].text = val;
    };

    // Cards block item helpers
    window.addCardItem = function(sIdx, bIdx) {
        if (!sections[sIdx].blocks[bIdx].cards) {
            sections[sIdx].blocks[bIdx].cards = [];
        }
        sections[sIdx].blocks[bIdx].cards.push({
            title: 'New Card',
            desc: '',
            description: '',
            icon: 'fa-info-circle',
            badge: ''
        });
        renderBlocksForSection(sIdx);
    };

    window.removeCardItem = function(sIdx, bIdx, cIdx) {
        sections[sIdx].blocks[bIdx].cards.splice(cIdx, 1);
        renderBlocksForSection(sIdx);
    };

    window.updateCardItem = function(sIdx, bIdx, cIdx, prop, val) {
        sections[sIdx].blocks[bIdx].cards[cIdx][prop] = val;
        if (prop === 'desc') {
            sections[sIdx].blocks[bIdx].cards[cIdx]['description'] = val;
        }
        if (prop === 'icon') {
            $('#card_addon_' + sIdx + '_' + bIdx + '_' + cIdx + ' i').attr('class', getFaClass(val || 'fa-info-circle'));
        }
    };

    // Table block helpers
    window.updateTableHeader = function(sIdx, bIdx, hIdx, val) {
        sections[sIdx].blocks[bIdx].headers[hIdx] = val;
    };

    window.updateTableCell = function(sIdx, bIdx, rIdx, cIdx, val) {
        if (!sections[sIdx].blocks[bIdx].rows[rIdx]) {
            sections[sIdx].blocks[bIdx].rows[rIdx] = [];
        }
        sections[sIdx].blocks[bIdx].rows[rIdx][cIdx] = val;
    };

    window.addTableRow = function(sIdx, bIdx) {
        const hCount = (sections[sIdx].blocks[bIdx].headers || []).length;
        const newRow = new Array(hCount).fill('');
        if (!sections[sIdx].blocks[bIdx].rows) {
            sections[sIdx].blocks[bIdx].rows = [];
        }
        sections[sIdx].blocks[bIdx].rows.push(newRow);
        renderBlocksForSection(sIdx);
    };

    window.removeTableRow = function(sIdx, bIdx, rIdx) {
        sections[sIdx].blocks[bIdx].rows.splice(rIdx, 1);
        renderBlocksForSection(sIdx);
    };

    window.addTableColumn = function(sIdx, bIdx) {
        const nextColName = 'Column ' + ((sections[sIdx].blocks[bIdx].headers || []).length + 1);
        sections[sIdx].blocks[bIdx].headers.push(nextColName);
        if (sections[sIdx].blocks[bIdx].rows) {
            sections[sIdx].blocks[bIdx].rows.forEach(r => r.push(''));
        }
        renderBlocksForSection(sIdx);
    };

    // Callout helpers
    window.updateCalloutIcon = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].icon = val;
        $('#callout_addon_' + sIdx + '_' + bIdx + ' i').attr('class', getFaClass(val || 'fa-circle-info'));
    };

    window.updateCalloutMessage = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].message = val;
        sections[sIdx].blocks[bIdx].text = val;
    };

    // Hero items helper (line breaks to array)
    window.updateHeroSummary = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].summary = val;
        sections[sIdx].blocks[bIdx].subtitle = val;
    };

    window.updateHeroItems = function(sIdx, bIdx, text) {
        const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0);
        sections[sIdx].blocks[bIdx].items = lines;
        sections[sIdx].blocks[bIdx].highlights = lines;
    };

    // Custom block helpers
    window.updateCustomContent = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].custom_html = val;
        sections[sIdx].blocks[bIdx].content = val;
    };
    window.updateCustomAccent = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].accent_color = val;
        $('#custom_accent_' + sIdx + '_' + bIdx).val(val);
    };
    window.updateCustomBg = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].bg_color = val;
        $('#custom_bg_' + sIdx + '_' + bIdx).val(val);
    };
    window.updateCustomBorder = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].border_color = val;
        $('#custom_border_' + sIdx + '_' + bIdx).val(val);
    };
    window.updateCustomText = function(sIdx, bIdx, val) {
        sections[sIdx].blocks[bIdx].text_color = val;
        $('#custom_text_' + sIdx + '_' + bIdx).val(val);
    };

    // Helper to sanitize HTML strings
    function escapeHtml(str) {
        if (str === null || str === undefined) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    // FORM SUBMIT SERIALIZATION
    $('#policyForm').on('submit', function(e) {
        // Normalize each block to ensure both keys are saved for compatibility
        sections.forEach(sec => {
            (sec.blocks || []).forEach(b => {
                if (b.type === 'callout') {
                    const msg = b.message || b.text || '';
                    b.message = msg;
                    b.text = msg;
                } else if (b.type === 'hero_card') {
                    const sm = b.summary || b.subtitle || '';
                    b.summary = sm;
                    b.subtitle = sm;
                    const hls = b.highlights || b.items || [];
                    b.highlights = hls;
                    b.items = hls;
                } else if (b.type === 'custom') {
                    const html = b.custom_html || b.content || '';
                    b.custom_html = html;
                    b.content = html;
                } else if (b.type === 'cards') {
                    (b.cards || []).forEach(c => {
                        const d = c.desc || c.description || '';
                        c.desc = d;
                        c.description = d;
                    });
                } else if (b.type === 'text') {
                    const t = b.content || b.text || '';
                    b.content = t;
                    b.text = t;
                }
            });
        });

        $('#sections_json').val(JSON.stringify(sections));
    });

    // Initial render
    renderSections();
})();
</script>
@stop