@extends('layout2')
@section('pageTitle', "補打卡審核｜".config('globals.app_name'))

<style>
    :root{
      --bg:#F6F7FB; --card:#fff; --text:#111827; --muted:#6B7280; --line:#E5E7EB;
      --shadow: 0 12px 28px rgba(17,24,39,.08); --radius:18px;
    }
    body{ background:var(--bg); color:var(--text); margin:0; font-family: system-ui, -apple-system, "Segoe UI", Arial; }
    .wrap{ max-width:560px; margin:0 auto; padding:14px 14px 90px; }
    .appbar{
      position: sticky; top:0; z-index:10;
      background: rgba(246,247,251,.86); backdrop-filter: blur(10px);
      padding: 10px 2px; margin-bottom: 10px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .brand{ font-weight:900; font-size:16px; }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      background:#F3F4F6; border:1px solid rgba(229,231,235,.9);
      padding:7px 10px; border-radius:999px; font-size:13px;
      white-space:nowrap;
    }
    .card{
      background:var(--card);
      border:1px solid rgba(229,231,235,.85);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      padding: 16px;
    }
    .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .title{ font-size:18px; font-weight:900; margin:0; }
    .sub{ font-size:13px; color:var(--muted); }
    .filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .chip{
      display:inline-flex; align-items:center; gap:6px;
      padding:7px 10px; border-radius:999px;
      border:1px solid rgba(229,231,235,.95);
      background:#fff; color:#111827; text-decoration:none; font-size:13px; font-weight:800;
    }
    .chip.active{ background:#111827; color:#fff; border-color:#111827; }
    .item{ padding: 12px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; }
    .item:first-child{ border-top:0; padding-top:6px; }
    .mono{ font-variant-numeric: tabular-nums; }
    .badge{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 9px; border-radius:999px;
      border:1px solid rgba(229,231,235,.9);
      font-size:12px; color:var(--muted); background:#F9FAFB;
      white-space:nowrap;
    }
    .badge.pending{ color:#92400E; background:#FFFBEB; border-color:#FDE68A; }
    .badge.approved{ color:#065F46; background:#ECFDF5; border-color:#A7F3D0; }
    .badge.rejected{ color:#991B1B; background:#FEF2F2; border-color:#FECACA; }
    .btnLink{ text-decoration:none; }
    .btn{
        height:40px !important;
        padding:0 12px!important;
        border-radius:12px!important;
        border:1px solid rgba(229,231,235,.95)!important;
        background:#fff!important;
        font-weight:900!important;
        font-size:13px!important;
        cursor:pointer!important;
        color:#111827!important;
    }
</style>

  <div class="wrap">
    <div class="appbar">
      <div class="brand">主管審核・補打卡</div>
      <div class="pill">⚙️ 管理者：{{ auth()->user() ? auth()->user()->name : '—' }}</div>
    </div>

    <div class="card">
      <div class="row">
        <div>
          <p class="title">補打卡申請</p>
          <div class="sub">點「查看」進入審核。建議先處理待審。</div>
        </div>
        <div class="badge pending">待審 {{ $counts['pending'] ?? 0 }}</div>
      </div>

      @php $qStatus = request('status', 'pending'); @endphp
      <div class="filters">
        <a class="chip {{ $qStatus === 'pending' ? 'active' : '' }}" href="{{ url('/admin/time-corrections?status=pending') }}">待審</a>
        <a class="chip {{ $qStatus === 'approved' ? 'active' : '' }}" href="{{ url('/admin/time-corrections?status=approved') }}">已核准</a>
        <a class="chip {{ $qStatus === 'rejected' ? 'active' : '' }}" href="{{ url('/admin/time-corrections?status=rejected') }}">已退回</a>
        <a class="chip {{ $qStatus === 'all' ? 'active' : '' }}" href="{{ url('/admin/time-corrections?status=all') }}">全部</a>
      </div>

      <div style="margin-top:10px;">
        @forelse(($requests ?? []) as $r)
          <div class="item">
            <div>
              <div style="font-weight:900;">
                {{ $r['employee_name'] ?? '—' }}
                <span class="sub">・{{ $r['work_date'] ?? '—' }}</span>
              </div>
              <div class="sub mono" style="margin-top:2px;">
                類型：{{ ($r['type'] ?? '') === 'clock_in' ? '上班' : '下班' }}
                ・時間：{{ $r['time'] ?? '--:--' }}
              </div>
              <div class="sub" style="margin-top:2px;">
                備註：{{ $r['note'] ?? '—' }}
              </div>
            </div>

            <div style="display:flex; flex-direction:column; align-items:flex-end; gap:8px;">
              <div class="badge {{ $r['status'] ?? 'pending' }}">
                {{ $r['status_text'] ?? '待審' }}
              </div>
              <a class="btnLink" href="{{ url('/admin/time-corrections/'.$r['id']) }}">
                <button class="btn" type="button">查看</button>
              </a>
            </div>
          </div>
        @empty
          <div class="sub" style="margin-top:10px;">目前沒有資料</div>
        @endforelse
      </div>
    </div>
  </div>