@extends('layouts.app')
@section('title', 'GCB 檢測報告')

@push('head')
  <style>
    .stat-card { border-radius: 12px; text-align: center; padding: 1rem; }
    .stat-number { font-size: 2rem; font-weight: 700; }
    .status-pass { color: #198754; } .status-fail { color: #dc3545; } .status-error { color: #fd7e14; }
    .filter-pills .btn { border-radius: 50px; font-size: 0.85rem; }
    .filter-pills .btn.active { font-weight: 600; }
    .cat-badge { font-size: 0.72rem; border-radius: 6px; padding: 2px 6px; background: #e9ecef; color: #495057; display: inline-block; line-height: 1.4; word-break: keep-all; }
    .val-cell { font-size: 0.82rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  </style>
@endpush

@section('content')
  @php
    $s = $filteredSummary;
    $rate = $s['compliance_rate'] ?? 0;
    $rateColor = $rate >= 80 ? '#198754' : ($rate >= 60 ? '#fd7e14' : '#dc3545');
    $categories = collect($filteredResults)->pluck('category')->unique()->sort()->values();
  @endphp

  <div class="container py-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h4 class="mb-1">
          <i class="bi bi-file-earmark-bar-graph text-primary me-2"></i>{{ $report->title }}
        </h4>
        @if ($report->profile)
          <small class="text-muted">
            主機：<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-pc-display me-1"></i>{{ $report->profile->name }}</span>
            ・排除 {{ $s['excluded'] ?? 0 }} 項不檢測
          </small>
        @endif
      </div>
      <div>
        <a href="{{ route('gcb.report.pdf', $report) }}" class="btn btn-outline-danger btn-sm me-1">
          <i class="bi bi-file-earmark-pdf me-1"></i>匯出 PDF
        </a>
        <a href="{{ route('gcb.index') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-arrow-left me-1"></i>返回 GCB
        </a>
      </div>
    </div>

    {{-- 摘要 --}}
    <div class="row g-3 mb-4">
      <div class="col-md-3">
        <div class="card stat-card border-0 shadow-sm">
          <div class="stat-number" style="color:{{ $rateColor }}">{{ $rate }}%</div>
          <div class="small text-muted">合規率（排除後）</div>
          <div style="height:10px; border-radius:5px; background:#e9ecef; margin-top:8px">
            <div style="width:{{ $rate }}%; height:100%; border-radius:5px; background:{{ $rateColor }}"></div>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="card stat-card border-0 shadow-sm">
          <div class="stat-number text-muted">{{ $s['total'] ?? 0 }}</div>
          <div class="small text-muted">檢測項目</div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="card stat-card border-0 shadow-sm bg-success bg-opacity-10">
          <div class="stat-number status-pass">{{ $s['pass'] ?? 0 }}</div>
          <div class="small text-muted">通過</div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="card stat-card border-0 shadow-sm bg-danger bg-opacity-10">
          <div class="stat-number status-fail">{{ $s['fail'] ?? 0 }}</div>
          <div class="small text-muted">不通過</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card stat-card border-0 shadow-sm">
          <div class="small text-start mt-1">
            <strong>主機：</strong>{{ $report->hostname }}<br>
            <strong>時間：</strong>{{ $report->scan_time?->format('Y-m-d H:i') }}<br>
            <strong>標準：</strong>{{ $report->type === 'ubuntu' ? 'TWGCB-01-014' : 'TWGCB-04-007' }}<br>
            <strong>錯誤：</strong><span class="status-error">{{ $s['error'] ?? 0 }}</span>
            ・<strong>排除：</strong><span class="text-secondary">{{ $s['excluded'] ?? 0 }}</span>
          </div>
        </div>
      </div>
    </div>

    {{-- 篩選 --}}
    <div class="mb-3 d-flex flex-wrap gap-2 align-items-center">
      <div class="filter-pills btn-group" role="group">
        <button class="btn btn-outline-secondary btn-sm active" data-filter="all">全部</button>
        <button class="btn btn-outline-success btn-sm" data-filter="pass">通過</button>
        <button class="btn btn-outline-danger btn-sm" data-filter="fail">不通過</button>
        <button class="btn btn-outline-warning btn-sm" data-filter="error">錯誤</button>
      </div>
      <select class="form-select form-select-sm" id="catFilter" style="width:auto">
        <option value="">所有類別</option>
        @foreach ($categories as $cat)
          <option value="{{ $cat }}">{{ $cat }}</option>
        @endforeach
      </select>
      <input type="text" class="form-control form-control-sm" id="reportSearch" placeholder="搜尋..." style="width:200px">
    </div>

    {{-- 結果表格（排除項目已過濾） --}}
    <div class="card shadow-sm">
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover table-sm align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th style="width:55px">狀態</th>
                <th style="width:170px">ID</th>
                <th style="width:120px">類別</th>
                <th>檢測項目</th>
                <th style="width:130px">預期值</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($filteredResults as $r)
                @php
                  $stIcon = match($r['status'] ?? '') {
                    'pass' => '<i class="bi bi-check-circle-fill text-success"></i>',
                    'fail' => '<i class="bi bi-x-circle-fill text-danger"></i>',
                    'error' => '<i class="bi bi-exclamation-triangle-fill text-warning"></i>',
                    default => '<i class="bi bi-dash-circle text-secondary"></i>',
                  };
                @endphp
                <tr class="report-row" data-status="{{ $r['status'] ?? '' }}" data-cat="{{ $r['category'] ?? '' }}">
                  <td>{!! $stIcon !!}</td>
                  <td><code class="small">{{ $r['id'] ?? '' }}</code></td>
                  <td><span class="cat-badge">{{ $r['category'] ?? '' }}</span></td>
                  <td>
                    {{ $r['name'] ?? '' }}
                    @if (($r['status'] ?? '') === 'fail' && !empty($r['remediation']))
                      <div class="mt-1 p-2 rounded" style="background:#fff3cd; border:1px solid #ffc107; font-size:0.8rem">
                        <strong><i class="bi bi-tools me-1"></i>修復建議：</strong>
                        <pre class="mb-0 mt-1" style="font-size:0.78rem; white-space:pre-wrap; font-family:monospace; color:#664d03">{{ $r['remediation'] }}</pre>
                      </div>
                    @endif
                  </td>
                  @php $exp = $r['expected'] ?? '-'; @endphp
                  <td class="val-cell" title="{{ $exp }}">{{ $exp }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      function filterRows() {
        var sf = document.querySelector('.filter-pills .btn.active')?.dataset.filter || 'all';
        var cf = document.getElementById('catFilter').value;
        var q = document.getElementById('reportSearch').value.toLowerCase();
        document.querySelectorAll('.report-row').forEach(function(tr) {
          var ok = (sf==='all' || tr.dataset.status===sf) && (!cf || tr.dataset.cat===cf) && (!q || tr.textContent.toLowerCase().includes(q));
          tr.style.display = ok ? '' : 'none';
        });
      }
      document.querySelectorAll('.filter-pills .btn').forEach(function(b) {
        b.addEventListener('click', function() {
          document.querySelectorAll('.filter-pills .btn').forEach(function(x){x.classList.remove('active')});
          b.classList.add('active'); filterRows();
        });
      });
      document.getElementById('catFilter').addEventListener('change', filterRows);
      document.getElementById('reportSearch').addEventListener('input', filterRows);
    });
  </script>
@endpush