{{-- Admin Demo show page. MIRROR OF: admin.committees.show — same
     rd-shell + rd-card scaffolding, same overview tiles, same sticky
     section nav, same investor/startup roster pattern.

     Demo-specific:
       - Hero card uses the bilingual title + type/mode pills
       - Optional cover image rendered as a hero strip on top
       - Evaluations matrix (Alpine) reused from the earlier baseline
       - No Pass/Fail panel chevron yet — matrix lives inside its own
         rd-card with the same chrome as committee evaluations --}}
@extends('admin.layouts.app')

@section('title', $demo->localizedTitle() . ' — ' . __('admin.brand.name'))
@section('page_title', $demo->localizedTitle())

@php
    use Illuminate\Support\Carbon;

    $isActive   = $demo->status === \App\Models\Demo::STATUS_ACTIVE;
    $locale     = app()->getLocale();
    $meetingDt  = $demo->meeting_date;
    $monthShort = $meetingDt instanceof Carbon ? $meetingDt->locale($locale)->translatedFormat('M') : '—';
    $dayNumber  = $meetingDt instanceof Carbon ? $meetingDt->format('j') : '—';
    $dayLabel   = $meetingDt instanceof Carbon ? $meetingDt->locale($locale)->translatedFormat('l') : '—';

    $typeLabel = $demo->type?->{$locale === 'ar' ? 'name_ar' : 'name_en'};
    $modeLabel = $demo->mode?->{$locale === 'ar' ? 'name_ar' : 'name_en'};

    // ── Shared attendance/registration presentation helpers ───────────────
    // Defined ONCE at page scope so the Attendance investors table and the
    // Webinar summary render pills identically (single source of truth).
    $pill    = fn ($v, $tone) => '<span class="cmt-pill cmt-pill--'.$tone.'">'.e(ucfirst((string) $v)).'</span>';
    $regTone = fn ($s) => ['registered'=>'ok','failed'=>'danger','awaiting'=>'warn','registering'=>'warn','pending'=>'muted'][$s] ?? 'muted';
    $attTone = fn ($s) => ['attended'=>'ok','absent'=>'danger','registered'=>'warn','pending'=>'muted'][$s] ?? 'muted';

    // Attendance timestamps are stored in UTC (Microsoft Graph returns UTC and the
    // app timezone is UTC). Display them in the webinar's BUSINESS timezone so they
    // match the meeting time the admin sees — never a hard-coded offset.
    $attTz   = config('demo_webinars.timezone', 'Asia/Riyadh');
    $fmtTime = fn ($dt) => $dt ? Carbon::parse($dt)->timezone($attTz)->format('H:i') : '—';

    $isRegistered = fn ($att) => $att && $att->registration_status === \App\Models\DemoAttendance::REG_STATUS_REGISTERED;
@endphp

