@extends('layouts.app')
@section('title', $profile->name . ' - GCB 排除設定')

@push('head')
  <style>
    .excluded-row { background: #fff3cd !important; }
    .dark .excluded-row { background: #3d3200 !important; }
    .gcb-val-badge { font-size: 0.72rem; border-radius: 6px; padding: 2px 6px; display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    .gcb-val-enable { background: #d4edda; color: #155724; }
    .gcb-val-disable { background: #f8d7da; color: #842029; }
    .gcb-val-other { background: #cfe2ff; color: #084298; }
    .gcb-val-ref { background: #f0f0f0; color: #6c757d; font-style: italic; }
    .gcb-cat-badge { font-size: 0.72rem; border-radius: 6px; padding: 2px 6px; background: #e8f5e9; color: #2e7d32; display: inline-block; line-height: 1.4; word-break: keep-all; }
    .dark .gcb-cat-badge { background: #1a3a1a; color: #6ede8a; }
  </style>
@endpush

@section('content')
  <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-pc-display text-success me-2"></i>{{ $profile->name }}
          <span class="badge bg-{{ $profile->type === 'ubuntu' ? 'warning' : 'danger' }} ms-2">{{ $profile->type === 'ubuntu' ? 'Ubuntu' : 'Apache' }}</span>
        </h4>
        <small class="text-muted">{{ $profile->description ?? '' }} ・ 已排除 {{ count($excludedIds) }} 項</small>
      </div>
      <div>
        <a href="{{ route('gcb.profile.export-exclusions', $profile) }}" class="btn btn-outline-secondary btn-sm me-1">
          <i class="bi bi-download me-1"></i>匯出排除清單
        </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>

    @include('partials.alert')

    {{-- 搜尋 --}}
    <div class="mb-3">
      <input type="text" class="form-control form-control-sm" id="itemSearch" placeholder="搜尋項目 (ID、名稱、類別...)">
    </div>

    {{-- 目前排除清單 --}}
    @if (count($excludedIds) > 0)
      <div class="card shadow-sm mb-3 border-warning">
        <div class="card-header bg-warning bg-opacity-10">
          <h6 class="mb-0"><i class="bi bi-slash-circle text-warning me-2"></i>已排除項目 ({{ count($excludedIds) }})</h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th style="width:160px">TWGCB-ID</th>
                  <th>項目名稱</th>
                  <th>排除原因</th>
                  <th style="width:100px">核准人</th>
                  <th style="width:80px">操作</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($profile->exclusions as $exc)
                  @php $item = collect($items)->firstWhere('id', $exc->gcb_item_id); @endphp
                  <tr>
                    <td><code class="small">{{ $exc->gcb_item_id }}</code></td>
                    <td>{{ $item['name'] ?? '-' }}</td>
                    <td class="small text-muted">{{ $exc->reason }}</td>
                    <td class="small">{{ $exc->approved_by }}</td>
                    <td>
                      <form action="{{ route('gcb.exclusion.delete', $exc) }}" method="POST" class="d-inline" onsubmit="return confirm('確定移除排除？')">
                        @csrf @method('DELETE')
                        <button class="btn btn-outline-success btn-sm" title="恢復檢測"><i class="bi bi-arrow-counterclockwise"></i></button>
                      </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    @endif

    {{-- 所有項目（可加入排除）--}}
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h6 class="mb-0"><i class="bi bi-list-check text-primary me-2"></i>全部檢測項目</h6>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th style="width:42px">#</th>
                <th style="width:160px">TWGCB-ID</th>
                <th style="width:110px">類別</th>
                <th>原則設定名稱</th>
                <th style="width:130px">設定值</th>
                <th style="width:72px">狀態</th>
                <th style="width:60px">操作</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($items as $idx => $item)
                @php $isExcluded = in_array($item['id'], $excludedIds); @endphp
                <tr class="item-row {{ $isExcluded ? 'excluded-row' : '' }}">
                  <td class="text-muted small">{{ $idx + 1 }}</td>
                  <td><code class="small">{{ $item['id'] }}</code></td>
                  <td><span class="gcb-cat-badge">{{ $item['category'] ?? '-' }}</span></td>
                  <td>{{ $item['name'] ?? '-' }}</td>
                  <td>
                    @php
                      $val = $item['expected'] ?? '-';
                      $cls = match(true) {
                        $val === '停用' => 'gcb-val-disable',
                        $val === '啟用' => 'gcb-val-enable',
                        str_contains($val, '請參閱') => 'gcb-val-ref',
                        default => 'gcb-val-other'
                      };
                      $display = mb_strlen($val) > 18 ? mb_substr($val, 0, 18) . '…' : $val;
                    @endphp
                    <span class="gcb-val-badge {{ $cls }}" title="{{ $val }}">{{ $display }}</span>
                  </td>
                  <td>
                    @if ($isExcluded)
                      <span class="badge bg-warning text-dark">已排除</span>
                    @else
                      <span class="badge bg-success">檢測中</span>
                    @endif
                  </td>
                  <td>
                    @if (!$isExcluded)
                      <button class="btn btn-outline-warning btn-sm" data-bs-toggle="modal"
                              data-bs-target="#excludeModal" data-item-id="{{ $item['id'] }}" data-item-name="{{ $item['name'] }}">
                        <i class="bi bi-slash-circle"></i>
                      </button>
                    @endif
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  {{-- 排除 Modal --}}
  <div class="modal fade" id="excludeModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="{{ route('gcb.exclusion.store', $profile) }}" method="POST">
          @csrf
          <input type="hidden" name="gcb_item_id" id="excItemId">
          <div class="modal-header">
            <h5 class="modal-title"><i class="bi bi-slash-circle text-warning me-2"></i>排除檢測項目</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <p>排除項目：<strong id="excItemName"></strong></p>
            <div class="mb-3">
              <label class="form-label" for="reason">排除原因 <span class="text-danger">*</span></label>
              <textarea name="reason" class="form-control" rows="3" placeholder="說明為何排除此項檢測（如：本機非伺服器用途、已有替代方案...）" required id="reason"></textarea>
            </div>
            <div class="mb-3">
              <label class="form-label" for="approved_by">核准人</label>
              <input type="text" name="approved_by" class="form-control" id="approved_by" value="{{ Auth::user()->name }}">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-warning btn-sm">確定排除</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 搜尋
      document.getElementById('itemSearch').addEventListener('input', function() {
        var q = this.value.toLowerCase();
        document.querySelectorAll('.item-row').forEach(function(tr) {
          tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
        });
      });

      // 排除 Modal 帶入項目資訊
      document.getElementById('excludeModal').addEventListener('show.bs.modal', function(e) {
        var btn = e.relatedTarget;
        document.getElementById('excItemId').value = btn.dataset.itemId;
        document.getElementById('excItemName').textContent = btn.dataset.itemId + ' - ' + btn.dataset.itemName;
      });
    });
  </script>
@endpush