@extends('layouts.app')
@section('title', '新增弱點掃描')
@section('content')
<div class="container-fluid" style="max-width:1000px">

  <div class="mb-3">
    <a href="{{ route('vuln-scan.index') }}" class="text-decoration-none text-muted small">
      <i class="bi bi-arrow-left me-1"></i>返回掃描清單
    </a>
  </div>

  <form method="POST" action="{{ route('vuln-scan.store') }}" id="scanForm">
    @csrf

    @if($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
      </div>
    @endif

    {{-- ① 掃描器選擇（頂部大卡）--}}
    <div class="card shadow-sm mb-3">
      <div class="card-header py-2 fw-semibold">
        <i class="bi bi-shield-fill-check me-1 text-primary"></i> 選擇掃描工具
      </div>
      <div class="card-body p-3">
        <div class="row g-3" id="scannerCards">

          {{-- Nuclei --}}
          @if(in_array('nuclei', $enabledScanners))
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100 border-danger bg-danger bg-opacity-10"
                 data-scanner="nuclei" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-danger">Nuclei</span>
                <span class="badge bg-success" style="font-size:.6rem;">已安裝</span>
                <i class="bi bi-check-circle-fill text-danger ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">Nuclei</div>
              <div class="text-muted" style="font-size:.75rem;">
                ProjectDiscovery 開源模板引擎，5000+ 漏洞模板，支援 CVE、OWASP、設定錯誤等全類型偵測。
              </div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">開源免費</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">OWASP A01–A10</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">CVE</span>
              </div>
            </div>
          </div>
          @endif

          {{-- OWASP ZAP --}}
          @if(in_array('zap', $enabledScanners))
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100"
                 data-scanner="zap" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-primary">ZAP</span>
                <span class="badge bg-success" style="font-size:.6rem;">Docker 可用</span>
                <i class="bi bi-circle text-muted ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">OWASP ZAP</div>
              <div class="text-muted" style="font-size:.75rem;">
                OWASP 官方認可的 DAST 工具，主動爬取與攻擊測試，XSS / Injection / 身分驗證失效等 Web 漏洞。
              </div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">開源免費</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">OWASP 官方</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">DAST</span>
              </div>
            </div>
          </div>
          @endif

          {{-- Nessus --}}
          @if(in_array('nessus', $enabledScanners))
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100"
                 data-scanner="nessus" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-warning text-dark">Nessus</span>
                @if(\App\Services\NessusService::isConfigured())
                  <span class="badge bg-success" style="font-size:.6rem;">已設定</span>
                @else
                  <span class="badge bg-secondary" style="font-size:.6rem;">需設定 API Key</span>
                @endif
                <i class="bi bi-circle text-muted ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">Nessus Essentials</div>
              <div class="text-muted" style="font-size:.75rem;">
                Tenable 業界標準弱點掃描器，企業客戶最具公信力，含 CVE 資料庫比對、合規報告（免費版限 16 IP）。
              </div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">免費 16 IP</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">企業公信力</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">CVE</span>
              </div>
            </div>
          </div>
          @endif

          {{-- Garak --}}
          @if(in_array('garak', $enabledScanners))
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100"
                 data-scanner="garak" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-success">Garak</span>
                <span class="badge bg-success bg-opacity-75" style="font-size:.6rem;">LLM 專用</span>
                <i class="bi bi-circle text-muted ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">Garak</div>
              <div class="text-muted" style="font-size:.75rem;">
                LLM 界的 Nmap，專門測試 AI 模型行為安全：提示注入、越獄攻擊、資料洩漏、幻覺等 OWASP LLM Top 10 2025 風險。
              </div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">開源免費</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">OWASP LLM</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">NVIDIA</span>
              </div>
            </div>
          </div>
          @endif

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

    <input type="hidden" name="scanner_type" id="scannerInput" value="{{ old('scanner_type','nuclei') }}">
    <input type="hidden" name="scan_mode"    id="scanModeInput" value="{{ old('scan_mode','') }}">
    <input type="hidden" name="llm_model"    id="llmModelInput" value="{{ old('llm_model','') }}">

    <div class="row g-3">

      {{-- 左欄：基本設定 --}}
      <div class="col-md-4">
        <div class="card shadow-sm">
          <div class="card-header bg-danger text-white py-2">
            <i class="bi bi-shield-exclamation me-1"></i> 掃描設定
          </div>
          <div class="card-body">

            <div class="mb-3">
              <label class="form-label fw-semibold small" for="target_url">目標 URL <span class="text-danger">*</span></label>
              <input type="url" name="target_url" id="target_url"
                     class="form-control form-control-sm @error('target_url') is-invalid @enderror"
                     placeholder="https://example.com"
                     value="{{ old('target_url', $host ? ($host->api_url ?: 'https://'.$host->ip_address) : '') }}"
                     required>
              @error('target_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="mb-3">
              <label class="form-label fw-semibold small" for="host_id">綁定主機（選填）</label>
              <select name="host_id" class="form-select form-select-sm" id="host_id">
                <option value="">— 不綁定 —</option>
                @foreach($hosts as $h)
                  <option value="{{ $h->id }}" @selected(old('host_id', $host?->id) == $h->id)>
                    {{ $h->name }}
                  </option>
                @endforeach
              </select>
            </div>

            {{-- 已選摘要 --}}
            <div class="border rounded p-2 mb-3" id="selectedSummary" style="background:#f8f9fa;">
              <div class="text-muted small mb-1">已選設定</div>
              <div class="fw-bold" id="sumScanner" style="color:#dc3545;">Nuclei</div>
              <div class="text-muted mt-1" id="sumMode" style="font-size:.72rem;">請選擇掃描模式</div>
              <div class="mt-1" id="sumOwasp" style="font-size:.7rem;display:none;">
                <i class="bi bi-shield-check text-success me-1"></i>
                <span class="text-success" id="sumOwaspText"></span>
              </div>
            </div>

            <div class="alert alert-warning py-2 small">
              <i class="bi bi-exclamation-triangle-fill me-1"></i>
              請確保已獲得目標網站掃描授權
            </div>

            {{-- 共享設定 --}}
            <div class="border rounded p-2 mb-3">
              <div class="form-check form-switch mb-0">
                <input class="form-check-input" type="checkbox" name="is_shared" value="1" id="isSharedVuln"
                  {{ old('is_shared') ? 'checked' : '' }}>
                <label class="form-check-label small fw-semibold" for="isSharedVuln">
                  <i class="bi bi-people-fill me-1 text-success"></i>共享給所有有權限的人
                </label>
              </div>
              <div class="text-muted" style="font-size:.75rem; padding-left:2rem;">
                開啟後，有「弱點掃描」使用權限的人均可看到此結果；關閉則僅限本人與管理員。
              </div>
            </div>

            <div class="alert alert-danger py-2 small mb-3">
              <i class="bi bi-person-fill-exclamation me-1"></i>
              <strong>掃描前請通知客戶</strong>，取得客戶同意後才可執行弱點掃描。
            </div>

            <button type="submit" class="btn btn-danger w-100" id="submitBtn" disabled>
              <i class="bi bi-play-fill me-1"></i>開始掃描
            </button>
            <a href="{{ route('vuln-scan.index') }}" class="btn btn-outline-secondary w-100 mt-2">取消</a>
          </div>
        </div>
      </div>

      {{-- 右欄：掃描模式選擇（依掃描器切換）--}}
      <div class="col-md-8">

        {{-- Nuclei Profile 面板 --}}
        <div id="panelNuclei" class="card shadow-sm">
          <div class="card-header py-2 d-flex align-items-center gap-2">
            <span class="fw-semibold">Nuclei 掃描 Profile</span>
            <span class="badge bg-secondary ms-auto">{{ count($profiles) }} 個</span>
          </div>
          <div class="alert alert-info py-2 px-3 mb-0 border-0 rounded-0 small" style="background:#eff6ff;border-bottom:1px solid #bfdbfe!important;">
            <i class="bi bi-info-circle-fill me-1 text-primary"></i>
            標示 <span class="badge rounded-pill text-bg-success" style="font-size:.65rem;">OWASP</span> 的 Profile 掃描結果可對應 OWASP Top 10 2021 分類。
          </div>
          <div class="card-body p-2" style="max-height:520px;overflow-y:auto;">
            @php
              $groups = [];
              foreach ($profiles as $key => $meta) { $groups[$meta['group']][$key] = $meta; }
              $selectedProfile = old('profile', '');
            @endphp
            <input type="hidden" name="profile" id="profileInput" value="{{ $selectedProfile }}">

            @foreach($groups as $groupName => $groupProfiles)
            <div class="mb-3">
              <div class="px-2 py-1 mb-2 fw-semibold small text-muted border-bottom">{{ $groupName }}</div>
              <div class="row g-2">
                @foreach($groupProfiles as $key => $meta)
                @php
                  $owaspCats = $meta['owasp'] ?? [];
                  $owaspNote = $meta['owasp_note'] ?? '';
                  $isTop10   = count($owaspCats) >= 6;
                  $dataOwasp = $owaspNote ? $owaspNote.(count($owaspCats) ? '（'.implode('·',$owaspCats).'）' : '') : '';
                @endphp
                <div class="col-sm-6">
                  <div class="profile-card border rounded p-2 h-100 @if($selectedProfile===$key) border-danger bg-danger bg-opacity-10 @endif"
                       data-key="{{ $key }}" data-label="{{ $meta['label'] }}"
                       data-desc="{{ $meta['desc'] }}" data-owasp="{{ $dataOwasp }}"
                       style="cursor:pointer;">
                    <div class="d-flex align-items-start gap-2">
                      <div class="flex-grow-1">
                        <div class="d-flex align-items-center gap-1 mb-1">
                          <span class="fw-semibold small">{{ $meta['label'] }}</span>
                          @if($isTop10)
                            <span class="badge rounded-pill text-bg-success" style="font-size:.6rem;padding:2px 6px;">OWASP ★</span>
                          @elseif(!empty($owaspCats))
                            <span class="badge rounded-pill text-bg-secondary" style="font-size:.6rem;padding:2px 6px;opacity:.75;">OWASP</span>
                          @endif
                        </div>
                        <div class="text-muted" style="font-size:.72rem;line-height:1.3;">{{ $meta['desc'] }}</div>
                        @if(!empty($owaspCats))
                        <div class="mt-1">
                          @foreach($owaspCats as $cat)
                            <span class="badge text-bg-light border" style="font-size:.6rem;margin:1px;">{{ $cat }}</span>
                          @endforeach
                        </div>
                        @endif
                      </div>
                      @if($selectedProfile===$key)
                        <i class="bi bi-check-circle-fill text-danger flex-shrink-0 mt-1"></i>
                      @else
                        <i class="bi bi-circle text-muted flex-shrink-0 mt-1 check-icon"></i>
                      @endif
                    </div>
                  </div>
                </div>
                @endforeach
              </div>
            </div>
            @endforeach
          </div>
        </div>

        {{-- ZAP 面板 --}}
        <div id="panelZap" class="card shadow-sm" style="display:none;">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-bug-fill text-primary me-1"></i> OWASP ZAP 掃描模式
          </div>
          <div class="card-body p-3">
            <div class="row g-3">
              @foreach(\App\Services\ZapService::SCAN_MODES as $mkey => $mmeta)
              <div class="col-12">
                <div class="zap-mode-card border rounded p-3 @if($mkey==='baseline') border-primary bg-primary bg-opacity-10 @endif"
                     data-mode="{{ $mkey }}" data-label="{{ $mmeta['label'] }}" style="cursor:pointer;">
                  <div class="d-flex align-items-center gap-2">
                    <div class="flex-grow-1">
                      <div class="fw-semibold d-flex align-items-center gap-2">
                        {{ $mmeta['label'] }}
                        @if($mkey==='baseline')
                          <span class="badge text-bg-success" style="font-size:.65rem;">推薦</span>
                          <i class="bi bi-check-circle-fill text-primary ms-auto zap-check"></i>
                        @else
                          <i class="bi bi-circle text-muted ms-auto zap-check"></i>
                        @endif
                      </div>
                      <div class="text-muted mt-1" style="font-size:.8rem;">{{ $mmeta['desc'] }}</div>
                    </div>
                  </div>
                </div>
              </div>
              @endforeach

              <div class="col-12">
                <div class="alert alert-primary py-2 small mb-0">
                  <i class="bi bi-info-circle-fill me-1"></i>
                  ZAP 透過 Docker 執行（<code>{{ \App\Services\ZapService::DOCKER_IMAGE }}</code>），
                  首次執行會自動 pull image（約 500MB）。
                  掃描結果完整對應 <strong>OWASP Top 10</strong>。
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- Nessus 面板 --}}
        <div id="panelNessus" class="card shadow-sm" style="display:none;">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-activity text-warning me-1"></i> Nessus 掃描設定
          </div>
          <div class="card-body p-3">

            @if(!\App\Services\NessusService::isConfigured())
            <div class="alert alert-warning small">
              <i class="bi bi-exclamation-triangle-fill me-1"></i>
              <strong>尚未設定 Nessus API Key。</strong><br>
              請在 <code>.env</code> 中加入：<br>
              <code>NESSUS_BASE_URL=https://your-nessus:8834</code><br>
              <code>NESSUS_ACCESS_KEY=your_access_key</code><br>
              <code>NESSUS_SECRET_KEY=your_secret_key</code>
            </div>
            @endif

            <div class="row g-3">
              @foreach(\App\Services\NessusService::SCAN_MODES as $mkey => $mmeta)
              <div class="col-12">
                <div class="nessus-mode-card border rounded p-3 @if($mkey==='basic') border-warning bg-warning bg-opacity-10 @endif"
                     data-mode="{{ $mkey }}" data-label="{{ $mmeta['label'] }}" style="cursor:pointer;">
                  <div class="fw-semibold d-flex align-items-center gap-2">
                    {{ $mmeta['label'] }}
                    @if($mkey==='basic')
                      <span class="badge text-bg-success" style="font-size:.65rem;">推薦</span>
                      <i class="bi bi-check-circle-fill text-warning ms-auto nessus-check"></i>
                    @else
                      <i class="bi bi-circle text-muted ms-auto nessus-check"></i>
                    @endif
                  </div>
                  <div class="text-muted mt-1" style="font-size:.8rem;">{{ $mmeta['desc'] }}</div>
                </div>
              </div>
              @endforeach

              <div class="col-12">
                <div class="alert alert-info py-2 small mb-0">
                  <i class="bi bi-info-circle-fill me-1"></i>
                  Nessus Essentials 免費版限 <strong>16 個 IP</strong>。
                  掃描結果包含 CVE 資料庫比對、CVSS 評分，業界公信力最高。
                  <a href="https://www.tenable.com/products/nessus/nessus-essentials" target="_blank" class="small">安裝說明 →</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- Garak 面板 --}}
        <div id="panelGarak" class="card shadow-sm" style="display:none;">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-cpu text-success me-1"></i> Garak LLM 安全評估設定
          </div>
          <div class="card-body p-3">

            {{-- LLM 模型名稱 --}}
            <div class="mb-3">
              <label for="garakModelInput" class="form-label fw-semibold small">
                LLM 模型識別符 <span class="text-danger">*</span>
              </label>
              <div class="input-group">
                <input type="text" id="garakModelInput" class="form-control"
                       placeholder="例：llama3.2、mistral、qwen2.5:7b"
                       list="garakModelList"
                       value="{{ old('llm_model') }}"
                       oninput="document.getElementById('llmModelInput').value=this.value">
                <datalist id="garakModelList"></datalist>
                <button type="button" class="btn btn-outline-success btn-sm" id="detectModelsBtn"
                        onclick="detectGarakModels()" title="從目標 URL 自動偵測可用模型">
                  <i class="bi bi-search me-1"></i>偵測模型
                </button>
              </div>
              <div class="form-text" id="garakModelHint">
                輸入目標 LLM 伺服器上可用的模型名稱，或點「偵測模型」從目標 URL 自動取得清單。
              </div>
            </div>

            {{-- 掃描深度 --}}
            <div class="row g-3">
              @foreach($garakModes as $mkey => $mmeta)
              <div class="col-12">
                <div class="garak-mode-card border rounded p-3 @if($mkey==='quick') border-success bg-success bg-opacity-10 @endif"
                     data-mode="{{ $mkey }}" data-label="{{ $mmeta['label'] }}" style="cursor:pointer;">
                  <div class="fw-semibold d-flex align-items-center gap-2">
                    {{ $mmeta['label'] }}
                    @if($mkey==='quick')
                      <span class="badge text-bg-success" style="font-size:.65rem;">推薦</span>
                      <i class="bi bi-check-circle-fill text-success ms-auto garak-check"></i>
                    @else
                      <i class="bi bi-circle text-muted ms-auto garak-check"></i>
                    @endif
                  </div>
                  <div class="text-muted mt-1" style="font-size:.8rem;">{{ $mmeta['desc'] }}</div>
                  <div class="mt-1" style="font-size:.75rem;">
                    <span class="text-muted">探針：</span>
                    <code style="font-size:.72rem;">{{ $mmeta['probes'] }}</code>
                  </div>
                </div>
              </div>
              @endforeach

              <div class="col-12">
                <div class="alert alert-success py-2 small mb-0">
                  <i class="bi bi-info-circle-fill me-1"></i>
                  Garak 透過 <strong>OpenAI-compatible API</strong> 連接目標 LLM 伺服器（如 Ollama、LiteLLM）。
                  目標 URL 需為 LLM API 的基礎位址（如 <code>http://192.168.1.10:11434</code>）。
                  Garak 會自動附加 <code>/v1</code> 路徑。
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>
  </form>
