@extends('layouts.app')
@section('title', '系統設定')

@push('styles')
<style>
.settings-page    { max-width: 1240px; 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; }

/* ── Sidebar header card ── */
.sidebar-sys-card {
  background: linear-gradient(145deg, #1e293b 0%, #334155 60%, #475569 100%);
  border-radius: 16px;
  padding: 20px 18px 18px;
  color: #fff;
  margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(15,23,42,.35);
}
.sidebar-sys-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 11px;
}
.sidebar-sys-title { font-size: .95rem; font-weight: 700; margin-bottom: 3px; }
.sidebar-sys-sub   { font-size: .7rem; opacity: .65; }

/* ── 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: 10px 13px; border-radius: 10px;
  color: #4b5563; font-size: .835rem; font-weight: 500;
  text-decoration: none; transition: background .12s, color .12s;
}
.settings-nav a:hover { background: #f8fafc; color: #0f172a; }
.settings-nav a.active { background: #dbeafe; color: #1e40af; font-weight: 700; }
.settings-nav a .nav-icon { width: 18px; text-align: center; font-size: .88rem; flex-shrink: 0; }

/* ── Panel switching ── */
.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: 18px;
  overflow: hidden;
}
.sc-head {
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; gap: 13px;
}
.sc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.sc-head-text h3 { font-size: .95rem; font-weight: 700; color: #111827; margin: 0 0 2px; }
.sc-head-text p  { font-size: .75rem; color: #9ca3af; margin: 0; }
.sc-body { padding: 22px 24px; }

/* ── Field rows ── */
.frow {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 10px 18px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid #f9fafb;
}
.frow:last-child { border-bottom: none; padding-bottom: 0; }
.frow:first-child { padding-top: 0; }
.fl { font-size: .78rem; font-weight: 600; color: #6b7280; padding-top: 8px; text-align: right; }
.fv .form-control, .fv .form-select { font-size: .875rem; }
.frow-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Save bar ── */
.save-bar { display: flex; justify-content: flex-end; padding-top: 4px; margin-bottom: 6px; }

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .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; border-radius: 8px; }
  .frow { grid-template-columns: 90px 1fr; }
}
</style>
@endpush

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

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-4 rounded-3 border-0 py-2 shadow-sm">
      <i class="bi bi-check-circle-fill me-2 text-success"></i>{{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif
  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show mb-4 rounded-3 border-0 py-2 shadow-sm">
      <i class="bi bi-exclamation-circle-fill me-2 text-danger"></i>{{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <div class="settings-layout">

    {{-- ══ Sidebar ══ --}}
    <aside class="settings-sidebar">
      <div class="sidebar-sys-card">
        <div class="sidebar-sys-icon"><i class="bi bi-gear-fill"></i></div>
        <div class="sidebar-sys-title">系統設定</div>
        <div class="sidebar-sys-sub">管理員專用 · 環境與整合設定</div>
      </div>

      <ul class="settings-nav">
        <li><a href="#" class="active" data-panel="site">
          <span class="nav-icon"><i class="bi bi-globe"></i></span>網站基本資訊
        </a></li>
        <li><a href="#" data-panel="logo">
          <span class="nav-icon"><i class="bi bi-image"></i></span>Logo 與 Favicon
        </a></li>
        <li><a href="#" data-panel="smtp">
          <span class="nav-icon"><i class="bi bi-envelope"></i></span>寄信設定 (SMTP)
        </a></li>
        <li><a href="#" data-panel="notify">
          <span class="nav-icon"><i class="bi bi-envelope-exclamation"></i></span>管理員通知信箱
        </a></li>
        <li><a href="#" data-panel="oauth">
          <span class="nav-icon"><i class="bi bi-google"></i></span>Google OAuth
        </a></li>
        <li><a href="#" data-panel="gitlab">
          <span class="nav-icon"><i class="bi bi-git"></i></span>GitLab
        </a></li>
        <li><a href="#" data-panel="vapid">
          <span class="nav-icon"><i class="bi bi-bell"></i></span>Web Push (VAPID)
        </a></li>
        <li><a href="#" data-panel="forti">
          <span class="nav-icon"><i class="bi bi-shield-fill"></i></span>FortiGate
        </a></li>
        <li><a href="#" data-panel="redmine">
          <span class="nav-icon"><i class="bi bi-kanban"></i></span>Redmine
        </a></li>
      </ul>
    </aside>

    {{-- ══ Content ══ --}}
    <main>

      {{-- ── 網站基本資訊 ── --}}
      <div id="panel-site" class="section-panel active">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#dbeafe;color:#1e40af;"><i class="bi bi-globe"></i></div>
              <div class="sc-head-text"><h3>網站基本資訊</h3><p>名稱、顏色與登入頁外觀</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="app_name" class="fl">網站名稱</label>
                <div class="fv">
                  <input type="text" id="app_name" name="app_name" class="form-control"
                    value="{{ old('app_name', $s->get('app_name')) }}" placeholder="例：智新資通管理系統">
                  <div class="form-text">顯示於瀏覽器標題列與登入頁標題</div>
                </div>
              </div>
              <div class="frow">
                <label for="company_name" class="fl">公司名稱</label>
                <div class="fv">
                  <input type="text" id="company_name" name="company_name" class="form-control"
                    value="{{ old('company_name', $s->get('company_name')) }}" placeholder="例：智新資通">
                  <div class="form-text">Navbar、頁尾、Email 署名、PDF 報告使用</div>
                </div>
              </div>
              <div class="frow">
                <label for="navbar_color" class="fl">導覽列顏色</label>
                <div class="fv">
                  <div class="frow-inline">
                    <input type="color" id="navbar_color" name="navbar_color" class="form-control form-control-color"
                      value="{{ old('navbar_color', $s->get('navbar_color', '#212529')) }}"
                      aria-label="導覽列顏色"
                      style="width:46px;height:36px;padding:2px;">
                    <input type="text" id="navbar_color_hex" class="form-control font-monospace" style="width:110px;"
                      value="{{ old('navbar_color', $s->get('navbar_color', '#212529')) }}"
                      aria-label="導覽列顏色 Hex 值"
                      placeholder="#212529" maxlength="7">
                    <span class="text-muted small">文字顏色自動對比</span>
                  </div>
                </div>
              </div>
              <div class="frow">
                <span class="fl">登入頁漸層</span>
                <div class="fv">
                  <div class="frow-inline mb-2">
                    <input type="color" id="login_color_start" name="login_color_start" class="form-control form-control-color"
                      value="{{ old('login_color_start', $s->get('login_color_start', '#72EDF2')) }}"
                      aria-label="登入頁起始色"
                      style="width:46px;height:36px;padding:2px;">
                    <input type="text" id="login_color_start_hex" class="form-control font-monospace" style="width:110px;"
                      value="{{ old('login_color_start', $s->get('login_color_start', '#72EDF2')) }}"
                      aria-label="登入頁起始色 Hex"
                      placeholder="#72EDF2" maxlength="7">
                    <span class="text-muted small">起始色</span>
                    <span class="text-muted">→</span>
                    <input type="color" id="login_color_end" name="login_color_end" class="form-control form-control-color"
                      value="{{ old('login_color_end', $s->get('login_color_end', '#5151E5')) }}"
                      aria-label="登入頁結束色"
                      style="width:46px;height:36px;padding:2px;">
                    <input type="text" id="login_color_end_hex" class="form-control font-monospace" style="width:110px;"
                      value="{{ old('login_color_end', $s->get('login_color_end', '#5151E5')) }}"
                      aria-label="登入頁結束色 Hex"
                      placeholder="#5151E5" maxlength="7">
                    <span class="text-muted small">結束色</span>
                  </div>
                  <div id="login_gradient_preview" style="height:28px;border-radius:8px;
                    background:linear-gradient(135deg,{{ $s->get('login_color_start','#72EDF2') }} 10%,{{ $s->get('login_color_end','#5151E5') }} 100%);"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── Logo 與 Favicon ── --}}
      <div id="panel-logo" class="section-panel">
        <div class="sc">
          <div class="sc-head">
            <div class="sc-icon" style="background:#faf5ff;color:#7c3aed;"><i class="bi bi-image"></i></div>
            <div class="sc-head-text"><h3>Logo 與 Favicon</h3><p>登入頁、PDF 封面與瀏覽器頁籤圖示</p></div>
          </div>
          <div class="sc-body">
            <div class="frow">
              <span class="fl">網站 Logo</span>
              <div class="fv">
                <form method="POST" action="{{ route('settings.system.upload-logo') }}" enctype="multipart/form-data">
                  @csrf
                  <div class="input-group" style="max-width:420px;">
                    <input type="file" id="logo_file" name="logo" class="form-control form-control-sm" accept=".png,.svg,.jpg,.jpeg" aria-label="選擇 Logo 檔案">
                    <button type="submit" class="btn btn-sm btn-outline-primary">上傳</button>
                  </div>
                  <div class="form-text">建議寬度 200px 以上，PNG / SVG</div>
                </form>
                @php
                  $logoFile = null;
                  foreach (['png','svg','jpg','jpeg'] as $ext) {
                    if (file_exists(public_path('logo.'.$ext))) {
                      $logoFile = asset('logo.'.$ext).'?v='.filemtime(public_path('logo.'.$ext)); break;
                    }
                  }
                @endphp
                @if($logoFile)
                  <div class="mt-2 d-flex align-items-center gap-2">
                    <img src="{{ $logoFile }}" height="36" alt="logo" style="max-width:160px;object-fit:contain;">
                    <span class="text-muted small">目前 Logo</span>
                  </div>
                @endif
              </div>
            </div>
            <div class="frow">
              <span class="fl">Favicon</span>
              <div class="fv">
                <form method="POST" action="{{ route('settings.system.upload-favicon') }}" enctype="multipart/form-data">
                  @csrf
                  <div class="input-group" style="max-width:420px;">
                    <input type="file" id="favicon_file" name="favicon" class="form-control form-control-sm" accept=".ico,.png" aria-label="選擇 Favicon 檔案">
                    <button type="submit" class="btn btn-sm btn-outline-primary">上傳</button>
                  </div>
                  <div class="form-text">建議 32×32 或 64×64，取代 public/favicon.ico</div>
                </form>
                @if(file_exists(public_path('favicon.ico')))
                  <div class="mt-2 d-flex align-items-center gap-2">
                    <img src="{{ asset('favicon.ico') }}?v={{ filemtime(public_path('favicon.ico')) }}" width="28" height="28" alt="目前 Favicon">
                    <span class="text-muted small">目前 Favicon</span>
                  </div>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- ── 寄信設定 ── --}}
      <div id="panel-smtp" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-envelope"></i></div>
              <div class="sc-head-text"><h3>寄信設定（SMTP）</h3><p>系統發送通知、審核信件的郵件伺服器</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="mail_host" class="fl">SMTP 主機</label>
                <div class="fv"><input type="text" id="mail_host" name="mail_host" class="form-control"
                  value="{{ old('mail_host', $s->get('mail_host')) }}" placeholder="smtp.gmail.com"></div>
              </div>
              <div class="frow">
                <label for="mail_port" class="fl">埠號</label>
                <div class="fv">
                  <div class="frow-inline">
                    <input type="number" id="mail_port" name="mail_port" class="form-control" style="width:100px;"
                      value="{{ old('mail_port', $s->get('mail_port')) }}" placeholder="587">
                  </div>
                </div>
              </div>
              <div class="frow">
                <label for="mail_encryption" class="fl">加密方式</label>
                <div class="fv">
                  <select id="mail_encryption" name="mail_encryption" class="form-select" style="width:160px;">
                    @foreach(['tls'=>'TLS','ssl'=>'SSL','starttls'=>'STARTTLS',''=>'無加密'] as $val=>$label)
                      <option value="{{ $val }}" @selected($s->get('mail_encryption') === $val)>{{ $label }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="frow">
                <label for="mail_username" class="fl">帳號 (Email)</label>
                <div class="fv"><input type="email" id="mail_username" name="mail_username" class="form-control"
                  value="{{ old('mail_username', $s->get('mail_username')) }}" placeholder="service@example.com"></div>
              </div>
              <div class="frow">
                <label for="mail_password" class="fl">密碼</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="mail_password" name="mail_password" class="form-control"
                      value="{{ old('mail_password', $s->get('mail_password')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原密碼</div>
                </div>
              </div>
              <div class="frow">
                <label for="mail_from_address" class="fl">寄件者地址</label>
                <div class="fv"><input type="email" id="mail_from_address" name="mail_from_address" class="form-control"
                  value="{{ old('mail_from_address', $s->get('mail_from_address')) }}"></div>
              </div>
              <div class="frow">
                <label for="mail_from_name" class="fl">寄件者名稱</label>
                <div class="fv"><input type="text" id="mail_from_name" name="mail_from_name" class="form-control"
                  value="{{ old('mail_from_name', $s->get('mail_from_name')) }}"></div>
              </div>
              <div class="frow">
                <span class="fl">測試</span>
                <div class="fv">
                  <button type="button" class="btn btn-sm btn-outline-secondary" id="testMailBtn">
                    <i class="bi bi-send me-1"></i>寄測試信
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── 管理員通知信箱 ── --}}
      <div id="panel-notify" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-envelope-exclamation"></i></div>
              <div class="sc-head-text"><h3>管理員通知信箱</h3><p>系統警告、申請審核等通知的統一收件人</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="admin_notification_email" class="fl">通知收件信箱</label>
                <div class="fv">
                  <input type="email" id="admin_notification_email" name="admin_notification_email" class="form-control"
                    value="{{ old('admin_notification_email', $s->get('admin_notification_email')) }}"
                    placeholder="例：admin-notify@example.com">
                  <div class="form-text">
                    設定後只有此信箱收到通知，<strong>不再廣播給所有管理員</strong>。<br>留空則維持原本寄給全部管理員的行為。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── Google OAuth ── --}}
      <div id="panel-oauth" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fef9c3;color:#854d0e;"><i class="bi bi-google"></i></div>
              <div class="sc-head-text"><h3>Google OAuth 登入</h3><p>允許員工以 Google 帳號登入系統</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="google_client_id" class="fl">Client ID</label>
                <div class="fv"><input type="text" id="google_client_id" name="google_client_id" class="form-control font-monospace"
                  value="{{ old('google_client_id', $s->get('google_client_id')) }}"></div>
              </div>
              <div class="frow">
                <label for="google_client_secret" class="fl">Client Secret</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="google_client_secret" name="google_client_secret" class="form-control"
                      value="{{ old('google_client_secret', $s->get('google_client_secret')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原值</div>
                </div>
              </div>
              <div class="frow">
                <label for="google_redirect_uri" class="fl">Redirect URI</label>
                <div class="fv">
                  <input type="url" id="google_redirect_uri" name="google_redirect_uri" class="form-control"
                    value="{{ old('google_redirect_uri', $s->get('google_redirect_uri')) }}"
                    placeholder="https://yourdomain.com/auth/google/callback">
                  <div class="form-text">需與 Google Console「已授權的重新導向 URI」一致</div>
                </div>
              </div>
              <div class="frow">
                <span class="fl">限制</span>
                <div class="fv">
                  <div class="alert alert-info py-2 mb-0" style="font-size:13px;max-width:500px;">
                    <i class="bi bi-info-circle me-1"></i>
                    目前只允許 <code>@steps.com.tw</code> 網域登入（設定於 <code>routes/web.php</code>）
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── GitLab ── --}}
      <div id="panel-gitlab" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fff7ed;color:#c2410c;"><i class="bi bi-git"></i></div>
              <div class="sc-head-text"><h3>GitLab</h3><p>版本控制與專案管理整合</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="gitlab_url" class="fl">GitLab 網址</label>
                <div class="fv"><input type="url" id="gitlab_url" name="gitlab_url" class="form-control"
                  value="{{ old('gitlab_url', $s->get('gitlab_url')) }}" placeholder="https://git.example.com"></div>
              </div>
              <div class="frow">
                <label for="gitlab_token" class="fl">API Token</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="gitlab_token" name="gitlab_token" class="form-control"
                      value="{{ old('gitlab_token', $s->get('gitlab_token')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原值</div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── Web Push (VAPID) ── --}}
      <div id="panel-vapid" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-bell"></i></div>
              <div class="sc-head-text"><h3>Web Push 推播（VAPID）</h3><p>瀏覽器推播通知所需金鑰設定</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <span class="fl">說明</span>
                <div class="fv">
                  <div class="alert alert-info py-2 mb-0" style="font-size:13px;max-width:500px;">
                    <i class="bi bi-info-circle me-1"></i>
                    如需重新產生 VAPID 金鑰，請執行 <code>php artisan webpush:vapid</code>
                  </div>
                </div>
              </div>
              <div class="frow">
                <label for="vapid_public_key" class="fl">Public Key</label>
                <div class="fv">
                  <input type="text" id="vapid_public_key" name="vapid_public_key"
                    class="form-control font-monospace" style="font-size:12px;"
                    value="{{ old('vapid_public_key', $s->get('vapid_public_key')) }}">
                  <div class="form-text">前端 JS 的 <code>applicationServerKey</code></div>
                </div>
              </div>
              <div class="frow">
                <label for="vapid_private_key" class="fl">Private Key</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="vapid_private_key" name="vapid_private_key" class="form-control"
                      value="{{ old('vapid_private_key', $s->get('vapid_private_key')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原值</div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── FortiGate ── --}}
      <div id="panel-forti" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-shield-fill"></i></div>
              <div class="sc-head-text"><h3>FortiGate 防火牆</h3><p>VPN 帳號管理的 FortiGate API 連線設定</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="forti_host" class="fl">主機位址</label>
                <div class="fv"><input type="text" id="forti_host" name="forti_host" class="form-control"
                  value="{{ old('forti_host', $s->get('forti_host')) }}" placeholder="60.248.142.180"></div>
              </div>
              <div class="frow">
                <label for="forti_api_user" class="fl">API 使用者</label>
                <div class="fv"><input type="text" id="forti_api_user" name="forti_api_user" class="form-control"
                  value="{{ old('forti_api_user', $s->get('forti_api_user')) }}" placeholder="api-admin"></div>
              </div>
              <div class="frow">
                <label for="forti_api_token" class="fl">API Token</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="forti_api_token" name="forti_api_token" class="form-control"
                      value="{{ old('forti_api_token', $s->get('forti_api_token')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原值</div>
                </div>
              </div>
              <div class="frow">
                <label for="forti_vdom" class="fl">VDOM</label>
                <div class="fv"><input type="text" id="forti_vdom" name="forti_vdom" class="form-control"
                  style="max-width:180px;"
                  value="{{ old('forti_vdom', $s->get('forti_vdom')) }}" placeholder="root"></div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

      {{-- ── Redmine ── --}}
      <div id="panel-redmine" class="section-panel">
        <form method="POST" action="{{ route('settings.system.update') }}">
          @csrf @method('PUT')
          <div class="sc">
            <div class="sc-head">
              <div class="sc-icon" style="background:#dcfce7;color:#15803d;"><i class="bi bi-kanban"></i></div>
              <div class="sc-head-text"><h3>Redmine</h3><p>專案管理與議題追蹤系統整合</p></div>
            </div>
            <div class="sc-body">
              <div class="frow">
                <label for="redmine_url" class="fl">Redmine 網址</label>
                <div class="fv"><input type="url" id="redmine_url" name="redmine_url" class="form-control"
                  value="{{ old('redmine_url', $s->get('redmine_url')) }}" placeholder="https://redmine.example.com"></div>
              </div>
              <div class="frow">
                <label for="redmine_api_key" class="fl">API Key</label>
                <div class="fv">
                  <div class="input-group" style="max-width:400px;">
                    <input type="password" id="redmine_api_key" name="redmine_api_key" class="form-control"
                      value="{{ old('redmine_api_key', $s->get('redmine_api_key')) }}"
                      placeholder="留空表示不變更" autocomplete="new-password">
                    <button type="button" class="btn btn-outline-secondary" onclick="togglePwd(this)" tabindex="-1"><i class="bi bi-eye"></i></button>
                  </div>
                  <div class="form-text text-warning"><i class="bi bi-shield-lock me-1"></i>留空則保留原值</div>
                </div>
              </div>
            </div>
          </div>
          <div class="save-bar">
            <button type="submit" class="btn btn-primary px-5"><i class="bi bi-floppy me-1"></i>儲存</button>
          </div>
        </form>
      </div>

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

