{{-- CVE 最新資安通報（分類頁籤 + 前端分頁） --}}
@php
  $cveData = $latestCves ?? [];
  $hasCves = collect($cveData)->flatten(1)->isNotEmpty();

  $tabConfig = [
      'all'      => ['label' => '全部',     'icon' => 'bi-shield-exclamation', 'color' => 'danger'],
      'Linux OS' => ['label' => 'Linux',    'icon' => 'bi-ubuntu',             'color' => 'dark'],
      'Apache'   => ['label' => 'Apache',   'icon' => 'bi-server',             'color' => 'danger'],
      'MySQL'    => ['label' => 'MySQL',    'icon' => 'bi-database',           'color' => 'primary'],
      'PHP'      => ['label' => 'PHP',      'icon' => 'bi-filetype-php',       'color' => 'indigo'],
      'MSSQL'    => ['label' => 'MSSQL',    'icon' => 'bi-database-gear',      'color' => 'info'],
      'Oracle'   => ['label' => 'Oracle',   'icon' => 'bi-database-fill',      'color' => 'warning'],
      'Chrome'   => ['label' => 'Chrome',   'icon' => 'bi-browser-chrome',     'color' => 'success'],
  ];

  // 組合「全部」頁籤的資料
  $allCves = collect($cveData)->flatten(1)->unique('id')->sortByDesc('published')->values()->toArray();
@endphp