</div>
@endsection

@push('scripts')
<script>
// ── 掃描器切換 ──
const scannerCards = document.querySelectorAll('.scanner-card');
const scannerInput = document.getElementById('scannerInput');
const panels = { nuclei: 'panelNuclei', zap: 'panelZap', nessus: 'panelNessus', garak: 'panelGarak' };
const scannerColors = { nuclei: '#dc3545', zap: '#0d6efd', nessus: '#ffc107', garak: '#198754' };

function selectScanner(scanner) {
  scannerCards.forEach(c => {
    const active = c.dataset.scanner === scanner;
    c.classList.toggle('border-danger', active && scanner==='nuclei');
    c.classList.toggle('bg-danger',     active && scanner==='nuclei');
    c.classList.toggle('border-primary',active && scanner==='zap');
    c.classList.toggle('bg-primary',    active && scanner==='zap');
    c.classList.toggle('border-warning',active && scanner==='nessus');
    c.classList.toggle('bg-warning',    active && scanner==='nessus');
    c.classList.toggle('border-success',active && scanner==='garak');
    c.classList.toggle('bg-success',    active && scanner==='garak');
    c.classList.toggle('bg-opacity-10', active);
    c.querySelector('.scanner-check').className = active
      ? 'bi bi-check-circle-fill ms-auto scanner-check'
      : 'bi bi-circle text-muted ms-auto scanner-check';
    if (active) c.querySelector('.scanner-check').style.color = scannerColors[scanner];
  });
  Object.entries(panels).forEach(([k, id]) => {
    document.getElementById(id).style.display = k === scanner ? '' : 'none';
  });
  scannerInput.value = scanner;
  document.getElementById('sumScanner').textContent = {
    nuclei: 'Nuclei', zap: 'OWASP ZAP', nessus: 'Nessus', garak: 'Garak'
  }[scanner];
  document.getElementById('sumScanner').style.color = scannerColors[scanner];

  // 預設選第一個模式
  if (scanner === 'zap')   { selectZapMode('baseline'); }
  if (scanner === 'nessus'){ selectNessusMode('basic'); }
  if (scanner === 'garak') { selectGarakMode('quick'); }
  if (scanner === 'nuclei') {
    const defaultCard = document.querySelector('.profile-card.border-danger');
    if (!defaultCard) {
      document.getElementById('submitBtn').disabled = true;
      document.getElementById('sumMode').textContent = '請選擇掃描 Profile';
    }
  }
}

