@extends('layouts.app')
@section('title', '防火牆申請審核')

@section('content')
<div class="container py-4" style="max-width:1000px;">

  <div class="mb-4">
    <h3 class="mb-0 fw-bold"><i class="bi bi-shield-lock me-2 text-danger"></i>防火牆申請審核</h3>
    <div class="text-muted small mt-1">主管初審通過後，進行最終確認並自動套用 UFW 規則</div>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
      {{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif
  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
      {{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  @endif

  {{-- ── 待審核 ── --}}
  <h5 class="fw-semibold mb-3">
    <span class="badge bg-warning text-dark me-2">{{ $pending->count() }}</span>待審核
  </h5>

  @if($pending->isEmpty())
    <div class="alert alert-light border text-muted">目前沒有待最終審核的申請（等待主管初審中）。</div>
  @else
  <div class="d-flex flex-column gap-3 mb-5">
    @foreach($pending as $r)
    <div class="card border-0 shadow-sm">
      <div class="card-body p-4">
        <div class="row g-3 align-items-start">
          <div class="col-md-8">
            <div class="d-flex align-items-center gap-3 mb-3">
              <span class="badge bg-warning text-dark fs-6">待審核</span>
              <span class="text-muted small">#{{ $r->id }} · {{ $r->created_at->format('Y/m/d H:i') }}</span>
            </div>
            <div class="row g-2 mb-3">
              <div class="col-sm-4">
                <div class="text-muted small">申請人</div>
                <div class="fw-semibold">{{ $r->user->name }}</div>
                <div class="text-muted small">{{ $r->user->email }}</div>
              </div>
              <div class="col-sm-4">
                <div class="text-muted small">申請 IP</div>
                <code class="fs-6">{{ $r->ip_address }}</code>
              </div>
              <div class="col-sm-4">
                <div class="text-muted small">目標 / Port</div>
                <div>{{ $r->target_server }}</div>
                @foreach($r->ports as $p)
                  <span class="badge bg-secondary me-1">:{{ $p }}</span>
                @endforeach
              </div>
            </div>
            <div class="text-muted small">申請原因</div>
            <div>{{ $r->reason }}</div>
          </div>
          <div class="col-md-4">
            {{-- 通過 --}}
            <form method="POST" action="{{ route('firewall-requests.approve', $r) }}" class="mb-2">
              @csrf
              <textarea name="reviewer_note" class="form-control form-control-sm mb-2"
                rows="2" placeholder="審核備註（選填）"></textarea>
              <button type="submit" class="btn btn-success w-100"
                onclick="return confirm('確認最終通過並套用 UFW 規則到 {{ $r->target_server }}？')">
                <i class="bi bi-check-lg me-1"></i>最終通過並套用 UFW
              </button>
            </form>
            {{-- 拒絕 --}}
            <form method="POST" action="{{ route('firewall-requests.reject', $r) }}">
              @csrf
              <textarea name="reviewer_note" class="form-control form-control-sm mb-2"
                rows="2" placeholder="拒絕原因（建議填寫）"></textarea>
              <button type="submit" class="btn btn-outline-danger w-100">
                <i class="bi bi-x-lg me-1"></i>拒絕
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    @endforeach
  </div>
  @endif

  {{-- ── 已審核 ── --}}
  <h5 class="fw-semibold mb-3">歷史紀錄</h5>
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <table id="fwAdminTable" class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>申請人</th>
            <th>IP</th>
            <th>Port</th>
            <th>申請原因</th>
            <th>狀態</th>
            <th>審核人</th>
            <th>備註</th>
            <th>UFW 輸出</th>
            <th>時間</th>
          </tr>
        </thead>
        <tbody>
          @forelse($reviewed as $r)
          <tr>
            <td class="text-muted small">{{ $r->id }}</td>
            <td>
              <div>{{ $r->user->name }}</div>
              <div class="text-muted small">{{ $r->user->email }}</div>
            </td>
            <td><code>{{ $r->ip_address }}</code></td>
            <td>
              @foreach($r->ports as $p)
                <span class="badge bg-secondary me-1">{{ $p }}</span>
              @endforeach
            </td>
            <td class="small text-muted" style="max-width:200px;"><span class="text-truncate d-block" title="{{ $r->reason }}">{{ $r->reason }}</span></td>
            <td><span class="badge bg-{{ $r->statusBadge() }}">{{ $r->statusLabel() }}</span></td>
            <td class="small">{{ $r->reviewer?->name ?? '—' }}</td>
            <td class="small text-muted">{{ $r->reviewer_note ?: '—' }}</td>
            <td>
              @if($r->ufw_output)
                <button class="btn btn-sm btn-outline-secondary" type="button"
                  data-bs-toggle="collapse" data-bs-target="#ufw-{{ $r->id }}">
                  <i class="bi bi-terminal"></i>
                </button>
                <div class="collapse mt-1" id="ufw-{{ $r->id }}">
                  <pre class="bg-dark text-success p-2 rounded small mb-0" style="font-size:.72rem;">{{ $r->ufw_output }}</pre>
                </div>
              @else
                <span class="text-muted small">—</span>
              @endif
            </td>
            <td class="text-muted small">{{ $r->reviewed_at?->format('Y/m/d H:i') }}</td>
          </tr>
          @empty
          <tr>
            <td colspan="10" class="text-center text-muted py-4">尚無歷史紀錄</td>
          </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#fwAdminTable').DataTable({
        order: [[0, 'desc']],
        pageLength: 20,
        language: { url: '/vendor/datatables/i18n/zh-HANT.json' },
        columnDefs: [{ targets: [3, 4, 7, 8], orderable: false }]
    });
});
</script>
@endpush