@extends('layouts.app')
@section('title', '掃描器設定')

@section('content')
<div class="container-fluid" style="max-width:800px">

  <div class="d-flex align-items-center mb-4 gap-3">
    <h4 class="mb-0 fw-bold"><i class="bi bi-shield-fill-check me-2 text-danger"></i>弱點掃描器設定</h4>
    <span class="badge bg-secondary">管理員</span>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  <form method="POST" action="{{ route('settings.scanner.save') }}">
    @csrf

    <div class="card shadow-sm mb-4">
      <div class="card-header py-2 fw-semibold">
        <i class="bi bi-toggles me-1"></i> 啟用 / 停用掃描器
      </div>
      <div class="card-body p-3">
        <p class="text-muted small mb-3">
          停用的掃描器不會顯示在「新增掃描」頁面，使用者無法選擇。
        </p>

        <div class="row g-3">

          {{-- Nuclei --}}
          <div class="col-md-6">
            <div class="border rounded-3 p-3 h-100 {{ $enabled['nuclei'] ? 'border-danger bg-danger bg-opacity-10' : 'border-secondary bg-light' }}">
              <div class="d-flex align-items-start gap-3">
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-danger">Nuclei</span>
                    <span class="badge text-bg-light border" style="font-size:.65rem;">開源免費</span>
                  </div>
                  <div class="fw-semibold small mb-1">Nuclei</div>
                  <div class="text-muted" style="font-size:.75rem;">
                    ProjectDiscovery 開源模板引擎，5000+ 漏洞模板，支援 CVE、OWASP、設定錯誤等全類型偵測。
                  </div>
                </div>
                <div class="form-check form-switch ms-2 mt-1">
                  <input class="form-check-input" type="checkbox" role="switch"
                         name="enabled_nuclei" id="sw_nuclei" value="1"
                         {{ $enabled['nuclei'] ? 'checked' : '' }}>
                </div>
              </div>
            </div>
          </div>

          {{-- ZAP --}}
          <div class="col-md-6">
            <div class="border rounded-3 p-3 h-100 {{ $enabled['zap'] ? 'border-primary bg-primary bg-opacity-10' : 'border-secondary bg-light' }}">
              <div class="d-flex align-items-start gap-3">
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-primary">ZAP</span>
                    <span class="badge text-bg-light border" style="font-size:.65rem;">OWASP 官方</span>
                  </div>
                  <div class="fw-semibold small mb-1">OWASP ZAP</div>
                  <div class="text-muted" style="font-size:.75rem;">
                    OWASP 官方認可的 DAST 工具，主動爬取與攻擊測試，需 Docker 環境。
                  </div>
                </div>
                <div class="form-check form-switch ms-2 mt-1">
                  <input class="form-check-input" type="checkbox" role="switch"
                         name="enabled_zap" id="sw_zap" value="1"
                         {{ $enabled['zap'] ? 'checked' : '' }}>
                </div>
              </div>
            </div>
          </div>

          {{-- Nessus --}}
          <div class="col-md-6">
            <div class="border rounded-3 p-3 h-100 {{ $enabled['nessus'] ? 'border-warning bg-warning bg-opacity-10' : 'border-secondary bg-light' }}">
              <div class="d-flex align-items-start gap-3">
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-warning text-dark">Nessus</span>
                    <span class="badge text-bg-light border" style="font-size:.65rem;">免費 16 IP</span>
                  </div>
                  <div class="fw-semibold small mb-1">Nessus Essentials</div>
                  <div class="text-muted" style="font-size:.75rem;">
                    Tenable 業界標準弱點掃描器，含 CVE 資料庫比對、合規報告，需另行設定 API Key。
                  </div>
                </div>
                <div class="form-check form-switch ms-2 mt-1">
                  <input class="form-check-input" type="checkbox" role="switch"
                         name="enabled_nessus" id="sw_nessus" value="1"
                         {{ $enabled['nessus'] ? 'checked' : '' }}>
                </div>
              </div>
            </div>
          </div>

          {{-- Garak --}}
          <div class="col-md-6">
            <div class="border rounded-3 p-3 h-100 {{ $enabled['garak'] ? 'border-success bg-success bg-opacity-10' : 'border-secondary bg-light' }}">
              <div class="d-flex align-items-start gap-3">
                <div class="flex-grow-1">
                  <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-success">Garak</span>
                    <span class="badge text-bg-light border" style="font-size:.65rem;">OWASP LLM</span>
                  </div>
                  <div class="fw-semibold small mb-1">Garak LLM Scanner</div>
                  <div class="text-muted" style="font-size:.75rem;">
                    LLM 安全評估工具，測試提示注入、越獄攻擊、資料洩漏等 OWASP LLM Top 10 2025 風險。
                  </div>
                </div>
                <div class="form-check form-switch ms-2 mt-1">
                  <input class="form-check-input" type="checkbox" role="switch"
                         name="enabled_garak" id="sw_garak" value="1"
                         {{ $enabled['garak'] ? 'checked' : '' }}>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="card-footer d-flex justify-content-end gap-2">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-check-lg me-1"></i>儲存設定
        </button>
      </div>
    </div>

  </form>
</div>

@push('scripts')
<script>
// Live toggle card highlight on switch change
document.querySelectorAll('.form-check-input[role="switch"]').forEach(sw => {
  sw.addEventListener('change', function() {
    const card = this.closest('.border');
    const id   = this.id.replace('sw_', '');
    const colorMap = { nuclei: 'danger', zap: 'primary', nessus: 'warning', garak: 'success' };
    const color = colorMap[id] || 'primary';
    card.classList.remove('border-danger','border-primary','border-warning','border-success',
                          'bg-danger','bg-primary','bg-warning','bg-success','bg-opacity-10',
                          'border-secondary','bg-light');
    if (this.checked) {
      card.classList.add(`border-${color}`, `bg-${color}`, 'bg-opacity-10');
    } else {
      card.classList.add('border-secondary', 'bg-light');
    }
  });
});
</script>
@endpush
@endsection