@extends('admin.layouts.app')

@section('title', __('admin.labels.option_title') . ' — ' . $option->name_en)
@section('page_title', __('admin.labels.option_title'))

@push('styles')
<style>
    .option-detail {
        max-width: 880px;
        margin: 16px auto 0;
        display: grid; gap: 18px;
    }
    .card {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06);
        overflow: hidden;
    }
    .card-head {
        padding: 16px 22px;
        border-bottom: 1px solid #f1f5f9;
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .card-head h3 {
        margin: 0; font-size: 15px; font-weight: 700; color: #0f172a;
        letter-spacing: -.005em;
    }
    .card-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }

    /* ── Modern field row ─────────────────────────────────────────── */
    .field-row { display: grid; gap: 7px; }
    .field-row > label {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 12.5px; font-weight: 700; color: #334155;
        letter-spacing: -.005em;
    }
    .field-row input[type="text"],
    .field-row textarea {
        width: 100%;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 14px; font-family: inherit; color: #0f172a;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    .field-row input[type="text"]:focus,
    .field-row textarea:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }
    .field-row input[type="text"]:disabled,
    .field-row textarea:disabled {
        background: #f8fafc; opacity: .6; cursor: not-allowed;
    }
    .field-row textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
    .field-row .help {
        font-size: 11.5px; color: #94a3b8; line-height: 1.55;
    }

    /* ── Required chip + error state ──────────────────────────────── */
    .required-chip {
        display: inline-flex; align-items: center;
        padding: 1px 8px;
        background: #fee2e2; color: #b91c1c;
        border-radius: 999px;
        font-size: 10.5px; font-weight: 700;
        letter-spacing: .03em;
    }
    .field-row--error input[type="text"],
    .field-row--error textarea,
    .field-row input[type="text"].has-error,
    .field-row textarea.has-error {
        border-color: #f87171;
        box-shadow: 0 0 0 3px rgba(248,113,113,.15);
    }
    .field-row--error > label { color: #b91c1c; }
    .help--error {
        color: #b91c1c !important; font-weight: 600;
        display: inline-flex; align-items: center; gap: 6px;
    }

    /* Inner section header used to split logical groups inside a single
       card body. Cheaper than a second card, keeps everything on one
       visual surface, but still labels the next chunk clearly. */
    .section-divider {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 10px 0 2px;
        padding-top: 18px;
        border-top: 1px solid #f1f5f9;
    }
    .section-divider h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -.005em;
    }
    .section-divider__meta {
        display: inline-flex; align-items: center;
        padding: 3px 10px;
        background: #f1f5f9;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 700;
        color: #64748b;
        letter-spacing: .02em;
    }
    .section-divider__meta--on {
        background: #d1fae5; color: #065f46;
    }

    /* Two-column row for paired fields (Arabic + English name). Stacks on
       narrow viewports so the form stays legible on phones. */
    .field-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    @media (max-width: 640px) {
        .field-pair { grid-template-columns: 1fr; gap: 12px; }
    }

    /* ── Breadcrumb ──────────────────────────────────────────────────── */
    .crumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        margin: 0 0 12px;
        font-size: 13px;
        color: #64748b;
    }
    .crumbs__item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background-color .15s, color .15s;
        font-weight: 600;
    }
    a.crumbs__item:hover { background: #f1f5f9; color: #0f172a; }
    .crumbs__item--current { color: #0f172a; cursor: default; }
    .crumbs__sep {
        color: #cbd5e1;
        font-size: 11px;
        line-height: 1;
        user-select: none;
    }
    /* Mirror the separator in RTL so the chevron points the right way. */
    :where([dir="rtl"]) .crumbs__sep { transform: scaleX(-1); }

    .id-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px;
        background: #f1f5f9; color: #475569;
        border-radius: 999px;
        font-size: 12px; font-weight: 600;
        font-family: ui-monospace, monospace;
    }

    /* ── Methods picker ─ rounded card-style chips with a soft hover and
       a confident selected state. Spacing tuned for touch targets. */
    .methods-row {
        display: flex; flex-wrap: wrap; gap: 10px;
    }
    .method-pill {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 10px 18px;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        font-size: 13.5px;
        color: #475569;
        user-select: none;
        transition: all .15s ease;
        min-height: 42px;
    }
    .method-pill:hover {
        border-color: #c7d2fe; background: #f5f7ff;
        transform: translateY(-1px);
    }
    .method-pill[aria-checked="true"] {
        background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
        border-color: #6366f1;
        color: #3730a3;
        box-shadow: 0 1px 3px rgba(99,102,241,.18), 0 4px 8px -3px rgba(99,102,241,.22);
    }
    .method-pill:focus-visible {
        outline: 2px solid #6366f1; outline-offset: 2px;
    }
    .method-pill__icon {
        width: 20px; height: 20px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 15px;
    }
    .method-pill__check {
        width: 16px; height: 16px;
        border: 2px solid #cbd5e1;
        border-radius: 4px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 11px;
        color: #fff;
        flex-shrink: 0;
        transition: all .15s;
    }
    .method-pill[aria-checked="true"] .method-pill__check {
        background: #6366f1; border-color: #6366f1;
    }

    /* Notification config block — dynamically revealed when ≥1 method active */
    .notify-block {
        margin-top: 4px;
        padding: 18px;
        background: linear-gradient(180deg, #f9faff 0%, #ffffff 100%);
        border: 1px solid #eef2ff;
        border-radius: 12px;
        display: grid;
        gap: 18px;
    }
    .notify-block__empty {
        font-size: 13px;
        color: #64748b;
        background: #f8fafc;
        border: 1px dashed #e2e8f0;
        border-radius: 12px;
        padding: 18px;
        text-align: center;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    .notify-block__empty::before {
        content: "🔔";
        font-size: 24px;
    }

    /* ── Channel accordion (Phase 2) ─────────────────────────────────────
       One row per channel (Email / SMS / WhatsApp / In-app). Click the
       row body to expand its config (preview mode if not enabled);
       check the inline checkbox to flag the channel as armed. Only one
       row is expanded at a time — keeps the page calm and focused. */
    .ch-list {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden;
    }
    .ch-row { border-bottom: 1px solid #f1f5f9; }
    .ch-row:last-child { border-bottom: 0; }
    .ch-row__head {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px;
        cursor: pointer;
        background: #fff;
        transition: background-color .12s;
        user-select: none;
    }
    .ch-row__head:hover { background: #fafbfd; }
    .ch-row[data-expanded="true"] .ch-row__head { background: #f8faff; }
    .ch-row[data-enabled="true"] .ch-row__head {
        background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%);
    }
    .ch-row[data-enabled="true"][data-expanded="true"] .ch-row__head {
        background: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);
    }

    /* Checkbox cell — stops click bubbling into the row toggle. */
    .ch-row__check {
        flex-shrink: 0;
        position: relative;
        width: 22px; height: 22px;
    }
    .ch-row__check input {
        position: absolute; inset: 0; margin: 0; opacity: 0;
        width: 100%; height: 100%; cursor: pointer; z-index: 2;
    }
    .ch-row__check-box {
        width: 22px; height: 22px;
        border: 2px solid #cbd5e1;
        border-radius: 6px;
        background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff;
        transition: all .15s;
    }
    .ch-row__check-box::after {
        content: ""; opacity: 0;
        width: 11px; height: 11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3l2.6 2.5 4.4-5.1'/%3E%3C/svg%3E");
        background-size: contain; background-repeat: no-repeat;
        transition: opacity .12s;
    }
    .ch-row__check input:checked + .ch-row__check-box {
        background: #4f46e5; border-color: #4f46e5;
        box-shadow: 0 0 0 4px rgba(79,70,229,.12);
    }
    .ch-row__check input:checked + .ch-row__check-box::after { opacity: 1; }
    .ch-row__check input:focus-visible + .ch-row__check-box {
        outline: 2px solid #6366f1; outline-offset: 2px;
    }

    /* Icon + title + status pills */
    .ch-row__icon {
        flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border-radius: 10px;
        font-size: 16px;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
    }
    .ch-row[data-enabled="true"] .ch-row__icon {
        background: #eef2ff; border-color: #c7d2fe;
    }
    .ch-row__main { flex: 1; min-width: 0; }
    .ch-row__name {
        font-size: 14px; font-weight: 700; color: #0f172a;
        display: flex; align-items: center; gap: 8px;
        line-height: 1.2;
    }
    .ch-row__hint {
        font-size: 11.5px; color: #64748b; font-weight: 500;
        margin-top: 2px;
    }
    .ch-row__status {
        flex-shrink: 0;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #64748b;
    }
    .ch-row[data-enabled="true"] .ch-row__status {
        background: #ecfdf5; color: #047857;
    }
    .ch-row[data-enabled="false"][data-expanded="true"] .ch-row__status {
        background: #fef3c7; color: #92400e;
    }
    .ch-row__chevron {
        flex-shrink: 0;
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        color: #94a3b8;
        transition: transform .2s ease;
    }
    .ch-row[data-expanded="true"] .ch-row__chevron { transform: rotate(180deg); }
    :where([dir="rtl"]) .ch-row__chevron { /* chevron is vertical (down) — no flip needed */ }

    /* Body (config fields) — smooth slide via CSS grid trick */
    .ch-row__body-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .25s ease;
    }
    .ch-row[data-expanded="true"] .ch-row__body-wrap { grid-template-rows: 1fr; }
    .ch-row__body-inner { overflow: hidden; }
    .ch-row__body {
        padding: 4px 16px 18px;
        display: grid;
        gap: 14px;
        border-top: 1px dashed #e2e8f0;
    }

    /* Preview-mode banner — shown when the row is open BUT not checked */
    .ch-preview-banner {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px 12px;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 8px;
        color: #92400e;
        font-size: 12.5px;
        line-height: 1.55;
    }
    .ch-preview-banner__btn {
        margin-inline-start: auto;
        flex-shrink: 0;
        padding: 4px 10px;
        background: #fff;
        border: 1px solid #fcd34d;
        border-radius: 6px;
        color: #92400e;
        font-size: 11.5px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .12s;
    }
    .ch-preview-banner__btn:hover { background: #fef3c7; }

    /* Greyed-out look for inputs in preview mode */
    .ch-row[data-enabled="false"] .ch-row__body input[type="text"],
    .ch-row[data-enabled="false"] .ch-row__body textarea,
    .ch-row[data-enabled="false"] .ch-row__body select {
        opacity: .85;
    }

    /* WhatsApp placeholders list */
    .wa-placeholders { display: grid; gap: 8px; }
    .wa-placeholder-row {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        gap: 8px;
        align-items: center;
    }
    .wa-placeholder-row__chip {
        display: inline-flex; align-items: center; justify-content: center;
        height: 28px;
        padding: 0 8px;
        border-radius: 6px;
        background: #ecfdf5;
        color: #047857;
        font-family: ui-monospace, monospace;
        font-size: 12px;
        font-weight: 700;
    }
    .wa-placeholder-row__rm {
        width: 28px; height: 28px;
        border: 1px solid #fecaca;
        background: #fff;
        color: #b91c1c;
        border-radius: 6px;
        font-size: 14px; line-height: 1;
        cursor: pointer;
        transition: background-color .12s;
    }
    .wa-placeholder-row__rm:hover { background: #fef2f2; }
    .wa-add-row {
        padding: 8px 12px;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        background: #fff;
        color: #475569;
        font-size: 12.5px; font-weight: 600;
        cursor: pointer;
        align-self: start;
        justify-self: start;
        transition: all .15s;
    }
    .wa-add-row:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }

    /* WhatsApp template picker (dropdown + manual fallback + refresh) */
    .wa-template-picker {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 8px;
        row-gap: 6px;
        align-items: stretch;
    }
    /* Select + manual-fallback text input — match .field-row input styling */
    .wa-template-picker select,
    .wa-template-picker input[type="text"] {
        width: 100%;
        min-height: 42px;
        padding: 10px 36px 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        font-family: inherit;
        color: #0f172a;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 12px;
        transition: border-color .15s, box-shadow .15s, background-color .15s;
    }
    .wa-template-picker input[type="text"] {
        padding-right: 14px;
        background-image: none;
    }
    [dir="rtl"] .wa-template-picker select {
        padding: 10px 14px 10px 36px;
        background-position: left 12px center;
    }
    .wa-template-picker select:focus,
    .wa-template-picker input[type="text"]:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }
    .wa-template-picker select:disabled,
    .wa-template-picker input[type="text"]:disabled {
        background-color: #f8fafc; opacity: .65; cursor: not-allowed;
    }
    .wa-template-picker__actions { display: flex; align-items: center; gap: 6px; }
    .wa-template-picker__refresh,
    .wa-template-picker__mode {
        padding: 0 12px;
        height: 42px;
        font-size: 12.5px;
        font-weight: 600;
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #475569;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color .12s, border-color .12s;
    }
    .wa-template-picker__refresh { width: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
    .wa-template-picker__refresh:hover,
    .wa-template-picker__mode:hover { background: #f1f5f9; border-color: #94a3b8; }
    .wa-template-picker__refresh:disabled,
    .wa-template-picker__mode:disabled { opacity: .55; cursor: not-allowed; }
    .wa-spinner {
        display: inline-block;
        width: 12px; height: 12px;
        border: 2px solid #e2e8f0;
        border-top-color: #6366f1;
        border-radius: 999px;
        animation: wa-spin 700ms linear infinite;
    }
    @keyframes wa-spin { to { transform: rotate(360deg); } }

    /* WhatsApp small inline preview */
    .wa-preview {
        background: #25d36614;
        border: 1px solid #25d36655;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 13.5px;
        line-height: 1.65;
        color: #0f172a;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .wa-preview__empty { color: #94a3b8; font-style: italic; font-size: 12.5px; }
    .wa-preview__label {
        display: block;
        font-size: 11px; font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #047857;
        margin-bottom: 4px;
    }

    /* Status switch */
    .switch {
        position: relative; display: inline-block;
        width: 42px; height: 24px;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch__track {
        position: absolute; cursor: pointer; inset: 0;
        background: #cbd5e1; border-radius: 999px;
        transition: .2s;
    }
    .switch__track::before {
        content: ""; position: absolute;
        height: 18px; width: 18px;
        left: 3px; bottom: 3px;
        background: #fff; border-radius: 50%;
        transition: .2s;
    }
    .switch input:checked + .switch__track { background: #4f46e5; }
    .switch input:checked + .switch__track::before { transform: translateX(18px); }

    /* ── Actions bar ─ subtle banded footer; the inline hint on the left
       explains a disabled Save state instead of leaving the admin guessing. */
    .actions-bar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        padding: 14px 22px;
        background: #fafbfc;
        border-top: 1px solid #f1f5f9;
    }
    .actions-bar__hint {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 600;
        color: #b45309;
    }
    .actions-bar__hint svg { color: #d97706; }
    .btn-primary {
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 10px;
        padding: 11px 26px; min-height: 42px;
        font-weight: 700; cursor: pointer;
        font-size: 14px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        box-shadow: 0 1px 2px rgba(79,70,229,.18), 0 6px 12px -4px rgba(79,70,229,.22);
        transition: all .15s ease;
    }
    .btn-primary:hover:not(:disabled) {
        background: #4338ca;
        box-shadow: 0 2px 4px rgba(67,56,202,.22), 0 8px 16px -4px rgba(67,56,202,.28);
        transform: translateY(-1px);
    }
    .btn-primary:disabled {
        opacity: .45; cursor: not-allowed; box-shadow: none;
        background: #94a3b8;
    }
    .btn-ghost {
        background: transparent; color: #334155;
        border: 1px solid #cbd5e1; border-radius: 8px;
        padding: 10px 20px;
        font-weight: 600; cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex; align-items: center;
    }
    .btn-ghost:hover { background: #f1f5f9; }

    .toast {
        position: fixed; top: 20px; right: 20px; z-index: 100;
        background: #0f172a; color: #fff;
        padding: 12px 18px;
        border-radius: 10px;
        font-size: 13px;
        box-shadow: 0 12px 28px rgba(15,23,42,.3);
    }
    .toast--error { background: #b91c1c; }
    .toast--ok    { background: #047857; }

    /* ── Hero header ─ replaces the old page-header to avoid duplicate
       titles. Sits directly below the breadcrumb and shows the leaf
       (option) name once, with status + ID badges. */
    .option-hero {
        max-width: 820px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0 4px;
    }
    .option-hero__main { display: grid; gap: 6px; min-width: 0; }
    .option-hero__title {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
        word-break: break-word;
    }
    .option-hero__meta {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        font-size: 12px; color: #64748b;
    }
    .option-hero__badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11.5px; font-weight: 700;
        letter-spacing: .02em;
    }
    .option-hero__badge--active   { background: #ecfdf5; color: #047857; }
    .option-hero__badge--inactive { background: #fee2e2; color: #b91c1c; }
    .option-hero__badge--methods  { background: #eef2ff; color: #4338ca; }
    @media (max-width: 640px) {
        .option-hero { flex-direction: column; }
    }

    /* Template variable picker */
    .tpl-vars-block {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 14px;
        display: grid;
        gap: 10px;
    }
    .tpl-vars-block h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: #334155;
    }
    .tpl-vars-block .help { font-size: 11px; color: #64748b; margin: 0; }
    /* Flat chip row — variables shown ungrouped, matching the
       Automations screen's Template Variables picker. */
    .tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .tpl-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        font-family: ui-monospace, monospace;
        font-size: 12px;
        color: #334155;
        cursor: pointer;
        transition: all .15s;
        user-select: none;
    }
    .tpl-chip:hover { border-color: #6366f1; color: #4338ca; background: #eef2ff; }
    .tpl-chip:disabled { opacity: .4; cursor: not-allowed; }

    /* Live preview */
    .tpl-preview {
        background: #0f172a;
        color: #e2e8f0;
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 13px;
        display: grid;
        gap: 10px;
    }
    .tpl-preview .pv-row {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 10px;
        align-items: start;
    }
    .tpl-preview .pv-row > span:first-child {
        color: #94a3b8;
        font-size: 11px; font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding-top: 2px;
    }
    .tpl-preview .pv-row > span:last-child {
        white-space: pre-wrap;
        word-break: break-word;
    }
    .tpl-preview .pv-empty {
        color: #64748b; font-style: italic; font-size: 12px;
    }
    .tpl-unknown {
        background: #fef3c7;
        border: 1px solid #fcd34d;
        color: #92400e;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.4;
    }
    .tpl-unknown code {
        background: rgba(0,0,0,.08);
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 11px;
        margin: 0 2px;
    }
</style>
@endpush

@section('content')

@php
    $methodIcons = [
        'whatsapp'     => '💬',
        'email'        => '✉️',
        'notification' => '🔔',
        'sms'          => '📱',
    ];
@endphp

@php
    // Localized helpers for the breadcrumb. We resolve names defensively
    // because either side may be empty in the labels catalog (the admin
    // can omit name_ar on system-only labels, for instance).
    $crumbLocale  = app()->getLocale();
    $labelName    = $crumbLocale === 'ar'
        ? ($label->name_ar ?: $label->name_en)
        : ($label->name_en ?: $label->name_ar);
    $optionName   = $crumbLocale === 'ar'
        ? ($option->name_ar ?: $option->name_en)
        : ($option->name_en ?: $option->name_ar);
    // The labels.index route accepts ?type=…&label={id} so the crumb
    // lands directly on the right tab AND auto-selects the parent label.
    $labelsTypeUrl  = route('admin.labels.index', ['type' => $label->type]);
    $labelDeepUrl   = route('admin.labels.index', ['type' => $label->type, 'label' => $label->id]);
    $typeKey        = $label->type === 'startup'
        ? 'admin.labels.crumb_startup'
        : 'admin.labels.crumb_investor';
@endphp

{{-- Breadcrumb: each level links to its own anchor so the admin can
     escape upward without using the browser back button. The current
     leaf is non-clickable. --}}
<nav class="crumbs" aria-label="{{ __('admin.labels.breadcrumb') }}">
    <a href="{{ route('admin.dashboard') }}" class="crumbs__item">
        {{ __('admin.nav.dashboard') }}
    </a>
    <span class="crumbs__sep" aria-hidden="true">›</span>

    <a href="{{ route('admin.labels.index') }}" class="crumbs__item">
        {{ __('admin.nav.labels') }}
    </a>
    <span class="crumbs__sep" aria-hidden="true">›</span>

    <a href="{{ $labelsTypeUrl }}" class="crumbs__item">
        {{ __($typeKey) }}
    </a>
    <span class="crumbs__sep" aria-hidden="true">›</span>

    <a href="{{ $labelDeepUrl }}" class="crumbs__item">
        {{ $labelName ?: __('admin.labels.label_details') }}
    </a>
    <span class="crumbs__sep" aria-hidden="true">›</span>

</nav>

{{-- Hero: one heading (the option name), with status + method badges.
     Replaces the old <x-admin.page-header> block which duplicated the
     subtitle the breadcrumb already shows. The breadcrumb handles all
     upward navigation, so the two ghost back-buttons are removed. --}}
<div class="option-hero">
    <div class="option-hero__main">
        <div class="option-hero__meta">
            @php $mc = is_array($option->methods) ? count($option->methods) : 0; @endphp
            @if ($mc > 0)
                <span class="option-hero__badge option-hero__badge--methods">
                    {{ $mc }} / {{ count($supportedMethods) }} · {{ __('admin.labels.methods_short') }}
                </span>
            @endif

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

<div
    x-data="optionEditor({
        option: @js([
            'id'                    => $option->id,
            'label_id'              => $option->label_id,
            'group_id'              => $option->group_id,
            'name_en'               => $option->name_en,
            'name_ar'               => $option->name_ar,
            'status'                => (bool) $option->status,
            'methods'               => is_array($option->methods) ? $option->methods : [],
            'notification_title'    => $option->notification_title,
            'notification_body'     => $option->notification_body,
            'sms_body'              => $option->sms_body,
            'whatsapp_template_id'  => $option->whatsapp_template_id,
            'whatsapp_placeholders' => is_array($option->whatsapp_placeholders) ? $option->whatsapp_placeholders : [],
        ]),
        supportedMethods: @js($supportedMethods),
        templateVars:    @js($templateVars),
        templateSamples: @js($templateSamples),
        endpoint: @js(route('admin.labels.options.update', ['option' => $option->id])),
        waTemplatesEndpoint: @js(route('admin.labels.sendpulse.whatsapp.templates')),
        csrf: @js(csrf_token()),
    })"
    x-cloak
>
    <div class="toast"
         :class="toast.kind === 'error' ? 'toast--error' : 'toast--ok'"
         x-show="toast.visible"
         x-transition.opacity
         x-text="toast.message"></div>

    <div class="option-detail">

        {{-- ── Combined: core info + notification channels in one card ──
             Logical sections are separated by an inner .section-divider
             so the form still reads as two grouped chunks, but it lives
             on a single visual surface (per spec). --}}
        <div class="card">
            <div class="card-head">
                <h3>{{ __('admin.labels.option_core') }}</h3>
                {{-- Methods-count badge stays in the header so an admin
                     can see channel coverage at a glance even before
                     scrolling to the methods section below. --}}
                <span x-show="form.methods.length === 0" style="font-size:12px; color:#94a3b8;">
                    {{ __('admin.labels.no_methods') }}
                </span>
                <span x-show="form.methods.length > 0" style="font-size:12px; color:#047857;"
                      x-text="form.methods.length + '/' + supportedMethods.length + ' · {{ __('admin.labels.methods_short') }}'"></span>
            </div>
            <div class="card-body">
                {{-- Paired name inputs: Arabic + English side-by-side on
                     desktop, stacked on mobile (.field-pair handles the
                     responsive breakpoint). Each input keeps its own
                     dir/lang so cursor + IME behavior is correct. --}}
                <div class="field-pair">
                    <div class="field-row">
                        <label for="name_ar">{{ __('admin.labels.name_ar') }}</label>
                        <input id="name_ar" type="text"
                               x-model="form.name_ar"
                               dir="rtl" lang="ar"
                               :disabled="saving">
                    </div>
                    <div class="field-row">
                        <label for="name_en">{{ __('admin.labels.name_en') }}</label>
                        <input id="name_en" type="text"
                               x-model="form.name_en"
                               dir="ltr" lang="en"
                               :disabled="saving">
                    </div>
                </div>
                <div class="field-row">
                    <label>{{ __('admin.labels.status_col') }}</label>
                    <label class="switch">
                        <input type="checkbox" x-model="form.status" :disabled="saving">
                        <span class="switch__track"></span>
                    </label>
                </div>

                {{-- ── Linked Group (action labels only) ────────────────────
                     Optional explicit Action → Group link. When set, applying
                     this action moves the startup/investor into the chosen
                     group; empty leaves groups untouched (config fallback). --}}
                @if ($label->key === 'action')
                    <div class="field-row">
                        <label for="linked_group">{{ __('admin.labels.linked_group') }}</label>
                        <select id="linked_group"
                                x-model="form.group_id"
                                :disabled="saving"
                                style="width:100%; min-height:42px; padding:10px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; font-size:14px; font-family:inherit; color:#0f172a;">
                            <option value="">{{ __('admin.labels.linked_group_none') }}</option>
                            @foreach ($groups as $g)
                                <option value="{{ $g['id'] }}">{{ $g['name'] }}</option>
                            @endforeach
                        </select>
                        <span class="help">{{ __('admin.labels.linked_group_hint') }}</span>
                    </div>
                @endif

                {{-- ── Section header ─────────────────────────────────── --}}
                <div class="section-divider">
                    <h4>{{ __('admin.labels.methods_title') }}</h4>
                    <span class="section-divider__meta"
                          :class="form.methods.length > 0 ? 'section-divider__meta--on' : ''"
                          x-text="form.methods.length > 0
                                    ? (form.methods.length + '/' + supportedMethods.length)
                                    : '{{ __('admin.labels.no_methods') }}'"></span>
                </div>

                <p class="help" style="margin:0; font-size:12px; color:#64748b;">{{ __('admin.labels.methods_hint') }}</p>

                {{-- ── Channel accordion ──────────────────────────────────
                     One row per channel. Click the row body to expand and
                     preview its config; tick the inline checkbox to actually
                     enable the channel. Only ONE row is expanded at a time
                     so the screen stays focused. Preview mode (open but not
                     checked) shows a banner reminding the admin that the
                     channel is inactive until enabled. --}}
                <div class="ch-list" role="group" aria-label="{{ __('admin.labels.methods_title') }}">

                    {{-- ===== EMAIL ===== --}}
                    <div class="ch-row"
                         :data-enabled="form.methods.includes('email') ? 'true' : 'false'"
                         :data-expanded="expandedChannel === 'email' ? 'true' : 'false'">
                        <div class="ch-row__head"
                             role="button"
                             tabindex="0"
                             :aria-expanded="expandedChannel === 'email'"
                             @click="toggleChannelExpansion('email')"
                             @keydown.enter.prevent="toggleChannelExpansion('email')"
                             @keydown.space.prevent="toggleChannelExpansion('email')">
                            <label class="ch-row__check" @click.stop>
                                <input type="checkbox"
                                       :checked="form.methods.includes('email')"
                                       @change="toggleMethod('email')"
                                       :aria-label="'{{ __('admin.labels.method_email') }}'">
                                <span class="ch-row__check-box" aria-hidden="true"></span>
                            </label>
                            <span class="ch-row__icon" aria-hidden="true">✉️</span>
                            <div class="ch-row__main">
                                <div class="ch-row__name">{{ __('admin.labels.channel_email_title') }}</div>
                                <div class="ch-row__hint">{{ __('admin.labels.channel_email_hint') }}</div>
                            </div>
                            <span class="ch-row__status" x-text="channelStatusLabel('email')"></span>
                            <span class="ch-row__chevron" aria-hidden="true">
                                <svg width="14" height="14" 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"/>
                                </svg>
                            </span>
                        </div>
                        <div class="ch-row__body-wrap">
                            <div class="ch-row__body-inner">
                                <div class="ch-row__body">
                                    <template x-if="!form.methods.includes('email')">
                                        <div class="ch-preview-banner" role="note">
                                            <span aria-hidden="true">ⓘ</span>
                                            <span>{{ __('admin.labels.channel_preview_hint') }}</span>
                                            <button type="button" class="ch-preview-banner__btn"
                                                    @click.stop="toggleMethod('email')"
                                                    :disabled="saving">
                                                {{ __('admin.labels.channel_enable') }}
                                            </button>
                                        </div>
                                    </template>

                                    <div class="field-row" :class="{ 'field-row--error': errors.email_subject }">
                                        <label for="ch_email_subject">
                                            <span>{{ __('admin.labels.email_subject') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <input id="ch_email_subject" type="text"
                                               x-model="channels.email.subject"
                                               @focus="focusField($event.target, 'channels.email.subject')"
                                               @blur="touched.email_subject = true"
                                               :placeholder="'{{ __('admin.labels.email_subject_placeholder') }}'"
                                               :class="errors.email_subject ? 'has-error' : ''"
                                               :aria-invalid="errors.email_subject ? 'true' : 'false'"
                                               :disabled="saving">
                                        <span class="help" x-show="!errors.email_subject">{{ __('admin.labels.email_subject_hint') }}</span>
                                        <span class="help help--error" x-show="errors.email_subject" x-transition.opacity>
                                            ⚠ {{ __('admin.labels.email_subject_required') }}
                                        </span>
                                    </div>
                                    <div class="field-row" :class="{ 'field-row--error': errors.email_body }">
                                        <label for="ch_email_body">
                                            <span>{{ __('admin.labels.email_body') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <textarea id="ch_email_body"
                                                  data-html-editor
                                                  x-model="channels.email.body"
                                                  @focus="focusField($event.target, 'channels.email.body')"
                                                  @blur="touched.email_body = true"
                                                  :placeholder="'{{ __('admin.labels.email_body_placeholder') }}'"
                                                  :class="errors.email_body ? 'has-error' : ''"
                                                  :aria-invalid="errors.email_body ? 'true' : 'false'"
                                                  :disabled="saving"></textarea>
                                        <span class="help" x-show="!errors.email_body">{{ __('admin.labels.email_body_hint') }}</span>
                                        <span class="help help--error" x-show="errors.email_body" x-transition.opacity>
                                            ⚠ {{ __('admin.labels.email_body_required') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== SMS ===== --}}
                    <div class="ch-row"
                         :data-enabled="form.methods.includes('sms') ? 'true' : 'false'"
                         :data-expanded="expandedChannel === 'sms' ? 'true' : 'false'">
                        <div class="ch-row__head"
                             role="button"
                             tabindex="0"
                             :aria-expanded="expandedChannel === 'sms'"
                             @click="toggleChannelExpansion('sms')"
                             @keydown.enter.prevent="toggleChannelExpansion('sms')"
                             @keydown.space.prevent="toggleChannelExpansion('sms')">
                            <label class="ch-row__check" @click.stop>
                                <input type="checkbox"
                                       :checked="form.methods.includes('sms')"
                                       @change="toggleMethod('sms')"
                                       :aria-label="'{{ __('admin.labels.method_sms') }}'">
                                <span class="ch-row__check-box" aria-hidden="true"></span>
                            </label>
                            <span class="ch-row__icon" aria-hidden="true">📱</span>
                            <div class="ch-row__main">
                                <div class="ch-row__name">{{ __('admin.labels.channel_sms_title') }}</div>
                                <div class="ch-row__hint">{{ __('admin.labels.channel_sms_hint') }}</div>
                            </div>
                            <span class="ch-row__status" x-text="channelStatusLabel('sms')"></span>
                            <span class="ch-row__chevron" aria-hidden="true">
                                <svg width="14" height="14" 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"/>
                                </svg>
                            </span>
                        </div>
                        <div class="ch-row__body-wrap">
                            <div class="ch-row__body-inner">
                                <div class="ch-row__body">
                                    <template x-if="!form.methods.includes('sms')">
                                        <div class="ch-preview-banner" role="note">
                                            <span aria-hidden="true">ⓘ</span>
                                            <span>{{ __('admin.labels.channel_preview_hint') }}</span>
                                            <button type="button" class="ch-preview-banner__btn"
                                                    @click.stop="toggleMethod('sms')"
                                                    :disabled="saving">
                                                {{ __('admin.labels.channel_enable') }}
                                            </button>
                                        </div>
                                    </template>

                                    <div class="field-row" :class="{ 'field-row--error': errors.sms_body }">
                                        <label for="ch_sms_body">
                                            <span>{{ __('admin.labels.sms_body') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <textarea id="ch_sms_body"
                                                  x-model="channels.sms.body"
                                                  @focus="focusField($event.target, 'channels.sms.body')"
                                                  @blur="touched.sms_body = true"
                                                  :placeholder="'{{ __('admin.labels.sms_body_placeholder') }}'"
                                                  :class="errors.sms_body ? 'has-error' : ''"
                                                  :aria-invalid="errors.sms_body ? 'true' : 'false'"
                                                  maxlength="480"
                                                  :disabled="saving"></textarea>
                                        <span class="help">
                                            <span x-show="!errors.sms_body">{{ __('admin.labels.sms_body_hint') }}</span>
                                            <span x-show="errors.sms_body" class="help--error" x-transition.opacity>⚠ {{ __('admin.labels.sms_body_required') }}</span>
                                            <span style="float:inline-end; color:#94a3b8; font-variant-numeric: tabular-nums;"
                                                  x-text="(channels.sms.body || '').length + ' / 480'"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== WHATSAPP ===== --}}
                    <div class="ch-row"
                         :data-enabled="form.methods.includes('whatsapp') ? 'true' : 'false'"
                         :data-expanded="expandedChannel === 'whatsapp' ? 'true' : 'false'">
                        <div class="ch-row__head"
                             role="button"
                             tabindex="0"
                             :aria-expanded="expandedChannel === 'whatsapp'"
                             @click="toggleChannelExpansion('whatsapp')"
                             @keydown.enter.prevent="toggleChannelExpansion('whatsapp')"
                             @keydown.space.prevent="toggleChannelExpansion('whatsapp')">
                            <label class="ch-row__check" @click.stop>
                                <input type="checkbox"
                                       :checked="form.methods.includes('whatsapp')"
                                       @change="toggleMethod('whatsapp')"
                                       :aria-label="'{{ __('admin.labels.method_whatsapp') }}'">
                                <span class="ch-row__check-box" aria-hidden="true"></span>
                            </label>
                            <span class="ch-row__icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" width="20" height="20" fill="#25D366">
                                    <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"/>
                                    <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"/>
                                </svg>
                            </span>
                            <div class="ch-row__main">
                                <div class="ch-row__name">{{ __('admin.labels.channel_whatsapp_title') }}</div>
                                <div class="ch-row__hint">{{ __('admin.labels.channel_whatsapp_hint') }}</div>
                            </div>
                            <span class="ch-row__status" x-text="channelStatusLabel('whatsapp')"></span>
                            <span class="ch-row__chevron" aria-hidden="true">
                                <svg width="14" height="14" 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"/>
                                </svg>
                            </span>
                        </div>
                        <div class="ch-row__body-wrap">
                            <div class="ch-row__body-inner">
                                <div class="ch-row__body">
                                    <template x-if="!form.methods.includes('whatsapp')">
                                        <div class="ch-preview-banner" role="note">
                                            <span aria-hidden="true">ⓘ</span>
                                            <span>{{ __('admin.labels.channel_preview_hint') }}</span>
                                            <button type="button" class="ch-preview-banner__btn"
                                                    @click.stop="toggleMethod('whatsapp')"
                                                    :disabled="saving">
                                                {{ __('admin.labels.channel_enable') }}
                                            </button>
                                        </div>
                                    </template>

                                    <div class="field-row" :class="{ 'field-row--error': errors.whatsapp_template }">
                                        <label for="ch_wa_template">
                                            <span>{{ __('admin.labels.whatsapp_template') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <div class="wa-template-picker">
                                            <select id="ch_wa_template"
                                                    x-show="!waTemplates.fallback"
                                                    x-model="channels.whatsapp.template_id"
                                                    :disabled="saving || waTemplates.loading">
                                                <option value="">{{ __('admin.labels.whatsapp_template_picker_placeholder') }}</option>

                                                {{-- Server-side sticky option for the SAVED template.
                                                     Rendered eagerly from Blade with `selected` so x-model
                                                     finds a matching <option> on the very first paint and
                                                     doesn't snap to "" before Alpine has a chance to add the
                                                     async-loaded list. The Alpine template below skips this
                                                     value once the API delivers it inside `waTemplates.list`
                                                     (deduplication via the :selected check on each item). --}}
                                                @if (! empty($option->whatsapp_template_id))
                                                    <option value="{{ $option->whatsapp_template_id }}"
                                                            selected
                                                            data-saved-template>
                                                        {{ $option->whatsapp_template_id }}  ·  {{ __('admin.labels.whatsapp_template_saved_suffix') }}
                                                    </option>
                                                @endif

                                                {{-- The async-loaded SendPulse list. The :selected binding
                                                     uses the current x-model value so the right option stays
                                                     highlighted once the list lands; the saved-template <option>
                                                     above is removed by x-effect below once a real list entry
                                                     covers it, preventing duplicates. --}}
                                                <template x-for="tpl in waTemplates.list" :key="tpl.name">
                                                    <option :value="tpl.name"
                                                            :selected="tpl.name === channels.whatsapp.template_id"
                                                            x-text="tpl.name + (tpl.language ? '  ·  ' + tpl.language : '')"></option>
                                                </template>
                                            </select>
                                            <input type="text"
                                                   x-show="waTemplates.fallback"
                                                   x-model="channels.whatsapp.template_id"
                                                   :placeholder="'{{ __('admin.labels.whatsapp_template_placeholder') }}'"
                                                   :disabled="saving">
                                            <div class="wa-template-picker__actions">
                                                <button type="button"
                                                        @click="reloadWhatsappTemplates(true)"
                                                        :disabled="saving || waTemplates.loading"
                                                        class="wa-template-picker__refresh"
                                                        :title="'{{ __('admin.labels.whatsapp_templates_refresh') }}'">
                                                    <span x-show="!waTemplates.loading">↻</span>
                                                    <span x-show="waTemplates.loading" class="wa-spinner" aria-hidden="true"></span>
                                                </button>
                                                <button type="button"
                                                        @click="waTemplates.fallback = !waTemplates.fallback"
                                                        :disabled="saving"
                                                        class="wa-template-picker__mode"
                                                        x-text="waTemplates.fallback
                                                            ? '{{ __('admin.labels.whatsapp_templates_use_picker') }}'
                                                            : '{{ __('admin.labels.whatsapp_templates_use_manual') }}'"></button>
                                            </div>
                                        </div>
                                        <span class="help help--error" x-show="errors.whatsapp_template" x-transition.opacity>
                                            ⚠ {{ __('admin.labels.whatsapp_template_required') }}
                                        </span>
                                        <span class="help" x-show="!errors.whatsapp_template && !waTemplates.error" x-text="
                                            waTemplates.loading
                                                ? '{{ __('admin.labels.whatsapp_templates_loading') }}'
                                                : (waTemplates.fallback
                                                    ? '{{ __('admin.labels.whatsapp_template_hint') }}'
                                                    : (waTemplates.list.length === 0
                                                        ? '{{ __('admin.labels.whatsapp_templates_empty') }}'
                                                        : '{{ __('admin.labels.whatsapp_templates_loaded') }}'.replace(':count', waTemplates.list.length)))
                                        "></span>
                                        <span class="help help--error" x-show="waTemplates.error" x-text="waTemplates.error"></span>
                                    </div>

                                    <div class="field-row">
                                        <label><span>{{ __('admin.labels.whatsapp_placeholders') }}</span></label>
                                        <span class="help" style="margin-bottom:6px;">{{ __('admin.labels.whatsapp_placeholders_hint') }}</span>
                                        <div class="wa-placeholders">
                                            <template x-for="(_, idx) in channels.whatsapp.placeholders" :key="'wa-ph-'+idx">
                                                <div class="wa-placeholder-row">
                                                    <span class="wa-placeholder-row__chip"
                                                          x-text="'{' + '{' + (idx + 1) + '}' + '}'"></span>
                                                    <input type="text"
                                                           :value="channels.whatsapp.placeholders[idx]"
                                                           @input="channels.whatsapp.placeholders[idx] = $event.target.value"
                                                           @focus="focusField($event.target, 'channels.whatsapp.placeholders.'+idx)"
                                                           :placeholder="'{{ __('admin.labels.whatsapp_placeholder_value') }}'"
                                                           :disabled="saving">
                                                    <button type="button" class="wa-placeholder-row__rm"
                                                            @click="removeWhatsappPlaceholder(idx)"
                                                            :title="'{{ __('admin.actions.delete') }}'"
                                                            :disabled="saving">×</button>
                                                </div>
                                            </template>
                                        </div>
                                        <button type="button" class="wa-add-row"
                                                @click="addWhatsappPlaceholder()"
                                                :disabled="saving">
                                            + {{ __('admin.labels.whatsapp_add_placeholder') }}
                                        </button>
                                    </div>

                                    <div class="field-row">
                                        <label>{{ __('admin.labels.whatsapp_preview') }}</label>
                                        <div class="wa-preview">
                                            <span class="wa-preview__label">{{ __('admin.labels.whatsapp_preview_label') }}</span>
                                            <template x-if="whatsappPreview">
                                                <span x-text="whatsappPreview"></span>
                                            </template>
                                            <template x-if="!whatsappPreview">
                                                <span class="wa-preview__empty">{{ __('admin.labels.whatsapp_preview_empty') }}</span>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ===== IN-APP NOTIFICATION ===== --}}
                    <div class="ch-row"
                         :data-enabled="form.methods.includes('notification') ? 'true' : 'false'"
                         :data-expanded="expandedChannel === 'notification' ? 'true' : 'false'">
                        <div class="ch-row__head"
                             role="button"
                             tabindex="0"
                             :aria-expanded="expandedChannel === 'notification'"
                             @click="toggleChannelExpansion('notification')"
                             @keydown.enter.prevent="toggleChannelExpansion('notification')"
                             @keydown.space.prevent="toggleChannelExpansion('notification')">
                            <label class="ch-row__check" @click.stop>
                                <input type="checkbox"
                                       :checked="form.methods.includes('notification')"
                                       @change="toggleMethod('notification')"
                                       :aria-label="'{{ __('admin.labels.method_notification') }}'">
                                <span class="ch-row__check-box" aria-hidden="true"></span>
                            </label>
                            <span class="ch-row__icon" aria-hidden="true">🔔</span>
                            <div class="ch-row__main">
                                <div class="ch-row__name">{{ __('admin.labels.channel_notification_title') }}</div>
                                <div class="ch-row__hint">{{ __('admin.labels.channel_notification_hint') }}</div>
                            </div>
                            <span class="ch-row__status" x-text="channelStatusLabel('notification')"></span>
                            <span class="ch-row__chevron" aria-hidden="true">
                                <svg width="14" height="14" 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"/>
                                </svg>
                            </span>
                        </div>
                        <div class="ch-row__body-wrap">
                            <div class="ch-row__body-inner">
                                <div class="ch-row__body">
                                    <template x-if="!form.methods.includes('notification')">
                                        <div class="ch-preview-banner" role="note">
                                            <span aria-hidden="true">ⓘ</span>
                                            <span>{{ __('admin.labels.channel_preview_hint') }}</span>
                                            <button type="button" class="ch-preview-banner__btn"
                                                    @click.stop="toggleMethod('notification')"
                                                    :disabled="saving">
                                                {{ __('admin.labels.channel_enable') }}
                                            </button>
                                        </div>
                                    </template>

                                    <div class="field-row" :class="{ 'field-row--error': errors.notif_title }">
                                        <label for="ch_notif_title">
                                            <span>{{ __('admin.labels.notification_title') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <input id="ch_notif_title" type="text"
                                               x-model="channels.notification.subject"
                                               @focus="focusField($event.target, 'channels.notification.subject')"
                                               @blur="touched.notif_title = true"
                                               :placeholder="'{{ __('admin.labels.notification_title_placeholder') }}'"
                                               :class="errors.notif_title ? 'has-error' : ''"
                                               :aria-invalid="errors.notif_title ? 'true' : 'false'"
                                               :disabled="saving">
                                        <span class="help help--error" x-show="errors.notif_title" x-transition.opacity>
                                            ⚠ {{ __('admin.labels.notification_title_required') }}
                                        </span>
                                    </div>
                                    <div class="field-row" :class="{ 'field-row--error': errors.notif_body }">
                                        <label for="ch_notif_body">
                                            <span>{{ __('admin.labels.notification_body') }}</span>
                                            <span class="required-chip" aria-hidden="true">{{ __('admin.labels.notification_required_inline') }}</span>
                                        </label>
                                        <textarea id="ch_notif_body"
                                                  x-model="channels.notification.body"
                                                  @focus="focusField($event.target, 'channels.notification.body')"
                                                  @blur="touched.notif_body = true"
                                                  :placeholder="'{{ __('admin.labels.notification_body_placeholder') }}'"
                                                  :class="errors.notif_body ? 'has-error' : ''"
                                                  :aria-invalid="errors.notif_body ? 'true' : 'false'"
                                                  :disabled="saving"></textarea>
                                        <span class="help help--error" x-show="errors.notif_body" x-transition.opacity>
                                            ⚠ {{ __('admin.labels.notification_body_required') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ── Shared variable picker (unchanged behavior) ────────── --}}
                <div class="notify-block" x-show="expandedChannel || form.methods.length > 0" x-transition>
                    {{-- The shared variable picker lives below. Each
                         accordion row above carries its own per-channel
                         form; this block now holds ONLY the picker +
                         unknown-vars warning. --}}

                    {{-- ── Template variable picker ── --}}
                    {{-- Flat, ungrouped chip list — same layout as the
                         Automations screen's Template Variables picker.
                         Each chip inserts its {{ token }} into the
                         last-focused field. --}}
                    <div class="tpl-vars-block" x-show="templateVars.length > 0">
                        <h4>{{ __('admin.labels.tpl_vars_title') }}</h4>
                        <p class="help">{{ __('admin.labels.tpl_vars_hint') }}</p>

                        <div class="tpl-chips">
                            @foreach ($templateVars as $v)
                                @php
                                    // Build the literal `{{ key }}` token here — inlining
                                    // it in a Blade `{{ }}` expression makes the compiler
                                    // greedily match the inner `}}` and emit broken PHP.
                                    $chipToken = '{{ ' . $v['key'] . ' }}';
                                @endphp
                                <button type="button" class="tpl-chip"
                                        @click="insertVariable('{{ $v['key'] }}')"
                                        :disabled="saving">{{ $chipToken }}</button>
                            @endforeach
                        </div>
                    </div>

                    {{-- Unknown-variable warning --}}
                    <div class="tpl-unknown" x-show="unknownVars.length > 0">
                        <strong>⚠️</strong>
                        <span>{{ __('admin.labels.tpl_unknown_warning') }}</span>
                        <template x-for="u in unknownVars" :key="u">
                            {{-- Concatenate the braces in JS so Blade never sees `{{` / `}}`
                                 inside an interpolation (Blade's non-greedy parser would
                                 otherwise match the wrong `}}` and produce broken PHP). --}}
                            <code x-text="'{' + '{' + u + '}' + '}'"></code>
                        </template>
                    </div>

                    {{-- The legacy shared "Live preview" block was removed:
                         each per-channel card now renders its own preview
                         (email subject/body, sms body, whatsapp interpolation).
                         The variable picker above still drives every field. --}}
                </div>

                {{-- Empty state when no methods picked --}}
                <div class="notify-block__empty" x-show="form.methods.length === 0">
                    {{ __('admin.labels.notify_disabled_hint') }}
                </div>
            </div>

            {{-- The "side effects" section (cancel-meeting toggle) was
                 intentionally removed: cancellation policy is now driven
                 by `config('microsoft_bookings.auto_cancel_option_ids')`,
                 NOT per-option UI state. See CancelSubjectMeetingsOnLabelAction. --}}

            {{-- Single primary action; breadcrumb provides escape route, so
                 we don't repeat a Cancel link here. Save is locked until the
                 conditional requirements are satisfied (visible warning
                 explains why the button is disabled). --}}
            <div class="actions-bar">
                <span class="actions-bar__hint" x-show="!canSave && form.methods.length > 0" x-transition.opacity>
                    <svg 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">
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                    {{ __('admin.labels.notification_complete_to_save') }}
                </span>
                <button class="btn-primary" @click="save()" :disabled="saving || !canSave">
                    <span x-show="!saving">{{ __('admin.actions.save') }}</span>
                    <span x-show="saving">{{ __('admin.labels.saving') }}…</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Alpine.js is already loaded by admin.layouts.app — adding it here
     a second time double-binds every `@click` / `@focus` / `x-model`,
     which caused the chip-click to insert the variable token twice. --}}
<script src="{{ asset('assets/admin/js/html-editor.js') }}"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('optionEditor', (cfg) => ({
        // Core form — name + status + the currently-armed channels.
        // Channel-specific fields live in `channels` below.
        form: {
            name_en: cfg.option.name_en ?? '',
            name_ar: cfg.option.name_ar ?? '',
            status:  !!cfg.option.status,
            // Linked group as a STRING so the native <select> x-model
            // matches its string option values; '' means "no link".
            group_id: cfg.option.group_id != null ? String(cfg.option.group_id) : '',
            methods: Array.isArray(cfg.option.methods) ? [...cfg.option.methods] : [],
        },

        // Per-channel drafts. Phase 1 stores everything client-side and
        // maps the canonical (email | notification) draft into the
        // legacy `notification_title` / `notification_body` columns on
        // save. Phase 2 will add channel-specific columns + persistence.
        channels: {
            email: {
                subject: cfg.option.notification_title ?? '',
                body:    cfg.option.notification_body  ?? '',
            },
            sms: {
                // SMS now has its own dedicated `sms_body` column. Falls
                // back to notification_body when sms_body is null so
                // existing options that never set an SMS-specific body
                // still show their old shared text on first open.
                body: cfg.option.sms_body ?? cfg.option.notification_body ?? '',
            },
            whatsapp: {
                template_id:  cfg.option.whatsapp_template_id  ?? '',
                placeholders: Array.isArray(cfg.option.whatsapp_placeholders) && cfg.option.whatsapp_placeholders.length > 0
                    ? [...cfg.option.whatsapp_placeholders]
                    : ['', '', ''],
            },
            notification: {
                subject: cfg.option.notification_title ?? '',
                body:    cfg.option.notification_body  ?? '',
            },
        },

        // SendPulse WhatsApp template list state. `loading` toggles a
        // small spinner on the refresh button + dropdown; `error` is
        // a human-readable string we surface beneath the field; `fallback`
        // flips the UI to a plain text input when SendPulse can't be
        // reached so admin work isn't blocked. The list is fetched
        // lazily on first WhatsApp card mount and cached server-side.
        waTemplates: {
            list:     [],
            loading:  false,
            loaded:   false,
            error:    '',
            fallback: false,
        },
        waTemplatesEndpoint: cfg.waTemplatesEndpoint || null,

        supportedMethods: cfg.supportedMethods,
        templateVars:    Array.isArray(cfg.templateVars) ? cfg.templateVars : [],
        templateSamples: cfg.templateSamples || {},

        // Variable-picker focus tracking. The picker is unchanged from
        // a user POV — it inserts a brace-wrapped variable token into
        // whichever input was most recently focused. We track the DOM
        // element directly (not a $ref name) so the same code works for
        // any per-channel input including dynamic WhatsApp placeholders.
        focusedPath: null,         // string, e.g. 'channels.email.subject'
        focusedEl:   null,         // the actual <input> / <textarea> element

        endpoint: cfg.endpoint,
        csrf:     cfg.csrf,

        saving: false,
        toast: { visible: false, message: '', kind: 'ok' },

        // Touched-state per field — gates inline error styling so the
        // form is quiet on first render and loud only after interaction.
        touched: {
            email_subject: false, email_body: false,
            sms_body: false,
            notif_title: false, notif_body: false,
            submitAttempted: false,
        },

        // ── Per-channel emptiness (cheap getters used for validation) ──
        get emailSubjectEmpty() { return !String(this.channels.email.subject ?? '').trim(); },
        get emailBodyEmpty()    { return !String(this.channels.email.body    ?? '').trim(); },
        get smsBodyEmpty()      { return !String(this.channels.sms.body      ?? '').trim(); },
        get notifTitleEmpty()   { return !String(this.channels.notification.subject ?? '').trim(); },
        get notifBodyEmpty()    { return !String(this.channels.notification.body    ?? '').trim(); },

        // ── Error map — visual cues that fire only after touch/submit ──
        get whatsappTemplateEmpty() {
            return !String(this.channels.whatsapp.template_id ?? '').trim();
        },

        get errors() {
            const t = this.touched;
            const trySubmit = t.submitAttempted;
            return {
                email_subject: this.form.methods.includes('email')
                    && this.emailSubjectEmpty
                    && (t.email_subject || trySubmit),
                email_body: this.form.methods.includes('email')
                    && this.emailBodyEmpty
                    && (t.email_body || trySubmit),
                sms_body: this.form.methods.includes('sms')
                    && this.smsBodyEmpty
                    && (t.sms_body || trySubmit),
                notif_title: this.form.methods.includes('notification')
                    && this.notifTitleEmpty
                    && (t.notif_title || trySubmit),
                notif_body: this.form.methods.includes('notification')
                    && this.notifBodyEmpty
                    && (t.notif_body || trySubmit),
                whatsapp_template: this.form.methods.includes('whatsapp')
                    && this.whatsappTemplateEmpty
                    && trySubmit,
            };
        },

        /**
         * Save button gate — armed channels must have their required
         * fields filled. WhatsApp is gated on having a template_id
         * selected (placeholders stay optional — a template with no
         * body parameters is valid).
         */
        get canSave() {
            if (this.form.methods.length === 0) return true;
            if (this.form.methods.includes('email')
                && (this.emailSubjectEmpty || this.emailBodyEmpty)) return false;
            if (this.form.methods.includes('sms') && this.smsBodyEmpty) return false;
            if (this.form.methods.includes('notification')
                && (this.notifTitleEmpty || this.notifBodyEmpty)) return false;
            if (this.form.methods.includes('whatsapp')
                && this.whatsappTemplateEmpty) return false;
            return true;
        },

        /**
         * Alpine init hook. Auto-load the SendPulse template list once
         * the page mounts AND WhatsApp is already armed for this option.
         * If the admin enables WhatsApp later, we lazy-load on the
         * toggle (see toggleMethod()).
         *
         * Also auto-expands the first armed channel on initial load so
         * the admin lands on something meaningful instead of an
         * all-collapsed accordion.
         */
        init() {
            if (this.form.methods.includes('whatsapp')) {
                this.reloadWhatsappTemplates(false);
            }
            // Preferred display order: email → sms → whatsapp → notification.
            const order = ['email', 'sms', 'whatsapp', 'notification'];
            const firstArmed = order.find(c => this.form.methods.includes(c));
            this.expandedChannel = firstArmed || null;
        },

        // ────────────────────────────────────────────────────────────────
        // Channel accordion state (Phase 2 UI refactor)
        // ────────────────────────────────────────────────────────────────

        /**
         * Which row is currently expanded. Only ONE at a time — clicking
         * a different row replaces the value; clicking the same row
         * collapses it.
         */
        expandedChannel: null,

        /**
         * Toggle the open/close state of a channel row. Independent of
         * `form.methods` — admins can preview a channel's config
         * without enabling it.
         */
        toggleChannelExpansion(code) {
            if (!this.supportedMethods.includes(code)) return;
            // Closing a row clears the picker's focus reference so the
            // variable chip can't insert into an off-screen input.
            if (this.expandedChannel === code) {
                this.expandedChannel = null;
                this.focusedEl = null;
                this.focusedPath = null;
            } else {
                this.expandedChannel = code;
            }
        },

        /**
         * Human-readable status pill text for an accordion row:
         *   enabled              → "Active"
         *   not enabled, open    → "Preview"
         *   not enabled, closed  → "Inactive"
         */
        channelStatusLabel(code) {
            if (this.form.methods.includes(code)) {
                return '{{ __('admin.labels.channel_status_active') }}';
            }
            if (this.expandedChannel === code) {
                return '{{ __('admin.labels.channel_status_preview') }}';
            }
            return '{{ __('admin.labels.channel_status_inactive') }}';
        },

        /**
         * Picker insertion target. Called from each editable input's
         * @focus binding. Stores the element AND a logical path so the
         * insertVariable() implementation can both:
         *   - write to the right Alpine state slot
         *   - put the caret back into the same DOM element after insert.
         */
        focusField(el, path) {
            // A plain field took focus — drop any active rich-editor
            // target so the next variable-chip insert lands here, not in
            // the email-body HTML editor.
            window.__activeHtmlEditor = null;
            this.focusedEl   = el || null;
            this.focusedPath = path || null;
        },

        /**
         * Walk a dot-path like 'channels.whatsapp.placeholders.2' against
         * `this` and set its value. Used by insertVariable() to update
         * whichever field the admin last focused.
         */
        setByPath(path, value) {
            if (!path) return;
            const parts = path.split('.');
            const last = parts.pop();
            let obj = this;
            for (const p of parts) {
                if (obj && typeof obj === 'object') obj = obj[p];
            }
            if (obj && typeof obj === 'object') obj[last] = value;
        },

        /**
         * Insert a brace-wrapped variable token into whichever field was last
         * focused. Generic — works for the legacy fields, the new
         * per-channel fields, AND dynamic WhatsApp placeholders.
         *
         * (Literal `{` `{` `}` `}` characters are concatenated in JS to
         * keep them out of the Blade source — Blade's parser would
         * otherwise eat them.)
         */
        insertVariable(varKey) {
            const token = '{' + '{' + varKey + '}' + '}';

            // The email-body rich HTML editor publishes itself globally
            // while focused — insert straight into it at the caret.
            if (window.__activeHtmlEditor) {
                window.__activeHtmlEditor.insertToken(token);
                return;
            }

            const el = this.focusedEl;
            const path = this.focusedPath;

            // Sensible fallback when nothing has been focused yet (e.g.
            // chip clicked immediately on page load): drop into the first
            // armed channel's primary field, otherwise the email subject.
            if (!el || !path) {
                if (this.form.methods.includes('email')) {
                    this.channels.email.subject = (this.channels.email.subject ?? '') + token;
                } else if (this.form.methods.includes('sms')) {
                    this.channels.sms.body = (this.channels.sms.body ?? '') + token;
                } else if (this.form.methods.includes('notification')) {
                    this.channels.notification.subject = (this.channels.notification.subject ?? '') + token;
                } else {
                    this.channels.email.subject = (this.channels.email.subject ?? '') + token;
                }
                return;
            }

            const cur   = el.value ?? '';
            const start = el.selectionStart ?? cur.length;
            const end   = el.selectionEnd   ?? cur.length;
            const next  = cur.substring(0, start) + token + cur.substring(end);

            // Sync back to Alpine state via the logical path so x-model
            // stays consistent. Then push to the DOM element directly so
            // the caret lands where the admin expects.
            this.setByPath(path, next);

            this.$nextTick(() => {
                el.focus();
                const caret = start + token.length;
                try { el.setSelectionRange(caret, caret); } catch (_) {}
            });
        },

        /**
         * Variable substitution — mirrors the PHP TemplateRenderer logic
         * (single-pass, unknown vars stripped). Used for previews; the
         * authoritative render still happens server-side at dispatch.
         */
        renderTemplate(template) {
            if (!template) return '';
            const samples = this.templateSamples || {};
            return template.replace(/\{\{\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*\}\}/g, (_, key) => {
                return Object.prototype.hasOwnProperty.call(samples, key) ? samples[key] : '';
            });
        },

        // ── Per-channel previews (used by each card if it wants one) ──
        get previewEmailSubject() { return this.renderTemplate(this.channels.email.subject); },
        get previewEmailBody()    { return this.renderTemplate(this.channels.email.body); },
        get previewSmsBody()      { return this.renderTemplate(this.channels.sms.body); },
        get previewNotifTitle()   { return this.renderTemplate(this.channels.notification.subject); },
        get previewNotifBody()    { return this.renderTemplate(this.channels.notification.body); },

        /**
         * WhatsApp preview. Builds a sample template body using the
         * placeholders the admin filled in. When Phase 2 lands the real
         * SendPulse template body, we'll swap this stub for the
         * canonical template + substitute the placeholders against it.
         */
        get whatsappPreview() {
            const ph = (this.channels.whatsapp.placeholders || []);
            const tmpl = (this.channels.whatsapp.template_id || '').trim();
            // If at least one placeholder has a value, render them as a
            // simple "Hello, {{1}}!" style block; otherwise show empty.
            const filled = ph.filter(v => String(v ?? '').trim() !== '');
            if (filled.length === 0 && !tmpl) return '';

            const lines = [];
            if (tmpl) lines.push('Template: ' + tmpl);
            ph.forEach((val, idx) => {
                const v = String(val ?? '').trim();
                if (v !== '') lines.push('{' + '{' + (idx + 1) + '}' + '}  →  ' + this.renderTemplate(v));
            });
            return lines.join('\n');
        },

        /**
         * Variables across every editable field that aren't declared in
         * the registry. Shown as a warning above the picker.
         */
        get unknownVars() {
            const allowedKeys = new Set(Object.keys(this.templateSamples || {}));
            const re = /\{\{\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*\}\}/g;
            const found = new Set();
            const scan = (s) => {
                if (!s) return;
                let m;
                while ((m = re.exec(s)) !== null) {
                    if (!allowedKeys.has(m[1])) found.add(m[1]);
                }
            };
            scan(this.channels.email.subject);
            scan(this.channels.email.body);
            scan(this.channels.sms.body);
            scan(this.channels.notification.subject);
            scan(this.channels.notification.body);
            (this.channels.whatsapp.placeholders || []).forEach(scan);
            return Array.from(found);
        },

        toggleMethod(code) {
            if (!this.supportedMethods.includes(code)) return;
            const idx = this.form.methods.indexOf(code);
            if (idx >= 0) {
                this.form.methods.splice(idx, 1);
                // When EVERY channel is off, clear drafts so a re-enable
                // starts fresh and the persisted row stays in sync.
                if (this.form.methods.length === 0) {
                    this.channels.email.subject = '';
                    this.channels.email.body    = '';
                    this.channels.sms.body      = '';
                    this.channels.notification.subject = '';
                    this.channels.notification.body    = '';
                }
            } else {
                this.form.methods.push(code);
                // Lazy-load the SendPulse template list the first time
                // the admin enables WhatsApp on this option. Subsequent
                // toggles are no-ops because the list is cached in state.
                if (code === 'whatsapp' && !this.waTemplates.loaded) {
                    this.reloadWhatsappTemplates(false);
                }
                // Auto-expand the row when the admin enables it via the
                // checkbox — they almost always want to fill in the
                // config next, so save them a second click.
                this.expandedChannel = code;
            }
        },

        // ── WhatsApp placeholder list management ────────────────────────
        addWhatsappPlaceholder() {
            this.channels.whatsapp.placeholders.push('');
        },
        removeWhatsappPlaceholder(idx) {
            if (idx < 0 || idx >= this.channels.whatsapp.placeholders.length) return;
            // Keep at least one slot so the UI never collapses to nothing.
            if (this.channels.whatsapp.placeholders.length === 1) {
                this.channels.whatsapp.placeholders[0] = '';
                return;
            }
            this.channels.whatsapp.placeholders.splice(idx, 1);
        },

        /**
         * Load the SendPulse approved-template list. Called once when the
         * WhatsApp card first becomes visible AND from the manual refresh
         * button. `force=true` adds `?refresh=1` so the server-side cache
         * is busted.
         *
         * Failure mode: any non-OK response flips `fallback=true` so the
         * dropdown swaps to a free-text input — the admin can keep
         * working even when SendPulse is unreachable.
         */
        async reloadWhatsappTemplates(force = false) {
            if (!this.waTemplatesEndpoint) {
                this.waTemplates.fallback = true;
                return;
            }
            this.waTemplates.loading = true;
            this.waTemplates.error   = '';
            try {
                const url = this.waTemplatesEndpoint + (force ? '?refresh=1' : '');
                const res = await fetch(url, {
                    headers: { 'Accept': 'application/json' },
                    credentials: 'same-origin',
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok || body.ok === false) {
                    this.waTemplates.fallback = true;
                    this.waTemplates.error = body.message === 'sendpulse_unavailable'
                        ? '{{ __('admin.labels.whatsapp_templates_unavailable') }}'
                        : (body.message || '{{ __('admin.labels.whatsapp_templates_error') }}');
                    return;
                }
                this.waTemplates.list = Array.isArray(body.templates) ? body.templates : [];
                this.waTemplates.loaded = true;
                this.waTemplates.fallback = this.waTemplates.list.length === 0;
            } catch (e) {
                console.error('reloadWhatsappTemplates failed', e);
                this.waTemplates.fallback = true;
                this.waTemplates.error = '{{ __('admin.labels.whatsapp_templates_error') }}';
            } finally {
                this.waTemplates.loading = false;
            }
        },

        /**
         * Resolve the legacy `notification_title` / `notification_body`
         * columns from the per-channel drafts. Phase 1 ships without
         * schema changes, so we collapse whichever channel is canonical
         * down into those two columns. Priority order:
         *   1. email   (subject + body)
         *   2. notification (subject + body)
         *   3. sms     (body only — title falls back to email/notif if set)
         *   4. whatsapp (template_id + placeholders aren't persisted yet)
         * This is INTENTIONAL Phase 1 scaffolding; Phase 2 will add
         * channel-specific columns and stop using these two as a union.
         */
        resolveLegacyTitleBody() {
            // Resolves the EMAIL / IN-APP shared columns
            // (notification_title + notification_body). SMS is NO LONGER
            // part of this fallback chain — it now persists into its own
            // `sms_body` column (see save() below). This fixes the bug
            // where typing an SMS-specific body was silently overwritten
            // by the email body on save.
            if (this.form.methods.includes('email')) {
                return { title: this.channels.email.subject, body: this.channels.email.body };
            }
            if (this.form.methods.includes('notification')) {
                return { title: this.channels.notification.subject, body: this.channels.notification.body };
            }
            return { title: '', body: '' };
        },

        async save() {
            // Flag a submit attempt so the inline error styling fires even
            // for fields the admin never focused.
            this.touched.submitAttempted = true;
            if (!this.canSave) {
                this.flash('error', 'Please fill the required notification fields for each enabled channel.');
                return;
            }
            this.saving = true;
            try {
                const legacy = this.resolveLegacyTitleBody();
                const body = {
                    name_en: this.form.name_en,
                    name_ar: this.form.name_ar || null,
                    status:  !!this.form.status,
                    // Explicit group link — number when chosen, null to clear.
                    group_id: this.form.group_id ? Number(this.form.group_id) : null,
                    methods: this.form.methods,
                    notification_title: this.form.methods.length ? (legacy.title || null) : null,
                    notification_body:  this.form.methods.length ? (legacy.body  || null) : null,
                    // SMS body is sent INDEPENDENTLY so a typed-in SMS
                    // doesn't get overwritten by the email body. Only
                    // sent when SMS is armed — backend strips it
                    // otherwise.
                    sms_body: this.form.methods.includes('sms')
                        ? (this.channels.sms.body || null)
                        : null,
                    // WhatsApp is now persisted properly. Only send the
                    // fields when WA is armed — otherwise the backend
                    // strips them anyway (see updateOption controller).
                    whatsapp_template_id: this.form.methods.includes('whatsapp')
                        ? (this.channels.whatsapp.template_id || null)
                        : null,
                    whatsapp_placeholders: this.form.methods.includes('whatsapp')
                        ? (this.channels.whatsapp.placeholders || []).map(v => String(v ?? ''))
                        : [],
                };
                const res = await fetch(this.endpoint, {
                    method: 'PATCH',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(body),
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok || data.ok === false) {
                    this.flash('error', data.message || 'Save failed');
                    return;
                }
                // Sync server-corrected values back to the form (e.g. title
                // forcibly nulled when methods ended up empty).
                if (data.option) {
                    this.form.name_en = data.option.name_en ?? this.form.name_en;
                    this.form.name_ar = data.option.name_ar ?? '';
                    this.form.status  = !!data.option.status;
                    this.form.group_id = data.option.group_id != null ? String(data.option.group_id) : '';
                    this.form.methods = Array.isArray(data.option.methods) ? [...data.option.methods] : [];
                    this.form.notification_title = data.option.notification_title ?? '';
                    this.form.notification_body  = data.option.notification_body  ?? '';
                }
                this.flash('ok', 'Saved');
            } catch (e) {
                this.flash('error', e.message);
            } finally {
                this.saving = false;
            }
        },

        flash(kind, message) {
            this.toast = { visible: true, kind, message };
            clearTimeout(this._t);
            this._t = setTimeout(() => this.toast.visible = false, 2500);
        },
    }));
});
</script>
@endpush