{{-- 測試信 Modal --}}
<div class="modal fade" id="testMailModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">寄測試信</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ route('settings.system.test-mail') }}">
        @csrf
        <div class="modal-body">
          <label for="test_mail_to" class="form-label">收件者</label>
          <input type="email" id="test_mail_to" name="to" class="form-control" value="{{ auth()->user()->email }}">
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-sm btn-primary">寄出</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
// Panel 切換
(function () {
  const links  = document.querySelectorAll('.settings-nav a[data-panel]');
  const panels = document.querySelectorAll('.section-panel');

  function showPanel(id) {
    panels.forEach(p => p.classList.remove('active'));
    links.forEach(a => a.classList.remove('active'));
    const panel = document.getElementById('panel-' + id);
    if (panel) panel.classList.add('active');
    const link = document.querySelector(`.settings-nav a[data-panel="${id}"]`);
    if (link) link.classList.add('active');
    history.replaceState(null, '', '#' + id);
  }

  links.forEach(a => {
    a.addEventListener('click', e => { e.preventDefault(); showPanel(a.dataset.panel); });
  });

  const hash = location.hash.replace('#', '');
  if (hash && document.getElementById('panel-' + hash)) showPanel(hash);
})();

// 顏色同步
(function () {
  function syncColorPair(pickerId, hexId) {
    const picker = document.getElementById(pickerId);
    const hex    = document.getElementById(hexId);
    if (!picker || !hex) return;
    picker.addEventListener('input', () => { hex.value = picker.value; updatePreview(); });
    hex.addEventListener('input', () => {
      if (/^#[0-9a-fA-F]{6}$/.test(hex.value)) { picker.value = hex.value; updatePreview(); }
    });
  }
  function updatePreview() {
    const s = document.getElementById('login_color_start')?.value || '#72EDF2';
    const e = document.getElementById('login_color_end')?.value   || '#5151E5';
    const p = document.getElementById('login_gradient_preview');
    if (p) p.style.background = `linear-gradient(135deg, ${s} 10%, ${e} 100%)`;
  }
  syncColorPair('navbar_color',      'navbar_color_hex');
  syncColorPair('login_color_start', 'login_color_start_hex');
  syncColorPair('login_color_end',   'login_color_end_hex');
  document.getElementById('navbar_color_hex')?.addEventListener('input', function () {
    if (/^#[0-9a-fA-F]{6}$/.test(this.value)) document.getElementById('navbar_color').value = this.value;
  });
})();

// 測試信
document.getElementById('testMailBtn')?.addEventListener('click', function () {
  new bootstrap.Modal(document.getElementById('testMailModal')).show();
});

// 密碼顯示切換
function togglePwd(btn) {
  const input = btn.closest('.input-group').querySelector('input');
  const icon  = btn.querySelector('i');
  if (input.type === 'password') {
    input.type = 'text';
    icon.classList.replace('bi-eye', 'bi-eye-slash');
  } else {
    input.type = 'password';
    icon.classList.replace('bi-eye-slash', 'bi-eye');
  }
}
</script>
@endpush
@endsection