{{-- resources/views/scans/index.blade.php --}}
@extends('layouts.app1')
@push('styles')
  {{-- DataTables CSS --}}
@endpush

@section('content')
  <div class="container py-4">

    {{-- 標題列 --}}
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h3 class="mb-0">掃描任務</h3>
      <div class="d-flex gap-2">
        <a href="{{ route('scans.create') }}" class="btn btn-primary">
          <i class="bi bi-plus-lg me-1"></i> 新增掃描
        </a>
        <a href="{{ route('scans.index') }}" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-counterclockwise me-1"></i> 重新整理
        </a>
      </div>
    </div>

    {{-- Flash 訊息 --}}
    @if (session('ok'))
      <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle me-1"></i>{{ session('ok') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif
    @if (session('err'))
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle me-1"></i>{{ session('err') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    @endif

    {{-- 篩選列 --}}
    <div class="card mb-3 shadow-sm">
      <div class="card-body d-flex flex-wrap align-items-center gap-3">
        <div class="d-flex align-items-center gap-2">
          <label class="text-muted">狀態</label>
          <select id="statusFilter" class="form-select form-select-sm" style="width: 180px;">
            <option value="">（全部）</option>
            <option value="pending">pending</option>
            <option value="created">created</option>
            <option value="launched">launched</option>
            <option value="running">running</option>
            <option value="completed">completed</option>
            <option value="failed">failed</option>
          </select>
        </div>
        <div class="text-muted small ms-auto">
          共 <span class="fw-semibold">{{ $tasks->count() }}</span> 筆
        </div>
      </div>
    </div>

    {{-- 資料表 --}}
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="table-responsive">
          <table id="scansTable" 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: 160px;">狀態</th>
                <th style="width: 140px;">進度</th>
                <th style="width: 120px;">目標數</th>
                <th style="width: 200px;">建立時間</th>
                <th style="width: 180px;">操作</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($tasks as $t)
                @php
                  $status = $t->status ?? 'unknown';
                  $badgeClass = match ($status) {
                      'pending' => 'bg-secondary',
                      'created' => 'bg-info',
                      'launched' => 'bg-primary',
                      'running' => 'bg-warning text-dark',
                      'completed' => 'bg-success',
                      'failed' => 'bg-danger',
                      default => 'bg-light text-dark',
                  };
                  $err = data_get($t->meta, 'error');
                  $progress = data_get($t->meta, 'progress');
                  $targetCount = $t->targets?->count() ?? 0;
                @endphp
                <tr>
                  <td class="text-center">{{ $t->id }}</td>
                  <td class="text-break">
                    <div class="fw-semibold">{{ $t->name }}</div>
                    @if (!empty($t->nessus_scan_id))
                      <div class="text-muted small mt-1">
                        Scan ID: <code>{{ $t->nessus_scan_id }}</code>
                      </div>
                    @endif
                  </td>
                  <td data-status="{{ $status }}">
                    <span class="badge {{ $badgeClass }} px-3 py-2">{{ $status }}</span>
                    @if ($err)
                      <span class="ms-2 text-danger" data-bs-toggle="tooltip" title="{{ $err }}">
                        <i class="bi bi-exclamation-octagon-fill"></i>
                      </span>
                    @endif
                  </td>
                  <td>
                    @if (is_numeric($progress))
                      <div class="progress" role="progressbar" aria-valuenow="{{ $progress }}" aria-valuemin="0"
                        aria-valuemax="100">
                        <div class="progress-bar" style="width: {{ $progress }}%;">
                          {{ $progress }}%
                        </div>
                      </div>
                    @else
                      <span class="text-muted">—</span>
                    @endif
                  </td>
                  <td>{{ $targetCount }}</td>
                  <td>{{ $t->created_at }}</td>
                  <td>
                    <div class="d-flex flex-wrap gap-2">
                      <a href="{{ route('scans.show', $t->id) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye me-1"></i> 檢視
                      </a>

                      @if (in_array($status, ['failed', 'pending']))
                        <form method="POST" action="{{ route('scans.retry', $t) }}" class="d-inline">
                          @csrf
                          <button class="btn btn-warning btn-sm text-dark" type="submit">
                            <i class="bi bi-arrow-repeat me-1"></i> 重試
                          </button>
                        </form>
                      @endif
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
@endsection

@push('scripts')
  <script>
    $(function() {
      $('#clientsTable').DataTable({
        serverSide: false,
        processing: false,
        dom: 'lfrtip',
        order: [
          [4, 'desc']
        ],
        pageLength: 10,
        language: {
          url: '/vendor/datatables/i18n/zh-HANT.json'
        }
      });
    });
  </script>
@endpush