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

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

  {{-- 掃描引擎說明 --}}
  <div class="card shadow-sm mb-3 border-primary border-opacity-25">
    <div class="card-body py-3">
      <div class="d-flex align-items-start gap-3">
        <div class="text-primary fs-4 flex-shrink-0"><i class="bi bi-info-circle-fill"></i></div>
        <div>
          <div class="fw-semibold mb-2">掃描引擎說明</div>
          <div class="row g-2" style="font-size:.83rem;">
            <div class="col-sm-4">
              <div class="d-flex gap-2 align-items-start">
                <i class="bi bi-tools text-primary mt-1 flex-shrink-0"></i>
                <div>
                  <div class="fw-semibold">掃描工具</div>
                  <div class="text-muted">
                    <a href="https://pa11y.org" target="_blank" class="text-decoration-none">Pa11y</a>
                    + <a href="https://github.com/squizlabs/HTML_CodeSniffer" target="_blank" class="text-decoration-none">HTML CodeSniffer</a>
                  </div>
                  <div class="text-muted" style="font-size:.75rem;">Headless Chrome 渲染後靜態分析</div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="d-flex gap-2 align-items-start">
                <i class="bi bi-file-earmark-text text-success mt-1 flex-shrink-0"></i>
                <div>
                  <div class="fw-semibold">掃描範圍</div>
                  <div class="text-muted">僅掃描輸入的 <strong>單一網址</strong></div>
                  <div class="text-muted" style="font-size:.75rem;">不自動追蹤內部連結（不爬蟲）</div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="d-flex gap-2 align-items-start">
                <i class="bi bi-layers text-warning mt-1 flex-shrink-0"></i>
                <div>
                  <div class="fw-semibold">掃描深度</div>
                  <div class="text-muted">僅限 <strong>第 1 層</strong>（單頁）</div>
                  <div class="text-muted" style="font-size:.75rem;">如需多頁請分次輸入各頁網址</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-header py-2 fw-semibold">
      <i class="bi bi-universal-access me-2 text-primary"></i>新增無障礙掃描
    </div>
    <div class="card-body">

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

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

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

        <div class="mb-3">
          <fieldset>
            <legend class="form-label fw-semibold small">WCAG 標準等級 <span class="text-danger">*</span></legend>
            <div class="row g-2">
              @foreach([
                'WCAG2A'   => ['label'=>'A',   'color'=>'success', 'desc'=>'基本無障礙需求，最低合規要求'],
                'WCAG2AA'  => ['label'=>'AA',  'color'=>'primary', 'desc'=>'建議標準，政府網站法規要求（預設）'],
                'WCAG2AAA' => ['label'=>'AAA', 'color'=>'warning', 'desc'=>'最高等級，完整無障礙支援'],
              ] as $val => $opt)
              <div class="col-4">
                <label class="standard-card d-block border rounded-3 p-3 text-center h-100
                              {{ old('standard','WCAG2AA')===$val ? 'border-'.$opt['color'].' bg-'.$opt['color'].' bg-opacity-10' : '' }}"
                       for="std_{{ $val }}" data-val="{{ $val }}" data-color="{{ $opt['color'] }}" style="cursor:pointer;">
                  <input type="radio" name="standard" id="std_{{ $val }}" value="{{ $val }}"
                         class="visually-hidden"
                         {{ old('standard', request('standard','WCAG2AA'))===$val ? 'checked' : '' }}>
                  <div class="fw-bold fs-4 text-{{ $opt['color'] }}">{{ $opt['label'] }}</div>
                  <div class="small fw-semibold">{{ $val }}</div>
                  <div class="text-muted mt-1" style="font-size:.72rem;">{{ $opt['desc'] }}</div>
                </label>
              </div>
              @endforeach
            </div>
          </fieldset>
        </div>

        <div class="mb-3">
          <fieldset>
            <legend class="form-label fw-semibold small">掃描引擎</legend>
            <div class="row g-2">
              @foreach([
                'htmlcs'      => ['label'=>'HTML CodeSniffer', 'sub'=>'Pa11y 預設',     'color'=>'primary',
                                  'desc'=>'嚴格對應 WCAG 成功標準，輸出詳細規則代碼，適合合規報告'],
                'axe'         => ['label'=>'axe-core',         'sub'=>'Deque Systems',  'color'=>'success',
                                  'desc'=>'業界廣泛採用，誤報率低，適合開發階段持續整合'],
                'lighthouse'  => ['label'=>'Lighthouse',        'sub'=>'Google Chrome', 'color'=>'warning',
                                  'desc'=>'輸出無障礙評分（0–100）及詳細稽核項目，與 Chrome DevTools 相同標準'],
              ] as $val => $opt)
              <div class="col-4">
                <label class="runner-card d-block border rounded-3 p-3 h-100
                              {{ old('runner','htmlcs')===$val ? 'border-'.$opt['color'].' bg-'.$opt['color'].' bg-opacity-10' : '' }}"
                       for="runner_{{ $val }}" data-val="{{ $val }}" data-color="{{ $opt['color'] }}" style="cursor:pointer;">
                  <input type="radio" name="runner" id="runner_{{ $val }}" value="{{ $val }}"
                         class="visually-hidden"
                         {{ old('runner','htmlcs')===$val ? 'checked' : '' }}>
                  <div class="fw-semibold small">{{ $opt['label'] }}</div>
                  <div class="text-muted" style="font-size:.7rem;">{{ $opt['sub'] }}</div>
                  <div class="text-muted mt-1" style="font-size:.7rem;">{{ $opt['desc'] }}</div>
                </label>
              </div>
              @endforeach
            </div>
          </fieldset>
        </div>

        <div class="mb-3" id="maxPagesBlock">
          <label for="max_pages" class="form-label fw-semibold small">掃描頁數</label>
          <select name="max_pages" id="max_pages" class="form-select">
            <option value="1"  {{ old('max_pages','1')==='1'  ?'selected':'' }}>1 頁（僅輸入網址，最快）</option>
            <option value="5"  {{ old('max_pages')==='5'  ?'selected':'' }}>最多 5 頁（收集首頁內部連結）</option>
            <option value="10" {{ old('max_pages')==='10' ?'selected':'' }}>最多 10 頁</option>
            <option value="20" {{ old('max_pages')==='20' ?'selected':'' }}>最多 20 頁（較慢）</option>
            <option value="50" {{ old('max_pages')==='50' ?'selected':'' }}>最多 50 頁（慢）</option>
          </select>
          <div class="form-text">多頁模式會從首頁收集同域內部連結，依序掃描至上限。</div>
        </div>

        <div class="mb-3">
          <label for="project_id" class="form-label fw-semibold small">綁定專案（選填）</label>
          <select name="project_id" id="project_id" class="form-select">
            <option value="">— 不綁定 —</option>
            @foreach($projects as $p)
              <option value="{{ $p->id }}" {{ old('project_id')==$p->id?'selected':'' }}>{{ $p->name }}</option>
            @endforeach
          </select>
        </div>

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

@push('scripts')
<script>
function initCards(selector, onChange) {
  document.querySelectorAll(selector).forEach(function(card) {
    card.addEventListener('click', function() {
      var col = this.dataset.color;
      document.querySelectorAll(selector).forEach(function(c) {
        c.classList.remove('border-'+c.dataset.color,'bg-'+c.dataset.color,'bg-opacity-10');
      });
      this.classList.add('border-'+col,'bg-'+col,'bg-opacity-10');
      this.querySelector('input[type=radio]').checked = true;
      if (onChange) onChange(this.dataset.val);
    });
  });
}
initCards('.standard-card');
initCards('.runner-card', function(val) {
  // Lighthouse 不支援多頁爬蟲
  var block = document.getElementById('maxPagesBlock');
  if (block) {
    block.style.display = val === 'lighthouse' ? 'none' : '';
    var sel = document.getElementById('max_pages');
    if (sel && val === 'lighthouse') sel.value = '1';
  }
});
</script>
@endpush