scannerCards.forEach(c => c.addEventListener('click', () => selectScanner(c.dataset.scanner)));

// ── Nuclei Profile 選擇 ──
document.querySelectorAll('.profile-card').forEach(card => {
  card.addEventListener('click', function() {
    document.querySelectorAll('.profile-card').forEach(c => {
      c.classList.remove('border-danger','bg-danger','bg-opacity-10');
      c.querySelector('i').className = 'bi bi-circle text-muted flex-shrink-0 mt-1 check-icon';
    });
    this.classList.add('border-danger','bg-danger','bg-opacity-10');
    this.querySelector('i').className = 'bi bi-check-circle-fill text-danger flex-shrink-0 mt-1';
    document.getElementById('profileInput').value = this.dataset.key;
    document.getElementById('sumMode').textContent = this.dataset.label + '：' + this.dataset.desc;
    const owasp = this.dataset.owasp || '';
    const owaspBox = document.getElementById('sumOwasp');
    if (owasp) {
      document.getElementById('sumOwaspText').textContent = owasp;
      owaspBox.style.display = '';
    } else {
      owaspBox.style.display = 'none';
    }
    document.getElementById('submitBtn').disabled = false;
  });
});

// ── ZAP 模式選擇 ──
function selectZapMode(mode) {
  document.querySelectorAll('.zap-mode-card').forEach(c => {
    const active = c.dataset.mode === mode;
    c.classList.toggle('border-primary', active);
    c.classList.toggle('bg-primary', active);
    c.classList.toggle('bg-opacity-10', active);
    c.querySelector('.zap-check').className = active
      ? 'bi bi-check-circle-fill text-primary ms-auto zap-check'
      : 'bi bi-circle text-muted ms-auto zap-check';
    if (active) {
      document.getElementById('scanModeInput').value = mode;
      document.getElementById('sumMode').textContent = c.dataset.label;
      document.getElementById('submitBtn').disabled = false;
    }
  });
}
document.querySelectorAll('.zap-mode-card').forEach(c =>
  c.addEventListener('click', () => selectZapMode(c.dataset.mode))
);

