<?php
declare(strict_types=1);
// Variables: $baseUrl, $assetsUrl, $project, $user, $navItems, $tables, $events,
//            $globalGroups, $tableGroups, $fieldGroups, $pageTitle
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?= htmlspecialchars($project['name'] ?? 'Project') ?> — Events</title>
    <?php include constant('BASE_PATH') . '/core/views/project-head.php'; ?>
    <style>
        /* ── root vars ── */
        :root {
            --ev-border:   #e2e8f0;
            --ev-muted:    #64748b;
            --ev-bg:       #f6f9fd;
            --ev-surface:  #fff;
            --ev-primary:  #2563eb;
            --ev-psoft:    #eff6ff;
            --ev-tree-w:   220px;
            --ev-panel-w:  260px;
        }
        html,body { height:100%; margin:0; }
        body.ev-body { overflow:hidden; background:var(--ev-bg); color:#0f172a;
            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

        /* ── workspace ── */
        .ev-workspace { display:flex; position:fixed; top:56px; left:0; right:0; bottom:0; }

        /* ── left scope tree ── */
        .ev-tree { width:var(--ev-tree-w); flex:0 0 auto; border-right:1px solid var(--ev-border);
            background:var(--ev-surface); display:flex; flex-direction:column; overflow:hidden; }
        .ev-tree-head { padding:12px 14px 6px; border-bottom:1px solid var(--ev-border); flex:0 0 auto; }
        .ev-tree-head strong { font-size:13.5px; display:block; }
        .ev-tree-head small  { font-size:11px; color:var(--ev-muted); }
        .ev-help-btn { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; cursor:pointer;
            font-size:11px; font-weight:700; color:#6d28d9; background:#ede9fe; border:1px solid #ddd6fe;
            border-radius:999px; padding:3px 9px; white-space:nowrap; transition:.15s; }
        .ev-help-btn:hover { background:#6d28d9; color:#fff; border-color:#6d28d9; }
        .ev-help-btn i { font-size:12px; }
        .ev-tree-body { flex:1; overflow-y:auto; padding:6px 0; }

        .ev-section-hd { font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
            color:var(--ev-muted); padding:10px 14px 3px; }
        .ev-node { display:flex; align-items:center; gap:8px; padding:7px 12px 7px 14px; cursor:pointer;
            font-size:12.5px; border-left:3px solid transparent; user-select:none; }
        .ev-node:hover { background:#f8fafc; }
        .ev-node.active { background:var(--ev-psoft); border-left-color:var(--ev-primary); color:var(--ev-primary); }
        .ev-node i { font-size:14px; flex:0 0 16px; }
        .ev-node .ev-nlabel { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .ev-node .ev-nbadge { font-size:10px; font-weight:700; background:#ecfdf5; color:#059669;
            border-radius:999px; padding:1px 6px; flex:0 0 auto; }
        .ev-node .ev-nbadge.has { background:#eff6ff; color:var(--ev-primary); }

        .ev-tbl-toggle { padding:0 10px 0 8px; cursor:pointer; color:var(--ev-muted); font-size:11px; }
        .ev-tbl-children { padding-left:12px; }
        .ev-tbl-child { display:flex; align-items:center; gap:6px; padding:5px 12px 5px 14px; cursor:pointer;
            font-size:12px; border-left:3px solid transparent; color:var(--ev-muted); }
        .ev-tbl-child:hover { background:#f8fafc; color:#334155; }
        .ev-tbl-child.active { background:var(--ev-psoft); border-left-color:var(--ev-primary);
            color:var(--ev-primary); font-weight:600; }
        .ev-tbl-child i { font-size:13px; flex:0 0 14px; }

        /* ── resizer ── */
        .ev-resizer { flex:0 0 5px; cursor:col-resize; background:transparent; position:relative; z-index:3; }
        .ev-resizer::after { content:''; position:absolute; inset:0 2px; background:var(--ev-border);
            opacity:0; transition:opacity .12s; }
        .ev-resizer:hover::after, .ev-resizer.dragging::after { opacity:1; background:var(--ev-primary); }
        body.ev-resizing { cursor:col-resize; user-select:none; }

        /* ── middle event panel ── */
        .ev-panel { width:var(--ev-panel-w); flex:0 0 auto; border-right:1px solid var(--ev-border);
            background:var(--ev-surface); display:flex; flex-direction:column; overflow:hidden; }
        .ev-panel-head { flex:0 0 auto; padding:11px 14px; border-bottom:1px solid var(--ev-border);
            display:flex; align-items:center; gap:8px; }
        .ev-panel-head .ev-ph-icon { width:28px; height:28px; border-radius:7px; display:flex;
            align-items:center; justify-content:center; font-size:14px; flex:0 0 28px; }
        .ev-panel-head .ev-ph-title { font-size:12.5px; font-weight:700; }
        .ev-panel-head .ev-ph-sub   { font-size:10.5px; color:var(--ev-muted); }
        .ev-panel-body { flex:1; overflow-y:auto; }
        .ev-panel-actions { flex:0 0 auto; padding:8px 12px; border-top:1px solid var(--ev-border);
            display:flex; gap:6px; }

        /* event row */
        .ev-row { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
            border-bottom:1px solid #f1f5f9; position:relative; }
        .ev-row:hover { background:#f8fafc; }
        .ev-row.active { background:var(--ev-psoft); }
        .ev-row.active::after { content:''; position:absolute; right:0; top:4px; bottom:4px;
            width:3px; background:var(--ev-primary); border-radius:3px 0 0 3px; }
        .ev-row-tog { width:28px; height:17px; border-radius:999px; border:2px solid #cbd5e1;
            background:#fff; position:relative; cursor:pointer; flex:0 0 28px; transition:.15s; }
        .ev-row-tog::after { content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%);
            width:11px; height:11px; border-radius:50%; background:#94a3b8; transition:.15s; }
        .ev-row-tog.on { background:var(--ev-primary); border-color:var(--ev-primary); }
        .ev-row-tog.on::after { left:calc(100% - 13px); background:#fff; }
        .ev-row-info { flex:1; min-width:0; }
        .ev-row-label { font-size:12.5px; font-weight:600; display:block; }
        .ev-row-lang  { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
            display:inline-block; padding:1px 5px; border-radius:4px; margin-top:1px; }
        .ev-row-lang.php { background:#ede9fe; color:#7c3aed; }
        .ev-row-lang.js  { background:#fef3c7; color:#92400e; }
        .ev-row .bi-chevron-right { font-size:11px; color:#94a3b8; flex:0 0 auto; }

        /* schedule row in panel */
        .ev-sched-row { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer;
            border-bottom:1px solid #f1f5f9; }
        .ev-sched-row:hover { background:#f8fafc; }
        .ev-sched-row.active { background:var(--ev-psoft); }
        .ev-sched-name { font-size:12.5px; font-weight:600; display:block; }
        .ev-sched-cron { font-size:10.5px; color:var(--ev-muted); font-family:ui-monospace,Menlo,monospace; }
        .ev-add-btn { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
            color:var(--ev-primary); border:1px dashed #bfdbfe; border-radius:8px;
            padding:7px 12px; cursor:pointer; background:transparent; width:100%;
            margin:8px 12px; width:calc(100% - 24px); }
        .ev-add-btn:hover { background:var(--ev-psoft); border-color:var(--ev-primary); }

        /* ── right content (editor) ── */
        .ev-content { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:#1e1e2e; }

        /* editor header */
        .ev-rh { display:flex; align-items:center; justify-content:space-between; gap:10px;
            padding:10px 16px; background:#181825; border-bottom:1px solid #313244; flex:0 0 auto; }
        .ev-rh-crumb { display:flex; align-items:center; gap:6px; font-size:12px; min-width:0; overflow:hidden; }
        .ev-rh-scope  { color:#a6adc8; font-weight:600; white-space:nowrap; }
        .ev-rh-group  { color:#cdd6f4; font-weight:600; white-space:nowrap; }
        .ev-rh-event  { color:#cba6f7; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .ev-rh-sep    { color:#45475a; font-size:10px; }
        .ev-rh-right  { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
        .ev-lang-pill { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
            padding:3px 8px; border-radius:5px; }
        .ev-lang-pill.php { background:#4c1d95; color:#ddd6fe; }
        .ev-lang-pill.js  { background:#78350f; color:#fde68a; }
        .ev-status { font-size:11px; color:#6c7086; display:flex; align-items:center; gap:4px; }
        .ev-status.dirty { color:#fab387; }
        .ev-status.saved { color:#a6e3a1; }

        /* editor toolbar */
        .ev-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px;
            padding:6px 12px; background:#181825; border-bottom:1px solid #313244; flex:0 0 auto; }
        .ev-tbtn { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
            color:#a6adc8; border:1px solid #313244; border-radius:6px; background:transparent;
            padding:4px 9px; cursor:pointer; }
        .ev-tbtn:hover { border-color:#45475a; color:#cdd6f4; background:#313244; }
        .ev-tbtn.primary { border-color:#4c1d95; color:#cba6f7; background:#1e1b2e; }
        .ev-tbtn.primary:hover { background:#2d2040; border-color:#7c3aed; color:#ddd6fe; }
        .ev-tbtn.danger:hover  { border-color:#f38ba8; color:#f38ba8; background:#2d1b1e; }
        .ev-tbtn i { font-size:12px; }
        .ev-shortcuts { display:flex; gap:10px; align-items:center; }
        .ev-kh { font-size:10.5px; color:#6c7086; display:flex; align-items:center; gap:3px; }
        kbd { background:#313244; color:#a6adc8; border:1px solid #45475a; border-radius:3px;
            padding:1px 5px; font-size:10px; font-family:inherit; }

        /* code editor */
        .ev-code-root { display:flex; flex:1; min-height:0; }
        .ev-gutter { width:52px; flex:0 0 52px; background:#1e1e2e; border-right:1px solid #2a2a3d;
            overflow:hidden; position:relative; padding-top:16px; }
        #evGutterLines { position:absolute; top:0; left:0; right:0; padding-top:16px;
            font-family:ui-monospace,Menlo,Consolas,'Courier New',monospace; font-size:13px;
            line-height:20px; color:#45475a; text-align:right; padding-right:8px;
            pointer-events:none; transition:transform 0s; }
        #evTa { flex:1; background:#1e1e2e; border:0; outline:0; resize:none;
            color:#cdd6f4; caret-color:#f5c2e7; font-family:ui-monospace,Menlo,Consolas,'Courier New',monospace;
            font-size:13px; line-height:20px; padding:16px; tab-size:4;
            scrollbar-color:#313244 #1e1e2e; }
        #evTa::selection { background:#3d3f60; }
        #evTa::-webkit-scrollbar { width:8px; height:8px; }
        #evTa::-webkit-scrollbar-track { background:#1e1e2e; }
        #evTa::-webkit-scrollbar-thumb { background:#313244; border-radius:4px; }
        #evTa::-webkit-scrollbar-thumb:hover { background:#45475a; }

        /* IntelliSense */
        .ev-intellisense { position:fixed; z-index:10020; width:min(960px, calc(100vw - 24px));
            height:min(560px, calc(100vh - 24px)); max-height:560px; display:none;
            grid-template-columns:minmax(320px, .9fr) minmax(380px, 1.2fr);
            background:#181825; border:1px solid #45475a; border-radius:9px; overflow:hidden;
            box-shadow:0 18px 44px rgba(0,0,0,.52); }
        .ev-intellisense.open { display:grid; }
        .ev-intellisense-list { min-height:0; overflow-y:auto; padding:7px; scrollbar-color:#45475a #181825; }
        .ev-intellisense-item { width:100%; display:grid; grid-template-columns:24px minmax(0,1fr);
            gap:9px; align-items:start; padding:8px 9px; border:0; border-radius:7px;
            background:transparent; color:#cdd6f4; text-align:left; cursor:pointer; }
        .ev-intellisense-cat { flex:0 0 auto; font-size:9px; font-weight:700; letter-spacing:.02em;
            text-transform:uppercase; color:#9399b2; background:#292a3d; border:1px solid #313244;
            border-radius:999px; padding:2px 7px; white-space:nowrap; }
        .ev-intellisense-item.active .ev-intellisense-cat { color:#cba6f7; border-color:#45406b; }
        .ev-doc-cat { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em;
            text-transform:uppercase; color:#cba6f7; background:#2d2040; border-radius:999px;
            padding:2px 9px; margin-bottom:8px; }
        .ev-doc-eg-label { color:#7f849c; font-size:9.5px; font-weight:700; letter-spacing:.04em;
            text-transform:uppercase; margin:10px 0 4px; }
        .ev-intellisense-doc code.ev-doc-eg { color:#a6e3a1; margin-bottom:0; white-space:pre-wrap; }
        .ev-intellisense-item:hover, .ev-intellisense-item.active { background:#313244; }
        .ev-intellisense-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center;
            border-radius:5px; background:#2d2040; color:#cba6f7; font-size:10px; font-weight:800;
            text-transform:uppercase; }
        .ev-intellisense-icon.field { background:#123344; color:#89dceb; }
        .ev-intellisense-icon.method, .ev-intellisense-icon.function { background:#15382d; color:#a6e3a1; }
        .ev-intellisense-icon.keyword, .ev-intellisense-icon.snippet { background:#49351d; color:#f9e2af; }
        .ev-intellisense-copy { min-width:0; }
        .ev-intellisense-copy-head { display:flex; align-items:flex-start; justify-content:space-between;
            gap:8px; min-width:0; }
        .ev-intellisense-label { display:block; min-width:0; white-space:normal; overflow-wrap:anywhere;
            font:12.5px/1.4 ui-monospace,Menlo,Consolas,monospace; color:#f5e0dc; }
        .ev-intellisense-detail { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical;
            -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere;
            color:#7f849c; font-size:11px; line-height:1.4; margin-top:3px; }
        .ev-intellisense-doc { min-height:0; border-left:1px solid #313244; padding:16px 18px; overflow:auto;
            color:#a6adc8; font-size:12.5px; line-height:1.6; }
        .ev-intellisense-doc code { display:block; color:#f5e0dc; font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;
            background:#1e1e2e; border:1px solid #313244; border-radius:5px; padding:6px 8px;
            margin-bottom:10px; white-space:pre-wrap; overflow-wrap:anywhere; }
        .ev-intellisense-doc strong, .ev-doc-title { display:block; color:#cdd6f4; font-size:13px; }
        .ev-doc-description { margin-top:7px; white-space:normal; overflow-wrap:anywhere; }
        .ev-intellisense-empty { color:#6c7086; padding:12px; font-size:11.5px; }
        .ev-signature { color:#89b4fa; font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;
            margin-bottom:7px; overflow-wrap:anywhere; }
        @media (max-width:780px) {
            .ev-intellisense { width:min(96vw, 620px); height:min(76vh, 600px);
                grid-template-columns:1fr; grid-template-rows:minmax(150px, 42%) minmax(0, 58%); }
            .ev-intellisense-doc { border-left:0; border-top:1px solid #313244; }
            .ev-intellisense-list { max-height:none; }
        }

        /* empty state */
        .ev-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
            gap:12px; color:#45475a; text-align:center; padding:40px; background:#1e1e2e; }
        .ev-empty i { font-size:48px; }
        .ev-empty p { font-size:14px; margin:0; color:#6c7086; }

        /* docs panel */
        .ev-docs { flex:0 0 auto; background:#181825; border-top:1px solid #313244; max-height:200px;
            display:flex; flex-direction:column; overflow:hidden; }
        .ev-docs-toggle { display:flex; align-items:center; gap:8px; padding:8px 14px; cursor:pointer;
            font-size:11.5px; font-weight:600; color:#a6adc8; background:transparent; border:0;
            width:100%; text-align:left; border-bottom:1px solid transparent; }
        .ev-docs-toggle:hover { color:#cdd6f4; background:#1e1e2e; }
        .ev-docs-toggle i.chevron { margin-left:auto; font-size:11px; transition:transform .15s; }
        .ev-docs-toggle.open i.chevron { transform:rotate(180deg); }
        .ev-docs-body { display:none; overflow-y:auto; padding:10px 14px 12px;
            scrollbar-color:#313244 #181825; }
        .ev-docs-body.open { display:block; }
        .ev-docs-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .ev-docs-section h4 { font-size:10px; font-weight:800; text-transform:uppercase;
            letter-spacing:.06em; color:#7f849c; margin:0 0 6px; }
        .ev-docs-row { font-size:11.5px; margin:3px 0; display:flex; gap:6px; }
        .ev-docs-row .arg-name { font-family:ui-monospace,Menlo,monospace; color:#cba6f7; font-size:11px; flex:0 0 auto; }
        .ev-docs-row .arg-desc { color:#a6adc8; }
        .ev-docs-ret { font-size:11.5px; color:#a6e3a1; }
        .ev-docs-ret code { font-family:ui-monospace,Menlo,monospace; color:#f9e2af; }
        .ev-docs-example { margin-top:12px; border-top:1px solid #313244; padding-top:10px; }
        .ev-docs-example h4 { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
            color:#cba6f7; margin:0 0 6px; display:flex; align-items:center; gap:5px; }
        .ev-docs-example pre { margin:0; padding:10px 12px; background:#11111b; border:1px solid #313244;
            border-radius:7px; color:#cdd6f4; font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;
            white-space:pre; overflow-x:auto; }

        /* schedule special UI */
        .ev-sched-header { padding:10px 14px; background:#181825; border-bottom:1px solid #313244;
            flex:0 0 auto; }
        .ev-sched-header label { font-size:10px; font-weight:700; text-transform:uppercase;
            letter-spacing:.06em; color:#7f849c; display:block; margin-bottom:3px; }
        .ev-sched-header input, .ev-sched-header select {
            background:#313244; border:1px solid #45475a; border-radius:6px;
            color:#cdd6f4; font-size:12.5px; padding:5px 9px; width:100%; outline:0; }
        .ev-sched-header input:focus, .ev-sched-header select:focus { border-color:#7c3aed; }
        .ev-sched-row-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }

        /* buttons */
        .ev-btn { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
            padding:7px 13px; border-radius:8px; cursor:pointer; border:1px solid var(--ev-border);
            background:var(--ev-surface); color:#334155; }
        .ev-btn:hover { border-color:#bfdbfe; background:var(--ev-psoft); color:var(--ev-primary); }
        .ev-btn.primary { background:var(--ev-primary); border-color:var(--ev-primary); color:#fff; }
        .ev-btn.primary:hover { filter:brightness(1.08); color:#fff; }
        .ev-btn.danger { color:#dc2626; }
        .ev-btn.danger:hover { border-color:#fecaca; background:#fef2f2; }
        .ev-btn.sm { padding:4px 9px; font-size:11.5px; }

        /* notification toast */
        .ev-toast { position:fixed; bottom:20px; right:20px; background:#45475a; color:#cdd6f4;
            border-radius:10px; padding:10px 16px; font-size:12.5px; z-index:9999;
            box-shadow:0 8px 24px rgba(0,0,0,.4); display:flex; align-items:center; gap:8px;
            transform:translateY(80px); opacity:0; transition:transform .2s, opacity .2s; pointer-events:none; }
        .ev-toast.show { transform:none; opacity:1; }
        .ev-toast.ok { background:#1e3a2f; color:#a6e3a1; }
        .ev-toast.err { background:#3d1a1a; color:#f38ba8; }

        /* field sub-list in panel */
        .ev-field-item { display:flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer;
            border-bottom:1px solid #f1f5f9; font-size:12px; color:#475569; }
        .ev-field-item:hover { background:#f8fafc; color:#0f172a; }
        .ev-field-item.active { background:var(--ev-psoft); color:var(--ev-primary); font-weight:600; }
        .ev-field-item i { font-size:13px; color:#94a3b8; }
        .ev-field-evcount { margin-left:auto; font-size:10px; font-weight:700;
            background:var(--ev-psoft); color:var(--ev-primary); border-radius:999px; padding:1px 6px; }
    </style>
    <?= \PpPhp\Core\ModuleAssets::style('Events', 'Views/events-app-theme.css', '', 'evAppThemeCss') ?>
    <link href="<?= htmlspecialchars($assetsUrl ?? '') ?>/sweetalert2/sweetalert2.min.css" rel="stylesheet">
    <script src="<?= htmlspecialchars($assetsUrl ?? '') ?>/sweetalert2/sweetalert2.min.js"></script>
    <style>
        /* Dark, editor-matched SweetAlert2 for the Events console. */
        .ev-swal-popup { background:#1e1e2e; color:#cdd6f4; border:1px solid #313244;
            border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.55); }
        .ev-swal-popup .swal2-title { color:#f5e0dc; font-size:18px; }
        .ev-swal-popup .swal2-html-container { color:#a6adc8; font-size:13.5px; }
        .ev-swal-popup .swal2-actions { gap:8px; }
        .ev-swal-btn { border:0; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:700;
            cursor:pointer; }
        .ev-swal-confirm { background:var(--ev-primary,#f38ba8); color:#1e1e2e; }
        .ev-swal-confirm.is-danger { background:#dc2626; color:#fff; }
        .ev-swal-cancel { background:#313244; color:#cdd6f4; }
        .ev-swal-btn:hover { filter:brightness(1.08); }
    </style>
</head>
<body class="ev-body">
    <?php include constant('BASE_PATH') . '/core/views/project-navbar.php'; ?>

    <div class="ev-workspace" id="evWorkspace">

        <!-- LEFT: Scope tree -->
        <div class="ev-tree" id="evTree" style="width:var(--ev-tree-w);">
            <div class="ev-tree-head">
                <div class="ev-tree-head-top">
                    <strong>Events</strong>
                    <div class="ev-head-actions">
                        <button type="button" class="ev-help-btn" id="evScanBtn"
                                title="Check every saved event for problems before you build">
                            <i class="bi bi-clipboard2-check" aria-hidden="true"></i><span>Check all</span>
                        </button>
                        <button type="button" class="ev-help-btn pp-guide-trigger" data-ev-help-open
                                title="Open the Events guide" aria-label="Open Events guide">
                            <i class="bi bi-question-circle-fill" aria-hidden="true"></i><span>Guide</span>
                        </button>
                    </div>
                </div>
                <small>Global &amp; per-table hooks</small>
            </div>
            <div class="ev-tree-body" id="evTreeBody"></div>
        </div>
        <div class="ev-resizer" data-resize="tree" id="evResizerTree"></div>

        <!-- MIDDLE: Event list for selected scope/group -->
        <div class="ev-panel" id="evPanel" style="width:var(--ev-panel-w);">
            <div class="ev-panel-head" id="evPanelHead">
                <div class="ev-ph-icon" id="evPanelIcon"
                     style="background:#eff6ff; color:var(--ev-primary);">
                    <i class="bi bi-lightning-charge" id="evPanelIconI"></i>
                </div>
                <div>
                    <div class="ev-ph-title" id="evPanelTitle">Select a scope</div>
                    <div class="ev-ph-sub" id="evPanelSub">← Choose from the tree</div>
                </div>
            </div>
            <div class="ev-panel-body" id="evPanelBody">
                <!-- populated by JS -->
            </div>
        </div>
        <div class="ev-resizer" data-resize="panel" id="evResizerPanel"></div>

        <!-- RIGHT: Code editor -->
        <div class="ev-content" id="evContent">
            <!-- empty state initially -->
            <div class="ev-empty" id="evEmpty">
                <i class="bi bi-lightning-charge"></i>
                <p>Select an event from the panel on the left<br>to start writing code.</p>
            </div>
            <!-- editor (hidden until event selected) -->
            <div id="evEditor" style="display:none; flex:1; flex-direction:column; overflow:hidden;">
                <div class="ev-rh">
                    <div class="ev-rh-crumb">
                        <span class="ev-rh-scope" id="evCrumbScope"></span>
                        <i class="bi bi-chevron-right ev-rh-sep"></i>
                        <span class="ev-rh-group" id="evCrumbGroup"></span>
                        <i class="bi bi-chevron-right ev-rh-sep" id="evCrumbSep2"></i>
                        <span class="ev-rh-event" id="evCrumbEvent"></span>
                    </div>
                    <div class="ev-rh-right">
                        <span class="ev-lang-pill" id="evLangPill">PHP</span>
                        <span class="ev-status" id="evSaveStatus">
                            <i class="bi bi-check2-circle"></i> Saved
                        </span>
                    </div>
                </div>
                <!-- Compact per-event info (what it does · when it fires · what to return) -->
                <div class="ev-eventinfo" id="evEventInfo" hidden></div>
                <!-- schedule header (only shown for schedule events) -->
                <div id="evSchedHeader" style="display:none;" class="ev-sched-header">
                    <div class="ev-sched-row-pair">
                        <div>
                            <label>Task Name</label>
                            <input type="text" id="evSchedName" placeholder="e.g. Daily Cleanup">
                        </div>
                        <div>
                            <label>Cron Expression</label>
                            <input type="text" id="evSchedCron" placeholder="0 2 * * *">
                        </div>
                    </div>
                </div>
                <!-- server-action header (only shown for Server Actions) -->
                <div id="evActionHeader" style="display:none;" class="ev-sched-header">
                    <label>Action Name</label>
                    <input type="text" id="evActionName" placeholder="e.g. approveOrder">
                    <div style="margin-top:6px;font-size:11px;color:#94a3b8;">Call from a client event: <code id="evActionHint">await pp.run('...')</code></div>
                </div>
                <div class="ev-toolbar">
                    <div style="display:flex;gap:6px;flex-wrap:wrap;">
                        <button class="ev-tbtn primary" id="evBtnSave">
                            <i class="bi bi-check2"></i> Save
                        </button>
                        <button class="ev-tbtn" id="evBtnReset" title="Reset to default stub">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </button>
                        <button class="ev-tbtn" id="evBtnCopy">
                            <i class="bi bi-clipboard"></i> Copy
                        </button>
                        <button class="ev-tbtn danger" id="evBtnClear" title="Clear code">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                    <div class="ev-shortcuts">
                        <button type="button" class="ev-lintpill ok" id="evLintPill" title="Code check">
                            <i class="bi bi-check-circle-fill"></i> <span id="evLintPillText">Checked</span>
                        </button>
                        <span class="ev-kh"><kbd>⌘S</kbd>&thinsp;save</span>
                        <span class="ev-kh"><kbd>Tab</kbd>&thinsp;indent</span>
                        <span class="ev-kh"><kbd>⌘/</kbd>&thinsp;comment</span>
                        <span class="ev-kh"><kbd>⌃Space</kbd>&thinsp;IntelliSense</span>
                    </div>
                </div>
                <div class="ev-code-root">
                    <div class="ev-gutter"><div id="evGutterLines">1</div></div>
                    <textarea id="evTa" spellcheck="false" autocorrect="off" autocapitalize="off"
                              autocomplete="off" aria-autocomplete="list"
                              aria-controls="evIntellisense"></textarea>
                    <div class="ev-intellisense" id="evIntellisense" role="listbox" aria-label="Code suggestions">
                        <div class="ev-intellisense-list" id="evIntellisenseList"></div>
                        <div class="ev-intellisense-doc" id="evIntellisenseDoc"></div>
                    </div>
                </div>
                <div class="ev-diag" id="evDiag" hidden>
                    <div class="ev-diag-head">
                        <span class="ev-diag-title" id="evDiagTitle"><i class="bi bi-check-circle-fill"></i> No problems</span>
                        <button type="button" class="ev-diag-hide" id="evDiagHide" title="Hide">×</button>
                    </div>
                    <div class="ev-diag-list" id="evDiagList"></div>
                </div>
                <div class="ev-docs" id="evDocs">
                    <button class="ev-docs-toggle" id="evDocsToggle">
                        <i class="bi bi-info-circle-fill"></i>
                        Arguments &amp; Return Value
                        <i class="bi bi-chevron-up chevron"></i>
                    </button>
                    <div class="ev-docs-body" id="evDocsBody"></div>
                </div>
            </div>
        </div>

    </div>

    <!-- toast -->
    <div class="ev-toast" id="evToast"></div>

    <!-- in-app Help & Guide (self-contained partial) -->
    <?php include __DIR__ . '/partials/help.php'; ?>

    <!-- Bootstrap data + shell globals required by project-shell.js -->
    <script>
    const baseUrl     = <?= json_encode($baseUrl ?? '') ?>;
    const projectSlug = <?= json_encode($project['slug'] ?? '') ?>;
    window.PpEventsBootstrap = {
        slug:         <?= json_encode($project['slug'] ?? '') ?>,
        baseUrl:      <?= json_encode($baseUrl) ?>,
        tables:       <?= json_encode($tables) ?>,
        events:       <?= json_encode($events ?: new stdClass()) ?>,
        globalGroups: <?= json_encode($globalGroups) ?>,
        globalSections:<?= json_encode($globalSections ?? []) ?>,
        tableGroups:  <?= json_encode($tableGroups) ?>,
        tableSections:<?= json_encode($tableSections ?? []) ?>,
        fieldGroups:  <?= json_encode($fieldGroups) ?>,
        symbols:      <?= json_encode(\PpPhp\Core\Events\EventApiReference::symbols()) ?>,
        signatures:   <?= json_encode(\PpPhp\Core\Events\EventApiReference::signatures()['js']) ?>,
    };
    </script>

    <!-- Squiggle overlay for the code checker (fixed layer so nothing clips it). -->
    <div class="ev-squiggles" id="evSquiggles" aria-hidden="true"></div>

    <!-- Pre-deploy "Check all events" report -->
    <div class="ev-scan-ov" id="evScanOv" hidden>
        <div class="ev-scan-panel" role="dialog" aria-modal="true" aria-label="Event check report">
            <div class="ev-scan-head">
                <div class="ev-scan-title">
                    <span class="ev-scan-ic" id="evScanHeadIc"><i class="bi bi-clipboard2-check"></i></span>
                    <div>
                        <h2 id="evScanHeadline">Checking every event…</h2>
                        <p id="evScanSub">Running the checker across the whole project.</p>
                    </div>
                </div>
                <button type="button" class="ev-scan-x" id="evScanClose" aria-label="Close"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="ev-scan-body" id="evScanBody"></div>
        </div>
    </div>

    <?php include constant('BASE_PATH') . '/core/views/project-scripts.php'; ?>

    <!-- Acorn: precise JS syntax-error location for the code checker. -->
    <script src="<?= htmlspecialchars($assetsUrl ?? '') ?>/vendor/acorn/acorn.js" defer></script>
    <?= \PpPhp\Core\ModuleAssets::script('Events', 'Views/events-spa.js') ?>
</body>
</html>
