@extends('layouts.app')
@section('title', 'API 文件')

@push('styles')
<style>
.settings-page   { max-width: 1300px; margin: 0 auto; padding: 32px 24px 60px; }
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-sidebar { position: sticky; top: 72px; }

/* Header card */
.sidebar-user-card {
  background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  border-radius: 16px; padding: 18px 16px 16px; color: #fff;
  margin-bottom: 10px; box-shadow: 0 4px 20px rgba(37,99,235,.35);
}
.sidebar-user-card .su-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 10px;
}
.sidebar-user-card .su-title { font-size: .9rem; font-weight: 700; margin-bottom: 2px; }
.sidebar-user-card .su-desc  { font-size: .72rem; opacity: .78; line-height: 1.5; }

/* Nav list */
.settings-nav { list-style: none; padding: 4px; margin: 0; background: #fff; border-radius: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.settings-nav li + li { border-top: 1px solid #f3f4f6; }
.settings-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 10px;
  color: #4b5563; font-size: .845rem; font-weight: 500;
  text-decoration: none; transition: background .12s, color .12s;
}
.settings-nav a:hover  { background: #eff6ff; color: #1d4ed8; }
.settings-nav a.active { background: #dbeafe; color: #1e40af; font-weight: 700; }
.settings-nav .nav-icon { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; }
.settings-nav .nav-cnt {
  margin-left: auto; font-size: .65rem; font-weight: 700;
  background: #bfdbfe; color: #1e3a8a;
  padding: 1px 7px; border-radius: 20px; min-width: 20px; text-align: center;
}

/* Panel */
.section-panel { display: none; }
.section-panel.active { display: block; }

/* Settings card */
.sc {
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 18px rgba(0,0,0,.04);
  margin-bottom: 14px; overflow: hidden;
}
.sc-head {
  padding: 15px 20px 13px; width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 13px;
  cursor: pointer; user-select: none;
}
.sc-head:hover { background: #fafbfc; }
.sc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.sc-head-text { flex: 1; min-width: 0; }
.sc-head-text h3 { font-size: .9rem; font-weight: 700; color: #111827; margin: 0 0 2px; }
.sc-head-text p  { font-size: .75rem; color: #9ca3af; margin: 0; font-family: monospace; }
.sc-chevron { color: #9ca3af; font-size: .8rem; transition: transform .2s; flex-shrink: 0; }
.sc.collapsed .sc-chevron { transform: rotate(-90deg); }
.sc-body { padding: 18px 20px 20px; }

/* Method */
.method-badge { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; color: #fff; letter-spacing: .03em; vertical-align: middle; margin-right: 5px; }
.badge-GET    { background: #16a34a; }
.badge-POST   { background: #2563eb; }
.badge-PUT    { background: #d97706; }
.badge-DELETE { background: #dc2626; }

/* Params */
.params-table { font-size: 12.5px; }
.params-table thead th { font-size: 11px; letter-spacing: .04em; background: #f8fafc; }

/* Code tabs */
.code-tabs { border-radius: 10px; overflow: hidden; border: 1px solid #2d333b; }
.code-tab-bar { display: flex; background: #21262d; border-bottom: 1px solid #2d333b; }
.code-tab-bar button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: #8b949e; font-size: 12px; padding: 7px 14px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.code-tab-bar button:hover  { color: #c9d1d9; }
.code-tab-bar button.active { color: #58a6ff; border-bottom-color: #58a6ff; }
.code-pane { display: none; position: relative; }
.code-pane.active { display: block; }
.code-pane pre {
  margin: 0; padding: 14px 16px; background: #0d1117;
  color: #c9d1d9; font-size: 12px; overflow-x: auto;
  white-space: pre; word-break: normal; max-height: 340px;
}
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  background: #21262d; border: 1px solid #444c56; color: #8b949e;
  cursor: pointer; transition: background .1s, color .1s;
}
.copy-btn:hover { background: #2d333b; color: #c9d1d9; }

.response-pre {
  background: #0d1117; color: #3fb950; font-size: 12px;
  border-radius: 10px; padding: 14px 16px; margin: 0;
  overflow-x: auto; max-height: 300px; white-space: pre;
}

/* Panel title bar */
.panel-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9;
}
.panel-header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: #111827; }
.panel-header p  { margin: 0; font-size: .8rem; color: #9ca3af; }

/* Responsive */
@media (max-width: 991px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .sidebar-user-card { display: none; }
  .settings-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 10px; }
  .settings-nav li + li { border-top: none; border-left: 1px solid #f3f4f6; }
  .settings-nav a { white-space: nowrap; }
  .section-panel { display: block; }
}

/* ── Test panel ── */
.test-panel {
  border-top: 2px dashed #e2e8f0;
  padding: 18px 20px 20px;
  background: #f8faff;
  border-radius: 0 0 16px 16px;
}
.tp-section-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #9ca3af; display: block; margin-bottom: 8px;
}
.tp-param-row {
  display: grid; grid-template-columns: 130px 64px 1fr;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.tp-param-label { font-family: monospace; font-size: 12px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-param-loc   { font-size: 9px; text-align: center; }
.tp-res-pre {
  background: #0d1117; color: #e6edf3; font-size: 12px;
  border-radius: 10px; padding: 14px 16px; margin: 0;
  overflow-x: auto; max-height: 260px; white-space: pre; font-family: monospace;
}
.test-toggle-row {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 10px;
}

/* Dark mode */
[data-bs-theme="dark"] .test-panel { background: #161b22; border-top-color: #30363d; }
[data-bs-theme="dark"] .test-toggle-row { border-top-color: #2e3340; }

/* Dark mode */
[data-bs-theme="dark"] .settings-nav { background: #1c1f26; }
[data-bs-theme="dark"] .settings-nav li + li { border-top-color: #2e3340; }
[data-bs-theme="dark"] .settings-nav a { color: #9ca3af; }
[data-bs-theme="dark"] .settings-nav a:hover  { background: #1e2a3a; color: #93c5fd; }
[data-bs-theme="dark"] .settings-nav a.active { background: #1e3a5c; color: #93c5fd; }
[data-bs-theme="dark"] .settings-nav .nav-cnt { background: #1e3a5c; color: #93c5fd; }
[data-bs-theme="dark"] .sc { background: #1c1f26; box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.15); }
[data-bs-theme="dark"] .sc-head { border-bottom-color: #2e3340; }
[data-bs-theme="dark"] .sc-head:hover { background: #21262d; }
[data-bs-theme="dark"] .sc-head-text h3 { color: #f9fafb; }
[data-bs-theme="dark"] .sc-head-text p  { color: #6b7280; }
[data-bs-theme="dark"] .panel-header { border-bottom-color: #2e3340; }
[data-bs-theme="dark"] .panel-header h4 { color: #f9fafb; }
[data-bs-theme="dark"] .params-table thead th { background: #21262d; color: #9ca3af; }
[data-bs-theme="dark"] .params-table { color: #c9d1d9; }
[data-bs-theme="dark"] .params-table td, [data-bs-theme="dark"] .params-table th { border-color: #2e3340; }
</style>
@endpush

@section('content')
<div class="settings-page">
<div class="settings-layout">

  {{-- ─── 側欄 ─────────────────────────────────────────────── --}}
  <aside class="settings-sidebar">

    <div class="sidebar-user-card">
      <div class="su-icon"><i class="bi bi-plug-fill"></i></div>
      <div class="su-title">平台 API 文件</div>
      <div class="su-desc">查詢可用端點與呼叫範例</div>
    </div>

    <ul class="settings-nav">
      {{-- 認證說明 --}}
      <li>
        <a href="#" class="active" data-panel="auth">
          <span class="nav-icon"><i class="bi bi-shield-lock"></i></span>認證說明
        </a>
      </li>
      @foreach($groups as $group)
      <li>
        <a href="#" data-panel="{{ $group['id'] }}">
          <span class="nav-icon"><i class="bi {{ $group['icon'] }} text-{{ $group['color'] }}"></i></span>
          {{ $group['title'] }}
          <span class="nav-cnt">{{ count($group['apis']) }}</span>
        </a>
      </li>
      @endforeach
    </ul>

  </aside>

  {{-- ─── 主內容 ─────────────────────────────────────────────── --}}
  <main>

    {{-- 認證說明 panel --}}
    <div class="section-panel active" id="panel-auth">
      <div class="panel-header">
        <i class="bi bi-shield-lock text-primary fs-5"></i>
        <div>
          <h4>認證說明</h4>
          <p>如何取得並使用 API Token</p>
        </div>
      </div>
      <div class="sc">
        <div class="sc-body">
          <div class="p-3 rounded-3 mb-3" style="background:#eff6ff;border:1px solid #bfdbfe;">
            <span class="badge bg-primary mb-2">Personal Token</span>
            <p class="small mb-1 text-muted">個人 API Token，在 <a href="{{ route('profile.edit') }}#api">個人資料 → API Token</a> 頁面產生。</p>
            <p class="small mb-0 text-muted">透過 <code>?token=YOUR_TOKEN</code> query string 或 <code>Authorization: Bearer YOUR_TOKEN</code> header 傳入，可設定 IP 白名單限制來源。</p>
          </div>
          <h6 class="fw-semibold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;">Base URL</h6>
          <code class="d-block p-2 rounded" style="background:#f8fafc;border:1px solid #e5e7eb;font-size:.85rem;">{{ $baseUrl }}</code>
        </div>
      </div>
    </div>

    {{-- 各分組 panels --}}
    @foreach($groups as $group)
    <div class="section-panel" id="panel-{{ $group['id'] }}">

      <div class="panel-header">
        <i class="bi {{ $group['icon'] }} text-{{ $group['color'] }} fs-5"></i>
        <div>
          <h4>{{ $group['title'] }}</h4>
          <p>{{ $group['desc'] }}</p>
        </div>
      </div>

      @foreach($group['apis'] as $api)
      @php
        $colorMap  = ['GET'=>'#16a34a','POST'=>'#2563eb','PUT'=>'#d97706','DELETE'=>'#dc2626'];
        $iconColor = $colorMap[$api['method']] ?? '#6b7280';
        $iconMap   = ['GET'=>'bi-search','POST'=>'bi-plus-lg','PUT'=>'bi-pencil','DELETE'=>'bi-trash'];
        $apiIcon   = $api['icon'] ?? ($iconMap[$api['method']] ?? 'bi-gear');
      @endphp
      <div class="sc">
        <button class="sc-head" onclick="toggleSc(this)">
          <div class="sc-icon" style="background:{{ $iconColor }}1a;color:{{ $iconColor }};">
            <i class="bi {{ $apiIcon }}"></i>
          </div>
          <div class="sc-head-text">
            <h3>
              <span class="method-badge badge-{{ $api['method'] }}">{{ $api['method'] }}</span>{{ $api['title'] }}
            </h3>
            <p>{{ $api['path'] }}</p>
          </div>
          <i class="bi bi-chevron-down sc-chevron"></i>
        </button>

        <div class="sc-body">
          <p class="text-muted mb-2" style="font-size:.85rem;">{{ $api['desc'] }}</p>

          @if(!empty($api['notes']))
          <div class="mb-3 rounded-3 p-3" style="background:#f8fafc;border:1px solid #e5e7eb;">
            @foreach($api['notes'] as $note)
            <div class="d-flex gap-2 {{ $loop->first ? '' : 'mt-2' }}">
              <i class="bi bi-info-circle-fill text-primary flex-shrink-0" style="font-size:.75rem;margin-top:3px;"></i>
              <p class="mb-0 text-muted" style="font-size:.82rem;">{{ $note }}</p>
            </div>
            @endforeach
          </div>
          @endif

          {{-- 參數表 --}}
          @if(!empty($api['params']))
          <h6 class="fw-semibold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;">參數</h6>
          <div class="table-responsive mb-4">
            <table class="table table-sm table-bordered align-middle mb-0 params-table">
              <thead>
                <tr>
                  <th style="width:140px;">名稱</th>
                  <th style="width:70px;">位置</th>
                  <th style="width:55px;">必填</th>
                  <th style="width:100px;">型別</th>
                  <th>說明</th>
                </tr>
              </thead>
              <tbody>
                @foreach($api['params'] as $p)
                <tr>
                  <td><code>{{ $p['name'] }}</code></td>
                  <td><span class="badge bg-secondary fw-normal" style="font-size:10px;">{{ $p['in'] }}</span></td>
                  <td>
                    @if($p['required'])
                      <span class="badge bg-danger fw-normal" style="font-size:10px;">必填</span>
                    @else
                      <span class="text-muted" style="font-size:11px;">選填</span>
                    @endif
                  </td>
                  <td><code class="text-muted" style="font-size:11px;">{{ $p['type'] ?? '' }}</code></td>
                  <td class="text-muted" style="font-size:12.5px;">{{ $p['desc'] }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          @endif

          {{-- 程式碼範例 + Response --}}
          @if(!empty($api['examples']))
          @php $langs = ['curl' => 'cURL', 'php' => 'PHP', 'python' => 'Python'];
               $eid = $group['id'].'-'.($loop->index); @endphp
          <h6 class="fw-semibold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;">Request 範例</h6>
          <div class="code-tabs mb-4">
            <div class="code-tab-bar">
              @foreach($langs as $key => $label)
                @if(isset($api['examples'][$key]))
                <button onclick="switchTab(this, 'pane-{{ $eid }}-{{ $key }}')"
                  class="{{ $loop->first ? 'active' : '' }}">{{ $label }}</button>
                @endif
              @endforeach
            </div>
            @foreach($langs as $key => $label)
              @if(isset($api['examples'][$key]))
              <div class="code-pane {{ $loop->first ? 'active' : '' }}" id="pane-{{ $eid }}-{{ $key }}">
                <button class="copy-btn" onclick="copyCode('pre-{{ $eid }}-{{ $key }}', this)">複製</button>
                <pre id="pre-{{ $eid }}-{{ $key }}">{{ $api['examples'][$key] }}</pre>
              </div>
              @endif
            @endforeach
          </div>
          @endif

          @if(!empty($api['example_response']))
          <h6 class="fw-semibold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;">Response 範例</h6>
          <pre class="response-pre mb-4">{{ $api['example_response'] }}</pre>
          @endif

          @if(!empty($api['response_fields']))
          <h6 class="fw-semibold mb-2" style="font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;">回傳欄位說明</h6>
          <div class="table-responsive mb-4">
            <table class="table table-sm table-bordered align-middle mb-0 params-table">
              <thead>
                <tr>
                  <th style="width:180px;">欄位</th>
                  <th style="width:90px;">型別</th>
                  <th>說明</th>
                </tr>
              </thead>
              <tbody>
                @foreach($api['response_fields'] as $f)
                <tr>
                  <td><code>{{ $f['name'] }}</code></td>
                  <td><code class="text-muted" style="font-size:11px;">{{ $f['type'] }}</code></td>
                  <td class="text-muted" style="font-size:12.5px;">{{ $f['desc'] }}</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
          @endif

          {{-- 測試案例 toggle --}}
          <div class="test-toggle-row">
            <button class="btn btn-sm btn-outline-primary rounded-pill px-3"
                    onclick="toggleTest('{{ $api['id'] }}')">
              <i class="bi bi-play-circle me-1"></i>測試案例
            </button>
            <span class="text-muted" style="font-size:.75rem;">使用系統測試帳號執行真實請求</span>
          </div>

        </div>{{-- /sc-body --}}

        {{-- ── 測試面板 ─────────────────────────────────────────── --}}
        <div class="test-panel" id="tp-{{ $api['id'] }}" style="display:none;"
             data-method="{{ $api['method'] }}" data-path="{{ $api['path'] }}">

          {{-- Token --}}
          <div class="mb-3">
            <label class="tp-section-label" for="tp-token-{{ $api['id'] }}">Authorization Token</label>
            <input type="text" class="form-control form-control-sm font-monospace tp-token"
                   id="tp-token-{{ $api['id'] }}"
                   value="{{ $testToken }}" placeholder="YOUR_TOKEN">
          </div>

          {{-- 參數 --}}
          @if(!empty($api['params']))
          <div class="mb-3">
            <span class="tp-section-label">參數</span>
            @foreach($api['params'] as $p)
            @php
              $autoProject = in_array($p['name'], ['projectId', 'id']) && $p['in'] === 'path';
              $presets  = ['per_page' => '5', 'activity' => 'development', 'hours' => '1', 'done_ratio' => '0'];
              $defVal   = $autoProject ? $testProjectId : ($presets[$p['name']] ?? '');
              $isNum    = in_array($p['type'] ?? '', ['int', 'float']);
              $inputId  = 'tp-param-' . $api['id'] . '-' . $p['name'];
            @endphp
            <div class="tp-param-row">
              <label class="tp-param-label" for="{{ $inputId }}" title="{{ $p['name'] }}">{{ $p['name'] }}</label>
              <span class="badge bg-secondary tp-param-loc">{{ $p['in'] }}</span>
              <input type="{{ $isNum ? 'number' : 'text' }}"
                     step="{{ ($p['type'] ?? '') === 'float' ? '0.25' : '1' }}"
                     class="form-control form-control-sm tp-param"
                     id="{{ $inputId }}"
                     data-name="{{ $p['name'] }}" data-in="{{ $p['in'] }}"
                     value="{{ $defVal }}"
                     placeholder="{{ $p['required'] ? '必填' : '選填' }}"
                     @if($autoProject) readonly @endif>
            </div>
            @endforeach
          </div>
          @endif

          {{-- 執行 --}}
          <div class="d-flex align-items-center gap-3 mb-3">
            <button class="btn btn-primary btn-sm tp-run-btn"
                    onclick="runTest('{{ $api['id'] }}')">
              <i class="bi bi-play-fill me-1"></i>執行請求
            </button>
            <span class="tp-loading d-none align-items-center gap-2">
              <span class="spinner-border spinner-border-sm text-primary"></span>
              <span class="text-muted" style="font-size:.8rem;">請稍候…</span>
            </span>
          </div>

          {{-- 回應 --}}
          <div id="tp-res-{{ $api['id'] }}" style="display:none;">
            <div class="d-flex align-items-center gap-2 mb-2">
              <span class="tp-section-label mb-0">回應</span>
              <span class="badge tp-status" id="tp-status-{{ $api['id'] }}"></span>
              <span class="text-muted" id="tp-time-{{ $api['id'] }}" style="font-size:.75rem;"></span>
            </div>
            <pre class="tp-res-pre" id="tp-body-{{ $api['id'] }}"></pre>
          </div>

        </div>{{-- /test-panel --}}
      </div>{{-- /sc --}}
      @endforeach

    </div>{{-- /section-panel --}}
    @endforeach

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

@push('scripts')
<script>
// 切換 panel
document.querySelectorAll('.settings-nav a[data-panel]').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const target = link.dataset.panel;

    document.querySelectorAll('.settings-nav a').forEach(a => a.classList.remove('active'));
    link.classList.add('active');

    document.querySelectorAll('.section-panel').forEach(p => p.classList.remove('active'));
    document.getElementById('panel-' + target).classList.add('active');
  });
});

// 端點卡片展開/收合
function toggleSc(btn) {
  const sc   = btn.closest('.sc');
  const body = sc.querySelector('.sc-body');
  const collapsed = sc.classList.toggle('collapsed');
  body.style.display = collapsed ? 'none' : '';
}

// 語言 tab 切換
function switchTab(btn, paneId) {
  btn.closest('.code-tab-bar').querySelectorAll('button').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  btn.closest('.code-tabs').querySelectorAll('.code-pane').forEach(p => p.classList.remove('active'));
  document.getElementById(paneId).classList.add('active');
}

// 複製程式碼
function copyCode(preId, btn) {
  navigator.clipboard.writeText(document.getElementById(preId).textContent.trim()).then(() => {
    btn.textContent = '✓ 已複製';
    setTimeout(() => btn.textContent = '複製', 1600);
  });
}

// 測試面板 toggle
function toggleTest(id) {
  const panel = document.getElementById('tp-' + id);
  const isHidden = panel.style.display === 'none';
  panel.style.display = isHidden ? 'block' : 'none';
}

// 執行測試請求
async function runTest(id) {
  const panel   = document.getElementById('tp-' + id);
  const method  = panel.dataset.method;
  let   path    = panel.dataset.path;
  const token   = document.getElementById('tp-token-' + id).value.trim();
  const runBtn  = panel.querySelector('.tp-run-btn');
  const loading = panel.querySelector('.tp-loading');
  const resDiv  = document.getElementById('tp-res-' + id);
  const statusEl = document.getElementById('tp-status-' + id);
  const timeEl   = document.getElementById('tp-time-' + id);
  const bodyEl   = document.getElementById('tp-body-' + id);

  const queryParams = {};
  const body = {};

  const missingRequired = [];
  panel.querySelectorAll('.tp-param').forEach(input => {
    const name  = input.dataset.name;
    const where = input.dataset.in;
    const val   = input.value.trim();

    if (where === 'path') {
      if (!val) { missingRequired.push(name); return; }
      path = path.replace('{' + name + '}', encodeURIComponent(val));
    } else if (where === 'query') {
      if (val) queryParams[name] = val;
    } else {
      // body or body/header — try to coerce numbers
      if (val) body[name] = val !== '' && !isNaN(val) ? Number(val) : val;
    }
  });

  // 路徑參數未填：顯示錯誤並停止
  if (missingRequired.length) {
    resDiv.style.display  = '';
    statusEl.textContent  = '缺少必要參數';
    statusEl.className    = 'badge tp-status bg-warning text-dark';
    timeEl.textContent    = '';
    bodyEl.textContent    = '請填寫路徑參數：' + missingRequired.join(', ');
    return;
  }

  if (Object.keys(queryParams).length) {
    path += '?' + new URLSearchParams(queryParams);
  }

  const opts = {
    method,
    headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' },
  };
  if (['POST', 'PUT', 'PATCH'].includes(method) && Object.keys(body).length) {
    opts.headers['Content-Type'] = 'application/json';
    opts.body = JSON.stringify(body);
  }

  runBtn.disabled = true;
  loading.classList.replace('d-none', 'd-flex');

  const t0 = performance.now();
  try {
    const resp    = await fetch(path, opts);
    const elapsed = Math.round(performance.now() - t0);
    let text;
    try   { text = JSON.stringify(await resp.json(), null, 2); }
    catch { text = await resp.text(); }

    resDiv.style.display  = '';
    statusEl.textContent  = 'HTTP ' + resp.status;
    statusEl.className    = 'badge tp-status ' + (resp.ok ? 'bg-success' : 'bg-danger');
    timeEl.textContent    = elapsed + ' ms';
    bodyEl.textContent    = text;
  } catch (err) {
    resDiv.style.display = '';
    statusEl.textContent = '錯誤';
    statusEl.className   = 'badge tp-status bg-danger';
    timeEl.textContent   = '';
    bodyEl.textContent   = err.message;
  } finally {
    runBtn.disabled = false;
    loading.classList.replace('d-flex', 'd-none');
  }
}
</script>
@endpush
@endsection