// ── Nessus 模式選擇 ──
function selectNessusMode(mode) {
  document.querySelectorAll('.nessus-mode-card').forEach(c => {
    const active = c.dataset.mode === mode;
    c.classList.toggle('border-warning', active);
    c.classList.toggle('bg-warning', active);
    c.classList.toggle('bg-opacity-10', active);
    c.querySelector('.nessus-check').className = active
      ? 'bi bi-check-circle-fill text-warning ms-auto nessus-check'
      : 'bi bi-circle text-muted ms-auto nessus-check';
    if (active) {
      document.getElementById('scanModeInput').value = mode;
      document.getElementById('sumMode').textContent = c.dataset.label;
      document.getElementById('submitBtn').disabled = false;
    }
  });
}
document.querySelectorAll('.nessus-mode-card').forEach(c =>
  c.addEventListener('click', () => selectNessusMode(c.dataset.mode))
);

// ── Garak 模式選擇 ──
function selectGarakMode(mode) {
  document.querySelectorAll('.garak-mode-card').forEach(c => {
    const active = c.dataset.mode === mode;
    c.classList.toggle('border-success', active);
    c.classList.toggle('bg-success',     active);
    c.classList.toggle('bg-opacity-10',  active);
    c.querySelector('.garak-check').className = active
      ? 'bi bi-check-circle-fill text-success ms-auto garak-check'
      : 'bi bi-circle text-muted ms-auto garak-check';
    if (active) {
      document.getElementById('scanModeInput').value = mode;
      document.getElementById('sumMode').textContent = c.dataset.label;
      updateGarakSubmitState();
    }
  });
}
document.querySelectorAll('.garak-mode-card').forEach(c =>
  c.addEventListener('click', () => selectGarakMode(c.dataset.mode))
);

