@extends('admin.layouts.app')

@php
    $locale     = app()->getLocale();
    $nameField  = $locale === 'ar' ? 'name_ar' : 'name_en';
    $dash       = __('admin.investors_admin.unknown') ?: '—';

    /** Localised label-option name with em-dash fallback. */
    $optName = function ($option) use ($nameField, $dash) {
        if (! $option) return $dash;
        return $option->{$nameField} ?: ($option->name_en ?? $dash);
    };
    /** Long-form SAR ("1,500,000.00 SAR") for detail rows. */
    $sar = function ($v) use ($dash) {
        if ($v === null || $v === '' || (is_numeric($v) && (float) $v === 0.0)) return $dash;
        return number_format((float) $v, 2) . ' SAR';
    };
    /** Compact SAR ("1.5M") for stat headlines. */
    $sarCompact = function ($v) use ($dash) {
        $n = (float) ($v ?? 0);
        if ($n <= 0) return $dash;
        if ($n >= 1_000_000_000) return rtrim(rtrim(number_format($n / 1_000_000_000, 1), '0'), '.') . 'B';
        if ($n >= 1_000_000)     return rtrim(rtrim(number_format($n / 1_000_000,    1), '0'), '.') . 'M';
        if ($n >= 1_000)         return rtrim(rtrim(number_format($n / 1_000,        1), '0'), '.') . 'K';
        return number_format($n, 0);
    };
    $int  = fn ($v) => ($v === null || $v === '') ? $dash : number_format((int) $v);
    $text = fn ($v) => ($v === null || $v === '') ? $dash : $v;
    $has  = fn ($v) => $v !== null && $v !== '' && (! is_numeric($v) || (float) $v !== 0.0);

    // ── Locale-aware display name ────────────────────────────────
    // The `display_name` accessor handles every fallback internally
    // (full_name_<locale> → full_name_<other> → composed first+last
    // → email → "#id") and is guaranteed non-empty. The legacy
    // `name` fallback was removed in Phase 2 of the 2026-06-09
    // refactor; the column is no longer consulted by any read path.
    $displayName = (string) $investor->display_name;

    /** Two-letter initials for the avatar tile. */
    $initials = collect(explode(' ', trim((string) $displayName)))
        ->filter()->take(2)
        ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
        ->implode('');
    if ($initials === '') $initials = '—';

    $logoFile = $investor->files?->firstWhere('file_type', \App\Models\File::TYPE_IMAGE);
    $logoUrl  = $logoFile ? route('admin.files.show', $logoFile) : null;

    /*
     * Hero avatar resolution. Preference order:
     *   1. `avatar_path` — the profile photo the investor uploaded on the
     *      public signup form. Stored as a public-disk relative path
     *      under `storage/app/public/investors/avatars/…`; served via
     *      the `public/storage` symlink.
     *   2. `$logoUrl` — legacy admin-uploaded FileRecord image. Still
     *      respected so existing rows keep their picture.
     *   3. fall through to the two-letter initials tile rendered in the
     *      hero block (no var needed).
     *
     * We deliberately emit a ROOT-RELATIVE URL (e.g. `/storage/…`)
     * instead of an absolute one. `Storage::disk('public')->url()`
     * builds an absolute URL from `filesystems.disks.public.url`, which
     * defaults to `APP_URL/storage` — and APP_URL on developer machines
     * is often `http://localhost` while `php artisan serve` actually
     * hosts the dashboard on `http://127.0.0.1:8000`. A root-relative
     * src lets the browser resolve against whichever host the user is
     * actually on, so the image loads in any environment.
     */
    $avatarUrl = $investor->avatar_path
        ? '/storage/' . ltrim((string) $investor->avatar_path, '/')
        : null;
    $heroImageUrl = $avatarUrl ?: $logoUrl;

    $sectorChips = $investor->sectors->map(fn ($s) => $optName($s->option))->filter(fn ($n) => $n !== $dash);
    $stageChips  = $investor->stages ->map(fn ($s) => $optName($s->option))->filter(fn ($n) => $n !== $dash);
    $methodChips = $investor->paymentMethods->map(fn ($s) => $optName($s->option))->filter(fn ($n) => $n !== $dash);

    $countryName = $investor->country?->{$nameField} ?: $investor->country?->name_en ?: $dash;
    $cityName    = $investor->city?->{$nameField}    ?: $investor->city?->name_en    ?: $dash;
@endphp

@section('title', $displayName . ' — ' . __('admin.investors_admin.show_title'))
@section('page_title', __('admin.investors_admin.show_title'))