@push('styles')
<style>
    /* Shell + card tokens copied from admin.committees.show so the two
       detail surfaces share the exact same visual language. Anchored to
       the same `--rd-*` design tokens — if committee tokens shift, drop
       a comment and update here in parallel. */
    .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:        #b91c1c;
        --rd-danger-soft:   #fef2f2;
        --rd-danger-line:   #fecaca;
        --rd-shadow-sm:     0 1px 2px rgba(15,23,42,.04);
        --rd-radius:        14px;
        display: grid; gap: 18px;
        color: var(--rd-text);
    }

    /* Sticky section nav — identical to committee. */
    .rd-section-nav {
        position: sticky; top: 12px; z-index: 5;
        display: flex; gap: 4px; padding: 6px;
        background: rgba(255,255,255,.92);
        backdrop-filter: saturate(160%) blur(8px);
        border: 1px solid var(--rd-border);
        border-radius: 12px;
        box-shadow: var(--rd-shadow-sm);
        overflow-x: auto;
    }
    .rd-section-nav__item {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12.5px; font-weight: 600;
        color: var(--rd-muted);
        text-decoration: none; white-space: nowrap;
        transition: background .12s, color .12s;
    }
    .rd-section-nav__item svg { width: 14px; height: 14px; }
    .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);
    }
    html { scroll-behavior: smooth; scroll-padding-top: 100px; }

    /* Accordion card. */
    .rd-card {
        background: #fff; border: 1px solid var(--rd-border);
        border-radius: var(--rd-radius); box-shadow: var(--rd-shadow-sm);
        overflow: hidden;
    }
    .rd-card__head {
        display: flex; align-items: center; gap: 12px;
        width: 100%; padding: 16px 22px;
        cursor: pointer; user-select: none;
        background: #fff; border: 0; text-align: start; font: inherit; color: inherit;
        transition: background-color .12s;
    }
    .rd-card__head:hover { background: #fafbfc; }
    .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__sub { font-size: 12.5px; color: var(--rd-muted); font-weight: 500; margin-inline-start: 6px; }
    .rd-card__meta { display: inline-flex; gap: 10px; margin-inline-start: auto;
        font-size: 12px; color: var(--rd-muted); font-weight: 600; align-items: center; }
    .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; }
    .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-wrap > .rd-card__body { min-height: 0; overflow: hidden; transition: padding .28s; }
    .rd-card[data-open="false"] > .rd-card__body-wrap > .rd-card__body { padding-block: 0; }
    .rd-card__body { padding: 20px 22px 22px; }
    .rd-card--locked .rd-card__head { cursor: default; background: #fff; }
    .rd-card--locked .rd-card__head:hover { background: #fff; }
    .rd-card--locked .rd-card__chevron { display: none; }

    /* Cover hero — sits at the very top of the page when present. */
    .demo-cover-hero {
        width: 100%; aspect-ratio: 1200 / 360;
        max-height: 360px;
        overflow: hidden; border-radius: var(--rd-radius);
        background: #f1f5f9;
        border: 1px solid var(--rd-border);
    }
    .demo-cover-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Pills for type / mode in the overview header. */
    .demo-pill-row {
        display: inline-flex; flex-wrap: wrap; gap: 6px;
        margin-top: 2px;
    }
    .demo-pill {
        display: inline-block; padding: 2px 10px;
        background: #f8fafc; color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 999px; font-size: 12px; font-weight: 700;
    }

    /* Overview tiles. */
    .cmt-stats {
        display: grid;
        grid-template-columns: 2fr 2fr repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    @media (max-width: 1280px) {
        .cmt-stats { grid-template-columns: 1fr 1fr 1fr 1fr; }
        .cmt-stat-calendar, .cmt-link-tile { grid-column: span 2; }
    }
    @media (max-width: 720px) {
        .cmt-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
        .cmt-stat-calendar, .cmt-link-tile { grid-column: 1 / -1; }
    }
    .cmt-stat {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        border: 1px solid var(--rd-border); border-radius: 12px;
        background: #fff; min-width: 0;
    }
    .cmt-stat__icon {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        background: var(--rd-accent-soft); color: var(--rd-accent-strong);
        border-radius: 10px;
    }
    .cmt-stat__icon svg { width: 17px; height: 17px; }
    .cmt-stat--ok    .cmt-stat__icon { background: var(--rd-ok-soft); color: var(--rd-ok); }
    .cmt-stat--warn  .cmt-stat__icon { background: var(--rd-warn-soft); color: var(--rd-warn); }
    .cmt-stat--purple .cmt-stat__icon { background: #faf5ff; color: #7e22ce; }
    .cmt-stat__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cmt-stat__label { font-size: 10.5px; font-weight: 700; color: var(--rd-faint);
        text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; }
    .cmt-stat__value { font-size: 15px; font-weight: 800; color: var(--rd-text);
        letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; }

    /* Calendar tile. */
    .cmt-calendar-tile {
        display: flex; align-items: stretch; gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid var(--rd-border); border-radius: 12px;
    }
    .cmt-calendar-block {
        flex-shrink: 0; width: 54px;
        display: flex; flex-direction: column;
        border: 1px solid var(--rd-accent-line); border-radius: 10px;
        overflow: hidden; text-align: center;
    }
    .cmt-calendar-block__month {
        font-size: 10px; font-weight: 800; letter-spacing: .08em;
        text-transform: uppercase; background: var(--rd-accent);
        color: #fff; padding: 3px 0;
    }
    .cmt-calendar-block__day {
        flex: 1; font-size: 20px; font-weight: 800; color: var(--rd-text);
        padding: 4px 0 6px; background: #fff;
        font-variant-numeric: tabular-nums;
    }
    .cmt-calendar-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
    .cmt-calendar-info__label { font-size: 10.5px; font-weight: 700; color: var(--rd-faint);
        text-transform: uppercase; letter-spacing: .04em; }
    .cmt-calendar-info__day { font-size: 15px; font-weight: 800; color: var(--rd-text); line-height: 1.25; }
    .cmt-calendar-info__date { font-size: 12px; color: var(--rd-muted); font-variant-numeric: tabular-nums; }
    .cmt-calendar-info__time {
        display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
        font-size: 12.5px; font-weight: 700;
        color: var(--rd-accent-strong); font-variant-numeric: tabular-nums;
    }

    /* Meeting link tile. */
    .cmt-link-tile {
        padding: 0; background: #fff;
        border: 1px solid var(--rd-border); border-radius: 12px;
        display: flex; align-items: stretch; overflow: hidden;
    }
    .cmt-link-tile__open {
        flex: 1; min-width: 0;
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        text-decoration: none; color: inherit;
        transition: background-color .12s;
    }
    .cmt-link-tile__open:hover { background: var(--rd-accent-soft); }
    .cmt-link-tile__open .cmt-stat__icon { background: #fef9c3; color: #a16207; }
    .cmt-link-tile__open .cmt-stat__value {
        display: inline-flex; align-items: center;
        font-size: 14px; font-weight: 800; color: var(--rd-text);
    }
    .cmt-link-tile__open--disabled { opacity: .65; cursor: not-allowed; pointer-events: none; }
    .cmt-link-tile__open--disabled .cmt-stat__icon { background: #f1f5f9; color: #94a3b8; }

    .cmt-pill {
        display: inline-flex; align-items: center;
        padding: 3px 10px; border-radius: 999px;
        font-size: 11.5px; font-weight: 700; white-space: nowrap;
    }
    .cmt-pill--ok     { background: var(--rd-ok-soft); color: var(--rd-ok); border: 1px solid var(--rd-ok-line); }
    .cmt-pill--muted  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .cmt-pill--warn   { background: var(--rd-warn-soft); color: var(--rd-warn); border: 1px solid #fde68a; }
    .cmt-pill--danger { background: var(--rd-danger-soft); color: var(--rd-danger); border: 1px solid var(--rd-danger-line); }

    /* Webinar tab — native chrome using the --rd-* tokens (theme-consistent). */
    .wb-info      { display: grid; gap: 1px; margin-bottom: 16px; border: 1px solid var(--rd-border); border-radius: var(--rd-radius); overflow: hidden; }
    .wb-info__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; background: var(--rd-surface); }
    .wb-info__row + .wb-info__row { border-top: 1px solid var(--rd-divider); }
    .wb-info__k   { color: var(--rd-muted); font-weight: 600; font-size: 13px; }
    .wb-info__v   { color: var(--rd-text); font-weight: 700; font-size: 13px; text-align: end; word-break: break-all; }
    .wb-stats     { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
    .wb-actions   { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
    .wb-actions form { margin: 0; }
    .wb-sync-note { font-size: 12.5px; color: var(--rd-muted); margin-bottom: 14px; }

    /* Copy button (registration + join links). Compact, icon-first; the label
       flips to "Copied!" briefly after a successful copy. */
    .wb-copy {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px; border: 1px solid var(--rd-border); border-radius: 8px;
        background: #fff; color: var(--rd-accent-strong);
        font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
        transition: background-color .12s, border-color .12s, color .12s;
        white-space: nowrap;
    }
    .wb-copy:hover  { background: var(--rd-accent-soft); border-color: var(--rd-accent-line); }
    .wb-copy svg    { width: 14px; height: 14px; flex-shrink: 0; }
    .wb-copy.is-copied { background: var(--rd-ok-soft); border-color: var(--rd-ok-line); color: var(--rd-ok); }

    /* ── Single investors attendance table ──────────────────────────────────
       Horizontally scrollable (many columns), sticky first column so the
       investor stays visible while scrolling the metrics on mobile. */
    .att-tbl-wrap {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        border: 1px solid var(--rd-border); border-radius: var(--rd-radius);
        background: #fff;
    }
    .att-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
    .att-tbl thead th {
        position: sticky; top: 0; z-index: 2;
        padding: 10px 14px; text-align: start;
        color: var(--rd-muted); font-weight: 700; font-size: 11px;
        text-transform: uppercase; letter-spacing: .03em;
        background: var(--rd-bg); white-space: nowrap;
        border-bottom: 1px solid var(--rd-border);
    }
    .att-tbl tbody td {
        padding: 10px 14px; border-top: 1px solid var(--rd-divider);
        color: var(--rd-text); white-space: nowrap; vertical-align: middle;
    }
    .att-tbl tbody tr:hover td { background: #fafbff; }
    .att-num { font-variant-numeric: tabular-nums; color: var(--rd-muted); font-weight: 600; }
    .att-dash { color: var(--rd-faint); font-size: 12px; }

    /* Sticky investor column — solid background so scrolled cells slide UNDER it. */
    .att-tbl__sticky { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; }
    .att-tbl thead .att-tbl__sticky { z-index: 3; background: var(--rd-bg); }
    .att-tbl tbody tr:hover .att-tbl__sticky { background: #fafbff; }
    .att-tbl__sticky::after {
        content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
        width: 1px; background: var(--rd-border);
    }

    .att-investor { display: inline-flex; align-items: center; gap: 10px; min-width: 180px; max-width: 300px; }
    .att-investor__avatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }
    .att-investor__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    /* Cap both name and email so a very long value ellipsises instead of
       stretching the sticky column and breaking the layout. */
    .att-investor__id .cmt-row__name {
        font-size: 13.5px; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 230px; display: block;
    }
    .att-investor__email { font-size: 11.5px; color: var(--rd-muted); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
    .att-tbl .cmt-row__status-select { padding: 5px 8px; font-size: 12.5px; }
    .att-tbl .cmt-row__self-pill { white-space: nowrap; }

    /* Registration cell: status pill with an optional retry action stacked below. */
    .att-cell-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .att-retry-btn {
        padding: 4px 10px; border: 1px solid var(--rd-border); border-radius: 7px;
        background: #fff; color: var(--rd-accent-strong);
        font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
        transition: background-color .12s, border-color .12s;
    }
    .att-retry-btn:hover { background: var(--rd-accent-soft); border-color: var(--rd-accent-line); }

    /* Copy "Copied!" toast — one shared element, bottom-center, fades in/out. */
    .att-toast {
        position: fixed; inset-inline-start: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 18px; border-radius: 999px;
        background: #0f172a; color: #fff; font-size: 13px; font-weight: 700;
        box-shadow: 0 8px 24px rgba(15,23,42,.28);
        opacity: 0; pointer-events: none; z-index: 60;
        transition: opacity .2s ease, transform .2s ease;
    }
    .att-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
    .att-toast svg { width: 15px; height: 15px; }

    /* Roster rows. */
    .cmt-list { display: flex; flex-direction: column; gap: 10px; }
    .cmt-row {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 16px;
        background: #fff; border: 1px solid var(--rd-border);
        border-radius: 12px;
    }
    .cmt-avatar {
        flex-shrink: 0; width: 42px; height: 42px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--rd-accent) 0%, #6366f1 100%);
        color: #fff; font-weight: 700; font-size: 14px;
        border-radius: 50%; overflow: hidden;
        border: 1px solid var(--rd-divider);
    }
    .cmt-avatar--square { border-radius: 10px; }
    .cmt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cmt-row__main { flex: 1; min-width: 0; }
    .cmt-row__name { font-size: 14.5px; font-weight: 700; color: var(--rd-text); text-decoration: none; }
    .cmt-row__name:hover { color: var(--rd-accent-strong); }
    .cmt-row__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 5px;
        font-size: 12.5px; color: var(--rd-muted); }
    .cmt-row__meta-sep { color: var(--rd-faint); }
    .cmt-row__status-select {
        padding: 6px 10px; border: 1px solid var(--rd-border); border-radius: 8px;
        background: #fff; font-size: 13px; color: var(--rd-text);
    }
    .cmt-row__self-pill {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 8px; border-radius: 999px;
        font-size: 11.5px; font-weight: 700;
        border: 1px solid transparent;
    }
    .cmt-row__self-pill--pending   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
    .cmt-row__self-pill--confirmed { background: var(--rd-ok-soft); color: var(--rd-ok); border-color: var(--rd-ok-line); }
    .cmt-row__self-pill--cancelled { background: var(--rd-danger-soft); color: var(--rd-danger); border-color: var(--rd-danger-line); }

    /* Evaluations matrix. */
    .demo-eval-matrix { width: 100%; border-collapse: separate; border-spacing: 0; }
    .demo-eval-matrix th, .demo-eval-matrix td {
        padding: 10px 12px; border-bottom: 1px solid var(--rd-divider);
        font-size: 13px; text-align: start;
    }
    .demo-eval-matrix thead th { color: var(--rd-muted); font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px;
        background: #fafbfc; border-bottom: 1px solid var(--rd-border); }
    .demo-eval-matrix tbody td:first-child { font-weight: 700; color: var(--rd-text); }
    .demo-eval-matrix select {
        padding: 4px 8px; border: 1px solid var(--rd-border);
        border-radius: 6px; font-size: 13px; background: #fff;
    }
    .demo-eval-pill {
        display: inline-block; padding: 1px 7px; border-radius: 999px;
        font-size: 11px; font-weight: 700; margin-inline-end: 4px;
    }
    .demo-eval-pill--pass { background: var(--rd-ok-soft); color: var(--rd-ok); }
    .demo-eval-pill--fail { background: var(--rd-danger-soft); color: var(--rd-danger); }

    /* Notes group. */
    .demo-notes-group {
        padding: 14px 16px; border: 1px solid var(--rd-border);
        border-radius: 12px; background: #fff; margin-bottom: 10px;
    }
    .demo-notes-group h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--rd-text); }
    .demo-note-item {
        padding: 10px 0; border-top: 1px solid var(--rd-divider);
    }
    .demo-note-item:first-of-type { border-top: 0; }
    .demo-note-item strong { font-size: 13px; color: var(--rd-text); }
    .demo-note-item small  { margin-inline-start: 8px; color: var(--rd-faint); font-size: 11.5px; }
    .demo-note-item p      { margin: 4px 0 0; font-size: 13.5px; color: #334155; line-height: 1.55; }

    /* Notes textarea (admin observations). */
    .demo-notes-textarea {
        width: 100%; min-height: 110px;
        padding: 10px 12px;
        border: 1px solid var(--rd-border); border-radius: 10px;
        font: inherit; font-size: 14px; color: var(--rd-text);
        background: #fff; resize: vertical;
    }
    .demo-notes-textarea:focus { outline: 2px solid var(--rd-accent-line); outline-offset: 1px; }
</style>
@endpush

@section('content')
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;" aria-hidden="true">
    <symbol id="icon-demo-info" 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"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></symbol>
    <symbol id="icon-demo-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
    <symbol id="icon-demo-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 16l-3 5 5-3M14.5 5.5l4 4M13 7l4 4M9 11l4 4"/><path d="M14.5 13a4.5 4.5 0 1 0-7.5-3 4.5 4.5 0 0 0 7.5 3z"/><path d="M19 2c.5 2 2 3.5 4 4"/></symbol>
    <symbol id="icon-demo-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></symbol>
    <symbol id="icon-demo-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-demo-clock" 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"/><polyline points="12 6 12 12 16 14"/></symbol>
    <symbol id="icon-demo-video" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></symbol>
    <symbol id="icon-demo-note" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></symbol>
</svg>

<div class="rd-shell">

    @include('admin.partials.flash')

    {{-- ── Cover hero (only when uploaded) ─────────────────────────── --}}
    @if ($demo->cover_image_url)
        <div class="demo-cover-hero">
            <img src="{{ $demo->cover_image_url }}" alt="{{ $demo->localizedTitle() }}">
        </div>
    @endif

    {{-- ═════════ 1. Overview (locked, always open) ═════════ --}}
    <section class="rd-card rd-card--locked" id="sec-overview">
        <div class="rd-card__head">
            <h3 class="rd-card__title">
                <span class="rd-card__icon"><svg><use href="#icon-demo-info"/></svg></span>
                {{ $demo->localizedTitle() }}
                @if ($typeLabel || $modeLabel)
                    <span class="demo-pill-row">
                        @if ($typeLabel)<span class="demo-pill">{{ $typeLabel }}</span>@endif
                        @if ($modeLabel)<span class="demo-pill">{{ $modeLabel }}</span>@endif
                    </span>
                @endif
            </h3>
            <div class="rd-card__meta">
                <a href="{{ route('admin.demos.index') }}" class="btn-secondary">
                    {{ __('admin.demos.back_to_list') }}
                </a>
                <a href="{{ route('admin.demos.edit', $demo) }}" class="btn-secondary">
                    {{ __('admin.actions.edit') }}
                </a>
                <x-admin.retry-notifications
                    :preview-url="route('admin.demos.retry-notifications.preview', $demo)"
                    :execute-url="route('admin.demos.retry-notifications', $demo)"
                    entity-type="demo"
                    :entity-id="$demo->id"
                    :entity-title="$demo->localizedTitle()" />
            </div>
        </div>
        <div class="rd-card__body-wrap"><div class="rd-card__body">
            <div class="cmt-stats">

                {{-- When tile --}}
                <div class="cmt-calendar-tile cmt-stat-calendar">
                    <div class="cmt-calendar-block" aria-hidden="true">
                        <div class="cmt-calendar-block__month">{{ $monthShort }}</div>
                        <div class="cmt-calendar-block__day">{{ $dayNumber }}</div>
                    </div>
                    <div class="cmt-calendar-info">
                        <span class="cmt-calendar-info__label">{{ __('admin.demos.overview.when') }}</span>
                        <span class="cmt-calendar-info__day">{{ $dayLabel }}</span>
                        <span class="cmt-calendar-info__date">{{ optional($demo->meeting_date)->format('Y-m-d') ?: '—' }}</span>
                        <span class="cmt-calendar-info__time">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            {{ $demo->formattedMeetingTime() ?: '—' }}
                        </span>
                    </div>
                </div>

                {{-- Webinar tile — Teams webinar mirrors the demo. --}}
                <div class="cmt-stat cmt-link-tile">
                    @if ($webinar && $webinar->join_web_url)
                        <a class="cmt-link-tile__open" href="{{ $webinar->join_web_url }}" target="_blank" rel="noopener noreferrer">
                            <span class="cmt-stat__icon"><svg><use href="#icon-demo-video"/></svg></span>
                            <div class="cmt-stat__body">
                                <span class="cmt-stat__label">{{ __('admin.demos.webinar.section') }}</span>
                                <span class="cmt-stat__value">{{ __('admin.demos.webinar.open_in_teams') }}</span>
                            </div>
                        </a>
                    @else
                        <a class="cmt-link-tile__open" href="#sec-webinar">
                            <span class="cmt-stat__icon"><svg><use href="#icon-demo-video"/></svg></span>
                            <div class="cmt-stat__body">
                                <span class="cmt-stat__label">{{ __('admin.demos.webinar.section') }}</span>
                                <span class="cmt-stat__value">{{ $webinar ? ucfirst($webinar->status) : __('admin.demos.webinar.none') }}</span>
                            </div>
                        </a>
                    @endif
                </div>

                <div class="cmt-stat cmt-stat--ok">
                    <span class="cmt-stat__icon"><svg><use href="#icon-demo-rocket"/></svg></span>
                    <div class="cmt-stat__body">
                        <span class="cmt-stat__label">{{ __('admin.demos.fields.startups_count') }}</span>
                        <span class="cmt-stat__value">{{ $demo->startups->count() }}</span>
                    </div>
                </div>

                <div class="cmt-stat cmt-stat--warn">
                    <span class="cmt-stat__icon"><svg><use href="#icon-demo-users"/></svg></span>
                    <div class="cmt-stat__body">
                        <span class="cmt-stat__label">{{ __('admin.demos.fields.investors_count') }}</span>
                        <span class="cmt-stat__value">{{ $effectiveInvestors->count() }}</span>
                    </div>
                </div>

                <div class="cmt-stat cmt-stat--purple">
                    <span class="cmt-stat__icon"><svg><use href="#icon-demo-shield"/></svg></span>
                    <div class="cmt-stat__body">
                        <span class="cmt-stat__label">{{ __('admin.demos.fields.status') }}</span>
                        <span class="cmt-stat__value">
                            <span class="cmt-pill {{ $isActive ? 'cmt-pill--ok' : 'cmt-pill--muted' }}">
                                {{ $isActive ? __('admin.demos.status.active') : __('admin.demos.status.expired') }}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div></div>
    </section>

    {{-- Sticky section nav (committee-identical chrome). --}}
    <nav class="rd-section-nav" aria-label="Sections">
        <a class="rd-section-nav__item" href="#sec-attendance" data-nav-target="sec-attendance">
            <svg><use href="#icon-demo-users"/></svg><span>{{ __('admin.demos.attendance_section.title') }}</span>
        </a>
        <a class="rd-section-nav__item" href="#sec-webinar" data-nav-target="sec-webinar">
            <svg><use href="#icon-demo-video"/></svg><span>{{ __('admin.demos.webinar.tab') }}</span>
        </a>
        {{-- Evaluations section nav removed (2026-06) — the Evaluations
             matrix was retired from the Demo details screen. --}}
        @if ($investorNotesByStartup->isNotEmpty())
            <a class="rd-section-nav__item" href="#sec-member-notes" data-nav-target="sec-member-notes">
                <svg><use href="#icon-demo-note"/></svg><span>{{ __('admin.demos.show.investor_notes') }}</span>
            </a>
        @endif
        <a class="rd-section-nav__item" href="#sec-notes" data-nav-target="sec-notes">
            <svg><use href="#icon-demo-note"/></svg><span>{{ __('admin.demos.fields.notes') }}</span>
        </a>
    </nav>

    {{-- ═════════ Webinar (Microsoft Teams) ═════════ --}}
    <section class="rd-card" id="sec-webinar" data-collapse-key="demo.webinar" data-open="{{ $webinar ? 'true' : 'false' }}">
        <button type="button" class="rd-card__head" aria-expanded="{{ $webinar ? 'true' : 'false' }}">
            <h3 class="rd-card__title">
                <span class="rd-card__icon"><svg><use href="#icon-demo-video"/></svg></span>
                {{ __('admin.demos.webinar.section') }}
                <span class="rd-card__sub">{{ __('admin.demos.webinar.section_hint') }}</span>
            </h3>
            <span class="rd-card__meta">
                <span class="rd-card__count">{{ $webinarStats['registered'] }}</span>
                <svg class="rd-card__chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
        </button>
        <div class="rd-card__body-wrap"><div class="rd-card__body">

            @unless ($webinarEnabled)
                <p class="cmt-help" style="margin-bottom:12px;">{{ __('admin.demos.webinar.disabled') }}</p>
            @endunless

            @if (! $webinar || ! $webinar->webinar_id)
                <p class="cmt-help">{{ __('admin.demos.webinar.none') }}</p>
                @if ($webinar && $webinar->last_error)
                    <p class="field-error" style="margin-top:6px;">{{ $webinar->last_error }}</p>
                @endif
                @if ($webinarEnabled)
                    <form method="POST" action="{{ route('admin.demos.webinar.retry', $demo) }}" style="margin-top:12px;">@csrf
                        <button type="submit" class="btn-primary">{{ __('admin.demos.webinar.btn_retry') }}</button>
                    </form>
                @endif
            @else
                @php
                    // $pill / $regTone / $attTone are defined at page scope (top of file).
                    $webTone = ['created'=>'ok','failed'=>'danger','cancelled'=>'muted','deleted'=>'muted','pending'=>'warn','creating'=>'warn'][$webinar->status] ?? 'muted';
                    $coEmails = collect($webinar->co_organizers ?? [])->pluck('email')->filter()->implode(', ') ?: '—';
                @endphp

                <div class="wb-info">
                    <div class="wb-info__row">
                        <span class="wb-info__k">{{ __('admin.demos.webinar.status') }}</span>
                        <span class="wb-info__v">{!! $pill($webinar->status, $webTone) !!}</span>
                    </div>
                    <div class="wb-info__row">
                        <span class="wb-info__k">{{ __('admin.demos.webinar.fields.organizer') }}</span>
                        <span class="wb-info__v">{{ $webinar->organizer_email ?: config('demo_webinars.organizer_upn') }}</span>
                    </div>
                    <div class="wb-info__row">
                        <span class="wb-info__k">{{ __('admin.demos.webinar.fields.coorganizers') }}</span>
                        <span class="wb-info__v">{{ $coEmails }}</span>
                    </div>
                    <div class="wb-info__row">
                        <span class="wb-info__k">{{ __('admin.demos.webinar.webinar_id') }}</span>
                        <span class="wb-info__v">{{ $webinar->webinar_id }}</span>
                    </div>
                    <div class="wb-info__row">
                        <span class="wb-info__k">{{ __('admin.demos.webinar.meeting_id') }}</span>
                        <span class="wb-info__v">{{ $webinar->meeting_id ?: '—' }}</span>
                    </div>
                    @if ($webinar->registration_url)
                        <div class="wb-info__row">
                            <span class="wb-info__k">{{ __('admin.demos.webinar.registration_url') }}</span>
                            <span class="wb-info__v">
                                <button type="button" class="wb-copy js-copy"
                                        data-copy="{{ $webinar->registration_url }}"
                                        data-label-copy="{{ __('admin.demos.webinar.copy') }}"
                                        data-label-copied="{{ __('admin.demos.webinar.copied') }}"
                                        title="{{ __('admin.demos.webinar.copy_registration_url') }}">
                                    <svg 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"/></svg>
                                    <span class="wb-copy__text">{{ __('admin.demos.webinar.copy') }}</span>
                                </button>
                            </span>
                        </div>
                    @endif
                </div>

                <div class="wb-stats">
                    <div class="cmt-stat"><span class="cmt-stat__icon"><svg><use href="#icon-demo-users"/></svg></span><div class="cmt-stat__body"><span class="cmt-stat__label">{{ __('admin.demos.webinar.total_investors') }}</span><span class="cmt-stat__value">{{ $webinarStats['total'] }}</span></div></div>
                    <div class="cmt-stat cmt-stat--ok"><span class="cmt-stat__icon"><svg><use href="#icon-demo-users"/></svg></span><div class="cmt-stat__body"><span class="cmt-stat__label">{{ __('admin.demos.webinar.registered') }}</span><span class="cmt-stat__value">{{ $webinarStats['registered'] }}</span></div></div>
                    <div class="cmt-stat cmt-stat--purple"><span class="cmt-stat__icon"><svg><use href="#icon-demo-check"/></svg></span><div class="cmt-stat__body"><span class="cmt-stat__label">{{ __('admin.demos.webinar.attended') }}</span><span class="cmt-stat__value">{{ $webinarStats['attended'] }}</span></div></div>
                    <div class="cmt-stat cmt-stat--warn"><span class="cmt-stat__icon"><svg><use href="#icon-demo-users"/></svg></span><div class="cmt-stat__body"><span class="cmt-stat__label">{{ __('admin.demos.webinar.absent') }}</span><span class="cmt-stat__value">{{ $webinarStats['absent'] }}</span></div></div>
                    <div class="cmt-stat"><span class="cmt-stat__icon"><svg><use href="#icon-demo-shield"/></svg></span><div class="cmt-stat__body"><span class="cmt-stat__label">{{ __('admin.demos.webinar.attendance_pct') }}</span><span class="cmt-stat__value">{{ $webinarStats['attendance_pct'] }}%</span></div></div>
                </div>

                <p class="wb-sync-note">
                    {{ __('admin.demos.webinar.last_sync') }}: {{ optional($webinar->last_synced_at)->diffForHumans() ?? '—' }}
                    @if ($webinar->last_sync_error) · <span class="field-error">{{ $webinar->last_sync_error }}</span>@endif
                </p>

                <div class="wb-actions">
                    @if ($webinar->join_web_url)
                        <a href="{{ $webinar->join_web_url }}" target="_blank" rel="noopener" class="btn-secondary">{{ __('admin.demos.webinar.open_in_teams') }}</a>
                    @endif
                    @if ($webinarEnabled && ! $webinar->isClosed())
                        <form method="POST" action="{{ route('admin.demos.webinar.sync-attendance', $demo) }}">@csrf<button class="btn-secondary">{{ __('admin.demos.webinar.btn_sync_attendance') }}</button></form>
                        <form method="POST" action="{{ route('admin.demos.webinar.sync-registrations', $demo) }}">@csrf<button class="btn-secondary">{{ __('admin.demos.webinar.btn_sync_registrations') }}</button></form>
                        <form method="POST" action="{{ route('admin.demos.webinar.update', $demo) }}">@csrf<button class="btn-secondary">{{ __('admin.demos.webinar.btn_update') }}</button></form>
                        <form method="POST" action="{{ route('admin.demos.webinar.cancel', $demo) }}" onsubmit="return confirm('{{ __('admin.demos.webinar.btn_cancel') }}?');">@csrf<button class="btn-danger">{{ __('admin.demos.webinar.btn_cancel') }}</button></form>
                    @endif
                </div>

                <p class="wb-sync-note" style="margin-bottom:0;">
                    {{ __('admin.demos.attendance_section.subtitle') }}
                    <a href="#sec-attendance" style="color:var(--rd-accent-strong);font-weight:700;text-decoration:none;">↓ {{ __('admin.demos.attendance_section.title') }}</a>
                </p>
            @endif

        </div></div>
    </section>

    {{-- ═════════ 2. Attendance (investors + startups) ═════════ --}}
    <section class="rd-card" id="sec-attendance" data-collapse-key="demo.attendance" data-open="true">
        <button type="button" class="rd-card__head" aria-expanded="true">
            <h3 class="rd-card__title">
                <span class="rd-card__icon"><svg><use href="#icon-demo-users"/></svg></span>
                {{ __('admin.demos.attendance_section.title') }}
                <span class="rd-card__sub">{{ __('admin.demos.attendance_section.subtitle') }}</span>
            </h3>
            <span class="rd-card__meta">
                <span class="rd-card__count">{{ $effectiveInvestors->count() + $demo->startups->count() }}</span>
                <svg class="rd-card__chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
        </button>
        <div class="rd-card__body-wrap"><div class="rd-card__body">

            {{-- Startups roster --}}
            <h4 style="margin:0 0 10px;font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">
                {{ __('admin.demos.show.slots') }} ({{ $demo->startups->count() }})
            </h4>
            <div class="cmt-list" style="margin-bottom:18px;">
                @forelse ($demo->startups as $startup)
                    @php($att = $startupAttendances->get($startup->id))
                    @php(
                        $logoFile = $startup->files?->first(fn ($f) => ($f->slot ?? null) === 'logo')
                    )
                    <div class="cmt-row">
                        <span class="cmt-avatar cmt-avatar--square">
                            @if ($logoFile)
                                <img src="{{ asset('storage/' . $logoFile->path) }}" alt="">
                            @else
                                {{ mb_substr($startup->display_name ?? '—', 0, 1) }}
                            @endif
                        </span>
                        <div class="cmt-row__main">
                            <a href="{{ route('admin.startups.show', $startup) }}" class="cmt-row__name">{{ $startup->display_name }}</a>
                            <div class="cmt-row__meta">
                                <span>{{ substr((string) $startup->pivot->start_time, 0, 5) }} – {{ substr((string) $startup->pivot->end_time, 0, 5) }}</span>
                                @if ($startup->sector)
                                    <span class="cmt-row__meta-sep">·</span>
                                    <span>{{ $startup->sector->{$locale === 'ar' ? 'name_ar' : 'name_en'} }}</span>
                                @endif
                            </div>
                        </div>
                        <form method="POST" action="{{ route('admin.demos.startups.attendance', [$demo, $startup]) }}">
                            @csrf @method('PATCH')
                            <select name="status" class="cmt-row__status-select js-attendance-select">
                                <option value="pending"        @selected(($att?->status ?? 'pending') === 'pending')>{{ __('admin.demos.attendance.startup.pending') }}</option>
                                <option value="attended"       @selected(($att?->status ?? '') === 'attended')>{{ __('admin.demos.attendance.startup.attended') }}</option>
                                <option value="did_not_attend" @selected(($att?->status ?? '') === 'did_not_attend')>{{ __('admin.demos.attendance.startup.did_not_attend') }}</option>
                            </select>
                        </form>
                    </div>
                @empty
                    <p style="color:#94a3b8;font-size:13px;text-align:center;padding:18px;">—</p>
                @endforelse
            </div>

            {{-- Investors roster — the SINGLE investor table (registration +
                 attendance columns were merged in here; the old separate Webinar
                 per-investor table was removed). Iterates the LIVE effective
                 audience (explicit `demo_investors` pins + every member of every
                 attached group, resolved by Demo::effectiveInvestors()). --}}
            <h4 style="margin:0 0 10px;font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;">
                {{ __('admin.demos.show.investors') }} ({{ $effectiveInvestors->count() }})
            </h4>
            <div class="att-tbl-wrap">
                <table class="att-tbl">
                    <thead>
                        <tr>
                            <th class="att-tbl__sticky">{{ __('admin.demos.webinar.col_investor') }}</th>
                            <th>{{ __('admin.demos.attendance_section.rsvp') }}</th>
                            <th>{{ __('admin.demos.webinar.col_reg_status') }}</th>
                            <th>{{ __('admin.demos.webinar.col_att_status') }}</th>
                            <th>{{ __('admin.demos.webinar.col_join') }}</th>
                            <th>{{ __('admin.demos.webinar.col_leave') }}</th>
                            <th>{{ __('admin.demos.webinar.col_duration') }}</th>
                            <th>{{ __('admin.demos.webinar.col_join_url') }}</th>
                            <th>{{ __('admin.demos.attendance_section.verification') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($effectiveInvestors as $investor)
                            @php($att = $investorAttendances->get($investor->id))
                            @php($selfStatus = $att?->status ?? 'pending')
                            @php($registered = $isRegistered($att))
                            {{-- The admin VERIFICATION workflow only exists once the investor
                                 has CONFIRMED their attendance. Pending / cancelled ⇒ no
                                 verification dropdown at all — only the RSVP badge. --}}
                            @php($confirmed = $att && $att->status === \App\Models\DemoAttendance::STATUS_CONFIRMED)
                            <tr>
                                <td class="att-tbl__sticky">
                                    <div class="att-investor">
                                        <span class="cmt-avatar att-investor__avatar">
                                            @if (! empty($investor->avatar_path))
                                                <img src="{{ asset('storage/' . $investor->avatar_path) }}" alt="">
                                            @else
                                                {{ mb_substr($investor->display_name ?: '—', 0, 1) }}
                                            @endif
                                        </span>
                                        <span class="att-investor__id">
                                            <a href="{{ route('admin.investors.show', $investor) }}" class="cmt-row__name">{{ $investor->display_name }}</a>
                                            @if ($investor->email)<span class="att-investor__email">{{ $investor->email }}</span>@endif
                                        </span>
                                    </div>
                                </td>
                                <td><span class="cmt-row__self-pill cmt-row__self-pill--{{ $selfStatus }}">{{ __('admin.demos.attendance.self.' . $selfStatus) }}</span></td>
                                <td>
                                    <div class="att-cell-stack">
                                        {!! $att ? $pill($att->registration_status, $regTone($att->registration_status)) : $pill(__('admin.demos.webinar.not_registered'), 'muted') !!}
                                        @if ($webinarEnabled && $att && $att->registration_status === \App\Models\DemoAttendance::REG_STATUS_FAILED)
                                            <form method="POST" action="{{ route('admin.demos.webinar.registration.retry', [$demo, $investor]) }}" style="margin:0;">@csrf<button class="att-retry-btn">{{ __('admin.demos.webinar.btn_retry_registration') }}</button></form>
                                        @endif
                                    </div>
                                </td>
                                <td>{!! $registered ? $pill($att->attendance_status, $attTone($att->attendance_status)) : '<span class="att-dash">—</span>' !!}</td>
                                <td class="att-num">{{ $fmtTime($att?->join_time) }}</td>
                                <td class="att-num">{{ $fmtTime($att?->leave_time) }}</td>
                                <td class="att-num">{{ $att && $att->duration_minutes !== null ? $att->duration_minutes . ' ' . __('admin.demos.attendance_section.min') : '—' }}</td>
                                <td>
                                    @if ($att?->join_url)
                                        <button type="button" class="wb-copy js-copy"
                                                data-copy="{{ $att->join_url }}"
                                                data-label-copy="{{ __('admin.demos.webinar.copy') }}"
                                                data-label-copied="{{ __('admin.demos.webinar.copied') }}"
                                                title="{{ __('admin.demos.webinar.copy_join_url') }}">
                                            <svg 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"/></svg>
                                            <span class="wb-copy__text">{{ __('admin.demos.webinar.copy') }}</span>
                                        </button>
                                    @else
                                        <span class="att-dash">—</span>
                                    @endif
                                </td>
                                <td>
                                    {{-- Admin VERIFICATION dropdown appears ONLY after the
                                         investor has CONFIRMED their attendance. Before
                                         confirmation (pending / cancelled) there is no admin
                                         verification workflow at all — the RSVP badge in the
                                         RSVP column already states where they stand. --}}
                                    @if ($confirmed)
                                        <form method="POST" action="{{ route('admin.demos.investors.attendance', [$demo, $investor]) }}" style="margin:0;">
                                            @csrf @method('PATCH')
                                            <select name="admin_status" class="cmt-row__status-select js-attendance-select">
                                                <option value="pending_verification" @selected(($att?->admin_status ?? 'pending_verification') === 'pending_verification')>{{ __('admin.demos.attendance.admin.pending_verification') }}</option>
                                                <option value="attended"             @selected(($att?->admin_status ?? '') === 'attended')>{{ __('admin.demos.attendance.admin.attended') }}</option>
                                                <option value="did_not_attend"       @selected(($att?->admin_status ?? '') === 'did_not_attend')>{{ __('admin.demos.attendance.admin.did_not_attend') }}</option>
                                            </select>
                                        </form>
                                    @else
                                        <span class="att-dash">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="9" style="padding:20px;color:var(--rd-faint);text-align:center;">—</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div></div>
    </section>

    {{-- Demo evaluations were fully removed (2026-06): no model, table,
         endpoint, or UI. Demo has no Pass/Fail matrix. --}}

    {{-- ═════════ 3. Investor notes per startup ═════════ --}}
    @if ($investorNotesByStartup->isNotEmpty())
        <section class="rd-card" id="sec-member-notes" data-collapse-key="demo.member-notes" data-open="false">
            <button type="button" class="rd-card__head" aria-expanded="false">
                <h3 class="rd-card__title">
                    <span class="rd-card__icon"><svg><use href="#icon-demo-note"/></svg></span>
                    {{ __('admin.demos.show.investor_notes') }}
                </h3>
                <span class="rd-card__meta">
                    <span class="rd-card__count">{{ $investorNotesByStartup->sum(fn ($g) => $g->count()) }}</span>
                    <svg class="rd-card__chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                </span>
            </button>
            <div class="rd-card__body-wrap"><div class="rd-card__body">
                @foreach ($demo->startups as $startup)
                    @php($notes = $investorNotesByStartup->get($startup->id))
                    @if ($notes && $notes->isNotEmpty())
                        <div class="demo-notes-group">
                            <h4>{{ $startup->display_name }}</h4>
                            @foreach ($notes as $n)
                                <div class="demo-note-item">
                                    {{-- investor `name` column dropped 2026-06-09 — use the
                                         locale-aware display_name accessor (the note's investor
                                         relation is loaded with the full_name_* pair it reads). --}}
                                    <strong>{{ $n->investor?->display_name ?: '—' }}</strong>
                                    <small>{{ optional($n->updated_at)->format('Y-m-d H:i') }}</small>
                                    <p>{{ $n->note }}</p>
                                </div>
                            @endforeach
                        </div>
                    @endif
                @endforeach
            </div></div>
        </section>
    @endif

    {{-- ═════════ 5. Admin notes ═════════ --}}
    <section class="rd-card" id="sec-notes" data-collapse-key="demo.notes" data-open="true">
        <button type="button" class="rd-card__head" aria-expanded="true">
            <h3 class="rd-card__title">
                <span class="rd-card__icon"><svg><use href="#icon-demo-note"/></svg></span>
                {{ __('admin.demos.fields.notes') }}
                <span class="rd-card__sub">{{ __('admin.demos.notes_subtitle') }}</span>
            </h3>
            <span class="rd-card__meta">
                <svg class="rd-card__chevron" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </span>
        </button>
        <div class="rd-card__body-wrap"><div class="rd-card__body">
            <form id="demo-notes-form" method="POST" action="{{ route('admin.demos.notes.save', $demo) }}">
                @csrf @method('PATCH')
                <textarea name="notes" class="demo-notes-textarea"
                          placeholder="{{ __('admin.demos.fields.notes_placeholder') }}">{{ $demo->notes }}</textarea>
                <div style="display:flex;justify-content:flex-end;margin-top:10px;">
                    <button type="submit" class="btn-primary">{{ __('admin.actions.save') }}</button>
                </div>
            </form>
        </div></div>
    </section>

    {{-- Delete action — separate footer so it isn't lost among the
         sections. Same confirm-on-submit pattern as committee's. --}}
    <form method="POST" action="{{ route('admin.demos.destroy', $demo) }}"
          onsubmit="return confirm('{{ __('admin.demos.actions.delete_confirm') }}')"
          style="display:flex;justify-content:flex-end;">
        @csrf @method('DELETE')
        <button type="submit" class="btn-danger" style="background:#fff1f2;color:#b91c1c;border:1px solid #fecaca;padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;">
            {{ __('admin.demos.actions.delete') }}
        </button>
    </form>
</div>

{{-- Shared copy toast (requirement #7). One element, reused by every copy button. --}}
<div class="att-toast" id="att-copy-toast" role="status" aria-live="polite">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
    <span>{{ __('admin.demos.webinar.copied') }}</span>
</div>
@endsection

@push('scripts')
<script>
    // Accordion: clicking the .rd-card__head on a non-locked card
    // toggles data-open + the aria-expanded flag on the button.
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.rd-card:not(.rd-card--locked) > .rd-card__head').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var card = btn.closest('.rd-card');
                var open = card.getAttribute('data-open') === 'true';
                card.setAttribute('data-open', open ? 'false' : 'true');
                btn.setAttribute('aria-expanded', open ? 'false' : 'true');
            });
        });
    });

    // Sticky section nav: highlights the in-view section.
    document.addEventListener('DOMContentLoaded', function () {
        var items = document.querySelectorAll('.rd-section-nav__item');
        if (! items.length || ! window.IntersectionObserver) return;
        var byId = {};
        items.forEach(function (a) {
            var t = a.getAttribute('data-nav-target');
            if (t) byId[t] = a;
        });
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                var item = byId[e.target.id];
                if (! item) return;
                if (e.isIntersecting) item.setAttribute('data-active', 'true');
                else item.setAttribute('data-active', 'false');
            });
        }, { rootMargin: '-30% 0px -55% 0px', threshold: 0.01 });
        Object.keys(byId).forEach(function (id) {
            var el = document.getElementById(id);
            if (el) io.observe(el);
        });
    });

    // Demo evaluations were fully removed (2026-06) — no model, table,
    // endpoint, or Alpine component.

    // ── Attendance dropdowns: save in-place via AJAX (no full-page nav).
    // The <select>s used to do onchange="this.form.submit()", which
    // navigated the browser to the JSON endpoint. Now we intercept the
    // change, PATCH it via fetch (the form already carries _token +
    // _method=PATCH), and flash the row on success — the page never
    // reloads. Falls back to reverting the value if the request fails.
    (function () {
        // Remember the value BEFORE a change so we can revert on error.
        document.addEventListener('focusin', function (e) {
            var s = e.target.closest && e.target.closest('.js-attendance-select');
            if (s) s.dataset.prev = s.value;
        });

        document.addEventListener('change', async function (e) {
            var select = e.target.closest && e.target.closest('.js-attendance-select');
            if (! select) return;
            var form = select.closest('form');
            if (! form) return;

            var prev = select.dataset.prev != null ? select.dataset.prev : select.value;

            // Build the payload BEFORE disabling the select — a disabled
            // control is NOT a "successful" form field, so it would be
            // dropped from FormData (that was the "admin_status required"
            // 422). Capture first, then disable for the UI lock.
            var fd = new FormData(form);
            select.disabled = true;
            select.classList.remove('is-saved', 'is-error');

            try {
                var res = await fetch(form.action, {
                    method: 'POST',                      // _method=PATCH spoof lives in the form
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: fd,
                    credentials: 'same-origin',
                });
                var data = await res.json().catch(function () { return {}; });
                if (! res.ok || data.ok === false) {
                    throw new Error(data.error || ('HTTP ' + res.status));
                }
                select.dataset.prev = select.value;      // commit the new value
                select.classList.add('is-saved');
                setTimeout(function () { select.classList.remove('is-saved'); }, 1400);
            } catch (err) {
                select.value = prev;                     // revert on failure
                select.classList.add('is-error');
                setTimeout(function () { select.classList.remove('is-error'); }, 2000);
            } finally {
                select.disabled = false;
            }
        });
    })();

    // ── Copy-to-clipboard for registration + join links (requirement #7).
    // Copies data-copy, flips the button label to "Copied!" briefly, and shows
    // a shared bottom-center toast. Falls back to a hidden <textarea> + execCommand
    // when the async Clipboard API is unavailable (http / older browsers).
    (function () {
        var toast = document.getElementById('att-copy-toast');
        var toastTimer = null;

        function showToast() {
            if (! toast) return;
            toast.classList.add('is-shown');
            clearTimeout(toastTimer);
            toastTimer = setTimeout(function () { toast.classList.remove('is-shown'); }, 1600);
        }

        function copyText(text) {
            if (navigator.clipboard && window.isSecureContext) {
                return navigator.clipboard.writeText(text);
            }
            return new Promise(function (resolve, reject) {
                try {
                    var ta = document.createElement('textarea');
                    ta.value = text;
                    ta.style.position = 'fixed';
                    ta.style.opacity = '0';
                    document.body.appendChild(ta);
                    ta.focus(); ta.select();
                    var ok = document.execCommand('copy');
                    document.body.removeChild(ta);
                    ok ? resolve() : reject();
                } catch (e) { reject(e); }
            });
        }

        document.addEventListener('click', function (e) {
            var btn = e.target.closest && e.target.closest('.js-copy');
            if (! btn) return;
            e.preventDefault();

            var text = btn.getAttribute('data-copy') || '';
            if (! text) return;

            copyText(text).then(function () {
                var span = btn.querySelector('.wb-copy__text');
                var copied = btn.getAttribute('data-label-copied') || 'Copied!';
                var original = btn.getAttribute('data-label-copy') || (span ? span.textContent : '');
                btn.classList.add('is-copied');
                if (span) span.textContent = copied;
                showToast();
                setTimeout(function () {
                    btn.classList.remove('is-copied');
                    if (span) span.textContent = original;
                }, 1600);
            }).catch(function () {
                // Last-ditch: prompt so the admin can copy manually.
                window.prompt('', text);
            });
        });
    })();

    // ── Demo notes: save in-place via AJAX (no full-page nav). The form
    // used to POST + navigate, dumping the JSON response on screen. Now we
    // intercept submit, PATCH it via fetch (form carries _token +
    // _method=PATCH), and flash the Save button on success.
    (function () {
        var form = document.getElementById('demo-notes-form');
        if (! form) return;

        form.addEventListener('submit', async function (e) {
            e.preventDefault();
            var btn = form.querySelector('button[type="submit"]');
            var label = btn ? btn.textContent : '';
            var fd = new FormData(form);                  // capture before disabling
            if (btn) btn.disabled = true;

            try {
                var res = await fetch(form.action, {
                    method: 'POST',                      // _method=PATCH spoof lives in the form
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: fd,
                    credentials: 'same-origin',
                });
                var data = await res.json().catch(function () { return {}; });
                if (! res.ok || data.ok === false) {
                    throw new Error(data.message || ('HTTP ' + res.status));
                }
                if (btn) {
                    btn.classList.add('is-saved');
                    btn.textContent = '✓ ' + label;
                    setTimeout(function () { btn.textContent = label; btn.classList.remove('is-saved'); }, 1600);
                }
            } catch (err) {
                if (btn) {
                    btn.textContent = '⚠ ' + label;
                    setTimeout(function () { btn.textContent = label; }, 2500);
                }
            } finally {
                if (btn) btn.disabled = false;
            }
        });
    })();
</script>
@endpush
@push('styles')
<style>
    /* Transient feedback on the attendance dropdowns after an AJAX save. */
    .js-attendance-select.is-saved { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
    #demo-notes-form button.is-saved { background: #16a34a; border-color: #16a34a; }
    .js-attendance-select.is-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
    .js-attendance-select:disabled { opacity: .6; cursor: progress; }
</style>
@endpush