<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin – Data Staf</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <style>
        body{
            margin:0;
            font-family:Figtree,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
            background:radial-gradient(circle at top,#1d4ed8,#020617);
            color:#e5e7eb;
        }
        .wrap{
            min-height:100vh;
            padding:22px 18px 26px;
            display:flex;
            justify-content:center;
        }
        .card{
            width:100%;
            max-width:1180px;
            background:rgba(15,23,42,.96);
            border-radius:22px;
            border:1px solid rgba(148,163,184,.4);
            box-shadow:0 24px 80px rgba(15,23,42,1);
            padding:20px 20px 18px;
        }
        h1{margin:0 0 4px;font-size:20px;}
        .subtitle{margin:0 0 18px;font-size:13px;color:#9ca3af;}
        .toolbar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:12px;
            gap:12px;
            flex-wrap:wrap;
        }
        .btn-primary{
            border:none;
            border-radius:999px;
            padding:8px 14px;
            background:linear-gradient(135deg,#38bdf8,#0ea5e9);
            color:#0f172a;
            font-size:13px;
            font-weight:600;
            cursor:pointer;
            display:inline-flex;
            align-items:center;
            gap:6px;
            text-decoration:none;
        }
        table{
            width:100%;
            border-collapse:collapse;
            font-size:12px;
            margin-top:4px;
        }
        th,td{
            padding:6px 8px;
            border-bottom:1px solid rgba(55,65,81,.9);
            text-align:left;
            white-space:nowrap;
        }
        th{
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:.08em;
            color:#9ca3af;
        }
        tbody tr:nth-child(even){background:rgba(15,23,42,.7);}
        .actions{display:flex;gap:6px;}
        .link{font-size:11px;color:#93c5fd;text-decoration:none;background:none;border:none;cursor:pointer;padding:0;}
        .link-danger{color:#fecaca;}
        .status{margin-bottom:10px;font-size:12px;color:#bbf7d0;}
        .empty{font-size:13px;color:#9ca3af;padding:16px 0 6px;}
        .pagination{
            margin-top:10px;
            font-size:12px;
            color:#9ca3af;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>Data Staf</h1>
        <p class="subtitle">Kemaskini nama, jantina dan jawatan staf sokongan/pentadbiran.</p>

        @if (session('status'))
            <div class="status">{{ session('status') }}</div>
        @endif

        <div class="toolbar">
            <form method="get" action="{{ route('admin.staff.index') }}">
                <input
                    type="text"
                    name="search"
                    placeholder="Cari nama / jawatan..."
                    value="{{ request('search') }}"
                    style="padding:6px 9px;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:rgba(15,23,42,.9);color:#e5e7eb;font-size:12px;min-width:220px;"
                >
            </form>

            <a href="{{ route('admin.staff.create') }}" class="btn-primary">
                + Rekod Staf
            </a>
        </div>

        @if ($staff->count())
            <div style="overflow-x:auto;">
                <table>
                    <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Jantina</th>
                        <th>Jawatan</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($staff as $s)
                        <tr>
                            <td>{{ $s->nama }}</td>
                            <td>{{ $s->jantina }}</td>
                            <td>{{ $s->jawatan }}</td>
                            <td>
                                <div class="actions">
                                    <a href="{{ route('admin.staff.edit', $s) }}" class="link">Edit</a>
                                    <form method="post" action="{{ route('admin.staff.destroy', $s) }}" onsubmit="return confirm('Padam rekod staf ini?')">
                                        @csrf
                                        @method('delete')
                                        <button type="submit" class="link link-danger">Padam</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <div class="pagination">
                {{ $staff->withQueryString()->links() }}
            </div>
        @else
            <div class="empty">Belum ada rekod staf. Tambah rekod baharu menggunakan butang “Rekod Staf”.</div>
        @endif
    </div>
</div>
</body>
</html>