function updateGarakSubmitState() {
  const modelVal = document.getElementById('garakModelInput')?.value.trim();
  const modeVal  = document.getElementById('scanModeInput')?.value;
  const btn      = document.getElementById('submitBtn');
  if (btn && document.getElementById('scannerInput').value === 'garak') {
    btn.disabled = !(modelVal && modeVal);
  }
}
document.getElementById('garakModelInput')?.addEventListener('input', updateGarakSubmitState);

// ── 偵測 Ollama / OpenAI-compatible 模型清單（伺服器代理，避免 CORS）──
async function detectGarakModels() {
  const urlInput = document.getElementById('target_url');
  const btn      = document.getElementById('detectModelsBtn');
  const hint     = document.getElementById('garakModelHint');
  const targetUrl = (urlInput?.value || '').trim();

  if (!targetUrl) {
    hint.innerHTML = '<span class="text-danger">請先填寫目標 URL。</span>';
    return;
  }

  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>偵測中…';
  hint.innerHTML = '正在連線至伺服器…';

  const datalist = document.getElementById('garakModelList');
  datalist.innerHTML = '';

  try {
    const resp = await fetch('{{ route("vuln-scan.detect-models") }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content || '{{ csrf_token() }}',
      },
      body: JSON.stringify({ url: targetUrl }),
    });

    const data = await resp.json();

    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-search me-1"></i>偵測模型';

    if (!resp.ok || data.error) {
      hint.innerHTML = '<span class="text-warning"><i class="bi bi-exclamation-triangle me-1"></i>' + (data.error || '偵測失敗') + '</span>';
      return;
    }

    const models = data.models || [];
    models.forEach(name => {
      const opt = document.createElement('option');
      opt.value = name;
      datalist.appendChild(opt);
    });

    const modelInput = document.getElementById('garakModelInput');
    if (!modelInput.value && models[0]) {
      modelInput.value = models[0];
      document.getElementById('llmModelInput').value = models[0];
      updateGarakSubmitState();
    }

    hint.innerHTML = '<span class="text-success"><i class="bi bi-check-circle me-1"></i>偵測到 ' + models.length + ' 個模型：' + models.join('、') + '</span>';

  } catch (e) {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-search me-1"></i>偵測模型';
    hint.innerHTML = '<span class="text-danger"><i class="bi bi-x-circle me-1"></i>偵測請求失敗，請稍後再試。</span>';
  }
}

// ── 初始化 ──
(function() {
  const val = '{{ old("scanner_type", $defaultScanner) }}';
  selectScanner(val);
  const saved = document.getElementById('profileInput').value;
  if (saved) {
    const card = document.querySelector('[data-key="' + saved + '"]');
    if (card) card.click();
  }
})();
</script>
@endpush