@extends('layouts.admin')

@section('style')
    @parent
    {{-- Tokens, faces and control styles are taken from the WhatsApp Flows Studio
         design system (resources/js/wa-flows/preview.css) so this page reads as the
         same product. That stylesheet is bundled into the flows JS and never loads
         here, so the subset this page needs is inlined — no asset build required. --}}
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

        .stg {
            --teal: #075e54;
            --green: #25d366;
            --green-600: #1ebe5d;
            --green-700: #14a44d;
            --ink: #0c211d;
            --muted: #6b7c79;
            --faint: #9aa8a4;
            --line: #e7edea;
            --line-strong: #d6e0dc;
            --surface: #ffffff;
            --surface-2: #f7faf9;
            --canvas: #eef3f1;
            --danger: #d1453b;

            --r-sm: 8px;
            --r-md: 12px;
            --r-lg: 18px;
            --r-pill: 999px;

            --shadow-sm: 0 1px 2px rgba(10, 40, 35, .06), 0 1px 3px rgba(10, 40, 35, .04);
            --shadow-md: 0 4px 14px rgba(10, 40, 35, .08);

            --font-display: "Bricolage Grotesque", system-ui, sans-serif;
            --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
            /* System stack, not a fourth webfont: the mono is for endpoints and
               Meta's replies, where the reader wants exactness, not a voice. */
            --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

            font-family: var(--font-ui);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
        }

        .stg *, .stg *::before, .stg *::after { box-sizing: border-box; }

        /* ---------------- Page head ---------------- */
        .stg-head {
            display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
            padding: 4px 0 18px;
        }
        .stg-head h1 {
            font-family: var(--font-display);
            font-weight: 700; font-size: 24px; letter-spacing: -.02em;
            color: var(--teal); margin: 0;
        }
        .stg-head .stg-channel {
            font-size: 13px; font-weight: 600; color: var(--muted);
            padding-left: 14px; border-left: 1px solid var(--line-strong);
        }

        /* ---------------- Layout ---------------- */
        .stg-wrap { max-width: 880px; }

        /* ---------------- Panel ---------------- */
        .stg-panel {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        .stg-panel-title {
            font-family: var(--font-display);
            font-weight: 700; font-size: 12px;
            text-transform: uppercase; letter-spacing: .09em;
            color: var(--faint); margin: 0 0 14px;
        }
        .stg-panel-body { padding: 18px; }

        /* ---------------- Tabs ---------------- */
        /* The panel head is the switch: each panel's own micro-title becomes its
           tab, so nothing new is introduced to look at — the heads just line up. */
        .stg-tabs {
            display: flex; gap: 0;
            background: var(--surface-2);
            border-bottom: 1px solid var(--line);
        }
        .stg-tab {
            position: relative; appearance: none; cursor: pointer;
            background: none; border: 0; border-radius: 0;
            padding: 15px 20px 13px;
            font-family: var(--font-display);
            font-weight: 700; font-size: 12px;
            text-transform: uppercase; letter-spacing: .09em;
            color: var(--faint);
            transition: color .15s;
        }
        .stg-tab::after {
            content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
            height: 2px; background: var(--green);
            transform: scaleX(0); transform-origin: left;
            transition: transform .18s ease;
        }
        .stg-tab:hover { color: var(--muted); }
        .stg-tab[aria-selected="true"] { color: var(--teal); }
        .stg-tab[aria-selected="true"]::after { transform: scaleX(1); }
        .stg-tab:focus-visible {
            outline: none; color: var(--teal);
            box-shadow: inset 0 0 0 2px rgba(37, 211, 102, .45);
        }
        /* A field can fail validation on a tab you are not looking at. */
        .stg-tab-flag {
            display: inline-block; width: 6px; height: 6px; margin-left: 7px;
            border-radius: 50%; background: var(--danger); vertical-align: 1px;
        }

        /* ---------------- Switch ---------------- */
        .stg-switch { display: flex; align-items: center; gap: 11px; cursor: pointer; }
        .stg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
        .stg-switch-track {
            flex: none; position: relative; width: 40px; height: 23px;
            background: var(--line-strong); border-radius: var(--r-pill);
            transition: background .15s;
        }
        .stg-switch-thumb {
            position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
            background: var(--surface); border-radius: 50%;
            box-shadow: var(--shadow-sm);
            transition: transform .15s;
        }
        .stg-switch input:checked + .stg-switch-track { background: var(--green); }
        .stg-switch input:checked + .stg-switch-track .stg-switch-thumb { transform: translateX(17px); }
        .stg-switch input:focus-visible + .stg-switch-track {
            box-shadow: 0 0 0 3px rgba(37, 211, 102, .3);
        }
        .stg-switch-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }

        /* ---------------- SMS fallback ---------------- */
        .stg-sendto { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
        .stg-notice {
            margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
            background: #fdeee6; color: #7c2d12; border: 1px solid #f5c9b3;
        }
        .stg-panel-actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }

        /* ---------------- Pacing split ---------------- */
        .stg-split { display: flex; gap: 24px; align-items: flex-start; }
        .stg-split-fields { flex: 1; min-width: 0; }
        .stg-split-side {
            width: 274px; flex: none;
            padding-left: 24px; border-left: 1px solid var(--line);
        }

        /* ---------------- Fields ---------------- */
        .stg-field { margin: 0 0 16px; }
        .stg-field:last-child { margin-bottom: 0; }
        .stg-field-label {
            display: block; font-size: 12.5px; font-weight: 600;
            color: var(--ink); margin-bottom: 5px;
        }
        .stg-field-label .req { color: var(--danger); margin-left: 2px; }
        .stg-input {
            width: 100%; max-width: 220px;
            font-family: var(--font-ui); font-size: 13.5px; color: var(--ink);
            background: var(--surface); border: 1px solid var(--line-strong);
            border-radius: var(--r-sm); padding: 9px 11px;
            transition: border-color .15s, box-shadow .15s;
        }
        .stg-input:focus, .stg-input:focus-visible {
            outline: none; border-color: var(--green);
            box-shadow: 0 0 0 3px rgba(37, 211, 102, .14);
        }
        .stg-input.is-invalid { border-color: var(--danger); }
        .stg-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(209, 69, 59, .14); }
        /* The 220px cap suits the numeric fields it was written for, not a message body. */
        textarea.stg-input { max-width: 52ch; resize: vertical; }
        .stg-field-hint { font-size: 11.5px; color: var(--faint); margin-top: 6px; max-width: 52ch; }
        .stg-wf { max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); max-width: 560px; }
        .stg-wf table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ink); }
        .stg-wf th, .stg-wf td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
        .stg-wf tr:last-child td { border-bottom: 0; }
        .stg-wf th { position: sticky; top: 0; background: var(--surface); font-size: 12.5px; font-weight: 600; }
        .stg-wf .stg-wf-check { width: 36px; }
        .stg-wf-search { max-width: 560px; margin-bottom: 8px; }
        .stg-wf-none { margin: 0; padding: 8px 12px; }
        .stg-wf input { width: 16px; height: 16px; accent-color: var(--green-700); }
        .stg-err { display: block; font-size: 11.5px; color: var(--danger); margin-top: 5px; font-weight: 600; }

        /* ---------------- Meta setup: one card per call ----------------
           These three calls are an ordered dependency, not a menu: nothing
           arrives until the app is subscribed, nothing sends until the number is
           registered, and the test proves nothing until both are done. The spine
           states that order — the same device the conversation view uses to show
           a thread's structure — so the step numbers carry the dependency rather
           than decorating it. Each card ends in the response Meta gave, because
           on a wiring screen the reply is the content, not a toast to dismiss. */
        .stg-call {
            position: relative;
            display: grid; grid-template-columns: 26px 1fr; gap: 0 16px;
            padding-bottom: 26px;
        }
        .stg-call:last-child { padding-bottom: 0; }
        /* Drawn from below the node so the node reads as a break in the line. */
        .stg-call:not(:last-child)::before {
            content: ""; position: absolute;
            top: 30px; bottom: 0; left: 12px; width: 2px;
            background: var(--line);
        }
        .stg-call-node {
            position: relative; z-index: 1;
            display: flex; align-items: center; justify-content: center;
            width: 26px; height: 26px; border-radius: 50%;
            background: var(--surface); border: 2px solid var(--line-strong);
            font-family: var(--font-mono); font-size: 11px; font-weight: 600;
            color: var(--faint);
        }
        /* The node carries the outcome of the last run, so the spine reads as
           progress once you have worked down it. */
        .stg-call-node.is-ok { border-color: var(--green); color: var(--green-700); }
        .stg-call-node.is-err { border-color: var(--danger); color: var(--danger); }

        .stg-call-head {
            display: flex; align-items: baseline; justify-content: space-between;
            gap: 12px; flex-wrap: wrap;
            padding-bottom: 8px; border-bottom: 1px solid var(--line);
        }
        .stg-call-title {
            font-family: var(--font-display);
            font-weight: 700; font-size: 15px; letter-spacing: -.01em;
            color: var(--ink); margin: 0;
        }
        .stg-call-edge {
            font-family: var(--font-mono); font-size: 11px;
            color: var(--faint); overflow-wrap: anywhere;
        }
        .stg-call-note {
            font-size: 12.5px; line-height: 1.55; color: var(--muted);
            margin: 10px 0 0; max-width: 62ch;
        }
        .stg-call-note strong { color: var(--ink); font-weight: 700; }
        .stg-call-fields { margin-top: 12px; }
        .stg-call-fields .stg-input + .stg-err { margin-bottom: 2px; }
        .stg-call-actions { margin-top: 14px; }

        /* Meta's own words, kept verbatim and kept on the card that asked. The
           spine node already states the outcome, so the strip carries no second
           status marker of its own — only the reply. */
        .stg-call-out {
            margin: 14px 0 0; padding: 9px 12px;
            border: 1px solid var(--line); border-radius: var(--r-sm);
            background: var(--surface-2);
            font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
            color: var(--muted); overflow-wrap: anywhere;
            animation: stg-call-in .22s ease both;
        }
        .stg-call-out.is-ok {
            border-color: rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .07);
            color: var(--teal);
        }
        .stg-call-out.is-err {
            border-color: rgba(209, 69, 59, .38); background: rgba(209, 69, 59, .05);
            color: var(--danger);
        }
        @keyframes stg-call-in {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: none; }
        }

        @media (max-width: 620px) {
            .stg-call { grid-template-columns: 22px 1fr; gap: 0 12px; }
            .stg-call:not(:last-child)::before { left: 10px; }
            .stg-call-node { width: 22px; height: 22px; font-size: 10px; }
            .stg-call-head { flex-direction: column; gap: 3px; }
        }

        /* ---------------- Live pacing preview ---------------- */
        /* The studio keeps a live preview beside the editor; the equivalent truth on
           this page is the arithmetic the two pacing fields imply, which is otherwise
           invisible until a blast is already running. */
        .stg-rate {
            font-family: var(--font-display);
            font-weight: 700; font-size: 34px; line-height: 1.05;
            letter-spacing: -.03em; color: var(--teal);
        }
        .stg-rate-unit {
            display: block; font-family: var(--font-ui);
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: .09em; color: var(--faint); margin-top: 6px;
        }
        .stg-track {
            display: flex; align-items: center; gap: 4px;
            margin: 18px 0 6px; height: 26px;
        }
        .stg-tick {
            flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
            background: var(--green);
        }
        /* Gap width tracks the interval, so a longer wait visibly stretches the
           strip. Without that it would be a picture of nothing. */
        .stg-gap {
            flex: 0 1 auto; height: 1px; min-width: 8px;
            background: var(--line-strong);
            transition: width .15s;
        }
        .stg-track-caption {
            font-size: 11px; color: var(--faint);
            display: flex; justify-content: space-between; gap: 8px;
        }
        /* The divider that used to sit on .stg-outcome moves up here, so the input
           and the sentence it drives stay on the same side of the line. The
           outcome paragraph gets .stg-outcome-flush to give the border up. */
        .stg-target {
            margin-top: 16px; padding-top: 14px; margin-bottom: 14px;
            border-top: 1px solid var(--line);
        }
        .stg-target .stg-field-label { margin-bottom: 6px; }
        /* Both of these set display:flex above, and an author-stylesheet display
           beats the UA stylesheet's [hidden] { display: none } — so without this
           rule, setting .hidden on them in JS does nothing at all. */
        .stg-track[hidden], .stg-track-caption[hidden] { display: none; }
        .stg-outcome {
            margin-top: 16px; padding-top: 14px;
            border-top: 1px solid var(--line);
            font-size: 12.5px; color: var(--muted); line-height: 1.55;
        }
        .stg-outcome strong { color: var(--ink); font-weight: 700; }
        .stg-outcome-flush { margin-top: 0; padding-top: 0; border-top: 0; }

        /* ---------------- Action bar ---------------- */
        .stg-actions {
            position: sticky; bottom: 0; z-index: 3;
            display: flex; align-items: center; gap: 14px;
            padding: 14px 0 18px; margin-top: 4px;
            background: linear-gradient(to top, var(--canvas) 62%, rgba(238, 243, 241, 0));
        }
        .stg-btn {
            font-family: var(--font-ui); font-weight: 600; font-size: 14px;
            border: 1px solid transparent; border-radius: var(--r-pill);
            padding: 10px 22px; cursor: pointer;
            transition: transform .08s, background .15s, box-shadow .15s;
        }
        .stg-btn-primary {
            background: var(--green); color: #04231a;
            box-shadow: 0 2px 8px rgba(37, 211, 102, .35);
        }
        .stg-btn-primary:hover { background: var(--green-600); }
        .stg-btn-primary:active { transform: translateY(1px); }
        .stg-btn:focus-visible {
            outline: none; box-shadow: 0 0 0 3px rgba(37, 211, 102, .3), 0 0 0 1px var(--green-700);
        }
        .stg-saved {
            font-size: 12.5px; font-weight: 600; color: var(--green-700);
            background: rgba(37, 211, 102, .12);
            border-radius: var(--r-pill); padding: 7px 14px;
        }

        /* AdminLTE paints the content wrapper; tint it to the studio canvas. */
        .content-wrapper:has(.stg) { background: var(--canvas, #eef3f1); }

        @media (max-width: 820px) {
            .stg-split { flex-direction: column; }
            .stg-split-side {
                width: 100%; padding-left: 0; padding-top: 18px;
                border-left: 0; border-top: 1px solid var(--line);
            }
            .stg-tab { padding-left: 14px; padding-right: 14px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .stg * { transition: none !important; animation: none !important; }
        }

        .stg .sr-only {
            position: absolute; width: 1px; height: 1px;
            padding: 0; margin: -1px; overflow: hidden;
            clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
        }
    </style>
@endsection

@section('content')
<section class="content stg">
  <div class="container-fluid">

    <div class="stg-head">
      <h1>Channel Preferences</h1>
      <span class="stg-channel">{{ $channel->name }}</span>
    </div>

    @php
      // A hidden tab must not hide the reason a save failed, so a failing tab opens.
      $agentErr  = $errors->has('agent_mode_timeout_hours');
      $pacingErr = $errors->hasAny(['blast_chunk_size', 'blast_chunk_interval_minutes']);
      // The Meta calls redirect back here, so their tab opens to show the result.
      // They are their own requests, so they never collide with a validation error.
      $setupKeys = ['wh_success', 'wh_error', 'reg_success', 'reg_error', 'msg_success', 'msg_error'];
      $onSetup   = collect($setupKeys)->contains(fn ($k) => session()->has($k))
                   || $errors->hasAny(['test_to', 'test_body']);
      // SMS fallback saves through its own form and comes back with ?tab=sms-fallback.
      $onSms     = ! $onSetup && (request('tab') === 'sms-fallback' || $errors->hasAny(['sms_fallback_enabled', 'sms_fallback_workflows.*']));
      $onPacing  = $pacingErr && ! $agentErr && ! $onSetup && ! $onSms;
      $onAgent   = ! $onPacing && ! $onSetup && ! $onSms;

      // The Meta cards name the edge they call, so they need the account they
      // call it on. Missing pieces render as placeholders rather than blanks.
      $acct = $channel->waAccount;
      $ver  = config('whatsapp.graph_version');
    @endphp

    {{-- One form across both tabs: the route validates every field on each PUT,
         so a tab with its own form would fail the other tab's rules. --}}
    <form action="{{ route('setting.update', ['channel' => $channel]) }}" method="POST" class="stg-wrap">
      @csrf
      @method('PUT')

      <div class="stg-panel">
        <div class="stg-tabs" role="tablist" aria-label="Channel preferences">
          <button type="button" class="stg-tab" role="tab" id="stg-tab-agent"
            aria-controls="stg-panel-agent" aria-selected="{{ $onAgent ? 'true' : 'false' }}"
            tabindex="{{ $onAgent ? '0' : '-1' }}">
            Agent mode
            @if ($agentErr)
              <span class="stg-tab-flag" aria-hidden="true"></span>
              <span class="sr-only">has an error</span>
            @endif
          </button>
          <button type="button" class="stg-tab" role="tab" id="stg-tab-pacing"
            aria-controls="stg-panel-pacing" aria-selected="{{ $onPacing ? 'true' : 'false' }}"
            tabindex="{{ $onPacing ? '0' : '-1' }}">
            Blast pacing
            @if ($pacingErr)
              <span class="stg-tab-flag" aria-hidden="true"></span>
              <span class="sr-only">has an error</span>
            @endif
          </button>
          <button type="button" class="stg-tab" role="tab" id="stg-tab-sms"
            aria-controls="stg-panel-sms" aria-selected="{{ $onSms ? 'true' : 'false' }}"
            tabindex="{{ $onSms ? '0' : '-1' }}">
            SMS fallback
            @error('sms_fallback_enabled')
              <span class="stg-tab-flag" aria-hidden="true"></span>
              <span class="sr-only">has an error</span>
            @enderror
          </button>
          <button type="button" class="stg-tab" role="tab" id="stg-tab-setup"
            aria-controls="stg-panel-setup" aria-selected="{{ $onSetup ? 'true' : 'false' }}"
            tabindex="{{ $onSetup ? '0' : '-1' }}">
            Meta setup
          </button>
        </div>

        <div class="stg-panel-body" role="tabpanel" id="stg-panel-agent"
          aria-labelledby="stg-tab-agent" @unless ($onAgent) hidden @endunless>
          <div class="stg-split">
            <div class="stg-split-fields">
              <div class="stg-field">
                {{-- Hidden 0 first: an unticked checkbox posts nothing, and the
                     request requires the key so a missing one is a real error. --}}
                <input type="hidden" name="agent_mode_enabled" value="0">
                <label class="stg-switch">
                  <input type="checkbox" name="agent_mode_enabled" value="1"
                    id="agent_mode_enabled" {{ old('agent_mode_enabled', $channel->agent_mode_enabled) ? 'checked' : '' }}>
                  <span class="stg-switch-track"><span class="stg-switch-thumb"></span></span>
                  <span class="stg-switch-text">Let customers hand off to a human agent</span>
                </label>
                @error('agent_mode_enabled')
                <span class="stg-err">{{ $message }}</span>
                @enderror
                <p class="stg-field-hint">
                  When off, buttons that trigger agent mode behave like any other
                  button and the journey continues.
                </p>
                @unless ($channel->agent_mode_enabled)
                <p class="stg-field-hint">
                  Conversations already in agent mode keep running and still end
                  after the hours below.
                </p>
                @endunless
              </div>

              <div class="stg-field">
                <label class="stg-field-label" for="agent_mode_timeout_hours">
                  Auto-end agent mode after (hours) <span class="req">*</span>
                </label>
                <input type="number" min="1" max="24" required
                  class="stg-input @error('agent_mode_timeout_hours') is-invalid @enderror"
                  id="agent_mode_timeout_hours" name="agent_mode_timeout_hours"
                  value="{{ old('agent_mode_timeout_hours', $channel->agent_mode_timeout_hours) }}">
                @error('agent_mode_timeout_hours')
                <span class="stg-err">{{ $message }}</span>
                @enderror
                <p class="stg-field-hint">
                  When a customer taps a button that triggers agent mode, the bot stops
                  replying until an agent ends it from the chat page, or this many hours
                  pass.
                </p>
              </div>
            </div>

            <aside class="stg-split-side">
              <h3 class="stg-panel-title">The 24-hour limit</h3>
              <p class="stg-outcome stg-outcome-flush">
                WhatsApp only allows free-form replies within <strong>24 hours</strong>
                of the customer's last message. An agent-mode session cannot outlast
                that window, so this setting caps at 24.
              </p>
            </aside>
          </div>
        </div>

        <div class="stg-panel-body" role="tabpanel" id="stg-panel-pacing"
          aria-labelledby="stg-tab-pacing" @if (! $onPacing) hidden @endif>
          <div class="stg-split">
            <div class="stg-split-fields">
              <div class="stg-field">
                <label class="stg-field-label" for="blast_chunk_size">Recipients per chunk</label>
                <input type="number" min="1" max="1000" placeholder="10"
                  class="stg-input @error('blast_chunk_size') is-invalid @enderror"
                  id="blast_chunk_size" name="blast_chunk_size"
                  value="{{ old('blast_chunk_size', $channel->blast_chunk_size) }}">
                @error('blast_chunk_size')
                <span class="stg-err">{{ $message }}</span>
                @enderror
              </div>

              <div class="stg-field">
                <label class="stg-field-label" for="blast_chunk_interval_minutes">Minutes between chunks</label>
                <input type="number" min="1" max="1440" placeholder="5"
                  class="stg-input @error('blast_chunk_interval_minutes') is-invalid @enderror"
                  id="blast_chunk_interval_minutes" name="blast_chunk_interval_minutes"
                  value="{{ old('blast_chunk_interval_minutes', $channel->blast_chunk_interval_minutes) }}">
                @error('blast_chunk_interval_minutes')
                <span class="stg-err">{{ $message }}</span>
                @enderror
                <p class="stg-field-hint">
                  A blast goes out one chunk per interval instead of all at once, so a
                  large recipient list is spread over time. Leave both blank to use the
                  defaults (10 recipients every 5 minutes).
                </p>
              </div>
            </div>

            <aside class="stg-split-side">
              <h3 class="stg-panel-title">Sending rate</h3>
              <div class="stg-rate" id="stg-rate-value">—</div>
              <span class="stg-rate-unit" id="stg-rate-unit">recipients per hour</span>

              <div class="stg-track" aria-hidden="true">
                <span class="stg-tick"></span><span class="stg-gap"></span>
                <span class="stg-tick"></span><span class="stg-gap"></span>
                <span class="stg-tick"></span><span class="stg-gap"></span>
                <span class="stg-tick"></span>
              </div>
              <div class="stg-track-caption">
                <span>first chunk</span>
                <span id="stg-track-span">—</span>
              </div>

              {{-- Drives the sentence below it, nothing else — the rate headline is
                   size × 60/interval and does not depend on it. No name attribute:
                   it posts nothing and persists nothing. Text, not number, because
                   a nameless input is still a constraint-validation candidate, so a
                   bad value in a type="number" would block the real save from a tab
                   the user may not be looking at. --}}
              <div class="stg-target">
                <label class="stg-field-label" for="stg-target">Target recipients</label>
                <input type="text" inputmode="numeric" placeholder="1000"
                  class="stg-input" id="stg-target" autocomplete="off">
              </div>

              <p class="stg-outcome stg-outcome-flush" id="stg-outcome" aria-live="polite"></p>
            </aside>
          </div>
        </div>

        {{-- Its fields belong to the outside #stg-sms form (form="stg-sms"), so the
             switch saves on its own route without the other tabs' required fields. --}}
        <div class="stg-panel-body" role="tabpanel" id="stg-panel-sms"
          aria-labelledby="stg-tab-sms" @unless ($onSms) hidden @endunless>
          @if (!$esHost)
            <p class="stg-notice">This WhatsApp number has no ES integration, so SMS fallback can't send anything. Set up ES for this number first.</p>
          @endif
          <div class="stg-field">
            <input type="hidden" name="sms_fallback_enabled" value="0" form="stg-sms">
            <label class="stg-switch">
              <input type="checkbox" name="sms_fallback_enabled" value="1" id="sms_fallback_enabled" form="stg-sms"
                {{ old('sms_fallback_enabled', $channel->sms_fallback_enabled) ? 'checked' : '' }}>
              <span class="stg-switch-track"><span class="stg-switch-thumb"></span></span>
              <span class="stg-switch-text">Send an SMS through ES when WhatsApp can't deliver a notification ES sent</span>
            </label>
            @error('sms_fallback_enabled')
            <span class="stg-err">{{ $message }}</span>
            @enderror
            <p class="stg-field-hint">
              Applies to template messages ES sends through the API. ES writes the SMS from its own
              templates using the template and receipt status of the failed message.
            </p>
          </div>
          @if ($esHost)
            <div class="stg-field">
              <span class="stg-field-label">Sends to</span>
              <p class="stg-sendto">{{ $esHost }}</p>
              <p class="stg-field-hint">
                This WhatsApp number's ES integration, the same one its other ES features use.
              </p>
            </div>
          @endif
          <div class="stg-field">
            <span class="stg-field-label" id="sms-fallback-workflows-label">Sends that fall back to SMS</span>
            @php($ticked = old('sms_fallback_workflows', $channel->sms_fallback_workflows ?? []))
            <input type="search" id="sms-fallback-search" class="stg-input stg-wf-search"
              placeholder="Search sends" aria-label="Search sends" autocomplete="off">
            <div class="stg-wf">
              <table aria-labelledby="sms-fallback-workflows-label">
                <thead>
                  <tr>
                    <th class="stg-wf-check"><input type="checkbox" id="sms-fallback-all" aria-label="Select all shown sends"></th>
                    <th>Sent through</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="stg-wf-check">
                      <input type="checkbox" class="sms-fallback-wf" id="sms-fallback-direct" form="stg-sms"
                        name="sms_fallback_direct_sends" value="1" {{ old('sms_fallback_direct_sends', $channel->sms_fallback_direct_sends) ? 'checked' : '' }}>
                    </td>
                    <td><label for="sms-fallback-direct">Single template sends (POST /api/v1/messages)</label></td>
                  </tr>
                  @foreach ($workflows as $i => $name)
                    <tr>
                      <td class="stg-wf-check">
                        <input type="checkbox" class="sms-fallback-wf" id="sms-fallback-wf-{{ $i }}" form="stg-sms"
                          name="sms_fallback_workflows[]" value="{{ $name }}" {{ in_array($name, $ticked, true) ? 'checked' : '' }}>
                      </td>
                      <td><label for="sms-fallback-wf-{{ $i }}">{{ $name }}</label></td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              <p class="stg-field-hint stg-wf-none" id="sms-fallback-none" hidden>Nothing matches.</p>
            </div>
            @error('sms_fallback_workflows.*')
            <span class="stg-err">{{ $message }}</span>
            @enderror
            <p class="stg-field-hint">
              While the switch is on, only ticked sends fall back: workflow sends (POST /api/v1/workflow)
              by their workflow, single template sends (POST /api/v1/messages) by their own row.
            </p>
          </div>
          <div class="stg-panel-actions">
            <button type="submit" form="stg-sms" class="stg-btn stg-btn-primary">Save changes</button>
            @if (session('success') && $onSms)
              <span class="stg-saved">{{ session('success') }}</span>
            @endif
          </div>
        </div>

        <div class="stg-panel-body" role="tabpanel" id="stg-panel-setup"
          aria-labelledby="stg-tab-setup" @unless ($onSetup) hidden @endunless>

          {{-- Each call gets its own card, in the order they have to be run: the
               spine carries that dependency, so the numbers are the content and
               not an ornament. The buttons and inputs target the forms outside
               the settings form by id, since nested forms are invalid. --}}
          <article class="stg-call">
            <span class="stg-call-node {{ session('wh_success') ? 'is-ok' : (session('wh_error') ? 'is-err' : '') }}">01</span>
            <div>
              <header class="stg-call-head">
                <h3 class="stg-call-title">Subscribe the app</h3>
                <code class="stg-call-edge">POST /{{ $ver }}/{{ optional($acct)->wa_waba_id ?: '{waba-id}' }}/subscribed_apps</code>
              </header>
              <p class="stg-call-note">
                Until this runs, Meta has nowhere to send incoming messages and
                delivery updates for this account. Running it twice changes
                nothing. The callback URL itself lives on the Meta app, not here.
              </p>
              <div class="stg-call-actions">
                <button type="submit" form="stg-subscribe" class="stg-btn stg-btn-primary">
                  Subscribe the app
                </button>
              </div>
              @if (session('wh_success'))
              <p class="stg-call-out is-ok">{{ session('wh_success') }}</p>
              @elseif (session('wh_error'))
              <p class="stg-call-out is-err">{{ session('wh_error') }}</p>
              @endif
            </div>
          </article>

          <article class="stg-call">
            <span class="stg-call-node {{ session('reg_success') ? 'is-ok' : (session('reg_error') ? 'is-err' : '') }}">02</span>
            <div>
              <header class="stg-call-head">
                <h3 class="stg-call-title">Register the number</h3>
                <code class="stg-call-edge">POST /{{ $ver }}/{{ optional($acct)->wa_phone_number_id ?: '{phone-number-id}' }}/register</code>
              </header>
              <p class="stg-call-note">
                Activates {{ optional($acct)->display_phone_number ?: 'this number' }} for
                sending. Today's date is the two-step PIN:
                <strong>{{ now()->format('mdy') }}</strong>. Write it down — Meta
                asks for this PIN, not tomorrow's, if the number is registered again.
              </p>
              <div class="stg-call-actions">
                <button type="submit" form="stg-register" class="stg-btn stg-btn-primary">
                  Register the number
                </button>
              </div>
              @if (session('reg_success'))
              <p class="stg-call-out is-ok">{{ session('reg_success') }}</p>
              @elseif (session('reg_error'))
              <p class="stg-call-out is-err">{{ session('reg_error') }}</p>
              @endif
            </div>
          </article>

          <article class="stg-call">
            <span class="stg-call-node {{ session('msg_success') ? 'is-ok' : (session('msg_error') ? 'is-err' : '') }}">03</span>
            <div>
              <header class="stg-call-head">
                <h3 class="stg-call-title">Send a test message</h3>
                <code class="stg-call-edge">POST /{{ $ver }}/{{ optional($acct)->wa_phone_number_id ?: '{phone-number-id}' }}/messages</code>
              </header>
              <p class="stg-call-note">
                Proof the two steps above took. Free-form text reaches someone only
                within 24 hours of their last message to you; outside that window
                Meta rejects it and only a template gets through.
              </p>
              <div class="stg-call-fields">
                <div class="stg-field">
                  <label class="stg-field-label" for="test_to">To</label>
                  {{-- form="stg-test" on the inputs too, not just the button: without
                       it these sit inside the settings form and Save would post them. --}}
                  <input type="text" inputmode="numeric" form="stg-test"
                    class="stg-input @error('test_to') is-invalid @enderror"
                    id="test_to" name="test_to" placeholder="639174593801"
                    value="{{ old('test_to') }}">
                  @error('test_to')
                  <span class="stg-err">{{ $message }}</span>
                  @enderror
                </div>
                <div class="stg-field">
                  <label class="stg-field-label" for="test_body">Message</label>
                  <textarea form="stg-test" rows="3" maxlength="4096"
                    class="stg-input @error('test_body') is-invalid @enderror"
                    id="test_body" name="test_body"
                    placeholder="Type the text to send">{{ old('test_body') }}</textarea>
                  @error('test_body')
                  <span class="stg-err">{{ $message }}</span>
                  @enderror
                </div>
              </div>
              <div class="stg-call-actions">
                <button type="submit" form="stg-test" class="stg-btn stg-btn-primary">
                  Send a test message
                </button>
              </div>
              @if (session('msg_success'))
              <p class="stg-call-out is-ok">{{ session('msg_success') }}</p>
              @elseif (session('msg_error'))
              <p class="stg-call-out is-err">{{ session('msg_error') }}</p>
              @endif
            </div>
          </article>
        </div>
      </div>

      {{-- Hidden on the Meta setup tab: nothing there is a saved preference, so a
           Save button under those cards would only suggest they need saving. --}}
      <div class="stg-actions" @if ($onSetup || $onSms) hidden @endif>
        <button type="submit" class="stg-btn stg-btn-primary">Save changes</button>
        @if (session('success') && ! $onSms)
          <span class="stg-saved">{{ session('success') }}</span>
        @endif
      </div>
    </form>

    {{-- Kept out of the settings form: the Meta setup buttons target these by id,
         so neither call carries the preference fields along with it. --}}
    <form id="stg-subscribe" method="POST"
      action="{{ route('setting.subscribe_app', ['channel' => $channel]) }}">
      @csrf
    </form>
    <form id="stg-register" method="POST"
      action="{{ route('setting.register_phone', ['channel' => $channel]) }}">
      @csrf
    </form>
    <form id="stg-sms" method="POST"
      action="{{ route('setting.sms-fallback.update', ['channel' => $channel], false) }}">
      @csrf
      @method('PUT')
    </form>
    <form id="stg-test" method="POST"
      action="{{ route('setting.test_message', ['channel' => $channel]) }}">
      @csrf
    </form>

  </div>
</section>
@endsection

@section('script')
    @parent
    <script>
        // SMS fallback: search filters the rows; the header checkbox acts on the rows
        // currently shown and reflects a partial selection. Hidden rows keep their ticks.
        (function () {
            var all = document.getElementById('sms-fallback-all');
            if (!all) return;
            var search = document.getElementById('sms-fallback-search');
            var none = document.getElementById('sms-fallback-none');
            var boxes = [].slice.call(document.querySelectorAll('.sms-fallback-wf'));
            function shown() {
                return boxes.filter(function (b) { return !b.closest('tr').hidden; });
            }
            function sync() {
                var rows = shown();
                var n = rows.filter(function (b) { return b.checked; }).length;
                all.checked = rows.length > 0 && n === rows.length;
                all.indeterminate = n > 0 && n < rows.length;
                all.disabled = rows.length === 0;
                none.hidden = rows.length > 0;
            }
            all.addEventListener('change', function () {
                shown().forEach(function (b) { b.checked = all.checked; });
            });
            boxes.forEach(function (b) { b.addEventListener('change', sync); });
            search.addEventListener('input', function () {
                var q = search.value.trim().toLowerCase();
                boxes.forEach(function (b) {
                    var row = b.closest('tr');
                    row.hidden = q !== '' && row.textContent.toLowerCase().indexOf(q) === -1;
                });
                sync();
            });
            // Enter in the search box must not submit the form.
            search.addEventListener('keydown', function (e) { if (e.key === 'Enter') e.preventDefault(); });
            sync();
        })();
    </script>
    <script>
        // Tabs. The panels stay in one form, so switching only toggles visibility.
        (function () {
            var tabs = [].slice.call(document.querySelectorAll('.stg-tab'));
            if (!tabs.length) { return; }

            function select(tab, focus) {
                tabs.forEach(function (t) {
                    var on = t === tab;
                    t.setAttribute('aria-selected', on ? 'true' : 'false');
                    t.tabIndex = on ? 0 : -1;
                    document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
                });
                // The Meta setup cards each post their own form, so the settings
                // Save button has nothing to do while that tab is open.
                var actions = document.querySelector('.stg-actions');
                if (actions) { actions.hidden = tab.id === 'stg-tab-setup' || tab.id === 'stg-tab-sms'; }
                if (focus) { tab.focus(); }
            }

            tabs.forEach(function (tab, i) {
                tab.addEventListener('click', function () { select(tab); });
                tab.addEventListener('keydown', function (e) {
                    var step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
                    if (!step) { return; }
                    e.preventDefault();
                    select(tabs[(i + step + tabs.length) % tabs.length], true);
                });
            });

            // A required field on the hidden tab is unfocusable, so the browser would
            // block the save with nothing on screen to explain it. Open its tab first.
            document.addEventListener('invalid', function (e) {
                var panel = e.target.closest('[role="tabpanel"]');
                if (!panel || !panel.hidden) { return; }
                select(document.getElementById(panel.getAttribute('aria-labelledby')));
            }, true);
        })();
    </script>
    <script>
        // Live pacing readout. Mirrors the job's own fallback: a blank or unusable
        // field means the channel runs on the defaults, so the preview shows those
        // rather than going blank.
        (function () {
            var DEFAULT_SIZE = 10;
            var DEFAULT_INTERVAL = 5;
            var DEFAULT_TARGET = 1000;

            var sizeEl = document.getElementById('blast_chunk_size');
            var intervalEl = document.getElementById('blast_chunk_interval_minutes');
            var targetEl = document.getElementById('stg-target');
            var rateEl = document.getElementById('stg-rate-value');
            var unitEl = document.getElementById('stg-rate-unit');
            var spanEl = document.getElementById('stg-track-span');
            var outcomeEl = document.getElementById('stg-outcome');
            var trackEl = document.querySelector('.stg-track');
            var captionEl = document.querySelector('.stg-track-caption');
            // Document order regardless of the order the selectors are written:
            // tick, gap, tick, gap, tick, gap, tick.
            var stepEls = document.querySelectorAll('.stg-tick, .stg-gap');
            var gapEls = document.querySelectorAll('.stg-gap');

            if (!sizeEl || !intervalEl || !targetEl || !rateEl) { return; }

            function readField(el, fallback) {
                // Strip rather than trim: the target field is type="text", so commas
                // and spaces arrive. The two number inputs can only contain digits or
                // a leading '-', and turning "-25" into 25 instead of the default is
                // harmless there — min="1" already blocks negatives at submit.
                var raw = el.value.replace(/[^0-9]/g, '');
                if (raw === '') { return { value: fallback, isDefault: true }; }
                var n = parseInt(raw, 10);
                if (isNaN(n) || n < 1) { return { value: fallback, isDefault: true }; }
                return { value: n, isDefault: false };
            }

            function humanise(minutes) {
                if (minutes < 60) { return minutes + 'm'; }
                var h = Math.floor(minutes / 60);
                var m = minutes % 60;
                return m === 0 ? h + 'h' : h + 'h ' + m + 'm';
            }

            function render() {
                var size = readField(sizeEl, DEFAULT_SIZE);
                var interval = readField(intervalEl, DEFAULT_INTERVAL);
                var target = readField(targetEl, DEFAULT_TARGET);

                var perHour = Math.round(size.value * (60 / interval.value));
                var chunks = Math.ceil(target.value / size.value);
                var lastStarts = (chunks - 1) * interval.value;

                rateEl.textContent = perHour.toLocaleString();
                unitEl.textContent = 'recipients per hour';

                // A target below the chunk size is a state the hardcoded 1000 could
                // never reach: one chunk has no rhythm to draw, so the strip goes
                // and the sentence carries it alone.
                var single = chunks < 2;
                trackEl.hidden = single;
                captionEl.hidden = single;

                // Assigned on every step every render, not only on the ones being
                // hidden — otherwise raising the target again leaves the strip short.
                var shown = Math.min(chunks, 4);
                var visible = shown * 2 - 1;
                for (var s = 0; s < stepEls.length; s++) {
                    stepEls[s].hidden = s >= visible;
                }

                if (!single) {
                    spanEl.textContent = 'chunk ' + shown +
                        ' at +' + humanise(interval.value * (shown - 1));
                }

                // 1 minute reads as the narrowest gap, 60+ as the widest.
                var width = Math.min(64, Math.max(8, Math.round(interval.value * 1.1) + 6));
                for (var i = 0; i < gapEls.length; i++) {
                    gapEls[i].style.width = width + 'px';
                }

                var usingDefaults = size.isDefault && interval.isDefault;
                var defaultsNote = usingDefaults
                    ? ' Both fields are blank, so this channel uses the defaults.'
                    : '';

                outcomeEl.innerHTML = single
                    ? 'A <strong>' + target.value.toLocaleString() +
                      '</strong>-recipient blast fits in a single chunk and goes out at once.' +
                      defaultsNote
                    : 'A <strong>' + target.value.toLocaleString() +
                      '</strong>-recipient blast splits into <strong>' +
                      chunks.toLocaleString() + '</strong> chunks. The last one starts about <strong>' +
                      humanise(lastStarts) + '</strong> after the first.' + defaultsNote;
            }

            sizeEl.addEventListener('input', render);
            intervalEl.addEventListener('input', render);
            targetEl.addEventListener('input', render);
            render();
        })();
    </script>
@endsection