@if ($hasCves)
  <div class="card mb-4 shadow-sm border-danger">
    <div class="card-header bg-danger text-white">
      <i class="bi bi-shield-exclamation"></i> 最新 CVE 資安通報
    </div>

    {{-- 頁籤 --}}
    <div class="card-body pb-0">
      <ul class="nav nav-tabs" id="cveTabs" role="tablist">
        @foreach ($tabConfig as $tabKey => $tab)
          @php
            $count = $tabKey === 'all' ? count($allCves) : count($cveData[$tabKey] ?? []);
            $slug = Str::slug($tabKey);
          @endphp
          @if ($tabKey === 'all' || $count > 0)
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ $loop->first ? 'active' : '' }} text-{{ $tab['color'] }}"
                      id="cve-tab-{{ $slug }}"
                      data-bs-toggle="tab"
                      data-bs-target="#cve-pane-{{ $slug }}"
                      type="button" role="tab">
                <i class="bi {{ $tab['icon'] }}"></i>
                {{ $tab['label'] }}
                <span class="badge bg-{{ $tab['color'] }} ms-1">{{ $count }}</span>
              </button>
            </li>
          @endif
        @endforeach
      </ul>
    </div>

    {{-- 頁籤內容 --}}
    <div class="tab-content" id="cveTabContent">
      @foreach ($tabConfig as $tabKey => $tab)
        @php
          $items = $tabKey === 'all' ? $allCves : ($cveData[$tabKey] ?? []);
          $slug = Str::slug($tabKey);
        @endphp
        @if ($tabKey === 'all' || count($items) > 0)
          <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
               id="cve-pane-{{ $slug }}" role="tabpanel">
            <div class="table-responsive">
              <table class="table table-hover table-sm mb-0 align-middle cve-table" data-tab="{{ $slug }}">
                <thead class="table-light">
                  <tr>
                    <th style="width:155px">CVE 編號</th>
                    <th style="width:80px">嚴重性</th>
                    <th style="width:60px">分數</th>
                    <th style="width:110px">產品</th>
                    <th>描述</th>
                    <th style="width:100px">發布日期</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($items as $idx => $cve)
                    @php
                      $severityColors = [
                          'CRITICAL' => 'danger', 'HIGH' => 'warning',
                          'MEDIUM' => 'info',     'LOW' => 'secondary',
                      ];
                      $severityLabels = [
                          'CRITICAL' => '嚴重', 'HIGH' => '高',
                          'MEDIUM' => '中',     'LOW' => '低',
                      ];
                      $sColor = $severityColors[$cve['severity'] ?? ''] ?? 'secondary';
                      $sLabel = $severityLabels[$cve['severity'] ?? ''] ?? ($cve['severity'] ?? 'N/A');
                      $tagColors = [
                          'Linux OS' => 'dark',    'Apache' => 'danger',
                          'MySQL' => 'primary',    'PHP' => 'indigo',
                          'MSSQL' => 'info',       'Oracle' => 'warning',
                          'Chrome' => 'success',
                      ];
                    @endphp
                    <tr class="cve-row" data-page="{{ intdiv($idx, 10) + 1 }}"
                        style="{{ $idx >= 10 ? 'display:none' : '' }}">
                      <td>
                        <a href="{{ $cve['url'] }}" target="_blank" rel="noopener"
                           class="text-decoration-none fw-semibold">
                          {{ $cve['id'] }}
                        </a>
                      </td>
                      <td><span class="badge bg-{{ $sColor }}">{{ $sLabel }}</span></td>
                      <td>
                        @if ($cve['score'])
                          <span class="fw-bold {{ $cve['score'] >= 9 ? 'text-danger' : ($cve['score'] >= 7 ? 'text-warning' : 'text-dark') }}">
                            {{ $cve['score'] }}
                          </span>
                        @else
                          <span class="text-muted">-</span>
                        @endif
                      </td>
                      <td>
                        @foreach ($cve['tags'] ?? [] as $tag)
                          <span class="badge bg-{{ $tagColors[$tag] ?? 'secondary' }} me-1">{{ $tag }}</span>
                        @endforeach
                      </td>
                      <td>
                        <span class="text-truncate d-inline-block" style="max-width:380px;"
                              title="{{ $cve['description'] }}">
                          {{ Str::limit($cve['description'], 90) }}
                        </span>
                      </td>
                      <td class="text-nowrap text-muted small">
                        {{ $cve['published'] ? \Carbon\Carbon::parse($cve['published'])->format('Y-m-d') : '-' }}
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>

            {{-- 分頁按鈕 --}}
            @if (count($items) > 10)
              @php $totalPages = (int) ceil(count($items) / 10); @endphp
              <nav class="d-flex justify-content-center py-2">
                <ul class="pagination pagination-sm mb-0 cve-pagination" data-tab="{{ $slug }}">
                  <li class="page-item disabled" data-action="prev">
                    <a class="page-link" href="#">&laquo;</a>
                  </li>
                  @for ($p = 1; $p <= $totalPages; $p++)
                    <li class="page-item {{ $p === 1 ? 'active' : '' }}" data-page="{{ $p }}">
                      <a class="page-link" href="#">{{ $p }}</a>
                    </li>
                  @endfor
                  <li class="page-item {{ $totalPages <= 1 ? 'disabled' : '' }}" data-action="next">
                    <a class="page-link" href="#">&raquo;</a>
                  </li>
                </ul>
              </nav>
            @endif
          </div>
        @endif
      @endforeach
    </div>

    <div class="card-footer text-muted small text-end">
      資料來源：<a href="https://nvd.nist.gov/" target="_blank" rel="noopener">NVD (National Vulnerability Database)</a>
      ．每 4 小時自動更新（僅顯示近 120 天）
    </div>
  </div>

  {{-- 分頁 JS --}}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll('.cve-pagination').forEach(function(pagination) {
        var tab = pagination.dataset.tab;
        var table = document.querySelector('.cve-table[data-tab="' + tab + '"]');
        if (!table) return;

        function showPage(page) {
          table.querySelectorAll('.cve-row').forEach(function(row) {
            row.style.display = (parseInt(row.dataset.page) === page) ? '' : 'none';
          });
          pagination.querySelectorAll('li[data-page]').forEach(function(li) {
            li.classList.toggle('active', parseInt(li.dataset.page) === page);
          });
          var totalPages = pagination.querySelectorAll('li[data-page]').length;
          pagination.querySelector('[data-action="prev"]').classList.toggle('disabled', page <= 1);
          pagination.querySelector('[data-action="next"]').classList.toggle('disabled', page >= totalPages);
          pagination.dataset.current = page;
        }

        pagination.addEventListener('click', function(e) {
          e.preventDefault();
          var li = e.target.closest('li');
          if (!li || li.classList.contains('disabled')) return;

          var current = parseInt(pagination.dataset.current || 1);
          var totalPages = pagination.querySelectorAll('li[data-page]').length;

          if (li.dataset.page) {
            showPage(parseInt(li.dataset.page));
          } else if (li.dataset.action === 'prev') {
            showPage(Math.max(1, current - 1));
          } else if (li.dataset.action === 'next') {
            showPage(Math.min(totalPages, current + 1));
          }
        });

        pagination.dataset.current = 1;
      });
    });
  </script>
@endif