@push('styles')
<style>
    /* ════════════════════════════════════════════════════════════════════
       INVESTOR DETAIL — minimal, icon-led, premium-CRM design.
       Tokens scoped under `.rd-shell` so they don't leak.
       ════════════════════════════════════════════════════════════════════ */
    .rd-shell {
        --rd-accent:        #4f46e5;
        --rd-accent-strong: #4338ca;
        --rd-accent-soft:   #eef2ff;
        --rd-accent-line:   #c7d2fe;
        --rd-text:          #0f172a;
        --rd-muted:         #64748b;
        --rd-faint:         #94a3b8;
        --rd-border:        #e5e7eb;
        --rd-divider:       #f1f5f9;
        --rd-surface:       #ffffff;
        --rd-bg:            #f8fafc;
        --rd-ok:            #047857;
        --rd-ok-soft:       #ecfdf5;
        --rd-ok-line:       #a7f3d0;
        --rd-warn:          #92400e;
        --rd-warn-soft:     #fffbeb;
        --rd-danger:        #991b1b;
        --rd-shadow-sm:     0 1px 2px rgba(15,23,42,.04);
        --rd-shadow-md:     0 6px 16px -6px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
        --rd-radius:        14px;
        --rd-radius-sm:     10px;
        display: grid; gap: 18px;
        color: var(--rd-text);
    }

    /* ── HERO ─────────────────────────────────────────────────────── */
    .rd-hero {
        position: relative;
        display: grid;
        /* Two-row grid: row 1 = [avatar | body | actions], row 2 = bio
           spanning all 3 columns (1 / -1). Keeps the bio at full hero
           width instead of getting squeezed by the actions column. */
        grid-template-columns: 96px 1fr auto;
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: 22px;
        row-gap: 14px;
        padding: 26px 28px;
        background: #ffffff;
        border: 1px solid var(--rd-border);
        border-radius: var(--rd-radius);
        box-shadow: var(--rd-shadow-sm);
    }
    .rd-hero > .rd-hero-bio {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
    }
    .rd-avatar {
        position: relative;
        width: 96px; height: 96px;
        display: inline-flex; align-items: center; justify-content: center;
        /* White surface — per UX spec the hero avatar reads as a photo
           card, not a gradient badge. When the investor uploaded a real
           photo the white shows as a subtle 1-pixel frame around the
           image; when they didn't, the two-letter initials sit on a
           clean white tile that matches the rest of the hero. */
        background: #fff;
        color: var(--rd-accent-strong);
        border: 1px solid var(--rd-border);
        border-radius: 20px;
        font-weight: 800; font-size: 32px;
        overflow: hidden;
        box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .15);
    }
    /* `contain` (not `cover`) so the entire photo shows inside the
       square — matches the startup logo treatment. Small padding keeps
       the artwork off the rounded corners. */
    .rd-avatar img {
        width: 100%; height: 100%;
        object-fit: contain;
        padding: 6px;
    }

    .rd-hero-body { min-width: 0; }
    .rd-hero-eyebrow {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 600;
        color: var(--rd-muted);
        letter-spacing: .02em;
    }
    .rd-hero-eyebrow svg { width: 14px; height: 14px; }
    .rd-hero h2 {
        margin: 6px 0 0;
        font-size: 26px; font-weight: 800;
        color: var(--rd-text);
        letter-spacing: -.015em;
        line-height: 1.2;
    }
    .rd-hero-badges {
        display: inline-flex; flex-wrap: wrap; gap: 10px 14px;
        margin-top: 10px;
    }
    /* "Group: [pill]" pair — keeps the prefix label and the coloured
       pill together as a single flow unit so they wrap as one. */
    .rd-meta-pair {
        display: inline-flex; align-items: center; gap: 6px;
        white-space: nowrap;
    }
    .rd-meta-pair__label {
        font-size: 11.5px; font-weight: 700;
        color: var(--rd-muted);
        text-transform: uppercase; letter-spacing: .03em;
    }
    /* Icon-only variant — used by the WhatsApp group status pair where
       the brand glyph replaces the "WhatsApp Group:" word. Strips the
       uppercase/letter-spacing rules so they don't apply to an empty
       text node, and aligns the SVG vertically with the neighbouring
       pill. */
    .rd-meta-pair__label--icon {
        display: inline-flex; align-items: center;
        text-transform: none; letter-spacing: 0;
        line-height: 0; /* avoid extra vertical space around the SVG */
    }
    .rd-hero-bio {
        margin: 14px 0 0;
        color: #475569;
        font-size: 14.5px; line-height: 1.65;
        /* Full-width per UX spec — no character-count cap. */
    }

    /* Generic status badge — still used by the danger variant if needed. */
    .rd-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 12px;
        background: #f8fafc;
        color: #475569;
        border: 1px solid var(--rd-border);
        border-radius: 999px;
        font-size: 12px; font-weight: 700;
        white-space: nowrap;
    }
    .rd-badge--ok     { background: var(--rd-ok-soft); color: var(--rd-ok); border-color: var(--rd-ok-line); }
    .rd-badge--warn   { background: var(--rd-warn-soft); color: var(--rd-warn); border-color: #fde68a; }
    .rd-badge--danger { background: #fee2e2; color: var(--rd-danger); border-color: #fecaca; }
    .rd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

    /* Hero quick-actions — icon-only buttons. */
    .rd-hero-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
    .rd-icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: #fff;
        border: 1px solid var(--rd-border);
        border-radius: 12px;
        color: #475569;
        cursor: pointer;
        text-decoration: none;
        transition: transform .15s ease, border-color .15s, color .15s, box-shadow .15s, background-color .15s;
    }
    .rd-icon-btn svg { width: 18px; height: 18px; }
    .rd-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--rd-shadow-md); }
    .rd-icon-btn[data-brand="email"]    { color: #d04025; }
    .rd-icon-btn[data-brand="email"]:hover    { background: #fef2f2; border-color: #fecaca; }
    .rd-icon-btn[data-brand="linkedin"] { color: #0a66c2; }
    .rd-icon-btn[data-brand="linkedin"]:hover { background: #eff6ff; border-color: #bfdbfe; }
    .rd-icon-btn[data-brand="phone"]    { color: #047857; }
    .rd-icon-btn[data-brand="phone"]:hover    { background: #ecfdf5; border-color: #a7f3d0; }
    /* WhatsApp brand green (#25D366) — matches the in-app preview
       bubbles + the startup-side rule, kept in sync across both
       entities. */
    .rd-icon-btn[data-brand="whatsapp"] { color: #25D366; }
    .rd-icon-btn[data-brand="whatsapp"]:hover { background: #f0fdf4; border-color: #bbf7d0; }
    /* ── Empty / "no value saved" placeholder ──
       Renders the same icon strip even when a contact field is empty,
       so admins see a consistent five-action hero across all records.
       Cursor + interactivity are disabled; brand colours collapse to
       a uniform muted grey so the empty state reads as "missing" not
       "click me". */
    .rd-icon-btn--empty,
    .rd-icon-btn--empty:hover {
        color: #cbd5e1 !important;
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
        opacity: .8;
    }
    .rd-icon-btn--empty svg { opacity: .75; }

    /* ── KPI STRIP ─────────────────────────────────────────────────
       Locked to 3 columns: top row = numeric/financial trio (Expected
       Annual, Investments Count, Average Ticket), bottom row = the
       3 classification tiles (Background, Investment Experience,
       Activity in Numu). Switched from `auto-fit` on 2026-06-15 per
       operator request for the 3 + 3 layout. */
    .rd-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    @media (max-width: 960px) {
        .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
        .rd-stats { grid-template-columns: 1fr; }
    }
    .rd-stat {
        display: flex; gap: 14px; align-items: center;
        padding: 18px;
        background: var(--rd-surface);
        border: 1px solid var(--rd-border);
        border-radius: var(--rd-radius);
        box-shadow: var(--rd-shadow-sm);
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .rd-stat:hover { transform: translateY(-2px); box-shadow: var(--rd-shadow-md); }
    .rd-stat__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px;
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
        border-radius: 11px;
        flex-shrink: 0;
    }
    .rd-stat__icon svg { width: 19px; height: 19px; }
    .rd-stat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .rd-stat__label {
        font-size: 11.5px; font-weight: 600;
        color: var(--rd-muted);
    }
    .rd-stat__value {
        font-size: 24px; font-weight: 800;
        color: var(--rd-text);
        font-variant-numeric: tabular-nums;
        line-height: 1.15;
        letter-spacing: -.01em;
    }
    .rd-stat__hint { font-size: 11px; color: var(--rd-faint); font-weight: 500; margin-top: 1px; }
    .rd-stat__unit { font-size: 13px; font-weight: 700; color: var(--rd-muted); margin-inline-start: 4px; }
    .rd-stat--ok    .rd-stat__icon { background: var(--rd-ok-soft);   color: var(--rd-ok); }
    .rd-stat--warn  .rd-stat__icon { background: var(--rd-warn-soft); color: var(--rd-warn); }
    .rd-stat--muted .rd-stat__icon { background: #f1f5f9; color: #475569; }

    /* ── COLLAPSIBLE CARDS ───────────────────────────────────────── */
    .rd-card {
        background: var(--rd-surface);
        border: 1px solid var(--rd-border);
        border-radius: var(--rd-radius);
        box-shadow: var(--rd-shadow-sm);
        overflow: hidden;
        transition: box-shadow .2s ease;
    }
    .rd-card__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 16px 20px;
        cursor: pointer; user-select: none;
        background: var(--rd-surface);
        border: 0;
        text-align: start; font: inherit; color: inherit;
        transition: background-color .12s;
    }
    .rd-card__head:hover { background: #fafbfc; }
    .rd-card__head:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: -2px; }
    .rd-card__title {
        display: inline-flex; align-items: center; gap: 11px;
        margin: 0;
        font-size: 15px; font-weight: 700;
        color: var(--rd-text);
    }
    .rd-card__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
        border-radius: 9px;
    }
    .rd-card__icon svg { width: 16px; height: 16px; }
    .rd-card__meta {
        display: inline-flex; align-items: center; gap: 10px;
        font-size: 12px; color: var(--rd-muted); font-weight: 600;
    }
    .rd-card__count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 22px; padding: 0 8px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 999px;
        font-size: 11.5px; font-weight: 700;
    }
    .rd-card__chevron { color: var(--rd-faint); transition: transform .25s ease; }
    .rd-card[data-open="false"] .rd-card__chevron { transform: rotate(-90deg); }
    :where([dir="rtl"]) .rd-card[data-open="false"] .rd-card__chevron { transform: rotate(90deg); }

    .rd-card__body-wrap {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows .28s ease;
    }
    .rd-card[data-open="false"] > .rd-card__body-wrap { grid-template-rows: 0fr; }
    .rd-card__body {
        overflow: hidden;
        /* min-height:0 is the missing piece in the grid 1fr→0fr collapse
           trick — without it the grid item won't actually shrink past
           its content's intrinsic size, leaving the body partially open. */
        min-height: 0;
        padding: 4px 20px 20px;
        border-top: 1px solid var(--rd-divider);
        margin-top: -1px;
        transition: padding .28s ease, border-top-color .12s ease;
    }
    /* Collapse the body's own padding + border in lockstep with the
       grid-row animation. Otherwise the 24px of vertical padding stays
       visible as a thin strip even when the row track is 0fr. */
    .rd-card[data-open="false"] .rd-card__body {
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
    }

    /* ── ICON-LED INFO ROWS (replaces dt/dd for contact-style lists) ── */
    /* Identity rows — denser two-column grid on wider viewports so the
       card stops eating vertical space when the data is sparse. */
    .rd-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 4px 18px;
    }
    .rd-info-row {
        display: flex; align-items: center; gap: 10px;
        padding: 5px 4px;
        font-size: 13.5px;
    }
    .rd-info-row__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px;
        background: #f8fafc;
        color: var(--rd-muted);
        border-radius: 8px;
        flex-shrink: 0;
        transition: background .12s, color .12s;
    }
    .rd-info-row__icon svg { width: 14px; height: 14px; }
    .rd-info-row:hover .rd-info-row__icon { background: var(--rd-accent-soft); color: var(--rd-accent-strong); }
    .rd-info-row__value {
        color: var(--rd-text);
        font-weight: 500;
        word-break: break-word;
        line-height: 1.4;
        min-width: 0;
    }
    .rd-info-row__value a { color: var(--rd-accent-strong); text-decoration: none; font-weight: 600; }
    .rd-info-row__value a:hover { text-decoration: underline; }
    .rd-info-row__value--empty { color: var(--rd-faint); font-style: italic; }

    /* ── LABELED FIELD GRID — used for label-options where the label
       is genuinely needed (Action, Category, etc). Compact + light. ── */
    .rd-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    .rd-field {
        display: flex; flex-direction: column; gap: 5px;
        min-width: 0;
    }
    .rd-field__label {
        font-size: 11.5px; font-weight: 600;
        color: var(--rd-muted);
    }
    .rd-field__value {
        font-size: 14px; font-weight: 500; color: var(--rd-text);
        word-break: break-word;
        line-height: 1.45;
    }
    .rd-field__value--empty { color: var(--rd-faint); font-style: italic; }

    /* Pills */
    .rd-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 12px;
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
        border: 1px solid var(--rd-accent-line);
        border-radius: 999px;
        font-size: 12px; font-weight: 700;
        line-height: 1.55;
    }
    .rd-pill--muted { background: #f1f5f9; color: #475569; border-color: var(--rd-border); }
    .rd-pill--ok    { background: var(--rd-ok-soft); color: var(--rd-ok); border-color: var(--rd-ok-line); }
    /* WhatsApp group membership chip — green=joined, slate=not joined.
       Sized & padded to match `.rd-pill` so the row stays visually
       balanced when sitting next to the Group + Category pills. */
    /* WhatsApp brand pill — slightly tighter gap + a small left-padding
       shave so the round brand glyph sits visually centred inside the
       pill rather than crammed against the border. `display: block` on
       the SVG kills the inline-baseline gap so it lines up cleanly with
       the centred text. */
    .rd-wa-pill {
        gap: 6px;
        padding-inline-start: 9px;
    }
    .rd-wa-pill svg { display: block; }
    .rd-wa-pill--yes { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
    .rd-wa-pill--no  { background: #f1f5f9; color: #64748b; border-color: var(--rd-border); }
    .rd-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

    /* Tag chip — Monday colour aware */
    .rd-tag {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 5px 12px;
        background: color-mix(in srgb, var(--tag-bg) 15%, white);
        color: color-mix(in srgb, var(--tag-bg) 85%, black);
        border: 1px solid color-mix(in srgb, var(--tag-bg) 35%, white);
        border-radius: 999px;
        font-size: 12.5px; font-weight: 600;
        line-height: 1.3;
    }
    .rd-tag__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--tag-bg); }

    /* ── Tags editor (always-present, inline editable) ───────────────
       The chip strip + "Edit" button live side-by-side; clicking Edit
       opens the catalog as toggleable chips beneath. Styled to match
       the rest of the show-page surface (white card, subtle borders)
       so it doesn't read as a modal — admins know they can scroll the
       page freely while it's open. */
    .rd-tags-row {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 10px;
        min-height: 32px;
    }
    .rd-tags-row .rd-chip-list { flex: 1 1 auto; min-width: 0; }
    .rd-tags-empty {
        margin: 0; padding: 4px 0;
        color: var(--rd-faint); font-style: italic; font-size: 13.5px;
        flex: 1 1 auto;
    }
    .rd-tags-edit-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
        border: 1px solid var(--rd-accent-line);
        border-radius: 8px;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        transition: background-color .12s, border-color .12s, transform .08s;
    }
    .rd-tags-edit-btn:hover {
        background: color-mix(in srgb, var(--rd-accent-soft) 60%, var(--rd-accent) 12%);
        border-color: var(--rd-accent);
    }
    .rd-tags-edit-btn:active { transform: translateY(1px); }

    .rd-tags-editor {
        margin-top: 14px;
        padding: 14px 14px 12px;
        background: #f8fafc;
        border: 1px solid var(--rd-border);
        border-radius: 12px;
    }
    .rd-tags-editor__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
    .rd-tags-editor__head strong { font-size: 13.5px; color: var(--rd-text); }
    .rd-tags-editor__hint { font-size: 11.5px; color: var(--rd-muted); }
    .rd-tags-catalog {
        display: flex; flex-wrap: wrap; gap: 6px;
        max-height: 240px; overflow-y: auto;
        padding: 4px 2px;
    }
    .rd-tag-pick {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px;
        background: #fff;
        color: color-mix(in srgb, var(--tag-bg) 80%, black);
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        transition: background-color .12s, border-color .12s, transform .08s;
    }
    .rd-tag-pick:hover {
        background: color-mix(in srgb, var(--tag-bg) 10%, white);
        border-color: color-mix(in srgb, var(--tag-bg) 35%, white);
    }
    .rd-tag-pick:active { transform: translateY(1px); }
    .rd-tag-pick__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--tag-bg); }
    .rd-tag-pick__check { color: var(--tag-bg); }
    /* Wrap: holds both the chip and its rename input so they share
       grid placement (only one is visible at a time). */
    .rd-tag-pick-wrap { display: inline-flex; }

    /* Pencil affordance — sits inside each chip, low contrast by
       default and brightens on hover so it reads as secondary. */
    .rd-tag-pick__edit {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px;
        margin-inline-start: 4px;
        border-radius: 999px;
        color: color-mix(in srgb, var(--tag-bg, #94a3b8) 75%, transparent);
        opacity: .55;
        transition: opacity .12s, background-color .12s, color .12s;
        cursor: pointer;
    }
    .rd-tag-pick:hover .rd-tag-pick__edit { opacity: 1; }
    .rd-tag-pick__edit:hover {
        background: color-mix(in srgb, var(--tag-bg, #94a3b8) 20%, white);
        color: color-mix(in srgb, var(--tag-bg, #94a3b8) 100%, black);
        opacity: 1;
    }

    /* Inline "+ new tag" affordance — chip-sized + tinted neutral so
       it reads as a sibling control to the catalog rather than a CTA. */
    .rd-tag-pick--add {
        --tag-bg: #94a3b8;
        background: #f8fafc;
        color: #475569;
        border-style: dashed;
        border-color: #cbd5e1;
    }
    .rd-tag-pick--add:hover {
        background: #f1f5f9;
        color: #334155;
        border-color: #94a3b8;
    }

    /* Expanded create-row — input + tick + X, sized like a chip. */
    .rd-tag-create {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 4px;
        background: #fff;
        border: 1px solid #c7d2fe; border-radius: 999px;
    }
    .rd-tag-create__input {
        border: 0; outline: 0;
        background: transparent;
        padding: 4px 8px;
        font: inherit; font-size: 12.5px;
        color: var(--rd-text); min-width: 140px;
    }
    .rd-tag-create__input::placeholder { color: var(--rd-faint); }
    .rd-tag-create__btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 22px; height: 22px;
        border: 0; cursor: pointer;
        border-radius: 999px;
        transition: background-color .12s, color .12s;
    }
    .rd-tag-create__btn--ok      { background: #ecfdf5; color: #047857; }
    .rd-tag-create__btn--ok:hover:not(:disabled) { background: #d1fae5; }
    .rd-tag-create__btn--cancel  { background: #fef2f2; color: #b91c1c; }
    .rd-tag-create__btn--cancel:hover:not(:disabled) { background: #fee2e2; }
    .rd-tag-create__btn:disabled { opacity: .5; cursor: not-allowed; }

    .rd-tag-pick--on {
        background: color-mix(in srgb, var(--tag-bg) 18%, white);
        border-color: color-mix(in srgb, var(--tag-bg) 45%, white);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-bg) 35%, transparent);
    }
    .rd-tags-editor__actions {
        display: flex; gap: 8px; justify-content: flex-end;
        margin-top: 14px;
    }
    .rd-tags-editor__error {
        margin: 8px 0 0;
        color: var(--rd-danger);
        font-size: 12.5px;
    }
    .rd-btn {
        padding: 7px 14px;
        font-size: 12.5px; font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .12s, border-color .12s, transform .08s;
    }
    .rd-btn:active { transform: translateY(1px); }
    .rd-btn[disabled] { opacity: .6; cursor: not-allowed; }
    .rd-btn--ghost {
        background: #fff; color: var(--rd-text);
        border: 1px solid #cbd5e1;
    }
    .rd-btn--ghost:hover { background: #f1f5f9; }
    .rd-btn--primary {
        background: var(--rd-accent); color: #fff; border: 0;
    }
    .rd-btn--primary:hover { background: var(--rd-accent-strong); }

    .rd-meeting-empty {
        margin: 0; padding: 8px 0;
        color: var(--rd-faint); font-style: italic; font-size: 13.5px;
    }

    /* Card content groupings — when a card needs sub-sections. */
    .rd-section { margin: 0; }
    .rd-section + .rd-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rd-divider); }
    .rd-section__title {
        margin: 0 0 14px;
        font-size: 12px; font-weight: 700;
        color: var(--rd-muted);
        text-transform: uppercase; letter-spacing: .05em;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .rd-section__title svg { width: 13px; height: 13px; color: var(--rd-faint); }

    .rd-empty {
        color: var(--rd-faint); font-style: italic; font-size: 13.5px;
        margin: 0; padding: 6px 0;
    }

    /* ── DUPLICATE BANNER ────────────────────────────────────────
       Top-of-page alert when `is_duplicate` is set. If a canonical
       record is wired up, surfaces the "Merged into #X" link inline
       so admins can jump straight to it. */
    .rd-dup-banner {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 18px;
        background: linear-gradient(180deg, #fef2f2 0%, #fff5f5 100%);
        border: 1px solid #fecaca;
        border-radius: var(--rd-radius);
        box-shadow: var(--rd-shadow-sm);
    }
    .rd-dup-banner__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px;
        background: #fee2e2; color: var(--rd-danger);
        border-radius: 10px; flex-shrink: 0;
    }
    .rd-dup-banner__icon svg { width: 19px; height: 19px; }
    .rd-dup-banner__body { flex: 1; min-width: 0; }
    .rd-dup-banner__title {
        margin: 0; font-size: 13.5px; font-weight: 700; color: var(--rd-danger);
    }
    .rd-dup-banner__hint {
        margin: 2px 0 0; font-size: 12.5px; color: #7f1d1d;
    }
    .rd-dup-banner__link {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px;
        background: #fff; color: var(--rd-danger);
        border: 1px solid #fecaca;
        border-radius: 10px;
        text-decoration: none;
        font-size: 13px; font-weight: 700;
        transition: background .12s, transform .12s;
    }
    .rd-dup-banner__link:hover { background: #fee2e2; transform: translateY(-1px); }

    /* ── COPY-TO-CLIPBOARD ───────────────────────────────────────
       A small ghost button revealed inside an `.rd-info-row` on hover.
       Click swaps the icon to a check for ~1.2s as a confirmation. */
    .rd-info-row { position: relative; }
    .rd-copy-btn {
        opacity: 0;
        margin-inline-start: auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 7px;
        color: var(--rd-muted);
        cursor: pointer;
        transition: opacity .12s, background .12s, color .12s, border-color .12s;
        flex-shrink: 0;
    }
    .rd-copy-btn svg { width: 14px; height: 14px; }
    .rd-info-row:hover .rd-copy-btn,
    .rd-copy-btn:focus-visible { opacity: 1; }
    .rd-copy-btn:hover {
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
        border-color: var(--rd-accent-line);
    }
    .rd-copy-btn[data-state="done"] { color: var(--rd-ok); opacity: 1; }

    /* ── STICKY SECTION NAV ──────────────────────────────────────
       Pill bar that stays visible at the top while the user scrolls
       through cards. Each pill scrolls to the matching `.rd-card`
       and gets a subtle accent state when its section is in view
       (handled by the IntersectionObserver in the script block). */
    /* Section nav — single row, no wrap, no horizontal scroll.
       Items shrink + their text truncates via the inner span. On narrow
       viewports the text label hides entirely, leaving the icon as a
       tooltip-only target. */
    .rd-section-nav {
        position: sticky; top: 12px; z-index: 5;
        display: flex; flex-wrap: nowrap; gap: 4px;
        padding: 6px;
        background: rgba(255,255,255,.92);
        backdrop-filter: saturate(160%) blur(8px);
        -webkit-backdrop-filter: saturate(160%) blur(8px);
        border: 1px solid var(--rd-border);
        border-radius: 12px;
        box-shadow: var(--rd-shadow-sm);
        overflow: hidden;
    }
    .rd-section-nav__item {
        flex: 0 1 auto; min-width: 0;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px;
        background: transparent;
        border: 0;
        border-radius: 8px;
        font: inherit; font-size: 12.5px; font-weight: 600;
        color: var(--rd-muted);
        text-decoration: none; cursor: pointer;
        transition: background .12s, color .12s;
        white-space: nowrap;
    }
    .rd-section-nav__item > span {
        overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    .rd-section-nav__item svg { width: 14px; height: 14px; flex-shrink: 0; }
    .rd-section-nav__item:hover { background: #f1f5f9; color: var(--rd-text); }
    .rd-section-nav__item[data-active="true"] {
        background: var(--rd-accent-soft);
        color: var(--rd-accent-strong);
    }
    @media (max-width: 840px) {
        /* Drop the labels; just the icons stay visible. */
        .rd-section-nav__item > span { display: none; }
        .rd-section-nav__item { padding: 8px 10px; }
    }

    /* Smooth scroll for in-page anchors. */
    html { scroll-behavior: smooth; scroll-padding-top: 84px; }

    /* ── COPY TOAST ─────────────────────────────────────────────── */
    .rd-toast {
        position: fixed; inset-inline-end: 24px; inset-block-end: 24px;
        z-index: 100;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 16px;
        background: #0f172a; color: #fff;
        border-radius: 10px;
        box-shadow: 0 10px 30px -10px rgba(15,23,42,.4);
        font-size: 13.5px; font-weight: 600;
        opacity: 0; transform: translateY(8px);
        transition: opacity .2s ease, transform .2s ease;
        pointer-events: none;
    }
    .rd-toast[data-show="true"] { opacity: 1; transform: translateY(0); }
    .rd-toast svg { width: 16px; height: 16px; color: #34d399; }

    /* ── RESPONSIVE ──────────────────────────────────────────────── */
    @media (max-width: 720px) {
        .rd-hero { grid-template-columns: 76px 1fr; padding: 20px; gap: 16px; }
        .rd-hero-actions { grid-column: 1 / -1; }
        .rd-avatar { width: 76px; height: 76px; font-size: 26px; border-radius: 18px; }
        .rd-hero h2 { font-size: 22px; }
        .rd-card__head { padding: 14px 16px; }
        .rd-card__body { padding: 4px 16px 16px; }
        .rd-stat { padding: 14px; }
        .rd-stat__value { font-size: 21px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .rd-card__body-wrap, .rd-card__chevron, .rd-icon-btn, .rd-stat, .rd-card { transition: none; }
    }

    /* ── Meetings list ─────────────────────────────────────────────────
       Compact row per meeting in the show page's Meetings section.
       Each row: date/time (left), pills + notes (middle), open-meeting
       link (right). Cancelled meetings get a subtle dimmed treatment
       so they're visible but de-emphasised. */
    .rd-meeting-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .rd-meeting {
        display: grid;
        grid-template-columns: 88px 1fr auto;
        gap: 14px;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 10px;
        transition: border-color .15s ease;
    }
    .rd-meeting:hover { border-color: #c7d2fe; }
    .rd-meeting[data-cancelled="true"] { opacity: .65; background: #fafafa; }
    .rd-meeting__when { font-size: 12px; color: var(--na-muted, #64748b); }
    .rd-meeting__date { font-weight: 700; color: var(--na-text, #0f172a); font-size: 13px; }
    .rd-meeting__time { margin-top: 2px; }
    .rd-meeting__created {
        margin-top: 6px;
        font-size: 11px;
        color: #94a3b8;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .rd-meeting__body { min-width: 0; }
    .rd-meeting__pills { display: flex; gap: 6px; flex-wrap: wrap; }
    .rd-meeting__pill {
        display: inline-flex; align-items: center;
        padding: 2px 8px; border-radius: 999px;
        font-size: 11px; font-weight: 600;
        background: var(--bg); color: var(--fg);
        white-space: nowrap;
    }
    .rd-meeting__notes {
        margin: 8px 0 0; font-size: 12px; color: var(--na-text, #0f172a);
        line-height: 1.5; white-space: pre-wrap;
    }
    .rd-meeting__actions { display: flex; align-items: center; }
    .rd-meeting__link {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: #f8fafc; border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 8px; color: var(--na-muted, #64748b);
        text-decoration: none; transition: background .15s ease, color .15s ease;
    }
    .rd-meeting__link:hover { background: #eef2ff; color: #4338ca; }

    /* ── Hero favorite-star toggle ──────────────────────────────────────
       40px square button matching `.rd-icon-btn` dimensions so it sits
       cleanly with the social icons. Two SVGs stacked — outline + fill —
       and `data-favorited` toggles which is visible. Pure CSS swap so
       the toggle reflects state without re-rendering. */
    .rd-fav-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background: #fff;
        border: 1px solid var(--rd-border, #e5e7eb);
        border-radius: 12px;
        color: #94a3b8;
        cursor: pointer;
        transition: transform .15s ease, border-color .15s, color .15s, box-shadow .15s, background-color .15s;
    }
    .rd-fav-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--rd-shadow-md, 0 4px 10px rgba(15,23,42,.08));
        border-color: #fcd34d;
        background: #fffbeb;
        color: #d97706;
    }
    .rd-fav-btn[data-favorited="true"] {
        color: #f59e0b;
        background: #fffbeb;
        border-color: #fcd34d;
    }
    .rd-fav-btn[data-favorited="true"]:hover { color: #b45309; }
    .rd-fav-icon { display: none; }
    .rd-fav-btn[data-favorited="false"] .rd-fav-icon--outline { display: inline-block; }
    .rd-fav-btn[data-favorited="true"]  .rd-fav-icon--filled  { display: inline-block; }

    /* ── Hero change-action picker ──────────────────────────────────────
       Pill button + dropdown menu that replaces the static action badge
       in the hero. Sits in `.rd-hero-actions` next to the social icons.
       The dropdown anchors to the button (absolutely positioned) so it
       overlays whatever's beneath it without layout shift. */
    .rd-action-picker { position: relative; display: inline-flex; }
    .rd-action-btn {
        /* Matches `.rd-icon-btn` height (40px) + border-radius (12px) so
           the picker sits cleanly inline with the email/phone/linkedin
           icons next to it — no vertical alignment jog. */
        display: inline-flex; align-items: center; gap: 6px;
        height: 40px; padding: 0 12px;
        background: #fff;
        border: 1px solid var(--rd-border, var(--na-border, #e5e7eb));
        border-radius: 12px;
        cursor: pointer;
        font-size: 13px; font-weight: 600;
        color: var(--na-text, #0f172a);
        transition: border-color .15s ease, background .15s ease;
        max-width: 200px;
    }
    .rd-action-btn:hover { border-color: #c7d2fe; background: #f9faff; }
    .rd-action-btn[aria-expanded="true"] { border-color: #6366f1; background: #eef2ff; }
    .rd-action-btn__label {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: 130px;
    }
    .rd-action-menu {
        position: absolute;
        top: calc(100% + 6px);
        inset-inline-end: 0;
        min-width: 200px;
        max-height: 320px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid var(--na-border, #e5e7eb);
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(15,23,42,.12);
        padding: 6px;
        z-index: 30;
        display: none;
    }
    .rd-action-menu[data-open="true"] { display: block; }
    .rd-action-menu__title {
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em;
        color: var(--na-muted, #64748b);
        padding: 8px 10px 4px;
    }
    .rd-action-menu__sep {
        height: 1px; background: var(--na-border, #e5e7eb);
        margin: 4px 0;
    }
    .rd-action-menu button {
        display: block; width: 100%;
        padding: 8px 10px;
        background: none; border: 0;
        font-size: 13px; color: var(--na-text, #0f172a);
        text-align: start; cursor: pointer; border-radius: 6px;
    }
    .rd-action-menu button:hover { background: #f1f5f9; }
    .rd-action-menu button[data-current="true"] {
        background: #eef2ff; color: #4338ca; font-weight: 600;
    }
    .rd-action-menu button[data-current="true"]::after {
        content: "✓"; float: inline-end;
    }
</style>
@endpush

@section('content')
    {{-- AI activity strip — renders nothing if Claude hasn't touched
         this investor yet, so it stays out of the way on records the
         AI hasn't enriched. --}}
    @include('admin.ai._entity-badge', ['subject' => $investor])

    {{-- <x-admin.page-header
        :title="$displayName"
        :subtitle="__('admin.investors_admin.detail_subtitle')">
        <x-slot:actions>
            <a href="{{ route('admin.investors.index') }}" class="btn-secondary">
                {{ __('admin.investors_admin.back_to_list') }}
            </a>
        </x-slot:actions>
    </x-admin.page-header> --}}

    @include('admin.partials.flash')

    {{-- Inline icon library — every SVG used on this page is declared once
         here and referenced via <use href="#icon-name">. --}}
    <svg width="0" height="0" style="position:absolute" aria-hidden="true">
        <defs>
            <symbol id="icon-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></symbol>
            <symbol id="icon-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/></symbol>
            <symbol id="icon-linkedin" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.99 0 1.78-.77 1.78-1.72V1.72C24 .77 23.21 0 22.22 0z"/></symbol>
            <symbol id="icon-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></symbol>
            <symbol id="icon-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41L13.41 20.59a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></symbol>
            <symbol id="icon-cash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></symbol>
            <symbol id="icon-trend" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></symbol>
            <symbol id="icon-hash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></symbol>
            <symbol id="icon-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></symbol>
            <symbol id="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
            <symbol id="icon-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
            <symbol id="icon-target" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></symbol>
            <symbol id="icon-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></symbol>
            <symbol id="icon-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></symbol>
            <symbol id="icon-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></symbol>
            <symbol id="icon-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15 15 0 0 1 0 20"/><path d="M12 2a15 15 0 0 0 0 20"/></symbol>
            <symbol id="icon-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></symbol>
            <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></symbol>
            <symbol id="icon-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></symbol>
            <symbol id="icon-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></symbol>
        </defs>
    </svg>

    <div class="rd-shell">

        {{-- ───────────────── HERO ───────────────── --}}
        <section class="rd-hero"
                 x-data="investorHero({
                     initial: @js($displayName),
                     locale:  @js(app()->getLocale()),
                 })"
                 {{-- Listen for any identity-section save and re-derive the
                      hero name from the response. Same listener powers the
                      identity view-mode row + the document <title> (via the
                      shared `displayName` binding) so every spot stays in
                      sync without a full page reload. --}}
                 x-on:section:updated.window="onSectionUpdate($event)">
            {{-- Avatar with edit-mode camera overlay. Click triggers the
                 hidden file input → AJAX upload → confirm → image swap
                 in place + cache-bust query string so the browser pulls
                 the new bytes. --}}
            <div class="rd-avatar"
                 x-data="avatarUploader({
                     url: @js(route('admin.investors.update-avatar', $investor)),
                     initialUrl: @js($heroImageUrl ?: ''),
                     confirmMsg: @js(__('admin.avatar_upload.confirm_save')),
                     successMsg: @js(__('admin.avatar_upload.success')),
                     failMsg:    @js(__('admin.avatar_upload.failed')),
                 })">
                <template x-if="currentUrl">
                    <img :src="currentUrl" alt="{{ $displayName }}">
                </template>
                <template x-if="!currentUrl">
                    <span>{{ $initials }}</span>
                </template>
                {{-- Camera button — visible only in Edit Mode. --}}
                <button type="button"
                        class="rd-avatar__cam"
                        data-edit-affordance
                        @click="$refs.picker.click()"
                        :disabled="busy"
                        :title="@js(__('admin.avatar_upload.change'))"
                        :aria-label="@js(__('admin.avatar_upload.change'))">
                    <svg x-show="!busy" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                        <circle cx="12" cy="13" r="4"/>
                    </svg>
                    <svg x-show="busy" class="rd-avatar__cam-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                    </svg>
                </button>
                <input type="file" x-ref="picker" accept="image/*" class="rd-avatar__picker" @change="onFile($event)">
            </div>

            <div class="rd-hero-body">
                @if ($investor->category || $countryName !== $dash)
                    <span class="rd-hero-eyebrow">
                        <svg><use href="#icon-pin"/></svg>
                        {{ $countryName }}
                        @if ($cityName !== $dash) · {{ $cityName }} @endif
                    </span>
                @endif
                <h2 x-text="displayName">{{ $displayName }}</h2>

                <div class="rd-hero-badges">
                    @if ($investor->group)
                        @php $gc = $investor->group->resolveColor(); @endphp
                        <span class="rd-meta-pair">
                            <span class="rd-meta-pair__label">{{ __('admin.investors_admin.fields.group') }}:</span>
                            <span class="rd-pill" style="background: color-mix(in srgb, {{ $gc }} 14%, transparent); color: {{ $gc }}; border-color: color-mix(in srgb, {{ $gc }} 28%, transparent);">{{ $investor->group->name }}</span>
                        </span>
                    @endif
                    {{-- Investor STATUS — beside the group, distinct indigo pill
                         (mirrors the startup status hero badge). --}}
                    @if ($investor->statusOption)
                        @php $iso = $investor->statusOption; $isoName = app()->getLocale() === 'ar' ? ($iso->name_ar ?: $iso->name_en) : $iso->name_en; @endphp
                        <span class="rd-meta-pair">
                            <span class="rd-meta-pair__label">{{ __('admin.investors_admin.fields.status_option_id') }}:</span>
                            <span class="rd-pill" style="background:#eef2ff;color:#4338ca;border-color:#c7d2fe;">{{ $isoName }}</span>
                        </span>
                    @endif
                    {{-- WhatsApp group membership — small status chip next
                         to Group so ops sees at-a-glance whether this
                         investor is already added to the WA community
                         group. The chip is read-only here; full edit lives
                         inside the Profile & Classification section. --}}
                    @if ($investor->whatsapp_group_status)
                        @php
                            // Three semantic states (post-2026-06-09
                            // consolidation): `yes` = in the group,
                            // `no` = not in the group, `left` = left
                            // the group. Only `yes` gets the green
                            // pill; `no` and `left` share the muted
                            // styling. Older synonyms were collapsed
                            // by a data migration.
                            $waJoined = $investor->whatsapp_group_status === 'yes';

                            // Humanize fallback for any future write
                            // that bypasses the dropdown (e.g. an API
                            // call landing a value outside the catalog).
                            // Without this the raw key would leak.
                            $waKey    = 'admin.investors_admin.whatsapp_group_status_values.' . $investor->whatsapp_group_status;
                            $waLabel  = __($waKey);
                            if ($waLabel === $waKey) {
                                $waLabel = \Illuminate\Support\Str::headline($investor->whatsapp_group_status);
                            }
                        @endphp
                        <span class="rd-meta-pair">
                            {{-- Single pill: WhatsApp brand glyph + status
                                 label, no external icon. The glyph
                                 identifies the channel; aria-label /
                                 title carry the field name for screen
                                 readers and hover. --}}
                            <span class="rd-pill rd-wa-pill rd-wa-pill--{{ $waJoined ? 'yes' : 'no' }}"
                                  title="{{ __('admin.investors_admin.fields.whatsapp_group_status') }}"
                                  aria-label="{{ __('admin.investors_admin.fields.whatsapp_group_status') }}">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="#25D366" aria-hidden="true" style="flex-shrink:0;">
                                    <path d="M12.05 21.5h-.01a9.4 9.4 0 0 1-4.8-1.31l-.34-.21-3.57.94.95-3.48-.22-.36a9.42 9.42 0 0 1-1.44-5.01c0-5.2 4.24-9.43 9.46-9.43 2.53 0 4.9.99 6.68 2.77a9.36 9.36 0 0 1 2.77 6.67c0 5.2-4.24 9.43-9.45 9.43zM20.5 3.49A11.8 11.8 0 0 0 12.05 0C5.46 0 .1 5.35.1 11.92c0 2.1.55 4.15 1.6 5.95L0 24l6.3-1.65a11.96 11.96 0 0 0 5.74 1.46h.01c6.58 0 11.94-5.35 11.95-11.92a11.85 11.85 0 0 0-3.5-8.4z"/>
                                    <path d="M17.5 14.38c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.89-.8-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.14-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35z"/>
                                </svg>
                                {{ $waLabel }}
                            </span>
                        </span>
                    @endif
                    {{-- Action badge intentionally removed from the hero
                         badges row: the change-action button in the
                         hero-actions strip below replaces it. The button
                         shows the current action AND lets admins change
                         it inline. --}}
                    @if ($investor->category)
                        <span class="rd-meta-pair">
                            <span class="rd-meta-pair__label">{{ __('admin.investors_admin.fields.category_option_id') }}:</span>
                            <span class="rd-pill rd-pill--muted">{{ $optName($investor->category) }}</span>
                        </span>
                    @endif
                </div>{{-- Active/Inactive badge removed per UX spec.
                            Duplicate gets the dedicated rd-dup-banner below. --}}

            </div>

            <div class="rd-hero-actions">
                {{-- ───── Change-action button (first/innermost) ─────
                     Sits closest to the name in the RTL hero strip — admins
                     reach for it before the mailto/tel icons. PATCHes
                     /admin/investors/{id}/label so the side-effect listeners
                     (cancel-meeting, notification fan-out) take effect
                     immediately. --}}
                @php
                    $actionOpts  = $labelOptions['action_option_id'] ?? [];
                    $currentAct  = $investor->action;
                    $currentName = $currentAct ? ($optName($currentAct)) : __('admin.investors_admin.row_action_clear');
                @endphp
                <div class="rd-action-picker" data-action-picker>
                    <button type="button"
                            class="rd-action-btn"
                            data-action-toggle
                            aria-haspopup="true"
                            aria-expanded="false"
                            title="{{ __('admin.investors_admin.fields.action_option_id') }}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M12 20h9"/>
                            <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>
                        </svg>
                        <span class="rd-action-btn__label">{{ $currentName }}</span>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <polyline points="6 9 12 15 18 9"/>
                        </svg>
                    </button>
                    <div class="rd-action-menu" data-action-menu role="menu" data-open="false">
                        <div class="rd-action-menu__title">{{ __('admin.investors_admin.row_action_title') }}</div>
                        @foreach ($actionOpts as $optId => $optLabel)
                            <button type="button"
                                    data-action-pick="{{ $optId }}"
                                    data-current="{{ $currentAct && (int) $currentAct->id === (int) $optId ? 'true' : 'false' }}">
                                {{ $optLabel }}
                            </button>
                        @endforeach
                        @if ($currentAct)
                            <div class="rd-action-menu__sep"></div>
                            <button type="button" data-action-pick="0">
                                {{ __('admin.investors_admin.row_action_clear') }}
                            </button>
                        @endif
                    </div>
                </div>

                {{-- ───── Favorite star toggle (SECOND icon) ─────
                     Per-admin favorite. POSTs /admin/favorites/toggle and
                     inverts the visual state locally. Sits AFTER the action
                     picker per UX spec — the action is the primary
                     affordance, the star is secondary. `data-favorited`
                     drives the filled/outlined star. --}}
                <button type="button"
                        class="rd-fav-btn"
                        data-fav-btn
                        data-favorited="{{ $investor->is_favorite ? 'true' : 'false' }}"
                        title="{{ $investor->is_favorite ? __('admin.favorites.remove') : __('admin.favorites.add') }}"
                        aria-pressed="{{ $investor->is_favorite ? 'true' : 'false' }}">
                    {{-- Outline star (shown when not favorited) --}}
                    <svg class="rd-fav-icon rd-fav-icon--outline" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                    </svg>
                    {{-- Filled star (shown when favorited) --}}
                    <svg class="rd-fav-icon rd-fav-icon--filled" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                    </svg>
                </button>

                {{-- Contact icons render ALWAYS so the hero shows a
                     consistent action strip per UX spec. When a field is
                     empty the icon is dimmed + non-interactive; the
                     tooltip explains why. --}}
                @if ($investor->email)
                    <a href="mailto:{{ $investor->email }}" class="rd-icon-btn" data-brand="email"
                       title="{{ $investor->email }}" aria-label="{{ __('admin.investors_admin.fields.email') }}">
                        <svg><use href="#icon-mail"/></svg>
                    </a>
                @else
                    <span class="rd-icon-btn rd-icon-btn--empty" data-brand="email"
                          title="{{ __('admin.investors_admin.contact_empty.email') }}"
                          aria-label="{{ __('admin.investors_admin.contact_empty.email') }}" aria-disabled="true">
                        <svg><use href="#icon-mail"/></svg>
                    </span>
                @endif
                @if ($investor->phone_number)
                    <a href="tel:{{ $investor->phone_number }}" class="rd-icon-btn" data-brand="phone"
                       title="{{ $investor->phone_number }}" aria-label="{{ __('admin.investors_admin.fields.phone_number') }}">
                        <svg><use href="#icon-phone"/></svg>
                    </a>
                    {{-- WhatsApp shortcut. The phone string is normalized
                         to E.164-without-plus via `Phone::forWhatsApp`
                         (digits-only, leading zero stripped). The button
                         opens wa.me in a new tab and sits next to the
                         existing tel: + copy buttons so existing
                         clipboard flow stays untouched. --}}
                    @php $waUrl = \App\Support\Phone::whatsAppUrl($investor->phone_number); @endphp
                    @if ($waUrl)
                        <a href="{{ $waUrl }}" target="_blank" rel="noopener"
                           class="rd-icon-btn" data-brand="whatsapp"
                           title="WhatsApp {{ $investor->phone_number }}"
                           aria-label="WhatsApp">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
                                <path d="M19.05 4.95A10 10 0 0 0 4.46 18.5L3 22l3.59-1.42A10 10 0 1 0 19.05 4.95Zm-7.04 15.3a8.32 8.32 0 0 1-4.24-1.16l-.3-.18-2.13.84.83-2.07-.2-.32a8.32 8.32 0 1 1 6.04 2.89Zm4.57-6.23c-.25-.13-1.5-.74-1.73-.82-.23-.09-.4-.13-.57.13s-.65.82-.8.99c-.15.17-.3.19-.55.06-1.46-.73-2.42-1.3-3.38-2.95-.26-.45.26-.42.74-1.39.08-.17.04-.31-.02-.44-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44-.15 0-.32-.02-.49-.02-.17 0-.45.06-.69.31-.24.26-.91.89-.91 2.17 0 1.28.93 2.52 1.06 2.69.13.17 1.83 2.8 4.43 3.93 1.55.67 2.16.73 2.93.61.47-.07 1.5-.61 1.71-1.21.21-.6.21-1.11.15-1.22-.06-.11-.23-.17-.48-.3Z"/>
                            </svg>
                        </a>
                    @endif
                @else
                    <span class="rd-icon-btn rd-icon-btn--empty" data-brand="phone"
                          title="{{ __('admin.investors_admin.contact_empty.phone') }}"
                          aria-label="{{ __('admin.investors_admin.contact_empty.phone') }}" aria-disabled="true">
                        <svg><use href="#icon-phone"/></svg>
                    </span>
                @endif
                @if ($investor->linkedin_profile)
                    <a href="{{ $investor->linkedin_profile }}" target="_blank" rel="noopener" class="rd-icon-btn" data-brand="linkedin"
                       title="LinkedIn" aria-label="LinkedIn">
                        <svg><use href="#icon-linkedin"/></svg>
                    </a>
                @else
                    <span class="rd-icon-btn rd-icon-btn--empty" data-brand="linkedin"
                          title="{{ __('admin.investors_admin.contact_empty.linkedin') }}"
                          aria-label="{{ __('admin.investors_admin.contact_empty.linkedin') }}" aria-disabled="true">
                        <svg><use href="#icon-linkedin"/></svg>
                    </span>
                @endif
            </div>

            {{-- Bio on its own row spanning the full hero width
                 (grid-column: 1 / -1 via the .rd-hero-bio rule). --}}
            @if ($investor->investor_bio)
                <p class="rd-hero-bio">{{ \Illuminate\Support\Str::limit($investor->investor_bio, 240) }}</p>
            @endif
        </section>

        {{-- ───────────────── DUPLICATE BANNER ─────────────────
             Surfaces business-critical metadata: this record was flagged
             as a duplicate by the dedup pipeline. If a canonical id was
             wired, link to it so admins can jump straight to the merged-
             into row. Otherwise just warn that it's a duplicate. --}}
        @if ($investor->is_duplicate)
            <section class="rd-dup-banner" role="alert" aria-live="polite">
                <span class="rd-dup-banner__icon"><svg><use href="#icon-alert"/></svg></span>
                <div class="rd-dup-banner__body">
                    <p class="rd-dup-banner__title">{{ __('admin.investors_admin.duplicate.yes') }}</p>
                    <p class="rd-dup-banner__hint">
                        @if ($investor->canonical_id && (int) $investor->canonical_id !== (int) $investor->id)
                            {{ __('admin.investors_admin.duplicate.canonical_hint') ?: 'This record was merged into the canonical entry.' }}
                        @else
                            {{ __('admin.investors_admin.duplicate.unresolved_hint') ?: 'Marked as duplicate. No canonical record has been assigned yet.' }}
                        @endif
                    </p>
                </div>
                @if ($investor->canonical_id && (int) $investor->canonical_id !== (int) $investor->id)
                    <a class="rd-dup-banner__link" href="{{ url('/admin/investors/' . (int) $investor->canonical_id) }}">
                        #{{ (int) $investor->canonical_id }}
                        <svg><use href="#icon-arrow-right"/></svg>
                    </a>
                @endif
            </section>
        @endif

        {{-- ───────────────── KPI STRIP ───────────────── --}}
        <section class="rd-stats">
            {{-- Investment Cap (SAR) hero tile removed 2026-06-15.
                 Operator request: the value was rendered twice (hero
                 tile + Investment Profile field row), and the duplicate
                 read as visual clutter. The column itself stays on the
                 investors table; only the read-side display is dropped
                 from the show page. The edit form's Investment Profile
                 section no longer exposes it either (see
                 EntitySectionSchema). --}}
            {{-- Stat #2: "Expected Annual Investments" — relabeled
                 2026-06-11 from "Expected Investment Per Year (SAR)".
                 The value now resolves the label-driven range option
                 (e.g. "2-4 investments / year") rather than the dropped
                 SAR amount. `data-edit-section` jumps into the Investment
                 Profile card's edit mode when clicked in Edit Mode. --}}
            <div class="rd-stat rd-stat--ok" data-edit-section="investment_profile">
                <span class="rd-stat__icon"><svg><use href="#icon-trend"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.expected_annual_investments_option_id') }}</span>
                    <span class="rd-stat__value" style="font-size:16px;">
                        {{ $optName($investor->expectedAnnualInvestments) }}
                    </span>
                </div>
            </div>
            <div class="rd-stat rd-stat--muted">
                <span class="rd-stat__icon"><svg><use href="#icon-hash"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.investments_count') }}</span>
                    <span class="rd-stat__value">{{ $int($investor->investments_count) }}</span>
                </div>
            </div>
            {{-- Average Ticket — `@if` guard removed 2026-06-15 so the
                 tile always renders. Without it, an investor with no
                 average_ticket_option_id would collapse the top row to
                 2 tiles, breaking the locked 3 + 3 layout (the
                 Background tile would slide up into the empty cell).
                 The shared `$optName(...)` helper falls back to the
                 em-dash placeholder when the relation is null. --}}
            <div class="rd-stat rd-stat--warn">
                <span class="rd-stat__icon"><svg><use href="#icon-star"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.average_ticket_option_id') }}</span>
                    <span class="rd-stat__value" style="font-size:16px;">{{ $optName($investor->averageTicket) }}</span>
                </div>
            </div>

            {{-- ── New classification tiles (2026-06-11) ───────────────
                 Three additional stat tiles surfaced at the end of the
                 row per UX request ("الاخير وكلهم ف صف واحد"). The grid
                 uses repeat(auto-fit, minmax(150px, 1fr)) so 4–7 tiles
                 lay out responsively. Clicking a tile in Edit Mode
                 scrolls to + opens the Classifications section card. --}}
            {{-- 3 classification chips are DISPLAY-ONLY since 2026-06-14
                 per ops spec. `data-edit-section` was removed so the
                 global click handler ignores them; admins still edit
                 via the dedicated "Edit" button on the Classifications
                 section card below. --}}
            <div class="rd-stat">
                <span class="rd-stat__icon" style="background: #fef3c7; color: #92400e;"><svg><use href="#icon-shield"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.background_option_id') }}</span>
                    <span class="rd-stat__value" style="font-size:16px;">{{ $optName($investor->background) }}</span>
                </div>
            </div>
            <div class="rd-stat">
                <span class="rd-stat__icon" style="background: #e0e7ff; color: #4338ca;"><svg><use href="#icon-star"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.investment_experience_option_id') }}</span>
                    <span class="rd-stat__value" style="font-size:16px;">{{ $optName($investor->investmentExperience) }}</span>
                </div>
            </div>
            <div class="rd-stat">
                <span class="rd-stat__icon" style="background: #d1fae5; color: #065f46;"><svg><use href="#icon-trend"/></svg></span>
                <div class="rd-stat__body">
                    <span class="rd-stat__label">{{ __('admin.investors_admin.fields.activity_in_numu_option_id') }}</span>
                    <span class="rd-stat__value" style="font-size:16px;">{{ $optName($investor->activityInNumu) }}</span>
                </div>
            </div>
        </section>

        {{-- ───────────────── SECTION NAV ─────────────────
             Sticky pill bar — smooth-scrolls to each card and highlights
             the visible one (IntersectionObserver in the script block). --}}

        {{-- Rejection-reason card (only shows when the investor has a
             stored reason — appears right under the hero so it's the
             first thing an admin reading the page sees). --}}
        @include('admin.partials.rejection-reason-display', ['subject' => $investor])

        <nav class="rd-section-nav" aria-label="Sections">
            @if ($investor->investor_bio)
                <a class="rd-section-nav__item" href="#sec-about" data-nav-target="sec-about" title="{{ __('admin.investors_admin.sections.about') }}">
                    <svg><use href="#icon-text"/></svg><span>{{ __('admin.investors_admin.sections.about') }}</span>
                </a>
            @endif
            <a class="rd-section-nav__item" href="#sec-contact" data-nav-target="sec-contact" title="{{ __('admin.investors_admin.sections.identity') }}">
                <svg><use href="#icon-user"/></svg><span>{{ __('admin.investors_admin.sections.identity') }}</span>
            </a>
            <a class="rd-section-nav__item" href="#sec-investment" data-nav-target="sec-investment" title="{{ __('admin.investors_admin.sections.investment_profile') }}">
                <svg><use href="#icon-cash"/></svg><span>{{ __('admin.investors_admin.sections.investment_profile') }}</span>
            </a>
            <a class="rd-section-nav__item" href="#sec-profile" data-nav-target="sec-profile" title="{{ __('admin.investors_admin.sections.profile') }}">
                <svg><use href="#icon-shield"/></svg><span>{{ __('admin.investors_admin.sections.profile') }}</span>
            </a>
            <a class="rd-section-nav__item" href="#sec-preferences" data-nav-target="sec-preferences" title="{{ __('admin.investors_admin.sections.preferences') }}">
                <svg><use href="#icon-target"/></svg><span>{{ __('admin.investors_admin.sections.preferences') }}</span>
            </a>
            {{-- Tags section is always present too — admins need to be
                 able to scroll to it to add the first tag when none have
                 been attached yet. --}}
            <a class="rd-section-nav__item" href="#sec-tags" data-nav-target="sec-tags" title="{{ __('admin.investors_admin.sections.tags') }}">
                <svg><use href="#icon-tag"/></svg><span>{{ __('admin.investors_admin.sections.tags') }}</span>
            </a>
            {{-- Meetings section is always present (admins should be able
                 to scroll to it even when an investor has zero meetings —
                 the empty state inside makes the situation explicit). --}}
            <a class="rd-section-nav__item" href="#sec-meetings" data-nav-target="sec-meetings" title="{{ __('admin.investors_admin.sections.meetings') }}">
                <svg><use href="#icon-calendar"/></svg><span>{{ __('admin.investors_admin.sections.meetings') }}</span>
            </a>
            {{-- Notes section is always present (admins can add the first one). --}}
            <a class="rd-section-nav__item" href="#sec-notes" data-nav-target="sec-notes" title="{{ __('admin.notes.section_title') }}">
                <svg><use href="#icon-text"/></svg><span>{{ __('admin.notes.section_title') }}</span>
            </a>
            {{-- Activity Log nav link added 2026-06-14; jumps to the
                 aggregated timeline at the bottom of the page. --}}
            <a class="rd-section-nav__item" href="#sec-activity" data-nav-target="sec-activity" title="{{ __('admin.investors_admin.sections.activity_log') }}">
                <svg><use href="#icon-text"/></svg><span>{{ __('admin.investors_admin.sections.activity_log') }}</span>
            </a>
        </nav>

        {{-- ───────────────── BIO — inline editable ─────────────────
             Always rendered (even when empty) so the Edit button is
             always reachable. LinkedIn intentionally NOT shown here —
             the hero icon strip is its sole display surface. --}}
        <x-admin.editable-section
            entity="investor"
            section-key="bio"
            :update-url="route('admin.investors.update-section', [$investor, 'bio'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.about')"
            icon="text"
            collapse-key="inv.about"
        >
            @if ($investor->investor_bio)
                <p style="white-space: pre-line; margin:0; font-size:14.5px; color:#334155; line-height:1.7;">{{ $investor->investor_bio }}</p>
            @else
                <p style="font-size:13px; color: var(--rd-faint, #94a3b8); margin: 0;">{{ __('admin.section_edit.empty_hint') }}</p>
            @endif
        </x-admin.editable-section>

        {{-- ───────────────── IDENTITY — inline section editing ───────────────── --}}
        {{-- The card now uses <x-admin.editable-section>: view-mode markup
             stays as-is (icon rows + copy buttons); clicking Edit swaps to
             an auto-generated form built from
             App\Services\Admin\EntitySectionSchema::investorSections()['identity'].
             First-name pair (ar/en) lives inside the form — the old
             separate first-names-editor partial was removed for that
             reason. --}}
        <x-admin.editable-section
            entity="investor"
            section-key="identity"
            :update-url="route('admin.investors.update-section', [$investor, 'identity'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.identity')"
            icon="user"
            collapse-key="inv.contact"
        >
            <div class="rd-info"
                 x-data="investorHero({
                     initial: @js($displayName),
                     locale:  @js(app()->getLocale()),
                 })"
                 x-on:section:updated.window="onSectionUpdate($event)">
                <div class="rd-info-row">
                    <span class="rd-info-row__icon"><svg><use href="#icon-user"/></svg></span>
                    <span class="rd-info-row__value" x-text="displayName">{{ $text($displayName) }}</span>
                </div>
                @if ($investor->email)
                    <div class="rd-info-row">
                        <span class="rd-info-row__icon"><svg><use href="#icon-mail"/></svg></span>
                        <span class="rd-info-row__value"><a href="mailto:{{ $investor->email }}">{{ $investor->email }}</a></span>
                        <button type="button" class="rd-copy-btn" data-copy="{{ $investor->email }}"
                                title="{{ __('admin.actions.copy') ?: 'Copy' }}"
                                aria-label="{{ __('admin.actions.copy') ?: 'Copy' }}">
                            <svg><use href="#icon-copy"/></svg>
                        </button>
                    </div>
                @endif
                @if ($investor->phone_number)
                    @php $waUrl = \App\Support\Phone::whatsAppUrl($investor->phone_number); @endphp
                    <div class="rd-info-row">
                        <span class="rd-info-row__icon"><svg><use href="#icon-phone"/></svg></span>
                        <span class="rd-info-row__value"><a href="tel:{{ $investor->phone_number }}" style="color: var(--rd-text);">{{ $investor->phone_number }}</a></span>
                        @if ($waUrl)
                            <a href="{{ $waUrl }}" target="_blank" rel="noopener"
                               class="rd-copy-btn"
                               style="color:#25d366;"
                               title="WhatsApp {{ $investor->phone_number }}"
                               aria-label="WhatsApp">
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
                                    <path d="M19.05 4.95A10 10 0 0 0 4.46 18.5L3 22l3.59-1.42A10 10 0 1 0 19.05 4.95Zm-7.04 15.3a8.32 8.32 0 0 1-4.24-1.16l-.3-.18-2.13.84.83-2.07-.2-.32a8.32 8.32 0 1 1 6.04 2.89Zm4.57-6.23c-.25-.13-1.5-.74-1.73-.82-.23-.09-.4-.13-.57.13s-.65.82-.8.99c-.15.17-.3.19-.55.06-1.46-.73-2.42-1.3-3.38-2.95-.26-.45.26-.42.74-1.39.08-.17.04-.31-.02-.44-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44-.15 0-.32-.02-.49-.02-.17 0-.45.06-.69.31-.24.26-.91.89-.91 2.17 0 1.28.93 2.52 1.06 2.69.13.17 1.83 2.8 4.43 3.93 1.55.67 2.16.73 2.93.61.47-.07 1.5-.61 1.71-1.21.21-.6.21-1.11.15-1.22-.06-.11-.23-.17-.48-.3Z"/>
                                </svg>
                            </a>
                        @endif
                        <button type="button" class="rd-copy-btn" data-copy="{{ $investor->phone_number }}"
                                title="{{ __('admin.actions.copy') ?: 'Copy' }}"
                                aria-label="{{ __('admin.actions.copy') ?: 'Copy' }}">
                            <svg><use href="#icon-copy"/></svg>
                        </button>
                    </div>
                @endif
                @if ($investor->linkedin_profile)
                    {{-- LinkedIn row added to Identity 2026-06-14 per ops
                         spec. Hero strip still shows the brand icon at the
                         top; this row mirrors the email/phone treatment
                         (icon-link + hover-revealed copy button) so admins
                         can grab the URL without leaving the section. --}}
                    <div class="rd-info-row">
                        <span class="rd-info-row__icon"><svg><use href="#icon-linkedin"/></svg></span>
                        <span class="rd-info-row__value">
                            {{-- Inline LinkedIn glyph removed 2026-06-14:
                                 the row's gutter icon (rd-info-row__icon)
                                 already identifies the link as LinkedIn,
                                 so the duplicate inline svg read as two
                                 adjacent icons. --}}
                            <a href="{{ $investor->linkedin_profile }}" target="_blank" rel="noopener" data-brand="linkedin"
                               title="{{ $investor->linkedin_profile }}" aria-label="LinkedIn"
                               style="color:#0a66c2; text-decoration:none;">LinkedIn</a>
                        </span>
                        <button type="button" class="rd-copy-btn" data-copy="{{ $investor->linkedin_profile }}"
                                title="{{ __('admin.actions.copy') ?: 'Copy' }}"
                                aria-label="{{ __('admin.actions.copy') ?: 'Copy' }}">
                            <svg><use href="#icon-copy"/></svg>
                        </button>
                    </div>
                @endif
                <div class="rd-info-row">
                    <span class="rd-info-row__icon"><svg><use href="#icon-pin"/></svg></span>
                    <span class="rd-info-row__value">{{ $countryName }}@if ($cityName !== $dash) · {{ $cityName }}@endif</span>
                </div>
                @if ($investor->joining_date)
                    <div class="rd-info-row">
                        <span class="rd-info-row__icon"><svg><use href="#icon-calendar"/></svg></span>
                        <span class="rd-info-row__value">{{ $investor->joining_date->format('Y-m-d') }}</span>
                    </div>
                @endif
                @if ($investor->first_name_ar || $investor->first_name_en)
                    <div class="rd-info-row">
                        <span class="rd-info-row__icon"><svg><use href="#icon-user"/></svg></span>
                        <span class="rd-info-row__value" style="color: var(--rd-faint, #94a3b8); font-size: 12.5px;">
                            @if ($investor->first_name_ar) {{ $investor->first_name_ar }} @endif
                            @if ($investor->first_name_ar && $investor->first_name_en) · @endif
                            @if ($investor->first_name_en) {{ $investor->first_name_en }} @endif
                        </span>
                    </div>
                @endif
            </div>
        </x-admin.editable-section>

        {{-- ───────────────── CLASSIFICATIONS — inline editable ─────────────────
             Three new dropdowns (background / investment_experience /
             activity_in_numu) added 2026-06-11. Same three values are
             surfaced as hero stat tiles above; clicking a tile in Edit
             Mode scrolls here and opens this card's edit form. --}}
        <x-admin.editable-section
            entity="investor"
            section-key="classifications"
            :update-url="route('admin.investors.update-section', [$investor, 'classifications'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.classifications')"
            icon="star"
            collapse-key="inv.classifications"
        >
                {{-- Field-row order mirrors the schema: group → category
                     → background → investment_experience → activity_in_numu
                     → whatsapp_group_status. Category + WhatsApp moved
                     in here on 2026-06-15 from the Profile & Classification
                     section so all classification-like dimensions live
                     in one place. --}}
                <div class="rd-fields">
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.group_id') }}</span>
                        <span class="rd-field__value @if (! $investor->group) rd-field__value--empty @endif">
                            @if ($investor->group)
                                @php $gc = $investor->group->resolveColor(); @endphp
                                <span class="rd-pill" style="background: color-mix(in srgb, {{ $gc }} 14%, transparent); color: {{ $gc }}; border-color: color-mix(in srgb, {{ $gc }} 28%, transparent);">{{ $investor->group->name }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.category_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->category) rd-field__value--empty @endif">
                            @if ($investor->category)
                                <span class="rd-pill rd-pill--muted">{{ $optName($investor->category) }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.background_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->background) rd-field__value--empty @endif">
                            @if ($investor->background)
                                <span class="rd-pill rd-pill--muted">{{ $optName($investor->background) }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.investment_experience_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->investmentExperience) rd-field__value--empty @endif">
                            @if ($investor->investmentExperience)
                                <span class="rd-pill rd-pill--muted">{{ $optName($investor->investmentExperience) }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.activity_in_numu_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->activityInNumu) rd-field__value--empty @endif">
                            @if ($investor->activityInNumu)
                                <span class="rd-pill rd-pill--muted">{{ $optName($investor->activityInNumu) }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.whatsapp_group_status') }}</span>
                        <span class="rd-field__value @if (! $investor->whatsapp_group_status) rd-field__value--empty @endif">
                            @if ($investor->whatsapp_group_status)
                                @php
                                    $waJoined = $investor->whatsapp_group_status === 'yes';
                                    $waKey    = 'admin.investors_admin.whatsapp_group_status_values.' . $investor->whatsapp_group_status;
                                    $waLabel  = __($waKey);
                                    if ($waLabel === $waKey) {
                                        $waLabel = \Illuminate\Support\Str::headline($investor->whatsapp_group_status);
                                    }
                                @endphp
                                <span class="rd-pill rd-wa-pill rd-wa-pill--{{ $waJoined ? 'yes' : 'no' }}">{{ $waLabel }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                </div>
        </x-admin.editable-section>

        {{-- ───────────────── INVESTMENT PROFILE — inline editable ───────────────── --}}
        <x-admin.editable-section
            entity="investor"
            section-key="investment_profile"
            :update-url="route('admin.investors.update-section', [$investor, 'investment_profile'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.investment_profile')"
            icon="cash"
            :icon-style="['bg' => 'var(--rd-ok-soft)', 'fg' => 'var(--rd-ok)']"
            collapse-key="inv.investment"
        >
                <div class="rd-fields">
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.average_ticket_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->averageTicket) rd-field__value--empty @endif">{{ $optName($investor->averageTicket) }}</span>
                    </div>
                    {{-- `investment_cap_sar` field row removed 2026-06-15.
                         The same value is already surfaced as the first
                         stat tile in the hero strip above; rendering it
                         twice (hero + row) was a visual duplicate. The
                         column itself stays on the table + on the
                         Investment Profile section's EDIT form (via
                         EntitySectionSchema), only the view-mode row
                         here is the duplicate that's removed. --}}
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.expected_annual_investments_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->expectedAnnualInvestments) rd-field__value--empty @endif">{{ $optName($investor->expectedAnnualInvestments) }}</span>
                    </div>
                    {{-- `expected_investment_per_year_sar` row removed 2026-06-11 — column dropped. --}}
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.investments_count') }}</span>
                        <span class="rd-field__value">{{ $int($investor->investments_count) }}</span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.investment_experience_level_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->investmentExperienceLevel) rd-field__value--empty @endif">{{ $optName($investor->investmentExperienceLevel) }}</span>
                    </div>
                    {{-- `investment_method_option_id` row removed 2026-06-11 — replaced visually
                         by the Methods multiselect chip block rendered below. --}}
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.has_angel_invested_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->hasAngelInvested) rd-field__value--empty @endif">{{ $optName($investor->hasAngelInvested) }}</span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.exit_experience_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->exitExperience) rd-field__value--empty @endif">{{ $optName($investor->exitExperience) }}</span>
                    </div>
                </div>

                {{-- Methods (multiselect) — moved here from the Sectors & Stages
                     section on 2026-06-11. Visually occupies the slot where the
                     single-FK `investment_method` used to live. --}}
                <div class="rd-section">
                    <h4 class="rd-section__title">
                        {{ __('admin.investors_admin.sections.methods') }}
                        <span class="rd-card__count">{{ $methodChips->count() }}</span>
                    </h4>
                    @if ($methodChips->isEmpty())
                        <p class="rd-empty">—</p>
                    @else
                        <div class="rd-chip-list">
                            @foreach ($methodChips as $name)
                                <span class="rd-pill rd-pill--muted">{{ $name }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- `previous_investments_details` block removed 2026-06-11
                     — column was dropped. The curated companies list below
                     is now the only structured surface for these names. --}}

                {{-- Curated companies — JSON list captured by the signup
                     repeater. Each chip is now a CLICKABLE LINK to the
                     investor index pre-filtered to other investors who
                     listed the same company name (?company=<name>). --}}
                @php
                    $companies = is_array($investor->previous_investments_companies)
                        ? collect($investor->previous_investments_companies)
                            ->map(fn ($v) => trim((string) $v))
                            ->filter(fn ($v) => $v !== '')
                            ->values()
                        : collect();
                @endphp
                @if ($companies->isNotEmpty())
                    <div class="rd-section">
                        <h4 class="rd-section__title">
                            <svg><use href="#icon-building"/></svg>
                            {{ __('admin.investors_admin.fields.previous_investments_companies') }}
                        </h4>
                        <div class="rd-chip-list">
                            @foreach ($companies as $company)
                                <a class="rd-tag rd-tag--link"
                                   href="{{ route('admin.investors.index', ['company' => $company]) }}"
                                   title="{{ $company }}"
                                   style="--tag-bg:#10b981; text-decoration:none; cursor:pointer;">
                                    <span class="rd-tag__dot" aria-hidden="true"></span>{{ $company }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
        </x-admin.editable-section>

        {{-- ───────────────── CLASSIFICATION — inline editable ───────────────── --}}
        <x-admin.editable-section
            entity="investor"
            section-key="profile"
            :update-url="route('admin.investors.update-section', [$investor, 'profile'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.profile')"
            icon="shield"
            collapse-key="inv.profile"
        >
                {{-- 2026-06-15: `category_option_id` + `whatsapp_group_status`
                     rows REMOVED from this section — they now live in
                     the Classifications card above. The Profile section
                     keeps workflow / referral fields only. --}}
                <div class="rd-fields">
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.action_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->action) rd-field__value--empty @endif">
                            @if ($investor->action)
                                <span class="rd-pill">{{ $optName($investor->action) }}</span>
                            @else {{ $dash }} @endif
                        </span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.referral_source_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->referralSource) rd-field__value--empty @endif">{{ $optName($investor->referralSource) }}</span>
                    </div>
                    <div class="rd-field">
                        <span class="rd-field__label">{{ __('admin.investors_admin.fields.is_in_other_angel_group_option_id') }}</span>
                        <span class="rd-field__value @if (! $investor->isInOtherAngelGroup) rd-field__value--empty @endif">{{ $optName($investor->isInOtherAngelGroup) }}</span>
                    </div>
                    @if ($investor->rejection_reason)
                        <div class="rd-field rd-field--full" style="grid-column:1/-1;">
                            <span class="rd-field__label">{{ __('admin.investors_admin.fields.rejection_reason') }}</span>
                            <span class="rd-field__value" style="white-space:pre-line;">{{ $investor->rejection_reason }}</span>
                        </div>
                    @endif
                </div>
        </x-admin.editable-section>

        {{-- ───────────────── PREFERENCES — inline editable (multiselect) ───────────────── --}}
        <x-admin.editable-section
            entity="investor"
            section-key="preferences"
            :update-url="route('admin.investors.update-section', [$investor, 'preferences'])"
            :model="$investor"
            :title="__('admin.investors_admin.sections.preferences')"
            icon="target"
            collapse-key="inv.preferences"
        >
            <div class="rd-section">
                <h4 class="rd-section__title">
                    {{ __('admin.investors_admin.sections.sectors') }}
                    <span class="rd-card__count">{{ $sectorChips->count() }}</span>
                </h4>
                @if ($sectorChips->isEmpty())
                    <p class="rd-empty">—</p>
                @else
                    <div class="rd-chip-list">
                        @foreach ($sectorChips as $name)
                            <span class="rd-pill rd-pill--muted">{{ $name }}</span>
                        @endforeach
                    </div>
                @endif
            </div>
            <div class="rd-section">
                <h4 class="rd-section__title">
                    {{ __('admin.investors_admin.sections.stages') }}
                    <span class="rd-card__count">{{ $stageChips->count() }}</span>
                </h4>
                @if ($stageChips->isEmpty())
                    <p class="rd-empty">—</p>
                @else
                    <div class="rd-chip-list">
                        @foreach ($stageChips as $name)
                            <span class="rd-pill rd-pill--muted">{{ $name }}</span>
                        @endforeach
                    </div>
                @endif
            </div>
            {{-- Methods block moved to Investment Profile on 2026-06-11.
                 Pivot table (`investor_payment_methods`) is unchanged;
                 only the section it renders in moved. --}}
        </x-admin.editable-section>

        {{-- ───────────────── TAGS (editable) ─────────────────
             Always-present card. The chip strip shows the currently
             attached tags; the "Edit" button opens an inline popover
             listing the full Tag catalog as checkable chips. Saving
             PATCHes the FULL desired set to investors.update-tags;
             see InvestorController::updateTags. --}}
        @php
            $tagsEndpoint = route('admin.investors.update-tags', $investor);
            // Initial state for the Alpine component. We pass the
            // current pivot set (as a list of ids) plus the available
            // catalog so the popover can render its checkbox list
            // without an extra fetch.
            $tagsState = [
                'selectedIds' => $investor->tags->pluck('id')->map(fn ($v) => (int) $v)->all(),
                'available'   => $availableTags->map(fn ($t) => [
                    'id'    => (int) $t->id,
                    'name'  => (string) $t->name,
                    'color' => (string) ($t->color ?: '#6366f1'),
                ])->all(),
                'attached'    => $investor->tags->map(fn ($t) => [
                    'id'    => (int) $t->id,
                    'name'  => (string) $t->name,
                    'color' => (string) ($t->color ?: '#6366f1'),
                ])->all(),
                'endpoint'         => $tagsEndpoint,
                'createEndpoint'   => route('admin.tags.store'),
                // The rename URL template uses `__ID__` as a placeholder
                // the Alpine factory substitutes per-tag at click time —
                // saves a per-chip route call without baking N urls into
                // the page payload.
                'updateEndpoint'   => str_replace(
                    '__ID__',
                    '__ID__',
                    route('admin.tags.update', ['tag' => '__ID__']),
                ),
            ];
        @endphp
        <section class="rd-card" id="sec-tags" data-collapse-key="inv.tags" data-open="true"
                 x-data="investorTagsEditor(@js($tagsState))">
            <button type="button" class="rd-card__head">
                <h3 class="rd-card__title">
                    <span class="rd-card__icon"><svg><use href="#icon-tag"/></svg></span>
                    {{ __('admin.investors_admin.sections.tags') }}
                </h3>
                <span class="rd-card__meta">
                    <span class="rd-card__count" x-text="attached.length"></span>
                    <span class="rd-card__chevron"><svg width="18" height="18"><use href="#icon-chevron"/></svg></span>
                </span>
            </button>
            <div class="rd-card__body-wrap"><div class="rd-card__body">
                <div class="rd-tags-row">
                    {{-- Live chip strip — driven by Alpine `attached` so
                         it refreshes on save without a page reload. --}}
                    <div class="rd-chip-list" x-show="attached.length > 0">
                        <template x-for="t in attached" :key="t.id">
                            {{-- Tag chips link to /admin/tags/{id} — the
                                 catalog browser added 2026-06-11. The
                                 base URL is rendered once via Blade,
                                 then the Alpine binding appends the id
                                 at render time. --}}
                            <a class="rd-tag"
                               :href="`{{ url('/admin/tags') }}/${t.id}`"
                               :style="`--tag-bg: ${t.color || '#6366f1'};`"
                               :title="`{{ __('admin.investors_admin.tags.filter_by_hint') }}`"
                               style="text-decoration:none;color:inherit;">
                                <span class="rd-tag__dot" aria-hidden="true"></span>
                                <span x-text="t.name"></span>
                            </a>
                        </template>
                    </div>
                    <p class="rd-tags-empty" x-show="attached.length === 0" x-cloak>
                        {{ __('admin.investors_admin.tags_editor.empty') }}
                    </p>

                    {{-- Edit toggle — opens the popover that lists the
                         catalog. Hidden while the popover is open. --}}
                    <button type="button"
                            class="rd-tags-edit-btn"
                            @click="openEditor()"
                            x-show="!editing"
                            x-cloak>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                            <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                        <span>{{ __('admin.actions.edit') }}</span>
                    </button>
                </div>

                {{-- ── Editor ──
                     Renders inline below the chip strip when `editing`
                     is true. The catalog is shown as toggleable chips —
                     click to add / remove from the working set. Save
                     PATCHes the new id list; cancel restores the
                     pre-edit selection without a network hit. --}}
                <div class="rd-tags-editor" x-show="editing" x-cloak>
                    <div class="rd-tags-editor__head">
                        <strong>{{ __('admin.investors_admin.tags_editor.title') }}</strong>
                        <small class="rd-tags-editor__hint">{{ __('admin.investors_admin.tags_editor.hint') }}</small>
                    </div>
                    <div class="rd-tags-catalog">
                        {{-- "+ Add new tag" affordance — kept as the FIRST
                             item in the catalog so it's always the first
                             chip the admin's eye lands on, regardless of
                             how many tags already exist. Collapsed to a
                             chip-sized button by default; click expands
                             an inline input + confirm/cancel so the admin
                             can mint a brand-new tag and have it pre-
                             attached to this investor in one motion. --}}
                        <button type="button"
                                class="rd-tag-pick rd-tag-pick--add"
                                @click="openCreate()"
                                x-show="!creating"
                                x-cloak>
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            <span>{{ __('admin.investors_admin.tags_editor.create_new') }}</span>
                        </button>

                        <div class="rd-tag-create" x-show="creating" x-cloak>
                            <input type="text"
                                   class="rd-tag-create__input"
                                   x-ref="newTagInput"
                                   x-model="newName"
                                   maxlength="191"
                                   :placeholder="@js(__('admin.investors_admin.tags_editor.create_placeholder'))"
                                   @keydown.enter.prevent="createAndAttach()"
                                   @keydown.escape.prevent="cancelCreate()">
                            <button type="button"
                                    class="rd-tag-create__btn rd-tag-create__btn--ok"
                                    @click="createAndAttach()"
                                    :disabled="creatingBusy || !newName.trim()">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <polyline points="20 6 9 17 4 12"/>
                                </svg>
                            </button>
                            <button type="button"
                                    class="rd-tag-create__btn rd-tag-create__btn--cancel"
                                    @click="cancelCreate()"
                                    :disabled="creatingBusy">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <line x1="18" y1="6" x2="6" y2="18"/>
                                    <line x1="6" y1="6" x2="18" y2="18"/>
                                </svg>
                            </button>
                        </div>

                        <template x-for="t in available" :key="t.id">
                            <div class="rd-tag-pick-wrap">
                                {{-- Rename mode replaces the chip with an
                                     inline input + tick + X, shaped like
                                     the create-new chip so the editor
                                     feels uniform. --}}
                                <div class="rd-tag-create" x-show="editingTagId === t.id" x-cloak>
                                    <input type="text"
                                           class="rd-tag-create__input"
                                           x-model="editingName"
                                           :ref="`renameInput${t.id}`"
                                           maxlength="191"
                                           @keydown.enter.prevent="saveTagEdit(t.id)"
                                           @keydown.escape.prevent="cancelTagEdit()">
                                    <button type="button"
                                            class="rd-tag-create__btn rd-tag-create__btn--ok"
                                            @click.stop="saveTagEdit(t.id)"
                                            :disabled="editingBusy || !editingName.trim()">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <polyline points="20 6 9 17 4 12"/>
                                        </svg>
                                    </button>
                                    <button type="button"
                                            class="rd-tag-create__btn rd-tag-create__btn--cancel"
                                            @click.stop="cancelTagEdit()"
                                            :disabled="editingBusy">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <line x1="18" y1="6" x2="6" y2="18"/>
                                            <line x1="6" y1="6" x2="18" y2="18"/>
                                        </svg>
                                    </button>
                                </div>

                                {{-- Normal chip — toggles selection on
                                     click. A small pencil icon on the
                                     right swaps the chip into rename
                                     mode without affecting selection. --}}
                                <button type="button"
                                        class="rd-tag-pick"
                                        :class="{ 'rd-tag-pick--on': isSelected(t.id) }"
                                        :style="`--tag-bg: ${t.color || '#6366f1'};`"
                                        @click="toggle(t.id)"
                                        x-show="editingTagId !== t.id">
                                    <span class="rd-tag-pick__dot" aria-hidden="true"></span>
                                    <span class="rd-tag-pick__name" x-text="t.name"></span>
                                    <svg class="rd-tag-pick__check" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-show="isSelected(t.id)">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span class="rd-tag-pick__edit"
                                          role="button"
                                          tabindex="0"
                                          :aria-label="@js(__('admin.investors_admin.tags_editor.rename_aria'))"
                                          :title="@js(__('admin.investors_admin.tags_editor.rename_aria'))"
                                          @click.stop="startTagEdit(t)"
                                          @keydown.enter.stop.prevent="startTagEdit(t)"
                                          @keydown.space.stop.prevent="startTagEdit(t)">
                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                            <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                        </svg>
                                    </span>
                                </button>
                            </div>
                        </template>
                        <p class="rd-tags-empty" x-show="available.length === 0 && !creating" x-cloak>
                            {{ __('admin.investors_admin.tags_editor.catalog_empty') }}
                        </p>
                    </div>
                    <div class="rd-tags-editor__actions">
                        <button type="button" class="rd-btn rd-btn--ghost" @click="cancel()" :disabled="saving">
                            {{ __('admin.actions.cancel') }}
                        </button>
                        <button type="button" class="rd-btn rd-btn--primary" @click="save()" :disabled="saving">
                            <span x-show="!saving">{{ __('admin.actions.save') }}</span>
                            <span x-show="saving" x-cloak>{{ __('admin.investors_admin.tags_editor.saving') }}</span>
                        </button>
                    </div>
                    <p class="rd-tags-editor__error" x-show="errorMessage" x-cloak x-text="errorMessage"></p>
                </div>
            </div></div>
        </section>

        {{-- ───────────────── MEETINGS (read-only) ─────────────────
             Every Microsoft Bookings meeting this investor has had,
             newest first. Shows wall-clock date + time (via the
             tz-aware localStart accessor so it matches what the
             customer's MS confirmation email said), attendance, and
             admin notes when present.
             ALWAYS rendered — admins land here expecting a meetings
             timeline; an empty state inside makes "no meetings yet"
             explicit rather than silently hiding the section. The
             attendance + notes columns are read-only on the investor
             show page: they're owned by /admin/meetings/{id} (and the
             attendance modal on the meetings index). --}}
        @php
            $attendancePillStyle = [
                'attended'     => ['fg' => '#065f46', 'bg' => '#d1fae5'],
                'not_attended' => ['fg' => '#991b1b', 'bg' => '#fee2e2'],
                'coming'       => ['fg' => '#1d4ed8', 'bg' => '#dbeafe'],
                'cancelled'    => ['fg' => '#475569', 'bg' => '#e2e8f0'],
                'unknown'      => ['fg' => '#475569', 'bg' => '#f1f5f9'],
            ];
            $statusPillStyle = [
                'cancelled'  => ['fg' => '#991b1b', 'bg' => '#fee2e2'],
            ];
        @endphp
        <section class="rd-card" id="sec-meetings" data-collapse-key="inv.meetings" data-open="true">
            <button type="button" class="rd-card__head">
                <h3 class="rd-card__title">
                    <span class="rd-card__icon"><svg><use href="#icon-calendar"/></svg></span>
                    {{ __('admin.investors_admin.sections.meetings') }}
                </h3>
                <span class="rd-card__meta">
                    <span class="rd-card__count">{{ $meetings->count() }}</span>
                    <span class="rd-card__chevron"><svg width="18" height="18"><use href="#icon-chevron"/></svg></span>
                </span>
            </button>
            <div class="rd-card__body-wrap"><div class="rd-card__body">
                @if ($meetings->isEmpty())
                    <p class="rd-meeting-empty">{{ __('admin.investors_admin.meetings_empty') }}</p>
                @else
                    <ul class="rd-meeting-list">
                        @foreach ($meetings as $m)
                            @php
                                $att   = $attendancePillStyle[$m->attendance_status] ?? $attendancePillStyle['unknown'];
                                $isCxl = $m->status === 'cancelled';
                            @endphp
                            <li class="rd-meeting" @if ($isCxl) data-cancelled="true" @endif>
                                <div class="rd-meeting__when">
                                    <div class="rd-meeting__date">{{ optional($m->meeting_date)->format('Y-m-d') ?: $dash }}</div>
                                    @if ($m->start_time)
                                        <div class="rd-meeting__time">
                                            {{ optional($m->localStart)->format('H:i') }}@if ($m->end_time) – {{ optional($m->localEnd)->format('H:i') }}@endif
                                        </div>
                                    @endif
                                    @if ($m->created_at)
                                        <div class="rd-meeting__created" title="{{ __('admin.meetings_admin.fields.created_at') }}">
                                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
                                            </svg>
                                            {{ $m->created_at->format('Y-m-d') }}
                                        </div>
                                    @endif
                                </div>
                                <div class="rd-meeting__body">
                                    <div class="rd-meeting__pills">
                                        <span class="rd-meeting__pill" style="--fg:{{ $att['fg'] }};--bg:{{ $att['bg'] }};">
                                            {{ __('admin.meetings_admin.attendances.' . $m->attendance_status) }}
                                        </span>
                                        @if ($isCxl)
                                            <span class="rd-meeting__pill" style="--fg:#991b1b;--bg:#fee2e2;">
                                                {{ __('admin.meetings_admin.statuses.cancelled') }}
                                            </span>
                                        @endif
                                        @if ($m->staff_name)
                                            <span class="rd-meeting__pill" style="--fg:#4338ca;--bg:#eef2ff;">
                                                {{ $m->staff_name }}
                                            </span>
                                        @endif
                                    </div>
                                    @if ($m->meeting_notes)
                                        <p class="rd-meeting__notes">{{ $m->meeting_notes }}</p>
                                    @endif
                                </div>
                                <div class="rd-meeting__actions">
                                    <a href="{{ route('admin.meetings.show', $m) }}" class="rd-meeting__link" title="{{ __('admin.actions.view') }}">
                                        <svg width="16" height="16"><use href="#icon-arrow-right"/></svg>
                                    </a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div></div>
        </section>

        {{-- ───────────────── ENTITY NOTES ─────────────────
             Free-form admin notes attached to this investor. Reusable
             component shared with the startup show page. Pushes its
             own styles + Alpine component via entity-notes-assets. --}}
        @include('admin.partials.entity-notes', [
            'subjectType'  => 'investor',
            'subjectId'    => $investor->id,
            'notes'        => $notes,
            'sectionTitle' => __('admin.notes.section_title'),
        ])
        @include('admin.partials.entity-notes-assets')

        {{-- ───────────────── ACTIVITY LOG (Item N, 2026-06-14) ─────────────
             Aggregated timeline at the bottom of the show page. Pulls
             from three log surfaces (see InvestorTimelineService):
               · activity_logs       — admin + public actions
               · notification_logs   — email / SMS / WhatsApp / push attempts
               · signup_audit_logs   — forensic signup-flow capture
             Rendered as one newest-first list with a colored left-rail
             per `kind`; each card has a header (icon + title + actor +
             timestamp), a status pill, and an expandable meta block.
             No JS dependencies — pure Blade + <details>. --}}
        @php
            // Group the flat timeline into buckets — Today / Yesterday /
            // This week / This month / Older — so the list reads more like
            // a journal than a wall of cards. `$timeline` is already sorted
            // newest-first, so each bucket inherits that order naturally.
            $now      = \Carbon\Carbon::now();
            $today    = $now->copy()->startOfDay();
            $yest     = $today->copy()->subDay();
            $weekAgo  = $today->copy()->subDays(7);
            $monthAgo = $today->copy()->subDays(30);

            $bucketKey = function (?\Carbon\Carbon $t) use ($today, $yest, $weekAgo, $monthAgo): string {
                if (! $t)                  return 'older';
                if ($t->gte($today))       return 'today';
                if ($t->gte($yest))        return 'yesterday';
                if ($t->gte($weekAgo))     return 'this_week';
                if ($t->gte($monthAgo))    return 'this_month';
                return 'older';
            };

            $buckets = collect([
                'today'      => __('admin.investors_admin.activity.buckets.today'),
                'yesterday'  => __('admin.investors_admin.activity.buckets.yesterday'),
                'this_week'  => __('admin.investors_admin.activity.buckets.this_week'),
                'this_month' => __('admin.investors_admin.activity.buckets.this_month'),
                'older'      => __('admin.investors_admin.activity.buckets.older'),
            ]);

            $grouped = $timeline->groupBy(fn ($r) => $bucketKey($r['happened_at']));
        @endphp
        <section id="sec-activity" class="rd-card" data-collapse-key="inv.activity" data-open="true">
            <button type="button" class="rd-card__head">
                <h3 class="rd-card__title">
                    <span class="rd-card__icon"><svg><use href="#icon-text"/></svg></span>
                    {{ __('admin.investors_admin.activity.card_title') }}
                </h3>
                <span class="rd-card__meta">
                    @if ($timelineSummary['total'] > 0)
                        <span class="rd-card__count">{{ $timelineSummary['total'] }}</span>
                    @endif
                    <span class="rd-card__chevron"><svg width="18" height="18"><use href="#icon-chevron"/></svg></span>
                </span>
            </button>
            <div class="rd-card__body-wrap"><div class="rd-card__body">
                <p style="font-size:13px; color: var(--rd-faint, #94a3b8); margin: 0 0 16px;">
                    {{ __('admin.investors_admin.activity.card_subtitle') }}
                </p>

                @if ($timeline->isEmpty())
                    <p class="rd-empty" style="font-size:13px; color: var(--rd-faint, #94a3b8); margin: 0;">
                        {{ __('admin.investors_admin.activity.empty') }}
                    </p>
                @else
                    {{-- ─── Filter tabs ──────────────────────────────────
                         Pure-CSS filter via hidden radio inputs + :has()
                         selector — no JS. Click a tab → its radio gets
                         checked → the wrapper's :has(input:checked) styles
                         hide non-matching items. Counts come straight
                         from the summary array so they stay in sync. --}}
                    <div class="il-filter" data-filter="all">
                        <input type="radio" name="il-filter-{{ $investor->id }}" id="il-flt-all-{{ $investor->id }}"   value="all"          checked>
                        <input type="radio" name="il-filter-{{ $investor->id }}" id="il-flt-act-{{ $investor->id }}"   value="activity">
                        <input type="radio" name="il-filter-{{ $investor->id }}" id="il-flt-not-{{ $investor->id }}"   value="notification">
                        <input type="radio" name="il-filter-{{ $investor->id }}" id="il-flt-aud-{{ $investor->id }}"   value="audit">
                        <input type="radio" name="il-filter-{{ $investor->id }}" id="il-flt-err-{{ $investor->id }}"   value="failed">
                        <div class="il-filter__tabs">
                            <label for="il-flt-all-{{ $investor->id }}" class="il-filter__tab" data-tab="all">
                                <span>{{ __('admin.investors_admin.activity.tabs.all') }}</span>
                                <span class="il-filter__chip">{{ $timelineSummary['total'] }}</span>
                            </label>
                            <label for="il-flt-act-{{ $investor->id }}" class="il-filter__tab" data-tab="activity">
                                <span class="il-filter__dot" style="background:#10b981;"></span>
                                <span>{{ __('admin.investors_admin.activity.tabs.activity') }}</span>
                                <span class="il-filter__chip">{{ $timelineSummary['activity'] }}</span>
                            </label>
                            <label for="il-flt-not-{{ $investor->id }}" class="il-filter__tab" data-tab="notification">
                                <span class="il-filter__dot" style="background:#0ea5e9;"></span>
                                <span>{{ __('admin.investors_admin.activity.tabs.notifications') }}</span>
                                <span class="il-filter__chip">{{ $timelineSummary['notifications'] }}</span>
                            </label>
                            @if ($timelineSummary['audits'] > 0)
                                <label for="il-flt-aud-{{ $investor->id }}" class="il-filter__tab" data-tab="audit">
                                    <span class="il-filter__dot" style="background:#a855f7;"></span>
                                    <span>{{ __('admin.investors_admin.activity.tabs.audits') }}</span>
                                    <span class="il-filter__chip">{{ $timelineSummary['audits'] }}</span>
                                </label>
                            @endif
                            @if ($timelineSummary['failures'] > 0)
                                <label for="il-flt-err-{{ $investor->id }}" class="il-filter__tab il-filter__tab--err" data-tab="failed">
                                    <span class="il-filter__dot" style="background:#ef4444;"></span>
                                    <span>{{ __('admin.investors_admin.activity.tabs.failed') }}</span>
                                    <span class="il-filter__chip">{{ $timelineSummary['failures'] }}</span>
                                </label>
                            @endif
                        </div>

                        {{-- ─── Date-grouped timeline ─────────────────────
                             Each bucket renders its own connected timeline:
                             an absolutely-positioned rail on the leading
                             edge ties the cards together, and each card's
                             node icon sits on top of that rail to look
                             like a stop on a trip. Per-row data attrs
                             drive the filter; pure CSS, no JS. --}}
                        <div class="il-timeline-wrap">
                            @foreach ($buckets as $bucketKey => $bucketLabel)
                                @php $rows = $grouped->get($bucketKey, collect()); @endphp
                                @if ($rows->isEmpty()) @continue @endif
                                <div class="il-bucket" data-bucket="{{ $bucketKey }}">
                                    <div class="il-bucket__head">
                                        <span class="il-bucket__dot"></span>
                                        <span class="il-bucket__label">{{ $bucketLabel }}</span>
                                        <span class="il-bucket__count">{{ $rows->count() }}</span>
                                        <span class="il-bucket__rule"></span>
                                    </div>
                                    <ol class="il-timeline">
                                        @foreach ($rows as $row)
                                            @php
                                                // Per-kind colors / icons for the node circle.
                                                // For notifications we pick the channel icon
                                                // (mail/sms/whatsapp) instead of the generic
                                                // envelope so the user clocks the channel at
                                                // a glance.
                                                $kind = $row['kind'];
                                                $channel = $kind === 'notification' ? (string) ($row['raw']->channel ?? '') : '';
                                                $iconRef = match (true) {
                                                    $kind === 'notification' && $channel === 'whatsapp' => '#icon-phone',
                                                    $kind === 'notification' && $channel === 'sms'      => '#icon-phone',
                                                    $kind === 'notification' && $channel === 'push'     => '#icon-alert',
                                                    $kind === 'notification'                            => '#icon-mail',
                                                    $kind === 'audit'                                   => '#icon-shield',
                                                    default                                             => '#icon-edit',
                                                };
                                                $kindPalette = match ($kind) {
                                                    'notification' => ['fg' => '#0369a1', 'bg' => '#e0f2fe', 'rail' => '#0ea5e9'],
                                                    'audit'        => ['fg' => '#6d28d9', 'bg' => '#ede9fe', 'rail' => '#a855f7'],
                                                    default        => ['fg' => '#047857', 'bg' => '#d1fae5', 'rail' => '#10b981'],
                                                };
                                                $tone = $row['badge_tone'] ?? 'muted';
                                                $tonePalette = match ($tone) {
                                                    'ok'    => ['fg' => '#15803d', 'bg' => '#dcfce7', 'border' => '#86efac', 'dot' => '#22c55e'],
                                                    'warn'  => ['fg' => '#a16207', 'bg' => '#fef9c3', 'border' => '#fde047', 'dot' => '#eab308'],
                                                    'err'   => ['fg' => '#b91c1c', 'bg' => '#fee2e2', 'border' => '#fca5a5', 'dot' => '#ef4444'],
                                                    default => ['fg' => '#475569', 'bg' => '#f1f5f9', 'border' => '#e2e8f0', 'dot' => '#94a3b8'],
                                                };
                                                $isFailed = $tone === 'err';
                                                // Actor initials for the avatar bubble.
                                                $actorText = (string) ($row['actor'] ?? '');
                                                $actorInitials = '?';
                                                if ($actorText !== '') {
                                                    $parts = preg_split('/\s+/u', trim($actorText));
                                                    $actorInitials = mb_strtoupper(mb_substr($parts[0] ?? '?', 0, 1)
                                                        . (isset($parts[1]) ? mb_substr($parts[1], 0, 1) : ''));
                                                }
                                            @endphp
                                            @php
                                                $logId = (int) ($row['raw']->id ?? 0);
                                                $detailHref = $logId > 0
                                                    ? route('admin.investors.activity-show', [$investor, $kind, $logId])
                                                    : null;
                                            @endphp
                                            <li class="il-row"
                                                data-kind="{{ $kind }}"
                                                @if ($isFailed) data-failed="1" @endif>
                                                {{-- The whole row is an <a>: clicking anywhere
                                                     opens the dedicated detail page. We dropped
                                                     the inline <details>/<summary> pattern so
                                                     admins read the FULL log on a focused page
                                                     instead of squinting at a meta grid. --}}
                                                <a href="{{ $detailHref ?: '#' }}" class="il-row__link">
                                                    <span class="il-row__node" style="background: {{ $kindPalette['bg'] }}; color: {{ $kindPalette['fg'] }};">
                                                        <svg><use href="{{ $iconRef }}"/></svg>
                                                    </span>
                                                    <span class="il-row__main">
                                                        <span class="il-row__title">{{ $row['title'] }}</span>
                                                        <span class="il-row__sub">
                                                            @if (filled($row['subtitle']))
                                                                <span class="il-row__module">{{ $row['subtitle'] }}</span>
                                                                <span class="il-row__sep">·</span>
                                                            @endif
                                                            <span class="il-row__actor">{{ $actorText !== '' ? $actorText : __('admin.investors_admin.activity.actor_system') }}</span>
                                                            @if ($row['happened_at'])
                                                                <span class="il-row__sep">·</span>
                                                                <span class="il-row__when" title="{{ $row['happened_at']->format('Y-m-d H:i:s') }}">
                                                                    {{ $row['happened_at']->diffForHumans() }}
                                                                </span>
                                                            @endif
                                                        </span>
                                                    </span>
                                                    @if (filled($row['badge']))
                                                        <span class="il-row__badge"
                                                              style="color: {{ $tonePalette['fg'] }}; background: {{ $tonePalette['bg'] }}; border-color: {{ $tonePalette['border'] }};">
                                                            <span class="il-row__badge-dot" style="background: {{ $tonePalette['dot'] }};"></span>
                                                            {{ $row['badge'] }}
                                                        </span>
                                                    @endif
                                                    <svg class="il-row__caret" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                        <polyline points="9 6 15 12 9 18"/>
                                                    </svg>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ol>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div></div>
        </section>

        @push('styles')
        <style>
            /* ════════════════════════════════════════════════════════════
               ACTIVITY LOG — visual design system
               (added 2026-06-14; redesigned for richer UX)

               Layout pattern: a vertical "rail" runs down each date
               bucket, and every event renders as a card whose left
               (or right, in RTL) edge sits on top of a colored node
               icon. The node icon's box-shadow uses a faux ring to
               cover the rail behind it. Hidden radio inputs + :has()
               run the filter — no JS state.
               ════════════════════════════════════════════════════════ */

            /* ── Filter tabs ──────────────────────────────────────────── */
            .il-filter > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

            .il-filter__tabs {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                padding: 5px;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                margin-bottom: 18px;
            }
            .il-filter__tab {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 8px 14px;
                font-size: 13px;
                font-weight: 600;
                color: #64748b;
                background: transparent;
                border-radius: 8px;
                cursor: pointer;
                transition: background-color .15s, color .15s, box-shadow .15s, transform .08s;
                user-select: none;
                white-space: nowrap;
            }
            .il-filter__tab:hover {
                color: #0f172a;
                background: #ffffff;
            }
            .il-filter__tab:active { transform: translateY(1px); }
            .il-filter__dot {
                display: inline-block;
                width: 8px; height: 8px;
                border-radius: 999px;
                flex-shrink: 0;
                box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
            }
            .il-filter__chip {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 22px;
                padding: 0 7px;
                height: 19px;
                font-size: 11px;
                font-weight: 700;
                color: #64748b;
                background: #ffffff;
                border-radius: 999px;
                border: 1px solid #e2e8f0;
                font-variant-numeric: tabular-nums;
            }

            /* Active tab — driven by the matching hidden radio. */
            .il-filter:has(#il-flt-all-{{ $investor->id }}:checked) .il-filter__tab[data-tab="all"],
            .il-filter:has(#il-flt-act-{{ $investor->id }}:checked) .il-filter__tab[data-tab="activity"],
            .il-filter:has(#il-flt-not-{{ $investor->id }}:checked) .il-filter__tab[data-tab="notification"],
            .il-filter:has(#il-flt-aud-{{ $investor->id }}:checked) .il-filter__tab[data-tab="audit"],
            .il-filter:has(#il-flt-err-{{ $investor->id }}:checked) .il-filter__tab[data-tab="failed"] {
                background: #ffffff;
                color: var(--primary-700, #5b21b6);
                box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px var(--primary-200, #c4b5fd);
            }
            .il-filter:has(#il-flt-err-{{ $investor->id }}:checked) .il-filter__tab[data-tab="failed"] {
                color: #b91c1c;
                box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px #fca5a5;
            }
            .il-filter .il-filter__tab[data-tab="all"]:has(:focus-visible),
            .il-filter:has(#il-flt-all-{{ $investor->id }}:focus-visible) .il-filter__tab[data-tab="all"],
            .il-filter:has(#il-flt-act-{{ $investor->id }}:focus-visible) .il-filter__tab[data-tab="activity"],
            .il-filter:has(#il-flt-not-{{ $investor->id }}:focus-visible) .il-filter__tab[data-tab="notification"],
            .il-filter:has(#il-flt-aud-{{ $investor->id }}:focus-visible) .il-filter__tab[data-tab="audit"],
            .il-filter:has(#il-flt-err-{{ $investor->id }}:focus-visible) .il-filter__tab[data-tab="failed"] {
                outline: 2px solid var(--primary-500, #8b5cf6);
                outline-offset: 1px;
            }

            /* Filter rules — hide non-matching items + their bucket
               headers when emptied. */
            .il-filter:has(#il-flt-act-{{ $investor->id }}:checked) .il-timeline__item:not([data-kind="activity"]) { display: none; }
            .il-filter:has(#il-flt-not-{{ $investor->id }}:checked) .il-timeline__item:not([data-kind="notification"]) { display: none; }
            .il-filter:has(#il-flt-aud-{{ $investor->id }}:checked) .il-timeline__item:not([data-kind="audit"]) { display: none; }
            .il-filter:has(#il-flt-err-{{ $investor->id }}:checked) .il-timeline__item:not([data-failed="1"]) { display: none; }
            .il-filter:has(#il-flt-act-{{ $investor->id }}:checked) .il-bucket:not(:has([data-kind="activity"])),
            .il-filter:has(#il-flt-not-{{ $investor->id }}:checked) .il-bucket:not(:has([data-kind="notification"])),
            .il-filter:has(#il-flt-aud-{{ $investor->id }}:checked) .il-bucket:not(:has([data-kind="audit"])),
            .il-filter:has(#il-flt-err-{{ $investor->id }}:checked) .il-bucket:not(:has([data-failed="1"])) {
                display: none;
            }

            /* ── Date bucket headers ──────────────────────────────────── */
            .il-timeline-wrap { display: flex; flex-direction: column; gap: 22px; }
            .il-bucket { position: relative; }
            .il-bucket__head {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 12px;
            }
            .il-bucket__dot {
                width: 9px; height: 9px;
                background: var(--primary-500, #8b5cf6);
                border-radius: 999px;
                flex-shrink: 0;
                box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
            }
            .il-bucket__label {
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .08em;
                color: #475569;
            }
            .il-bucket__count {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 20px;
                height: 19px;
                padding: 0 7px;
                background: #f1f5f9;
                color: #64748b;
                font-size: 10.5px;
                font-weight: 700;
                border-radius: 999px;
                font-variant-numeric: tabular-nums;
            }
            .il-bucket__rule {
                flex: 1;
                height: 1px;
                background: linear-gradient(to right, #e2e8f0 0%, transparent 100%);
            }
            :where([dir="rtl"]) .il-bucket__rule {
                background: linear-gradient(to left, #e2e8f0 0%, transparent 100%);
            }

            /* ── Filter targets retargeted to new row class ───────────── */
            .il-filter:has(#il-flt-act-{{ $investor->id }}:checked) .il-row:not([data-kind="activity"]) { display: none; }
            .il-filter:has(#il-flt-not-{{ $investor->id }}:checked) .il-row:not([data-kind="notification"]) { display: none; }
            .il-filter:has(#il-flt-aud-{{ $investor->id }}:checked) .il-row:not([data-kind="audit"]) { display: none; }
            .il-filter:has(#il-flt-err-{{ $investor->id }}:checked) .il-row:not([data-failed="1"]) { display: none; }

            /* ── Compact log list (rows are links, no inline expand) ─
               Each <li> is a single anchor to the dedicated detail
               page. Two-line layout: title on top, meta line (module
               · actor · time) underneath in muted text. The badge
               and caret sit on the far end. */
            .il-timeline {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 0;
                background: #ffffff;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                overflow: hidden;
            }
            .il-row { padding: 0; margin: 0; }
            .il-row + .il-row { border-top: 1px solid #f1f5f9; }
            .il-row[data-failed="1"] { background: #fef2f2; }
            .il-row[data-failed="1"] + .il-row[data-failed="1"] { border-top-color: #fecaca; }

            .il-row__link {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 12px 16px;
                color: inherit;
                text-decoration: none;
                transition: background-color .12s;
            }
            .il-row__link:hover { background: #f8fafc; }
            .il-row[data-failed="1"] .il-row__link:hover { background: #fee2e2; }
            .il-row__link:focus-visible {
                outline: 2px solid var(--primary-500, #8b5cf6);
                outline-offset: -2px;
            }

            /* ── Left node icon ─────────────────────────────────── */
            .il-row__node {
                flex-shrink: 0;
                width: 32px;
                height: 32px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 9px;
            }
            .il-row__node svg { width: 15px; height: 15px; }

            /* ── Two-line text block (title + meta) ─────────────── */
            .il-row__main {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 3px;
            }
            .il-row__title {
                font-size: 13.5px;
                font-weight: 600;
                color: #0f172a;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .il-row__sub {
                font-size: 12px;
                color: #64748b;
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                align-items: center;
                line-height: 1.4;
            }
            .il-row__module {
                color: #475569;
                font-weight: 600;
            }
            .il-row__actor { color: #475569; font-weight: 500; }
            .il-row__when { color: #94a3b8; font-variant-numeric: tabular-nums; }
            .il-row__sep { color: #cbd5e1; }

            /* ── Badge + caret on far end ───────────────────────── */
            .il-row__badge {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-size: 10.5px;
                font-weight: 700;
                letter-spacing: .04em;
                text-transform: uppercase;
                padding: 4px 10px;
                border-radius: 999px;
                border: 1px solid;
                white-space: nowrap;
            }
            .il-row__badge-dot {
                width: 6px;
                height: 6px;
                border-radius: 999px;
                flex-shrink: 0;
            }
            .il-row__caret {
                flex-shrink: 0;
                color: #cbd5e1;
                transition: transform .15s ease, color .15s ease;
            }
            :where([dir="rtl"]) .il-row__caret { transform: rotate(180deg); }
            .il-row__link:hover .il-row__caret { color: var(--primary-500, #8b5cf6); transform: translateX(2px); }
            :where([dir="rtl"]) .il-row__link:hover .il-row__caret { transform: rotate(180deg) translateX(2px); }

            @media (max-width: 640px) {
                .il-filter__tab { padding: 7px 11px; font-size: 12px; gap: 6px; }
                .il-row__link { padding: 10px 12px; gap: 10px; }
                .il-row__node { width: 28px; height: 28px; border-radius: 8px; }
                .il-row__node svg { width: 13px; height: 13px; }
                .il-row__title { font-size: 13px; }
                .il-row__sub { font-size: 11.5px; gap: 4px; }
                .il-row__badge { font-size: 9.5px; padding: 3px 8px; }
            }
        </style>
        @endpush

        {{-- Shared CSS + Alpine factory for the inline section-edit feature
             (the new <x-admin.editable-section> wrapper). Include ONCE. --}}
        @include('admin.partials.editable-section-assets')

        {{-- Rejection confirmation modal (shared with the index table). --}}
        @include('admin.partials.rejection-modal')

    </div>
@endsection

{{-- Toast element used by the copy-to-clipboard feedback. Lives outside
     the .rd-shell grid so its `position: fixed` doesn't get clipped. --}}
<div class="rd-toast" data-toast aria-live="polite" role="status">
    <svg><use href="#icon-check"/></svg>
    <span data-toast-text>{{ __('admin.actions.copied') ?: 'Copied' }}</span>
</div>

@push('scripts')
<script>
(function () {
    'use strict';

    /* ── Collapsible cards (sessionStorage-persisted) ───────────────── */
    const STORAGE_PREFIX = 'rd-collapse:';
    document.querySelectorAll('.rd-card[data-collapse-key]').forEach(function (card) {
        const key  = STORAGE_PREFIX + card.dataset.collapseKey;
        const head = card.querySelector(':scope > .rd-card__head');
        if (! head) return;
        try {
            const stored = sessionStorage.getItem(key);
            if (stored === 'true' || stored === 'false') card.dataset.open = stored;
        } catch (_) {}
        const sync = function () { head.setAttribute('aria-expanded', card.dataset.open === 'true' ? 'true' : 'false'); };
        const toggle = function () {
            card.dataset.open = card.dataset.open === 'true' ? 'false' : 'true';
            sync();
            try { sessionStorage.setItem(key, card.dataset.open); } catch (_) {}
        };
        head.setAttribute('role', 'button');
        head.setAttribute('tabindex', '0');
        sync();
        head.addEventListener('click', toggle);
        head.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); }
        });
    });

    /* ── Copy-to-clipboard ────────────────────────────────────────────
       Uses the async Clipboard API where available, falls back to an
       off-screen textarea + document.execCommand for the (rare) browser
       that blocks the modern API on http://. Shows a check icon for
       ~1.2s and a global toast for screen reader feedback. */
    const toast     = document.querySelector('[data-toast]');
    const toastText = toast?.querySelector('[data-toast-text]');
    const showToast = function (msg) {
        if (! toast) return;
        if (msg && toastText) toastText.textContent = msg;
        toast.dataset.show = 'true';
        clearTimeout(showToast._t);
        showToast._t = setTimeout(function () { toast.dataset.show = 'false'; }, 1400);
    };
    const writeClipboard = async function (text) {
        if (navigator.clipboard && window.isSecureContext) {
            try { await navigator.clipboard.writeText(text); return true; } catch (_) {}
        }
        try {
            const ta = document.createElement('textarea');
            ta.value = text;
            ta.setAttribute('readonly', '');
            ta.style.position = 'absolute'; ta.style.left = '-9999px';
            document.body.appendChild(ta);
            ta.select();
            const ok = document.execCommand('copy');
            document.body.removeChild(ta);
            return ok;
        } catch (_) { return false; }
    };
    document.querySelectorAll('[data-copy]').forEach(function (btn) {
        btn.addEventListener('click', async function (e) {
            e.preventDefault();
            const value = btn.getAttribute('data-copy') || '';
            if (! value) return;
            const ok = await writeClipboard(value);
            if (! ok) return;
            btn.dataset.state = 'done';
            const icon = btn.querySelector('use');
            const original = icon?.getAttribute('href');
            if (icon) icon.setAttribute('href', '#icon-check');
            showToast({{ Js::from(__('admin.actions.copied') ?: 'Copied to clipboard') }});
            setTimeout(function () {
                btn.removeAttribute('data-state');
                if (icon && original) icon.setAttribute('href', original);
            }, 1300);
        });
    });

    /* ── Section nav: scroll-to + active highlight via IntersectionObserver.
         Smooth scroll comes from the global `html { scroll-behavior: smooth }`
         declared in the stylesheet — we just toggle data-active here. */
    const navItems = document.querySelectorAll('[data-nav-target]');
    if (navItems.length && 'IntersectionObserver' in window) {
        const targets = {};
        navItems.forEach(function (item) {
            const id = item.dataset.navTarget;
            const el = document.getElementById(id);
            if (el) targets[id] = item;
        });
        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                const item = targets[e.target.id];
                if (! item) return;
                if (e.isIntersecting) {
                    navItems.forEach(function (n) { n.removeAttribute('data-active'); });
                    item.setAttribute('data-active', 'true');
                }
            });
        }, { rootMargin: '-40% 0px -55% 0px', threshold: 0 });
        Object.keys(targets).forEach(function (id) {
            const el = document.getElementById(id);
            if (el) observer.observe(el);
        });
    }

    /* ── Hero favorite-star toggle ──────────────────────────────────────
       POSTs to /admin/favorites/toggle on click and flips the
       `data-favorited` attribute so the CSS picks the right icon.
       Pessimistic: button is disabled while the request is in flight
       to prevent racing the unique constraint with double-clicks. */
    (function () {
        const btn = document.querySelector('[data-fav-btn]');
        if (!btn) return;
        const investorId = @json($investor->id);
        const csrf       = @json(csrf_token());

        btn.addEventListener('click', async function () {
            if (btn.dataset.busy === 'true') return;
            btn.dataset.busy = 'true';
            try {
                const res = await fetch('/admin/favorites/toggle', {
                    method: 'POST',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ type: 'investor', id: investorId }),
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok || body.ok === false) {
                    console.warn('Favorite toggle failed', body);
                    return;
                }
                btn.dataset.favorited = body.favorited ? 'true' : 'false';
                btn.setAttribute('aria-pressed', body.favorited ? 'true' : 'false');
                btn.setAttribute('title', body.favorited
                    ? @json(__('admin.favorites.remove'))
                    : @json(__('admin.favorites.add')));
            } catch (err) {
                console.error('Favorite toggle threw', err);
            } finally {
                btn.dataset.busy = 'false';
            }
        });
    })();

    /* ── Hero change-action picker ──────────────────────────────────────
       Wires the dropdown menu attached to the hero's "change action"
       button. PATCHes /admin/investors/{id}/label with the same shape
       the index page's action-pick menu uses, so the server-side
       endpoint + listeners (notifications, cancel-on-label) all fire
       through the existing path. */
    (function () {
        const picker = document.querySelector('[data-action-picker]');
        if (!picker) return;
        const investorId = @json($investor->id);
        const baseUrl    = @json(url('admin/investors'));
        const csrf       = @json(csrf_token());

        const toggleBtn = picker.querySelector('[data-action-toggle]');
        const menu      = picker.querySelector('[data-action-menu]');

        toggleBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            const open = menu.dataset.open === 'true';
            menu.dataset.open = open ? 'false' : 'true';
            toggleBtn.setAttribute('aria-expanded', String(!open));
        });
        document.addEventListener('click', function () {
            menu.dataset.open = 'false';
            toggleBtn.setAttribute('aria-expanded', 'false');
        });

        // Option-ids that trigger the Rejection modal instead of a
        // plain confirm. Config-driven so prod can tune without redeploy.
        const rejectionIds   = @json(array_values((array) config('notifications.rejection_option_ids', []))).map(Number);
        const currentActName = @json($currentAct ? ($currentAct->{$nameField} ?: $currentAct->name_en) : '');

        picker.querySelectorAll('[data-action-pick]').forEach(function (btn) {
            btn.addEventListener('click', async function (e) {
                e.stopPropagation();
                const optionId    = parseInt(btn.dataset.actionPick, 10) || null;
                const optionLabel = (btn.textContent || '').trim() || '—';
                const investorName = @json($displayName);

                menu.dataset.open = 'false';
                toggleBtn.setAttribute('aria-expanded', 'false');

                // Rejection path: open the dedicated modal that captures
                // an OPTIONAL reason, then fire the same PATCH. Other
                // changes keep the lightweight confirm() flow.
                if (optionId && rejectionIds.includes(optionId)) {
                    window.openRejectionModal({
                        subjectName:   investorName,
                        currentAction: currentActName || null,
                        statusName:    optionLabel,
                        onSubmit: (reason) => doUpdate(optionId, optionLabel, reason),
                    });
                    return;
                }

                const confirmMsg = optionId
                    ? `تأكيد تغيير حالة "${investorName}" إلى "${optionLabel}"؟`
                    : `تأكيد إزالة الحالة من "${investorName}"؟`;
                if (! window.confirm(confirmMsg)) return;
                doUpdate(optionId, optionLabel, null);
            });
        });

        async function doUpdate(optionId, optionLabel, rejectionReason) {
            const investorName = @json($displayName);
            try {
                const body = { field: 'action_option_id', value: optionId || null };
                if (rejectionReason !== null) body.rejection_reason = rejectionReason;
                const res = await fetch(`${baseUrl}/${investorId}/label`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(body),
                });
                const payload = await res.json().catch(function () { return {}; });
                if (!res.ok || payload.ok === false) {
                    window.alert(`تعذّر تحديث الحالة: ${payload.message || payload.error || res.statusText || 'حدث خطأ'}`);
                    return;
                }
                if (rejectionReason !== null && typeof window.showRejectionSuccessToast === 'function') {
                    window.showRejectionSuccessToast();
                } else {
                    window.alert(optionId
                        ? `تم تحديث "${investorName}" إلى "${optionLabel}" بنجاح.`
                        : `تمت إزالة الحالة من "${investorName}" بنجاح.`);
                }
                // Reload so the hero pill + rejection badge refresh atomically.
                setTimeout(function () { window.location.reload(); }, 350);
            } catch (err) {
                window.alert(`تعذّر الاتصال بالخادم: ${err.message || err}`);
            }
        }
    })();
})();

/* ── Tags editor (inline on the investor show page) ────────────────────
   Registered globally so the `x-data` Alpine binding on the Tags section
   can call it. The Blade template injects the initial state via the
   Laravel Js helper. State shape from PHP:
     { selectedIds: int[], available: [{id,name,color}],
       attached:    [{id,name,color}], endpoint: string }
   - `attached` drives the chip strip (live state).
   - `selectedIds` is the in-flight working set while the editor is open;
     reverted to the pre-edit copy on cancel.
   - Save PATCHes `tag_ids` (the full desired set) and refreshes the
     chip strip from the canonical server response.
   NOTE: do NOT write literal Blade-directive tokens (a leading "at" sign
   followed by a directive name like js / json / php) inside JS comments
   here — Blade's compiler scans the whole file, including <script>
   blocks, and would treat them as real directives. */
window.investorTagsEditor = function (cfg) {
    return {
        attached:      Array.isArray(cfg.attached)    ? cfg.attached    : [],
        available:     Array.isArray(cfg.available)   ? cfg.available   : [],
        selectedIds:   Array.isArray(cfg.selectedIds) ? cfg.selectedIds.map((v) => parseInt(v, 10)) : [],
        editing:       false,
        saving:        false,
        errorMessage:  '',
        _backup:       [],

        // ── Inline "create new tag" state ─────────────────────────
        creating:      false,
        creatingBusy:  false,
        newName:       '',

        // ── Inline "rename existing tag" state ────────────────────
        editingTagId:  null,
        editingName:   '',
        editingBusy:   false,

        openEditor() {
            // Snapshot the working set so Cancel can restore it without
            // a network round-trip.
            this._backup     = this.selectedIds.slice();
            this.errorMessage = '';
            this.editing      = true;
        },
        cancel() {
            this.selectedIds = this._backup.slice();
            this.editing     = false;
            this.errorMessage = '';
        },
        isSelected(id) {
            return this.selectedIds.includes(parseInt(id, 10));
        },
        toggle(id) {
            const n = parseInt(id, 10);
            const i = this.selectedIds.indexOf(n);
            if (i >= 0) this.selectedIds.splice(i, 1);
            else this.selectedIds.push(n);
        },

        openCreate() {
            this.creating = true;
            this.newName  = '';
            this.errorMessage = '';
            // Autofocus the input on next tick so x-show has rendered it.
            this.$nextTick(() => {
                if (this.$refs.newTagInput) this.$refs.newTagInput.focus();
            });
        },
        cancelCreate() {
            this.creating = false;
            this.newName  = '';
        },
        startTagEdit(tag) {
            this.editingTagId = parseInt(tag.id, 10);
            this.editingName  = String(tag.name || '');
            this.errorMessage = '';
            // Cancel a pending "+ new tag" so only one inline editor is
            // open at a time.
            this.creating = false;
            this.$nextTick(() => {
                const ref = this.$refs[`renameInput${tag.id}`];
                if (ref && typeof ref.focus === 'function') {
                    ref.focus();
                    if (typeof ref.select === 'function') ref.select();
                }
            });
        },
        cancelTagEdit() {
            this.editingTagId = null;
            this.editingName  = '';
        },
        async saveTagEdit(id) {
            const tagId = parseInt(id, 10);
            const name  = (this.editingName || '').trim();
            if (! name || this.editingBusy) return;

            const before = (this.available.find((t) => parseInt(t.id, 10) === tagId) || {}).name;
            if (before === name) { this.cancelTagEdit(); return; }

            this.editingBusy = true;
            this.errorMessage = '';
            try {
                const csrfTag = document.querySelector('meta[name="csrf-token"]');
                const csrf    = csrfTag ? csrfTag.getAttribute('content') : '';
                const url     = cfg.updateEndpoint.replace('__ID__', tagId.toString());
                const res = await fetch(url, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ name: name }),
                });
                const payload = await res.json().catch(() => ({}));
                if (! res.ok || payload.ok === false || ! payload.tag) {
                    this.errorMessage = payload.message
                        || (payload.errors && Object.values(payload.errors).flat()[0])
                        || @json(__('admin.investors_admin.tags_editor.rename_failed'));
                    this.editingBusy = false;
                    return;
                }
                // Patch the local catalog + attached chip strip so the
                // rename is visible immediately without a reload.
                const updated = {
                    id:    parseInt(payload.tag.id, 10),
                    name:  String(payload.tag.name || ''),
                    color: String(payload.tag.color || '#6366f1'),
                };
                const iAv = this.available.findIndex((t) => parseInt(t.id, 10) === updated.id);
                if (iAv >= 0) this.available[iAv] = updated;
                const iAt = this.attached.findIndex((t) => parseInt(t.id, 10) === updated.id);
                if (iAt >= 0) this.attached[iAt] = updated;
                this.cancelTagEdit();
            } catch (err) {
                this.errorMessage = (err && err.message)
                    ? err.message
                    : @json(__('admin.investors_admin.tags_editor.rename_failed'));
            } finally {
                this.editingBusy = false;
            }
        },

        async createAndAttach() {
            const name = (this.newName || '').trim();
            if (! name || this.creatingBusy) return;

            // Don't hit the network when the same name is already in the
            // catalog — just attach the existing one and short-circuit.
            const existing = this.available.find((t) => t.name.toLowerCase() === name.toLowerCase());
            if (existing) {
                if (! this.isSelected(existing.id)) this.selectedIds.push(parseInt(existing.id, 10));
                this.cancelCreate();
                return;
            }

            this.creatingBusy = true;
            this.errorMessage = '';
            try {
                const csrfTag = document.querySelector('meta[name="csrf-token"]');
                const csrf    = csrfTag ? csrfTag.getAttribute('content') : '';
                const res = await fetch(cfg.createEndpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ name: name }),
                });
                const payload = await res.json().catch(() => ({}));
                if (! res.ok || payload.ok === false || ! payload.tag) {
                    this.errorMessage = payload.message
                        || (payload.errors && Object.values(payload.errors).flat()[0])
                        || @json(__('admin.investors_admin.tags_editor.create_failed'));
                    this.creatingBusy = false;
                    return;
                }
                const tag = {
                    id:    parseInt(payload.tag.id, 10),
                    name:  String(payload.tag.name || ''),
                    color: String(payload.tag.color || '#6366f1'),
                };
                // Append to the catalog and auto-tick it — the admin
                // wanted this tag on the investor (that's why they
                // typed it here). Persistence still requires Save.
                this.available.push(tag);
                if (! this.isSelected(tag.id)) this.selectedIds.push(tag.id);
                this.cancelCreate();
            } catch (err) {
                this.errorMessage = (err && err.message)
                    ? err.message
                    : @json(__('admin.investors_admin.tags_editor.create_failed'));
            } finally {
                this.creatingBusy = false;
            }
        },
        async save() {
            if (this.saving) return;
            this.saving      = true;
            this.errorMessage = '';
            try {
                const csrfTag = document.querySelector('meta[name="csrf-token"]');
                const csrf    = csrfTag ? csrfTag.getAttribute('content') : '';
                const res = await fetch(cfg.endpoint, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json',
                        'X-CSRF-TOKEN':     csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ tag_ids: this.selectedIds }),
                });
                const payload = await res.json().catch(() => ({}));
                if (! res.ok || payload.ok === false) {
                    this.errorMessage = payload.message
                        || (payload.errors && Object.values(payload.errors).flat()[0])
                        || @json(__('admin.investors_admin.tags_editor.save_failed'));
                    this.saving = false;
                    return;
                }
                // Refresh the chip strip from the server's canonical
                // post-save list — keeps order + colour in sync even
                // when an admin adds and removes in the same session.
                const tags = Array.isArray(payload.tags) ? payload.tags : [];
                this.attached    = tags.map((t) => ({
                    id:    parseInt(t.id, 10),
                    name:  String(t.name || ''),
                    color: String(t.color || '#6366f1'),
                }));
                this.selectedIds = this.attached.map((t) => t.id);
                this.editing     = false;
                this.saving      = false;
            } catch (err) {
                this.errorMessage = (err && err.message)
                    ? err.message
                    : @json(__('admin.investors_admin.tags_editor.save_failed'));
                this.saving = false;
            }
        },
    };
};
</script>
@endpush