@extends('layouts.app1')

@section('content')
  <div class="container py-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h4 class="mb-0">綁定 Nessus 掃描至任務 #{{ $task->id }}（{{ $task->name }}）</h4>
      <a href="{{ route('scans.show', $task) }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> 返回
      </a>
    </div>

    @if (session('err'))
      <div class="alert alert-danger">{{ session('err') }}</div>
    @endif
    @if (session('ok'))
      <div class="alert alert-success">{{ session('ok') }}</div>
    @endif

    <div class="row g-4">
      <div class="col-md-5">
        <div class="card shadow-sm">
          <div class="card-body">
            <div class="mb-3">
              <div class="text-muted small">
                目前模式：
                @if (!$lifecycle)
                  <span class="badge bg-info">只讀整合（不支援 API 啟掃描）</span>
                @else
                  <span class="badge bg-success">可啟掃描</span>
                @endif
              </div>
            </div>
            <form method="POST" action="{{ route('scans.bind.save', $task) }}" class="d-flex gap-2">
              @csrf
              <input type="number" name="scan_id" class="form-control" placeholder="輸入 Nessus Scan ID" required>
              <button class="btn btn-primary">綁定</button>
            </form>
            <div class="text-muted small mt-2">
              小撇步：可在 Nessus 網站上找到對應掃描的 ID，或於右側清單點選綁定。
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-7">
        <div class="card shadow-sm">
          <div class="card-header bg-light">
            <strong>遠端掃描清單</strong>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table id="remoteScans" class="table table-striped table-hover align-middle w-100">
                <thead class="table-light">
                  <tr>
                    <th style="width:80px;">ID</th>
                    <th>名稱</th>
                    <th style="width:140px;">狀態</th>
                    <th style="width:120px;">操作</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ((array) ($remote['scans'] ?? []) as $s)
                    <tr>
                      <td class="text-center">{{ $s['id'] ?? '' }}</td>
                      <td class="text-break">{{ $s['name'] ?? '' }}</td>
                      <td><span class="badge bg-secondary">{{ $s['status'] ?? 'unknown' }}</span></td>
                      <td>
                        <form method="POST" action="{{ route('scans.bind.save', $task) }}" class="d-inline">
                          @csrf
                          <input type="hidden" name="scan_id" value="{{ (int) ($s['id'] ?? 0) }}">
                          <button class="btn btn-outline-primary btn-sm">綁定</button>
                        </form>
                      </td>
                    </tr>
                  @endforeach
                  @if (empty($remote['scans']))
                    <tr>
                      <td colspan="4" class="text-center text-muted py-4">尚未在 Nessus 建立任何掃描</td>
                    </tr>
                  @endif
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      if (window.jQuery && $.fn.DataTable) {
        const $t = $('#remoteScans');
        if ($.fn.DataTable.isDataTable($t)) $t.DataTable().clear().destroy();
        $t.DataTable({
          pageLength: 10,
          order: [
            [0, 'desc']
          ],
          language: {
            url: '/vendor/datatables/i18n/zh-HANT.json'
          }
        });
      }
    });
  </script>
@endpush