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

  <div class="mb-3">
    <a href="{{ route('code-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('code-scan.store') }}" id="scanForm" enctype="multipart/form-data">
    @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

    <input type="hidden" name="scanner_type" id="scannerInput"  value="{{ old('scanner_type', $defaultScanner) }}">
    <input type="hidden" name="ruleset"      id="rulesetInput"   value="{{ old('ruleset', 'auto') }}">
    <input type="hidden" name="trivy_mode"   id="trivyModeInput" value="{{ old('trivy_mode', 'fs') }}">

    {{-- ① 工具選擇 --}}
    <div class="card shadow-sm mb-3">
      <div class="card-header py-2 fw-semibold">
        <i class="bi bi-tools me-1 text-primary"></i> 選擇掃描工具
      </div>
      <div class="card-body p-3">
        <div class="row g-3" id="scannerCards">

          {{-- Semgrep --}}
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100 {{ $defaultScanner==='semgrep'?'border-primary bg-primary bg-opacity-10':'' }}"
                 data-scanner="semgrep" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-primary">Semgrep</span>
                <span class="badge bg-success" style="font-size:.6rem;">Docker</span>
                <i class="bi {{ $defaultScanner==='semgrep'?'bi-check-circle-fill text-primary':'bi-circle text-muted' }} ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">Semgrep SAST</div>
              <div class="text-muted" style="font-size:.75rem;">靜態分析，偵測注入、XSS、機密洩漏，支援 PHP/JS/Python/Go 等</div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">OWASP Top 10</span>
                <span class="badge text-bg-success" style="font-size:.6rem;">SAST ★</span>
              </div>
            </div>
          </div>

          {{-- Trivy --}}
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100 {{ $defaultScanner==='trivy'?'border-info bg-info bg-opacity-10':'' }}"
                 data-scanner="trivy" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-info text-dark">Trivy</span>
                <span class="badge bg-success" style="font-size:.6rem;">Docker</span>
                <i class="bi {{ $defaultScanner==='trivy'?'bi-check-circle-fill text-info':'bi-circle text-muted' }} ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">Trivy SCA</div>
              <div class="text-muted" style="font-size:.75rem;">依賴套件 CVE 掃描，composer / npm / pip / go.mod</div>
              <div class="mt-2">
                <span class="badge text-bg-light border" style="font-size:.6rem;">CVE</span>
                <span class="badge text-bg-light border" style="font-size:.6rem;">A06:2021</span>
              </div>
            </div>
          </div>

          {{-- SonarQube --}}
          <div class="col-md-4">
            <div class="scanner-card border rounded-3 p-3 h-100 {{ $defaultScanner==='sonarqube'?'border-warning bg-warning bg-opacity-10':'' }}"
                 data-scanner="sonarqube" style="cursor:pointer;">
              <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-warning text-dark">SonarQube</span>
                @if(\App\Services\SonarService::isConfigured())
                  <span class="badge bg-success" style="font-size:.6rem;">已設定</span>
                @else
                  <span class="badge bg-secondary" style="font-size:.6rem;">需設定</span>
                @endif
                <i class="bi {{ $defaultScanner==='sonarqube'?'bi-check-circle-fill text-warning':'bi-circle text-muted' }} ms-auto scanner-check"></i>
              </div>
              <div class="fw-semibold mb-1">SonarQube</div>
              <div class="text-muted" style="font-size:.75rem;">業界標準程式碼品質＋安全分析，需 SonarQube Server</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;">合規</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3">

      {{-- 左欄：來源設定 --}}
      <div class="col-md-4">
        <div class="card shadow-sm">
          <div class="card-header bg-primary text-white py-2">
            <i class="bi bi-folder-fill me-1"></i> 掃描來源
          </div>
          <div class="card-body">

            {{-- 來源類型 --}}
            <div class="mb-3">
              <div class="form-label fw-semibold small mb-2">來源類型</div>
              <input type="hidden" name="source_type" id="sourceTypeInput" value="{{ old('source_type','gitlab') }}">
              <div class="row g-2" id="sourceTypeCards">

                <div class="col-4">
                  <div class="source-type-card text-center border rounded-2 py-2 px-1 h-100
                               {{ old('source_type','gitlab')==='gitlab' ? 'border-primary bg-primary bg-opacity-10' : '' }}"
                       data-type="gitlab" style="cursor:pointer;">
                    <i class="bi bi-git fs-5 d-block mb-1
                               {{ old('source_type','gitlab')==='gitlab' ? 'text-primary' : 'text-muted' }}
                               src-icon"></i>
                    <div class="small fw-semibold" style="font-size:.72rem;">GitLab</div>
                    <div class="text-muted" style="font-size:.62rem;">Clone</div>
                  </div>
                </div>

                <div class="col-4">
                  <div class="source-type-card text-center border rounded-2 py-2 px-1 h-100
                               {{ old('source_type')==='path' ? 'border-success bg-success bg-opacity-10' : '' }}"
                       data-type="path" style="cursor:pointer;">
                    <i class="bi bi-hdd fs-5 d-block mb-1
                               {{ old('source_type')==='path' ? 'text-success' : 'text-muted' }}
                               src-icon"></i>
                    <div class="small fw-semibold" style="font-size:.72rem;">本機路徑</div>
                    <div class="text-muted" style="font-size:.62rem;">Server</div>
                  </div>
                </div>

                <div class="col-4">
                  <div class="source-type-card text-center border rounded-2 py-2 px-1 h-100
                               {{ old('source_type')==='upload' ? 'border-warning bg-warning bg-opacity-10' : '' }}"
                       data-type="upload" style="cursor:pointer;">
                    <i class="bi bi-file-earmark-zip fs-5 d-block mb-1
                               {{ old('source_type')==='upload' ? 'text-warning' : 'text-muted' }}
                               src-icon"></i>
                    <div class="small fw-semibold" style="font-size:.72rem;">上傳檔案</div>
                    <div class="text-muted" style="font-size:.62rem;">zip / tar.gz</div>
                  </div>
                </div>

              </div>
            </div>

            {{-- GitLab URL --}}
            <div class="mb-3" id="gitlabFields">
              <label class="form-label fw-semibold small">GitLab 倉庫 URL <span class="text-danger">*</span></label>
              <select class="form-select form-select-sm mb-2" id="projectSelect">
                <option value="">— 從倉庫選擇 —</option>
                @php
                  $linkedIds = $projects->pluck('gitlab_project_id')->filter()->flip();
                @endphp
                @if($projects->where('gitlab_project_id', '!=', null)->count())
                <optgroup label="Portal 專案">
                  @foreach($projects as $p)
                    @if($p->gitlab_project_id)
                    @php $url = $cloneUrls[$p->gitlab_project_id] ?? ''; @endphp
                    <option value="{{ $url }}" data-project-id="{{ $p->id }}"
                            {{ $url ? '' : 'data-no-url=1' }}>
                      {{ $p->name }}{{ $url ? '' : ' (需手動填入 URL)' }}
                    </option>
                    @endif
                  @endforeach
                </optgroup>
                @endif
                @if($allGitlabRepos->count())
                <optgroup label="GitLab 所有倉庫">
                  @foreach($allGitlabRepos as $repo)
                    @if(!isset($linkedIds[$repo['project_id']]))
                    <option value="{{ $repo['http_url_to_repo'] }}">
                      {{ $repo['name_with_namespace'] }}
                    </option>
                    @endif
                  @endforeach
                </optgroup>
                @endif
              </select>
              <input type="url" name="source_ref" id="sourceRef"
                     class="form-control form-control-sm @error('source_ref') is-invalid @enderror"
                     placeholder="https://gitlab.example.com/group/repo.git"
                     value="{{ old('source_ref') }}" required>
              @error('source_ref')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- 分支 --}}
            <div class="mb-3" id="branchField">
              <label class="form-label fw-semibold small">分支</label>
              <input type="text" name="branch" class="form-control form-control-sm"
                     placeholder="main" value="{{ old('branch','main') }}">
            </div>

            {{-- 本機路徑 --}}
            <div class="mb-3 d-none" id="pathFields">
              <label class="form-label fw-semibold small">本機路徑 <span class="text-danger">*</span></label>
              <input type="text" name="source_ref" id="sourceRefPath" class="form-control form-control-sm"
                     placeholder="/var/www/html/myapp" disabled>
              <div class="form-text">伺服器上的絕對路徑</div>
            </div>

            {{-- 上傳檔案 --}}
            <div class="mb-3 d-none" id="uploadFields">
              <label class="form-label fw-semibold small" for="sourceFile">
                上傳壓縮檔 <span class="text-danger">*</span>
              </label>
              <input type="file" name="source_file" id="sourceFile"
                     class="form-control form-control-sm @error('source_file') is-invalid @enderror"
                     accept=".zip,.tar.gz,.tgz" disabled>
              @error('source_file')<div class="invalid-feedback">{{ $message }}</div>@enderror
              <div class="form-text">
                <i class="bi bi-info-circle me-1"></i>支援 <code>.zip</code>、<code>.tar.gz</code>，最大 <strong>200 MB</strong>
              </div>
              {{-- 上傳進度條 --}}
              <div class="progress mt-2 d-none" id="uploadProgress" style="height:6px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated"
                     id="uploadBar" style="width:0%"></div>
              </div>
            </div>

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

            {{-- 已選摘要 --}}
            <div class="border rounded p-2 bg-light mb-3">
              <div class="text-muted small mb-1">已選工具</div>
              <div class="fw-bold text-primary" id="sumScanner">Semgrep SAST</div>
              <div class="text-muted small mt-1" id="sumMode">規則集：auto（推薦）</div>
            </div>

            {{-- 共享設定 --}}
            <div class="mb-3">
              <div class="form-label fw-semibold small mb-2"><i class="bi bi-share me-1"></i>檢視權限</div>
              <input type="hidden" name="share_type" id="shareTypeInput" value="{{ old('share_type','private') }}">
              <input type="hidden" name="shared_user_ids" id="shareUserIdsInput" value="">
              <div class="d-flex flex-column gap-2">

                @foreach([
                  'private'    => ['icon'=>'bi-lock',             'color'=>'secondary', 'label'=>'私人',     'desc'=>'只有自己與管理員可見'],
                  'public'     => ['icon'=>'bi-people-fill',      'color'=>'success',   'label'=>'全部公開', 'desc'=>'所有有源碼掃描權限的人'],
                  'restricted' => ['icon'=>'bi-person-check-fill','color'=>'warning',   'label'=>'指定對象', 'desc'=>'只有選定的帳號可見'],
                ] as $val => $opt)
                <label class="share-create-card d-flex align-items-center gap-2 p-2 rounded border {{ old('share_type','private')===$val ? 'border-'.$opt['color'].' bg-'.$opt['color'].' bg-opacity-10' : '' }}"
                       data-val="{{ $val }}" data-color="{{ $opt['color'] }}" style="cursor:pointer;">
                  <input type="radio" name="_share_type_radio" value="{{ $val }}" class="form-check-input mt-0 flex-shrink-0"
                         {{ old('share_type','private')===$val ? 'checked' : '' }}>
                  <i class="bi {{ $opt['icon'] }} text-{{ $opt['color'] }}"></i>
                  <div>
                    <div class="fw-semibold small">{{ $opt['label'] }}</div>
                    <div class="text-muted" style="font-size:.7rem;">{{ $opt['desc'] }}</div>
                  </div>
                </label>
                @endforeach

              </div>

              {{-- 指定帳號區塊 --}}
              <div id="restrictedCreateBlock" class="{{ old('share_type','private')==='restricted' ? '' : 'd-none' }} mt-2 p-2 border rounded bg-light">
                <div class="small fw-semibold mb-1"><i class="bi bi-search me-1"></i>搜尋並新增帳號</div>
                <input type="text" id="shareUserSearchInput" class="form-control form-control-sm mb-2"
                       placeholder="輸入姓名或 Email…">
                <div id="shareUserSearchResults" class="list-group mb-2" style="max-height:130px;overflow-y:auto;"></div>
                <div id="shareSelectedList" class="d-flex flex-wrap gap-1"></div>
              </div>
            </div>

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

      {{-- 右欄：掃描模式 --}}
      <div class="col-md-8">

        {{-- Semgrep 規則集 --}}
        <div id="panelSemgrep" class="card shadow-sm {{ $defaultScanner!=='semgrep'?'d-none':'' }}">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-code-slash text-primary me-1"></i> Semgrep 規則集
          </div>
          <div class="card-body p-3">
            <div class="row g-2">
              @foreach($semgrepRulesets as $key => $rs)
              <div class="col-sm-6">
                <div class="ruleset-card border rounded p-2 h-100 {{ $key==='auto'?'border-primary bg-primary bg-opacity-10':'' }}"
                     data-ruleset="{{ $key }}" data-label="{{ $rs['label'] }}" style="cursor:pointer;">
                  <div class="d-flex align-items-start gap-2">
                    <div class="flex-grow-1">
                      <div class="fw-semibold small">{{ $rs['label'] }}</div>
                      <div class="text-muted" style="font-size:.72rem;">{{ $rs['desc'] }}</div>
                    </div>
                    <i class="bi {{ $key==='auto'?'bi-check-circle-fill text-primary':'bi-circle text-muted' }} flex-shrink-0 mt-1 ruleset-check"></i>
                  </div>
                </div>
              </div>
              @endforeach
            </div>
          </div>
        </div>

        {{-- Trivy 模式 --}}
        <div id="panelTrivy" class="card shadow-sm {{ $defaultScanner!=='trivy'?'d-none':'' }}">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-boxes text-info me-1"></i> Trivy 掃描模式
          </div>
          <div class="card-body p-3">
            <div class="row g-2">
              @foreach($trivyModes as $mkey => $mm)
              <div class="col-12">
                <div class="trivy-card border rounded p-3 {{ $mkey==='fs'?'border-info bg-info bg-opacity-10':'' }}"
                     data-mode="{{ $mkey }}" style="cursor:pointer;">
                  <div class="fw-semibold d-flex align-items-center gap-2">
                    {{ $mm['label'] }}
                    @if($mkey==='fs') <span class="badge text-bg-success" style="font-size:.65rem;">推薦</span> @endif
                    <i class="bi {{ $mkey==='fs'?'bi-check-circle-fill text-info':'bi-circle text-muted' }} ms-auto trivy-check"></i>
                  </div>
                  <div class="text-muted mt-1" style="font-size:.8rem;">{{ $mm['desc'] }}</div>
                </div>
              </div>
              @endforeach
            </div>
          </div>
        </div>

        {{-- SonarQube --}}
        <div id="panelSonar" class="card shadow-sm {{ $defaultScanner!=='sonarqube'?'d-none':'' }}">
          <div class="card-header py-2 fw-semibold">
            <i class="bi bi-bar-chart-line text-warning me-1"></i> SonarQube 設定
          </div>
          <div class="card-body p-3">
            @if(!\App\Services\SonarService::isConfigured())
            <div class="alert alert-warning small">
              <i class="bi bi-exclamation-triangle-fill me-1"></i>
              <strong>尚未設定 SonarQube。</strong><br>
              1. 啟動：<code>docker run -d --name sonarqube -p 9000:9000 sonarqube:community</code><br>
              2. 瀏覽 <code>http://localhost:9000</code>，建立 User Token<br>
              3. 在 <code>.env</code> 加入：<br>
              <code>SONAR_URL=http://localhost:9000</code><br>
              <code>SONAR_TOKEN=your_token</code>
            </div>
            @else
            <div class="alert alert-success small py-2">
              <i class="bi bi-check-circle-fill me-1"></i>
              SonarQube 已設定：<code>{{ config('services.sonarqube.url') }}</code>
            </div>
            @endif
            <div class="alert alert-info small py-2 mb-0">
              <i class="bi bi-info-circle-fill me-1"></i>
              SonarQube 會自動偵測專案語言並執行完整程式碼品質＋安全分析。掃描時間依專案大小約 2–30 分鐘。
            </div>
          </div>
        </div>

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

