@extends('backend.layouts.app')

@section('title', 'Create Page')

@push('styles')
<style>
#editor-modal { display: none; position: fixed; inset: 0; z-index: 9999999; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
#editor-modal.open { display: flex !important; align-items: center; justify-content: center; }
#editor-modal .modal-inner { width: 90vw; height: 85vh; background: #1e1e1e; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
#editor-modal .modal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #252526; border-bottom: 1px solid #3c3c3c; }
#editor-modal .modal-toolbar span { color: #ccc; font-size: 13px; font-weight: 600; }
#editor-modal .modal-body { flex: 1; overflow: hidden; }
#editor-trigger { cursor: pointer; min-height: 120px; border: 2px dashed #d1d5db; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
#editor-trigger:hover { border-color: #3b82f6; background: #f0f7ff; }
#editor-trigger.drag-over { border-color: #3b82f6 !important; background: #eff6ff !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
#editor-trigger.has-content { border-style: solid; border-color: #d1d5db; background: #1e1e1e; min-height: 100px; }
#editor-trigger .preview-code { width: 100%; height: 120px; overflow: auto; padding: 14px; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 13px; line-height: 1.6; color: #d4d4d4; white-space: pre-wrap; word-break: break-all; }
.component-used { border-color: #10b981 !important; background-color: #d1fae5 !important; }
.dark .component-used { background-color: #064e3b !important; border-color: #10b981 !important; }
.modal-component-chip:hover { background: #505050 !important; color: #fff !important; }
.modal-component-chip:active { cursor: grabbing; }
#modal-component-search:focus { border-color: #3b82f6 !important; }
.modal-component-chip.dragging { opacity: 0.4; }
.field-required-error { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
.dark .field-required-error { background-color: #450a0a !important; border-color: #ef4444 !important; }
.field-shake { animation: fieldShake 0.4s ease-in-out; }
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}
#modal-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.editor-trigger-disabled { opacity: 0.5; cursor: not-allowed !important; }
.editor-trigger-disabled:hover { border-color: #d1d5db; background: transparent; }
.editor-trigger-hint { font-size: 11px; color: #ef4444; margin-top: 4px; display: none; }
</style>
@endpush

@section('content')
@php
$pageTitle = 'Create Page'; $indexRoute = 'frontend-site.pages.index'; $indexLabel = 'Pages'; $indexRouteParams = $selectedSiteId ? ['site_id' => $selectedSiteId] : []; $parentRoute = 'frontend-site.sites.index'; $parentLabel = 'Sites';
$componentCodes = $components->pluck('code')->toArray();
$componentBlocks = $components->map(fn($c) => ['code' => $c->code, 'name' => $c->name])->values()->toArray();
$grouped = $components->groupBy('category');
@endphp
@include('backend.layouts.partials._page_header')

<div class="space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="px-5 py-5">
            <p class="text-sm text-gray-500 dark:text-gray-400">Create a new page and assign components.</p>
        </div>

        <form action="{{ route('frontend-site.pages.store') }}" method="POST" id="page-form" x-data="{ panelOpen: false }">
            @csrf
            <input type="hidden" name="page_id" id="page-id" value="">
            <div class="space-y-5 border-t border-gray-100 p-6 dark:border-gray-800">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Site <span class="text-error-500">*</span></label>
                    <select name="site_fk" required {{ $selectedSiteId ? 'disabled' : '' }}
                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 @error('site_fk') border-error-300 @else border-gray-300 dark:border-gray-700 @enderror">
                        @if(!$selectedSiteId)<option value="">-- Select Site --</option>@endif
                        @foreach($sites as $id => $name)
                            <option value="{{ $id }}" {{ old('site_fk', $selectedSiteId ?? '') == $id ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                    @if($selectedSiteId)<input type="hidden" name="site_fk" value="{{ $selectedSiteId }}">@endif
                    @error('site_fk')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                </div>

                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Name <span class="text-error-500">*</span></label>
                        <input type="text" name="name" id="page-name" value="{{ old('name') }}" placeholder="Products"
                            oninput="var s = this.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); document.getElementById('page-slug').value = s; document.getElementById('page-slug-hidden').value = s;"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden @error('name') border-error-300 @else border-gray-300 @enderror dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        @error('name')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Slug <span class="text-error-500">*</span></label>
                        <input type="text" id="page-slug" value="{{ old('slug') }}" placeholder="products" readonly tabindex="-1"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden font-mono @error('slug') border-error-300 @else border-gray-300 @enderror dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 opacity-70 cursor-not-allowed">
                        <input type="hidden" name="slug" id="page-slug-hidden" value="{{ old('slug') }}">
                        @error('slug')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-900/30">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                            <div x-data="{ toggle: {{ old('status', true) ? 'true' : 'false' }} }" class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Status</span>
                                <button type="button" @click="toggle = !toggle; $refs.checkbox.checked = toggle"
                                    :class="toggle ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"
                                    class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200">
                                    <span :class="toggle ? 'translate-x-full' : ''"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"></span>
                                </button>
                                <span class="text-sm text-gray-500 dark:text-gray-400" x-text="toggle ? 'Active' : 'Inactive'"></span>
                                <input type="checkbox" name="status" value="1" x-ref="checkbox" {{ old('status', true) ? 'checked' : '' }} class="hidden">
                            </div>

                            <div x-data="{ toggle: {{ old('is_default') ? 'true' : 'false' }} }" class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Default Page</span>
                                <button type="button" @click="toggle = !toggle; $refs.checkbox.checked = toggle"
                                    :class="toggle ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"
                                    class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200">
                                    <span :class="toggle ? 'translate-x-full' : ''"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"></span>
                                </button>
                                <span class="text-sm text-gray-500 dark:text-gray-400" x-text="toggle ? 'Default' : 'Not Default'"></span>
                                <input type="checkbox" name="is_default" value="1" x-ref="checkbox" {{ old('is_default') ? 'checked' : '' }} class="hidden">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Entry Script --}}
                <div>
                    <div class="mb-3 space-y-1.5 rounded-lg border border-purple-200 bg-purple-50 p-3 text-xs text-purple-700 dark:border-purple-800 dark:bg-purple-900/20 dark:text-purple-300">
                        <div class="flex items-start gap-2">
                            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span><strong>$_shared</strong> — a special object to share data between Entry Script, Components, Page Content, and Layout. Use <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">$_shared->key = value</code> in Entry Script, then <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">@{{ $_shared->key }}</code> in Layout.</span>
                        </div>
                        <div class="flex items-start gap-2">
                            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v16h16"/></svg>
                            <span>Must wrap Entry Script code in <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">@@php ... @@endphp</code> (or <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">&lt;?php ... ?&gt;</code>). Regular variables like <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">$user</code> will NOT reach the Layout — use <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">$_shared->user</code> instead.</span>
                        </div>
                    </div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5 mb-2">Entry Script (optional)</label>
                    <div id="editor-trigger" onclick="openEditor('entry')">
                        <div class="text-center text-gray-400">
                            <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                            <p class="text-sm font-medium">Click to open Entry Script editor</p>
                        </div>
                    </div>
                    <textarea name="entry_script" id="entry-input" class="hidden">{{ old('entry_script') }}</textarea>
                    @error('entry_script')
                    <div id="entry-script-error" class="mt-2 flex items-start gap-2 rounded-lg border border-error-200 bg-error-50 p-3 text-xs text-error-700 dark:border-error-800 dark:bg-error-900/20 dark:text-error-300">
                        <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span>{{ $message }}</span>
                    </div>
                    @enderror
                </div>

                {{-- Components --}}
                <div>
                    <div class="flex items-center justify-between mb-1.5">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400">Components</label>
                        <button type="button" @click="panelOpen = !panelOpen"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-brand-200 px-3 py-1.5 text-xs font-medium text-brand-600 hover:bg-brand-50 dark:border-brand-700 dark:text-brand-400 dark:hover:bg-brand-900/20 transition-colors">
                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
                            Open Component Panel
                            <span id="component-count-badge" style="display:none;background:#10b981;color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;min-width:16px;text-align:center;">0</span>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">Select components to use in this page. Then reference them as <code>$code</code> in the page content or layout below.</p>
                </div>

                {{-- Page Content --}}
                <div>
                    <div class="mb-2 space-y-1 rounded-lg border border-blue-200 bg-blue-50 p-3 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300">
                        <div><strong>Page Content</strong> &mdash; rendered as <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">@{!! $__page__ !!}</code> inside the layout.</div>
                        <div class="flex items-start gap-2 mt-1">
                            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span>When <strong>Override with custom layout</strong> is selected and the layout is a full standalone page, this field is ignored &mdash; the layout alone is used.</span>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400">Page Content</label>
                        <select id="page-content-lang" class="text-xs border border-gray-300 rounded-md px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 w-full sm:w-auto">
                            <option value="php" selected>All Language (PHP)</option>
                            <option value="html">HTML</option>
                            <option value="css">CSS</option>
                            <option value="javascript">JavaScript</option>
                        </select>
                    </div>
                    <div id="editor-trigger" onclick="openEditor('pageContent')">
                        <div class="text-center text-gray-400">
                            <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                            <p class="text-sm font-medium">Click to open Page Content editor</p>
                        </div>
                    </div>
                    <textarea name="page_content" id="page-content-input" class="hidden">{{ old('page_content') }}</textarea>
                </div>

                {{-- Layout --}}
                <div>
                    <div class="mb-2 space-y-1 rounded-lg border border-blue-200 bg-blue-50 p-3 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300">
                        <div><strong>Layout</strong> &mdash; the HTML wrapper for the page.</div>
                        <div class="flex items-start gap-2">
                            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span><strong>Use site layout</strong> &mdash; wraps page content inside the site's global header/footer template. The layout field below is ignored.</span>
                        </div>
                        <div class="flex items-start gap-2">
                            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span><strong>Override with custom layout</strong> &mdash; the editor below becomes the full page output. Use for standalone pages like login, landing pages, etc. Page Content is ignored unless referenced as <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">@{!! $__page__ !!}</code>.</span>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
                        <div x-data="{ layout: '{{ old('use_custom_layout', false) ? '1' : '0' }}' }" class="flex flex-col sm:flex-row sm:items-center gap-3">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-400">Layout</label>
                            <div class="flex flex-wrap items-center gap-3">
                                <label class="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
                                    <input type="radio" name="use_custom_layout" value="0" x-model="layout" class="sr-only">
                                    <svg :class="layout === '0' ? 'text-brand-500' : 'text-gray-300'" class="h-5 w-5 hover:text-gray-400 transition-colors" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                    Use site layout
                                </label>
                                <label class="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
                                    <input type="radio" name="use_custom_layout" value="1" x-model="layout" class="sr-only">
                                    <svg :class="layout === '1' ? 'text-brand-500' : 'text-gray-300'" class="h-5 w-5 hover:text-gray-400 transition-colors" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                    Override with custom layout
                                </label>
                            </div>
                        </div>
                        <select id="layout-lang" class="text-xs border border-gray-300 rounded-md px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 w-full sm:w-auto">
                            <option value="php">All Language (PHP)</option>
                            <option value="html">HTML</option>
                            <option value="css">CSS</option>
                            <option value="javascript">JavaScript</option>
                        </select>
                    </div>
                    <div id="editor-trigger" onclick="openEditor('layout')">
                        <div class="text-center text-gray-400">
                            <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                            <p class="text-sm font-medium">Click to open Layout editor</p>
                        </div>
                    </div>
                    <textarea name="layout" id="layout-input" class="hidden">{{ old('layout') }}</textarea>
                    @error('layout')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    <button type="button" onclick="openGrapesBuilder()" class="mt-3 inline-flex items-center gap-2 rounded-lg border border-brand-300 px-4 py-2 text-sm font-medium text-brand-600 hover:bg-brand-50 dark:border-brand-700 dark:text-brand-400 dark:hover:bg-brand-900/20 transition-colors">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        Open Visual Builder
                    </button>
                </div>
            </div>

            <div class="flex justify-end gap-3 border-t border-gray-100 px-6 py-4 dark:border-gray-800">
                <a href="{{ route('frontend-site.pages.index', $selectedSiteId ? ['site_id' => $selectedSiteId] : []) }}" class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Save</button>
            </div>

            <button type="button" @click="panelOpen = !panelOpen"
                class="fixed top-1/2 z-[100001] -translate-y-1/2 rounded-l-lg bg-brand-500 p-2.5 text-white shadow-lg hover:bg-brand-600 transition-all duration-300 right-0">
                <svg class="h-5 w-5 transition-transform duration-300" :class="panelOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                </svg>
            </button>

            <div x-show="panelOpen" x-cloak @click.outside="panelOpen = false">
                <div class="fixed right-0 top-0 z-[100000] h-full w-80 bg-white shadow-2xl border-l border-gray-200 dark:bg-gray-800 dark:border-gray-700 overflow-y-auto"
                    :class="panelOpen ? 'translate-x-0' : 'translate-x-full'"
                    style="transition: transform 0.3s ease-in-out;">
                    <div class="px-4 pt-16 pb-4">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-sm font-semibold text-gray-800 dark:text-white/90">Components</h3>
                            <button type="button" @click="panelOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>
                        <div class="mb-4 space-y-2 rounded-lg border border-info-200 bg-info-50 p-3 text-xs text-info-600 dark:border-info-800 dark:bg-info-900/20 dark:text-info-400">
                            <div><strong>How it works:</strong> Use <code>$component_code</code> in your page content or layout. E.g. <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">@{!! $hero !!}</code>.</div>
                            <div class="flex items-start gap-2">
                                <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/></svg>
                                <span><strong>Drag &amp; drop:</strong> Drag a component label onto any editor box below to insert it.</span>
                            </div>
                            <div class="flex items-start gap-2">
                                <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/></svg>
                                <span><strong>Autocomplete:</strong> Type <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">$</code> in any editor to see component suggestions.</span>
                            </div>
                        </div>
                        @forelse($grouped as $category => $comps)
                        <div x-data="{ open: {{ $loop->first ? 'true' : 'false' }} }" class="mb-2 rounded-lg border border-gray-100 dark:border-gray-700">
                            <button type="button" @click="open = !open" class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-lg transition-colors">
                                <span>{{ $category }} ({{ $comps->count() }})</span>
                                <svg :class="open ? 'rotate-180' : ''" class="h-4 w-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </button>
                            <div x-show="open" x-collapse>
                                <div class="space-y-1 p-2">
                                    @foreach($comps as $comp)
                                    <label draggable="true" data-component-code="{{ $comp->code }}"
                                        class="flex items-start gap-2 cursor-grab active:cursor-grabbing group rounded-lg border border-gray-100 bg-white px-2 py-1.5 hover:border-brand-200 hover:bg-brand-50/50 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-brand-800 dark:hover:bg-brand-900/20 transition-colors">
                                        <input type="checkbox" name="components[]" value="{{ $comp->id }}" {{ in_array($comp->id, old('components', [])) ? 'checked' : '' }}
                                            class="mt-0.5 h-3.5 w-3.5 rounded border-gray-300 text-brand-500 focus:ring-brand-500 shrink-0">
                                        <div class="flex flex-col gap-0.5 min-w-0">
                                            <span class="text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-brand-600 truncate max-w-full" title="{{ $comp->name }}">{{ $comp->name }}</span>
                                            <span class="text-xs font-mono text-gray-400">${{ $comp->code }}</span>
                                        </div>
                                    </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-6 text-center dark:border-gray-700 dark:bg-gray-900/30">
                            <p class="text-sm text-gray-500">No components available.</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

{{-- Editor Modal --}}
<div id="editor-modal" style="display:none">
    <div class="modal-inner">
        <div class="modal-toolbar">
            <span id="modal-title">Monaco Editor</span>
            <div style="display:flex;gap:8px;align-items:center;">
                <button type="button" id="modal-components-btn" style="padding:6px 12px;background:#3c3c3c;color:#ccc;border:none;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
                    Components
                </button>
                <select id="modal-lang" style="padding:4px 8px;background:#3c3c3c;color:#ccc;border:none;border-radius:4px;font-size:11px;cursor:pointer;">
                    <option value="php">PHP</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">JavaScript</option>
                </select>
                <button type="button" onclick="formatCode()" style="padding:6px 12px;background:#3c3c3c;color:#ccc;border:none;border-radius:6px;font-size:12px;cursor:pointer;">Format</button>
                <button type="button" id="modal-save-btn" onclick="saveAndClose()" disabled style="padding:6px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save</button>
                <button type="button" onclick="closeEditor()" style="padding:6px 16px;background:#6b7280;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Close</button>
            </div>
        </div>
        <div id="modal-error" style="display:none;background:#ef4444;color:#fff;padding:8px 16px;font-size:12px;font-weight:500;border-bottom:1px solid #3c3c3c;"></div>
        <div id="modal-components-panel" style="display:none;background:#252526;border-bottom:1px solid #3c3c3c;max-height:250px;overflow-y:auto;">
            <div style="padding:8px 12px;">
                <div style="position:relative;margin-bottom:8px;">
                    <input type="text" id="modal-component-search" placeholder="Search components..." style="width:100%;padding:6px 10px 6px 28px;background:#1e1e1e;color:#ccc;border:1px solid #3c3c3c;border-radius:4px;font-size:12px;outline:none;box-sizing:border-box;">
                    <svg style="position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#666;" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <div id="modal-recent-section" style="display:none;margin-bottom:8px;">
                    <div style="font-size:10px;font-weight:600;color:#10b981;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Recently Used</div>
                    <div id="modal-recent-chips" style="display:flex;flex-wrap:wrap;gap:4px;"></div>
                </div>
                <div id="modal-all-components">
                @forelse($grouped as $category => $comps)
                <div class="modal-component-group" style="margin-bottom:6px;">
                    <div style="font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">{{ $category }}</div>
                    <div style="display:flex;flex-wrap:wrap;gap:4px;">
                        @foreach($comps as $comp)
                        <span draggable="true" data-component-code="{{ $comp->code }}" data-component-name="{{ $comp->name }}" class="modal-component-chip" style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#3c3c3c;color:#ccc;border-radius:4px;font-size:11px;cursor:grab;user-select:none;transition:all .15s;">
                            <span style="opacity:0.6;">$</span>{{ $comp->code }}
                        </span>
                        @endforeach
                    </div>
                </div>
                @empty
                <div style="font-size:12px;color:#666;text-align:center;padding:8px;">No components available.</div>
                @endforelse
                </div>
                <div id="modal-no-results" style="display:none;font-size:12px;color:#666;text-align:center;padding:8px;">No components match your search.</div>
            </div>
        </div>
        <div class="modal-body">
            <div id="modal-editor" style="width:100%;height:100%;"></div>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('vendor/monaco-editor/min/vs/loader.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    require.config({ paths: { vs: '/vendor/monaco-editor/min/vs' } });

    var componentCodes = @json($componentCodes);
    var layoutInput = document.getElementById('layout-input');
    var entryInput = document.getElementById('entry-input');
    var pageContentInput = document.getElementById('page-content-input');
    var modalEditor = null;
    var currentEditorType = null;

    var editors = {
        entry: { input: entryInput, lang: 'php', title: 'Entry Script', trigger: entryInput.previousElementSibling },
        pageContent: { input: pageContentInput, lang: 'php', title: 'Page Content', trigger: pageContentInput.previousElementSibling },
        layout: { input: layoutInput, lang: 'php', title: 'Layout', trigger: layoutInput.previousElementSibling }
    };

    function updatePreview(type) {
        var ed = editors[type];
        var val = ed.input.value;
        var trigger = ed.trigger;
        if (val && val.trim()) {
            trigger.classList.add('has-content');
            trigger.innerHTML = '<div class="preview-code">' + escapeHtml(val.substring(0, 800)) + (val.length > 800 ? '\n...' : '') + '</div>';
        } else {
            trigger.classList.remove('has-content');
            var label = type === 'entry' ? 'Entry Script' : type === 'pageContent' ? 'Page Content' : 'Layout';
            trigger.innerHTML = '<div class="text-center text-gray-400"><svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg><p class="text-sm font-medium">Click to open ' + label + ' editor</p></div>';
        }
    }

    function escapeHtml(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    updatePreview('entry');
    updatePreview('pageContent');
    updatePreview('layout');

    function registerAutocomplete() {
        ['php', 'html', 'css', 'javascript'].forEach(function (lang) {
            monaco.languages.registerCompletionItemProvider(lang, {
                triggerCharacters: ['$'],
                provideCompletionItems: function (model, position) {
                    var word = model.getWordUntilPosition(position);
                    var range = new monaco.Range(position.lineNumber, word.startColumn, position.lineNumber, word.endColumn);
                    return {
                        suggestions: componentCodes.map(function (code) {
                            return {
                                label: '$' + code,
                                kind: monaco.languages.CompletionItemKind.Variable,
                                insertText: '{' + '!! $' + code + ' !!}',
                                detail: 'Insert component: ' + code,
                                range: range,
                                command: { id: 'tick-' + code, title: '' }
                            };
                        })
                    };
                }
            });
        });
    }

    window.openEditor = function(type) {
        if (!validatePageMeta()) return;
        currentEditorType = type;
        var ed = editors[type];
        document.getElementById('modal-title').textContent = 'Monaco Editor — ' + ed.title;
        var langSelect = document.getElementById('modal-lang');
        langSelect.value = ed.lang;
        document.getElementById('editor-modal').classList.add('open');
        document.body.style.overflow = 'hidden';

        require(['vs/editor/editor.main'], function () {
            if (!modalEditor) {
                registerAutocomplete();
                modalEditor = monaco.editor.create(document.getElementById('modal-editor'), {
                    value: ed.input.value,
                    language: ed.lang,
                    theme: 'hc-black',
                    automaticLayout: true,
                    fontSize: 14,
                    lineNumbers: 'on',
                    wordWrap: 'on',
                    minimap: { enabled: true },
                    scrollBeyondLastLine: false,
                    tabSize: 4,
                    insertSpaces: true,
                    bracketPairColorization: { enabled: true },
                    autoIndent: 'full',
                    formatOnPaste: true,
                    formatOnType: true,
                    padding: { top: 10 },
                });

                modalEditor.addAction({
                    id: 'format-document', label: 'Format Document', contextMenuGroupId: 'modification', contextMenuOrder: 1.5,
                    keybindings: [monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KeyF],
                    run: function (ed) { ed.getAction('editor.action.formatDocument').run(); }
                });

                var modalBody = document.querySelector('#editor-modal .modal-body');
                modalBody.addEventListener('dragover', function (e) { e.preventDefault(); });
                modalBody.addEventListener('drop', function (e) {
                    e.preventDefault();
                    var text = e.dataTransfer.getData('text/plain');
                    if (!text || !modalEditor) return;
                    var pos = modalEditor.getPosition();
                    modalEditor.executeEdits('drop', [{ range: new monaco.Range(pos.lineNumber, pos.column, pos.lineNumber, pos.column), text: text, forceMoveMarkers: true }]);
                    modalEditor.focus();
                });

                componentCodes.forEach(function (code) {
                    monaco.editor.registerCommand('tick-' + code, function () {
                        var label = document.querySelector('[data-component-code="' + code + '"]');
                        if (label) { var cb = label.querySelector('input[type="checkbox"]'); if (cb) cb.checked = true; }
                    });
                });
            } else {
                modalEditor.setValue(ed.input.value);
                monaco.editor.setModelLanguage(modalEditor.getModel(), ed.lang);
            }

            langSelect.onchange = function () {
                ed.lang = this.value;
                if (modalEditor) monaco.editor.setModelLanguage(modalEditor.getModel(), this.value);
            };

            setTimeout(function () { modalEditor.focus(); }, 100);
        });
    };

    window.closeEditor = function () {
        if (modalEditor && currentEditorType) {
            editors[currentEditorType].input.value = modalEditor.getValue();
        }
        document.getElementById('editor-modal').classList.remove('open');
        document.body.style.overflow = '';
        hideModalError();
        if (currentEditorType) updatePreview(currentEditorType);
    };

    window.saveAndClose = function () {
        if (!validatePageMeta()) return;
        if (modalEditor && currentEditorType) {
            editors[currentEditorType].input.value = modalEditor.getValue();
        }

        var form = document.getElementById('page-form');
        var formData = new FormData(form);

        // Only send the current editor field to avoid cross-field validation errors
        formData.delete('layout');
        formData.delete('entry_script');
        formData.delete('page_content');
        if (currentEditorType === 'entry') {
            formData.set('entry_script', entryInput.value);
        } else if (currentEditorType === 'pageContent') {
            formData.set('page_content', pageContentInput.value);
        } else if (currentEditorType === 'layout') {
            formData.set('layout', layoutInput.value);
        }

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        })
        .then(function (res) {
            if (!res.ok) {
                return res.json().then(function (data) { throw data; });
            }
            return res.json();
        })
        .then(function (data) {
            hideModalError();
            if (data.page_id) {
                document.getElementById('page-id').value = data.page_id;
            }
            showToast(data.message || 'Code updated successfully!');
        })
        .catch(function (data) {
            var msg = (data && data.message) ? data.message : 'Failed to save. Please try again.';
            if (data && data.errors) {
                var field = currentEditorType === 'entry' ? 'entry_script' : currentEditorType === 'pageContent' ? 'page_content' : 'layout';
                if (data.errors[field] && data.errors[field][0]) {
                    msg = data.errors[field][0];
                }
            }
            showModalError(msg);
        });
    };

    window.formatCode = function () {
        if (modalEditor) modalEditor.getAction('editor.action.formatDocument').run();
    };

    var modalErrorTimer;

    function showModalError(message) {
        var el = document.getElementById('modal-error');
        if (!el) return;
        el.textContent = message;
        el.style.display = 'block';
        clearTimeout(modalErrorTimer);
        modalErrorTimer = setTimeout(function () {
            hideModalError();
        }, 5000);
    }

    function hideModalError() {
        var el = document.getElementById('modal-error');
        if (!el) return;
        el.style.display = 'none';
        el.textContent = '';
        clearTimeout(modalErrorTimer);
    }

    function validatePageMeta() {
        var nameEl = document.getElementById('page-name');
        var slugHiddenEl = document.getElementById('page-slug-hidden');
        var slugVisibleEl = document.getElementById('page-slug');
        var name = (nameEl.value || '').trim();
        var slug = (slugHiddenEl.value || '').trim();
        var valid = true;

        if (!name) {
            nameEl.classList.add('field-required-error', 'field-shake');
            valid = false;
        }
        if (!slug) {
            slugVisibleEl.classList.add('field-required-error', 'field-shake');
            slugHiddenEl.classList.add('field-required-error', 'field-shake');
            valid = false;
        }

        setTimeout(function () {
            nameEl.classList.remove('field-shake');
            slugVisibleEl.classList.remove('field-shake');
            slugHiddenEl.classList.remove('field-shake');
        }, 400);

        if (!valid) {
            showToast('Please fill in Name and Slug before editing code.', true);
        }

        return valid;
    }

    function clearFieldError(el) {
        el.classList.remove('field-required-error');
    }

    function updateEditorTriggers() {
        var name = (document.getElementById('page-name').value || '').trim();
        var slug = (document.getElementById('page-slug-hidden').value || '').trim();
        var ready = name && slug;
        document.querySelectorAll('#editor-trigger').forEach(function (trigger) {
            trigger.classList.toggle('editor-trigger-disabled', !ready);
        });
        var saveBtn = document.getElementById('modal-save-btn');
        if (saveBtn) saveBtn.disabled = !ready;
    }

    function showToast(message, isError) {
        var existing = document.getElementById('editor-toast');
        if (existing) existing.remove();
        var toast = document.createElement('div');
        toast.id = 'editor-toast';
        toast.style.cssText = 'position:fixed;top:20px;right:20px;z-index:99999999;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:slideIn .3s ease;transition:opacity .3s;';
        toast.style.background = isError ? '#ef4444' : '#10b981';
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(function () { toast.style.opacity = '0'; setTimeout(function () { toast.remove(); }, 300); }, 2500);
    }

    document.querySelectorAll('[draggable="true"]').forEach(function (el) {
        el.addEventListener('dragstart', function (e) {
            var code = this.dataset.componentCode;
            e.dataTransfer.setData('text/plain', '{' + '!! $' + code + ' !!}');
            e.dataTransfer.effectAllowed = 'copy';
            var cb = this.querySelector('input[type="checkbox"]');
            if (cb) cb.checked = true;
        });
    });

    // Make editor triggers accept drops — auto-open modal and insert component
    var pendingDropText = null;
    document.querySelectorAll('#editor-trigger').forEach(function (trigger) {
        trigger.addEventListener('dragover', function (e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; this.classList.add('drag-over'); });
        trigger.addEventListener('dragleave', function (e) { this.classList.remove('drag-over'); });
        trigger.addEventListener('drop', function (e) {
            e.preventDefault();
            this.classList.remove('drag-over');
            var text = e.dataTransfer.getData('text/plain');
            if (!text) return;
            var type = null;
            if (this.getAttribute('onclick') && this.getAttribute('onclick').includes("'entry'")) type = 'entry';
            else if (this.getAttribute('onclick') && this.getAttribute('onclick').includes("'pageContent'")) type = 'pageContent';
            else if (this.getAttribute('onclick') && this.getAttribute('onclick').includes("'layout'")) type = 'layout';
            if (!type) return;
            if (!validatePageMeta()) return;
            pendingDropText = text;
            openEditor(type);
            setTimeout(function () {
                if (modalEditor && pendingDropText) {
                    var pos = modalEditor.getPosition();
                    modalEditor.executeEdits('drop', [{ range: new monaco.Range(pos.lineNumber, pos.column, pos.lineNumber, pos.column), text: pendingDropText, forceMoveMarkers: true }]);
                    modalEditor.focus();
                    pendingDropText = null;
                }
            }, 300);
        });
    });

    // Modal components panel toggle
    var modalComponentsBtn = document.getElementById('modal-components-btn');
    var modalComponentsPanel = document.getElementById('modal-components-panel');
    if (modalComponentsBtn && modalComponentsPanel) {
        modalComponentsBtn.addEventListener('click', function () {
            var isOpen = modalComponentsPanel.style.display !== 'none';
            modalComponentsPanel.style.display = isOpen ? 'none' : 'block';
            this.style.background = isOpen ? '#3c3c3c' : '#505050';
        });
    }

    // Search/filter components
    var searchInput = document.getElementById('modal-component-search');
    if (searchInput) {
        searchInput.addEventListener('input', function () {
            var q = this.value.toLowerCase().trim();
            var groups = document.querySelectorAll('.modal-component-group');
            var totalVisible = 0;
            groups.forEach(function (group) {
                var chips = group.querySelectorAll('.modal-component-chip');
                var visibleInGroup = 0;
                chips.forEach(function (chip) {
                    var code = (chip.dataset.componentCode || '').toLowerCase();
                    var name = (chip.dataset.componentName || '').toLowerCase();
                    var match = !q || code.includes(q) || name.includes(q);
                    chip.style.display = match ? '' : 'none';
                    if (match) visibleInGroup++;
                });
                group.style.display = visibleInGroup > 0 ? '' : 'none';
                totalVisible += visibleInGroup;
            });
            document.getElementById('modal-no-results').style.display = totalVisible === 0 && q ? 'block' : 'none';
        });
    }

    // Recently used components (localStorage)
    function getRecentlyUsed() {
        try { return JSON.parse(localStorage.getItem('cms_recent_components') || '[]'); } catch (e) { return []; }
    }
    function addRecentlyUsed(code) {
        var list = getRecentlyUsed().filter(function (c) { return c !== code; });
        list.unshift(code);
        if (list.length > 6) list = list.slice(0, 6);
        try { localStorage.setItem('cms_recent_components', JSON.stringify(list)); } catch (e) {}
        renderRecentlyUsed();
    }
    function renderRecentlyUsed() {
        var list = getRecentlyUsed();
        var section = document.getElementById('modal-recent-section');
        var container = document.getElementById('modal-recent-chips');
        if (!section || !container) return;
        if (list.length === 0) { section.style.display = 'none'; return; }
        section.style.display = 'block';
        container.innerHTML = '';
        list.forEach(function (code) {
            var chip = document.createElement('span');
            chip.draggable = true;
            chip.dataset.componentCode = code;
            chip.dataset.recent = 'true';
            chip.className = 'modal-component-chip modal-recent-chip';
            chip.style.cssText = 'display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#064e3b;color:#6ee7b7;border-radius:4px;font-size:11px;cursor:grab;user-select:none;transition:all .15s;';
            chip.innerHTML = '<span style="opacity:0.6;">$</span>' + code;
            container.appendChild(chip);
        });
        attachChipEvents(container);
    }

    // Component count badge
    function updateComponentCount() {
        var checked = document.querySelectorAll('input[name="components[]"]:checked').length;
        var badge = document.getElementById('component-count-badge');
        if (!badge) return;
        if (checked > 0) {
            badge.style.display = 'inline';
            badge.textContent = checked;
        } else {
            badge.style.display = 'none';
        }
    }
    document.querySelectorAll('input[name="components[]"]').forEach(function (cb) {
        cb.addEventListener('change', updateComponentCount);
    });
    updateComponentCount();

    // Attach drag events to chips
    function attachChipEvents(container) {
        container.querySelectorAll('.modal-component-chip').forEach(function (chip) {
            chip.addEventListener('dragstart', function (e) {
                var code = this.dataset.componentCode;
                e.dataTransfer.setData('text/plain', '{' + '!! $' + code + ' !!}');
                e.dataTransfer.effectAllowed = 'copy';
                // Custom drag ghost
                var ghost = document.createElement('div');
                ghost.textContent = '$' + code;
                ghost.style.cssText = 'position:fixed;top:-1000px;left:-1000px;background:#10b981;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;font-family:monospace;z-index:99999;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,0.3);';
                document.body.appendChild(ghost);
                e.dataTransfer.setDragImage(ghost, 0, 0);
                setTimeout(function () { ghost.remove(); }, 0);
                this.classList.add('dragging');
                if (this.dataset.recent !== 'true') {
                    addRecentlyUsed(code);
                }
                // Tick checkbox in side drawer
                var label = document.querySelector('#component-panel [data-component-code="' + code + '"]');
                if (label) { var cb = label.querySelector('input[type="checkbox"]'); if (cb) cb.checked = true; }
            });
            chip.addEventListener('dragend', function () {
                this.classList.remove('dragging');
                if (this.dataset.recent === 'true') {
                    addRecentlyUsed(this.dataset.componentCode);
                }
            });
        });
    }

    // Initial setup for modal chips
    attachChipEvents(document.getElementById('modal-components-panel'));
    renderRecentlyUsed();

    function syncComponentCheckboxes() {
        var usedCodes = {};
        [entryInput, pageContentInput, layoutInput].forEach(function (input) {
            var m; var re = new RegExp('\\{' + '!!\\s+\\$(\\w+)\\s+' + '!!}', 'g');
            while ((m = re.exec(input.value)) !== null) { usedCodes[m[1]] = true; }
        });
        if (modalEditor && currentEditorType) {
            var m2; var re2 = new RegExp('\\{' + '!!\\s+\\$(\\w+)\\s+' + '!!}', 'g');
            while ((m2 = re2.exec(modalEditor.getValue())) !== null) { usedCodes[m2[1]] = true; }
        }
        document.querySelectorAll('[data-component-code]').forEach(function (label) {
            var cb = label.querySelector('input[type="checkbox"]');
            var isUsed = !!usedCodes[label.dataset.componentCode];
            if (cb) cb.checked = isUsed;
            if (isUsed) label.classList.add('component-used'); else label.classList.remove('component-used');
        });
    }

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && document.getElementById('editor-modal').classList.contains('open')) closeEditor();
        if ((e.ctrlKey || e.metaKey) && e.key === 's' && document.getElementById('editor-modal').classList.contains('open')) { e.preventDefault(); saveAndClose(); }
    });

    document.getElementById('editor-modal').addEventListener('click', function (e) { if (e.target === this) closeEditor(); });

    document.getElementById('page-form').addEventListener('submit', function () {
        if (modalEditor && currentEditorType) editors[currentEditorType].input.value = modalEditor.getValue();
        layoutInput.value = window.layoutEditor ? window.layoutEditor.getValue() : layoutInput.value;
        entryInput.value = entryInput.value;
        pageContentInput.value = pageContentInput.value;
    });

    window.syncComponentCheckboxes = syncComponentCheckboxes;

    // Watch name/slug changes to enable/disable editor triggers and modal save button
    var nameInput = document.getElementById('page-name');
    var slugInput = document.getElementById('page-slug-hidden');
    if (nameInput) {
        nameInput.addEventListener('input', function () {
            clearFieldError(this);
            updateEditorTriggers();
        });
    }
    if (slugInput) {
        slugInput.addEventListener('input', function () {
            clearFieldError(this);
            clearFieldError(document.getElementById('page-slug'));
            updateEditorTriggers();
        });
    }
    updateEditorTriggers();
});

function openGrapesBuilder() {
    var layoutInput = document.getElementById('layout-input');
    if (window.layoutEditor) {
        try { localStorage.setItem('grapesjs_layout_input', window.layoutEditor.getValue()); localStorage.setItem('grapesjs_components', JSON.stringify(@json($componentBlocks))); } catch (e) {}
    }
    var url = '{{ route('frontend-site.pages.layout-builder') }}';
    try { var q = encodeURIComponent(JSON.stringify(@json($componentBlocks))); if (q.length < 4000) url += '?cms=' + q; } catch (e) {}
    window.open(url, '_blank');
}

function insertGrapesLayout(html) { if (window.layoutEditor) window.layoutEditor.setValue(html); }
window.addEventListener('message', function (e) { if (e.data && e.data.type === 'grapesjs-layout') insertGrapesLayout(e.data.html); });
window.addEventListener('storage', function (e) { if (e.key === 'grapesjs_layout_result' && e.newValue) { insertGrapesLayout(e.newValue); localStorage.removeItem('grapesjs_layout_result'); localStorage.removeItem('grapesjs_layout_ts'); } });
</script>
@endpush