{{-- resources/views/gitlab-requests/supervisor.blade.php --}}
@extends('layouts.app')
@section('title', '主管申請審核')

@push('styles')
<style>
.ar-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ar-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.ar-tab {
  padding:5px 14px; border-radius:20px; font-size:.8rem; font-weight:700;
  border:1.5px solid #e5e7eb; background:#fff; color:#6b7280;
  cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:5px;
}
.ar-tab:hover { border-color:#93c5fd; color:#1d4ed8; background:#eff6ff; }
.ar-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.ar-tab .cnt { background:rgba(0,0,0,.12); border-radius:10px; padding:1px 7px; font-size:.72rem; }
.ar-tab.active .cnt { background:rgba(255,255,255,.25); }

.ar-list { display:flex; flex-direction:column; gap:10px; }
.ar-item {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:16px 20px; transition:box-shadow .12s, border-color .12s;
}
.ar-item:hover { border-color:#bfdbfe; box-shadow:0 2px 12px rgba(37,99,235,.08); }
.ar-item-top { display:flex; align-items:flex-start; gap:14px; }
.ar-icon {
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; margin-top:1px;
}
.ar-body { flex:1; min-width:0; }
.ar-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.ar-project { font-size:.92rem; font-weight:700; color:#111827; }
.ar-type-badge { font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:20px; }
.ar-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:.77rem; color:#6b7280; }
.ar-meta span { display:flex; align-items:center; gap:4px; }
.ar-right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; }
.ar-date { font-size:.73rem; color:#9ca3af; white-space:nowrap; }
.ar-status { font-size:.73rem; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.ar-status.pending_admin      { background:#e0f2fe; color:#0369a1; }
.ar-status.pending_supervisor { background:#fef9c3; color:#92400e; }
.ar-status.approved { background:#dcfce7; color:#15803d; }
.ar-status.rejected { background:#fee2e2; color:#b91c1c; }
.ar-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ar-reason { margin-top:8px; padding:8px 12px; background:#f9fafb; border-radius:8px; font-size:.8rem; color:#374151; border-left:3px solid #e5e7eb; }

[data-bs-theme="dark"] .ar-tab { background:#1c1f26!important; border-color:#2e3340!important; color:#9ca3af!important; }
[data-bs-theme="dark"] .ar-tab:hover { border-color:#3b82f6!important; color:#93c5fd!important; background:#1a2338!important; }
[data-bs-theme="dark"] .ar-tab.active { background:#2563eb!important; border-color:#2563eb!important; color:#fff!important; }
[data-bs-theme="dark"] .ar-item { background:#1c1f26!important; border-color:#2e3340!important; }
[data-bs-theme="dark"] .ar-item:hover { border-color:#3b82f6!important; }
[data-bs-theme="dark"] .ar-project { color:#dee2e6!important; }
[data-bs-theme="dark"] .ar-meta { color:#9ca3af!important; }
[data-bs-theme="dark"] .ar-date { color:#6b7280!important; }
[data-bs-theme="dark"] .ar-reason { background:#252830!important; color:#dee2e6!important; border-color:#2e3340!important; }
[data-bs-theme="dark"] .ar-status.approved { background:rgba(34,197,94,.15)!important; color:#4ade80!important; }
[data-bs-theme="dark"] .ar-status.rejected { background:rgba(239,68,68,.15)!important; color:#f87171!important; }
[data-bs-theme="dark"] .ar-status.pending_admin { background:rgba(14,165,233,.15)!important; color:#38bdf8!important; }
[data-bs-theme="dark"] .ar-status.pending_supervisor { background:rgba(234,179,8,.15)!important; color:#fcd34d!important; }
@media(max-width:640px){
  .ar-item-top { flex-wrap:wrap; }
  .ar-right { flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
}
</style>
@endpush

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

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h4 class="mb-0 fw-bold"><i class="bi bi-person-check me-2 text-warning"></i>主管申請審核</h4>
      <div class="text-muted small mt-1">審核下屬提出的 GitLab 帳號與專案申請</div>
    </div>
    <a href="{{ route('gitlab-requests.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回
    </a>
  </div>

  @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
      <i class="bi bi-check-circle me-1"></i>{{ session('success') }}
      <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
    </div>
  @endif

  @if ($requests->isEmpty())
    <div class="text-center py-5 text-muted">
      <i class="bi bi-inbox fs-1 d-block mb-2"></i>目前沒有申請紀錄
    </div>
  @else

  {{-- Filter tabs --}}
  <div class="ar-toolbar">
    <div class="ar-tabs">
      <button class="ar-tab active" data-filter="all">
        全部 <span class="cnt" id="cnt-all"></span>
      </button>
      <button class="ar-tab" data-filter="pending_supervisor">
        待我審核 <span class="cnt" id="cnt-pending"></span>
      </button>
      <button class="ar-tab" data-filter="pending_admin">
        轉管理者 <span class="cnt" id="cnt-admin"></span>
      </button>
      <button class="ar-tab" data-filter="approved">
        已通過 <span class="cnt" id="cnt-approved"></span>
      </button>
      <button class="ar-tab" data-filter="rejected">
        已退回 <span class="cnt" id="cnt-rejected"></span>
      </button>
    </div>
  </div>

  <div class="ar-list" id="arList"></div>
  <div class="text-center py-5 text-muted d-none" id="arEmpty">
    <i class="bi bi-funnel fs-2 d-block mb-2"></i>沒有符合的紀錄
  </div>

  @endif
</div>
@endsection

@push('scripts')
<script>
@php
$rows = $requests->map(function($r) {
    $projectLabel = optional($r->projectCache)->name_with_namespace ?? $r->project_name ?? null;
    $accessMap = [10=>'Guest',20=>'Reporter',30=>'Developer',40=>'Maintainer',50=>'Owner'];
    $approveRoute = null;
    if ($r->status === 'pending_supervisor') {
        $approveRoute = match($r->request_type) {
            'new_account'    => route('gitlab-requests.supervisor.approve-account', $r),
            'new_project'    => route('gitlab-requests.supervisor.approve-project', $r),
            'add_to_project' => route('gitlab-requests.supervisor.approve-add-to-project', $r),
            default          => null,
        };
    }
    return [
        'id'          => $r->id,
        'type'        => $r->request_type,
        'email'       => $r->email,
        'username'    => $r->gitlab_username ?: $r->email,
        'project'     => $projectLabel,
        'access'      => $r->request_type === 'add_to_project' ? ($accessMap[$r->access_level] ?? null) : null,
        'reason'      => $r->reason,
        'date'        => $r->created_at->format('Y-m-d H:i'),
        'status'      => $r->status,
        'approve_url' => $approveRoute,
        'reject_url'  => $r->status === 'pending_supervisor' ? route('gitlab-requests.supervisor.reject', $r->id) : null,
    ];
});
@endphp
const ROWS = {!! json_encode($rows) !!};

const TYPE_META = {
  new_account:    { label:'申請帳號', bg:'#fef9c3', color:'#92400e', icon:'bi-person-badge',  ibg:'#fef3c7', ic:'#b45309' },
  new_project:    { label:'建立專案', bg:'#dbeafe', color:'#1e40af', icon:'bi-folder-plus',   ibg:'#dbeafe', ic:'#1d4ed8' },
  add_to_project: { label:'加入專案', bg:'#dcfce7', color:'#166534', icon:'bi-person-plus',   ibg:'#dcfce7', ic:'#15803d' },
};
const STATUS_LABEL = {
  pending_supervisor:'待主管審核', pending_admin:'待管理者處理', approved:'已通過', rejected:'已退回',
};

let currentFilter = 'all';

function filtered() {
  return ROWS.filter(r => currentFilter === 'all' || r.status === currentFilter);
}

function esc(s) {
  return String(s??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function render() {
  const all = ROWS;
  document.getElementById('cnt-all').textContent      = all.length;
  document.getElementById('cnt-pending').textContent  = all.filter(r=>r.status==='pending_supervisor').length;
  document.getElementById('cnt-admin').textContent    = all.filter(r=>r.status==='pending_admin').length;
  document.getElementById('cnt-approved').textContent = all.filter(r=>r.status==='approved').length;
  document.getElementById('cnt-rejected').textContent = all.filter(r=>r.status==='rejected').length;

  const list = filtered();
  const arList  = document.getElementById('arList');
  const arEmpty = document.getElementById('arEmpty');
  if (!list.length) { arList.innerHTML=''; arEmpty.classList.remove('d-none'); return; }
  arEmpty.classList.add('d-none');

  arList.innerHTML = list.map(r => {
    const tm = TYPE_META[r.type] || {label:r.type,bg:'#f3f4f6',color:'#374151',icon:'bi-question',ibg:'#f3f4f6',ic:'#374151'};

    const metaParts = [`<span><i class="bi bi-envelope" style="color:#9ca3af;"></i>${esc(r.email)}</span>`];
    if (r.username !== r.email) metaParts.push(`<span><i class="bi bi-person" style="color:#9ca3af;"></i>${esc(r.username)}</span>`);
    if (r.access) metaParts.push(`<span><i class="bi bi-shield-half" style="color:#9ca3af;"></i>${esc(r.access)}</span>`);

    let actions = '';
    if (r.approve_url) {
      actions += `<form action="${esc(r.approve_url)}" method="POST" class="d-inline">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <button class="btn btn-sm btn-success"><i class="bi bi-check-lg me-1"></i>核准</button>
      </form>`;
    }
    if (r.reject_url) {
      actions += `<form action="${esc(r.reject_url)}" method="POST" class="d-inline">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg me-1"></i>退回</button>
      </form>`;
    }
    if (!actions) actions = `<span class="text-muted small">已處理</span>`;

    const reasonBlock = r.reason
      ? `<div class="ar-reason"><i class="bi bi-chat-left-text me-1 text-muted"></i>${esc(r.reason)}</div>`
      : '';
    const projectTitle = r.project || r.email || '—';

    return `<div class="ar-item">
      <div class="ar-item-top">
        <div class="ar-icon" style="background:${tm.ibg};color:${tm.ic};"><i class="bi ${tm.icon}"></i></div>
        <div class="ar-body">
          <div class="ar-title-row">
            <span class="ar-project">${esc(projectTitle)}</span>
            <span class="ar-type-badge" style="background:${tm.bg};color:${tm.color};">${tm.label}</span>
          </div>
          <div class="ar-meta">${metaParts.join('')}</div>
          ${reasonBlock}
        </div>
        <div class="ar-right">
          <span class="ar-date"><i class="bi bi-clock me-1"></i>${esc(r.date)}</span>
          <span class="ar-status ${esc(r.status)}">${STATUS_LABEL[r.status]||r.status}</span>
          <div class="ar-actions">${actions}</div>
        </div>
      </div>
    </div>`;
  }).join('');
}

document.querySelectorAll('.ar-tab').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.ar-tab').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    currentFilter = btn.dataset.filter;
    render();
  });
});

render();
</script>
@endpush