@push('scripts')
<script>
const scannerColors = { semgrep:'primary', trivy:'info', sonarqube:'warning' };
const scannerLabels = { semgrep:'Semgrep SAST', trivy:'Trivy SCA', sonarqube:'SonarQube' };

function selectScanner(s) {
  document.querySelectorAll('.scanner-card').forEach(c => {
    const active = c.dataset.scanner === s;
    const col = scannerColors[c.dataset.scanner] || 'secondary';
    c.classList.toggle('border-'+col, active);
    c.classList.toggle('bg-'+col, active);
    c.classList.toggle('bg-opacity-10', active);
    c.querySelector('.scanner-check').className = active
      ? `bi bi-check-circle-fill text-${col} ms-auto scanner-check`
      : 'bi bi-circle text-muted ms-auto scanner-check';
  });
  ['panelSemgrep','panelTrivy','panelSonar'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.classList.toggle('d-none', !id.toLowerCase().includes(s.replace('queue','')));
  });
  document.getElementById('panelSemgrep').classList.toggle('d-none', s !== 'semgrep');
  document.getElementById('panelTrivy').classList.toggle('d-none', s !== 'trivy');
  document.getElementById('panelSonar').classList.toggle('d-none', s !== 'sonarqube');
  document.getElementById('scannerInput').value = s;
  document.getElementById('sumScanner').textContent = scannerLabels[s] || s;
}

document.querySelectorAll('.scanner-card').forEach(c =>
  c.addEventListener('click', () => selectScanner(c.dataset.scanner))
);

// Semgrep 規則集
let activeRuleset = '{{ old("ruleset","auto") }}';
document.querySelectorAll('.ruleset-card').forEach(c => {
  c.addEventListener('click', function() {
    document.querySelectorAll('.ruleset-card').forEach(x => {
      x.classList.remove('border-primary','bg-primary','bg-opacity-10');
      x.querySelector('.ruleset-check').className = 'bi bi-circle text-muted flex-shrink-0 mt-1 ruleset-check';
    });
    this.classList.add('border-primary','bg-primary','bg-opacity-10');
    this.querySelector('.ruleset-check').className = 'bi bi-check-circle-fill text-primary flex-shrink-0 mt-1 ruleset-check';
    activeRuleset = this.dataset.ruleset;
    document.getElementById('rulesetInput').value = activeRuleset;
    document.getElementById('sumMode').textContent = '規則集：' + this.dataset.label;
  });
});

// Trivy 模式
document.querySelectorAll('.trivy-card').forEach(c => {
  c.addEventListener('click', function() {
    document.querySelectorAll('.trivy-card').forEach(x => {
      x.classList.remove('border-info','bg-info','bg-opacity-10');
      x.querySelector('.trivy-check').className = 'bi bi-circle text-muted ms-auto trivy-check';
    });
    this.classList.add('border-info','bg-info','bg-opacity-10');
    this.querySelector('.trivy-check').className = 'bi bi-check-circle-fill text-info ms-auto trivy-check';
    document.getElementById('trivyModeInput').value = this.dataset.mode;
    document.getElementById('sumMode').textContent = '模式：' + (this.querySelector('.fw-semibold')?.firstChild?.textContent?.trim() || '');
  });
});

// 來源類型卡片顏色對應
const srcColors = { gitlab:'primary', path:'success', upload:'warning' };

// 來源類型切換
function applySourceType(type) {
  // 卡片視覺
  document.querySelectorAll('.source-type-card').forEach(c => {
    const t   = c.dataset.type;
    const col = srcColors[t] || 'secondary';
    const active = t === type;
    c.classList.toggle(`border-${col}`, active);
    c.classList.toggle(`bg-${col}`,     active);
    c.classList.toggle('bg-opacity-10', active);
    c.querySelector('.src-icon').classList.toggle(`text-${col}`, active);
    c.querySelector('.src-icon').classList.toggle('text-muted',  !active);
  });

  // 欄位顯示/啟用
  const gitlabInput = document.getElementById('sourceRef');
  const pathInput   = document.getElementById('sourceRefPath');
  const uploadInput = document.getElementById('sourceFile');

  document.getElementById('gitlabFields').classList.toggle('d-none', type !== 'gitlab');
  document.getElementById('branchField').classList.toggle('d-none',  type !== 'gitlab');
  document.getElementById('pathFields').classList.toggle('d-none',   type !== 'path');
  document.getElementById('uploadFields').classList.toggle('d-none', type !== 'upload');

  gitlabInput.disabled = type !== 'gitlab';
  gitlabInput.required = type === 'gitlab';
  pathInput.disabled   = type !== 'path';
  uploadInput.disabled = type !== 'upload';
  uploadInput.required = type === 'upload';

  document.getElementById('sourceTypeInput').value = type;
}

// 卡片點擊
document.querySelectorAll('.source-type-card').forEach(c => {
  c.addEventListener('click', () => applySourceType(c.dataset.type));
});

// 上傳進度顯示
document.getElementById('scanForm').addEventListener('submit', function() {
  const uploadInput = document.getElementById('sourceFile');
  if (document.getElementById('sourceTypeInput').value === 'upload' && uploadInput.files?.length) {
    document.getElementById('uploadProgress').classList.remove('d-none');
    document.getElementById('uploadBar').style.width = '100%';
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('submitBtn').innerHTML =
      '<span class="spinner-border spinner-border-sm me-1"></span>上傳中…';
  }
});

// 從專案下拉選取
document.getElementById('projectSelect')?.addEventListener('change', function() {
  if (this.value) {
    document.getElementById('sourceRef').value = this.value;
    // 同步綁定專案
    const opt = this.options[this.selectedIndex];
    const pid = opt.dataset.projectId;
    if (pid) document.getElementById('projectIdSelect').value = pid;
  }
});

// 初始化
selectScanner('{{ old("scanner_type", $defaultScanner) }}');
applySourceType('{{ old("source_type", "gitlab") }}');  // 同時初始化來源卡片

// ── 共享設定 ─────────────────────────────────────────────────
var _shareSelectedUsers = {};
var _shareSearchTimer = null;

document.querySelectorAll('.share-create-card').forEach(function(card) {
  card.addEventListener('click', function() {
    var val = this.dataset.val;
    var col = this.dataset.color;
    document.querySelectorAll('.share-create-card').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;
    document.getElementById('shareTypeInput').value = val;
    document.getElementById('restrictedCreateBlock').classList.toggle('d-none', val !== 'restricted');
  });
});

document.getElementById('shareUserSearchInput').addEventListener('input', function() {
  clearTimeout(_shareSearchTimer);
  var q = this.value.trim();
  if (q.length < 1) { document.getElementById('shareUserSearchResults').innerHTML = ''; return; }
  _shareSearchTimer = setTimeout(function() {
    fetch('{{ route("code-scan.share-user-search") }}?q=' + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } })
      .then(r => r.json())
      .then(function(users) {
        var html = '';
        users.forEach(function(u) {
          if (_shareSelectedUsers[u.id]) return;
          html += '<button type="button" class="list-group-item list-group-item-action py-1 px-2 share-user-item" '
               + 'data-id="' + u.id + '" data-name="' + u.name + '" data-email="' + u.email + '" style="font-size:.82rem;">'
               + '<i class="bi bi-person me-1"></i>' + u.name + ' <span class="text-muted">(' + u.email + ')</span></button>';
        });
        document.getElementById('shareUserSearchResults').innerHTML = html || '<div class="text-muted small p-2">找不到符合的帳號</div>';
      });
  }, 300);
});

document.getElementById('shareUserSearchResults').addEventListener('click', function(e) {
  var item = e.target.closest('.share-user-item');
  if (!item) return;
  _shareSelectedUsers[item.dataset.id] = { id: item.dataset.id, name: item.dataset.name, email: item.dataset.email };
  renderShareSelected();
  document.getElementById('shareUserSearchResults').innerHTML = '';
  document.getElementById('shareUserSearchInput').value = '';
});

document.getElementById('shareSelectedList').addEventListener('click', function(e) {
  var btn = e.target.closest('.remove-share-user');
  if (!btn) return;
  delete _shareSelectedUsers[btn.dataset.id];
  renderShareSelected();
});

function renderShareSelected() {
  var html = '';
  Object.values(_shareSelectedUsers).forEach(function(u) {
    html += '<span class="badge bg-secondary d-flex align-items-center gap-1" style="font-size:.78rem;">'
          + u.name + '<button type="button" class="btn-close btn-close-white ms-1 remove-share-user" '
          + 'data-id="' + u.id + '" style="font-size:.5rem;"></button></span>';
  });
  document.getElementById('shareSelectedList').innerHTML = html;
  document.getElementById('shareUserIdsInput').value = Object.keys(_shareSelectedUsers).join(',');
}
</script>
@endpush