<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin – Data Kebolehpasaran</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,sans-serif; 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:1280px; 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); }
        .badge{ display:inline-flex; padding:2px 8px; border-radius:999px; background:rgba(37,99,235,.25); color:#bfdbfe; font-size:11px; }
        .link{ font-size:11px; color:#93c5fd; text-decoration:none; }
        .link-danger{ color:#fecaca; background:none; border:none; cursor:pointer; font-size:11px; padding:0; }
        .status{ margin-bottom:10px; font-size:12px; color:#bbf7d0; }
        .error{ margin-bottom:10px; font-size:12px; color:#fecaca; }
        .empty{ font-size:13px; color:#9ca3af; padding:16px 0 6px; }
        .pagination{
            margin-top:10px;
            font-size:12px;
            color:#9ca3af;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
        }
        select{ 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; }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>Data Kebolehpasaran Graduan</h1>
        <p class="subtitle">Muat naik CSV dan urus rekod kebolehpasaran (tahun bergraduat, program, status pekerjaan, sektor, pendapatan, dll).</p>

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

        <div class="toolbar">
            <form method="get" action="{{ route('admin.employability.index') }}" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
                <input type="text" name="search" placeholder="Cari nama / IC / program..." 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:200px;">
                <select name="tahun_bergraduat">
                    <option value="">Semua tahun</option>
                    @foreach($years as $y)
                        <option value="{{ $y }}" {{ request('tahun_bergraduat') == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endforeach
                </select>
                <button type="submit" style="padding:6px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.7);background:rgba(37,99,235,.8);color:#e5e7eb;cursor:pointer;">Tapis</button>
            </form>
            <a href="{{ route('admin.employability.create') }}" class="btn-primary">+ Muat naik CSV</a>
        </div>

        @if ($records->count())
            <div style="overflow-x:auto;">
                <table>
                    <thead>
                    <tr>
                        <th>Tahun</th>
                        <th>Nama</th>
                        <th>IC</th>
                        <th>Program</th>
                        <th>Status Pekerjaan</th>
                        <th>Sektor</th>
                        <th>Pendapatan</th>
                        <th>Dalam bidang</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($records as $r)
                        <tr>
                            <td><span class="badge">{{ $r->tahun_bergraduat }}</span></td>
                            <td>{{ $r->nama }}</td>
                            <td>{{ $r->no_kad_pengenalan }}</td>
                            <td>{{ $r->program_pengajian }}</td>
                            <td>{{ $r->status_pekerjaan }}</td>
                            <td>{{ $r->bekerja_sektor_pekerjaan }}</td>
                            <td>{{ $r->bekerja_pendapatan_bulanan ? number_format($r->bekerja_pendapatan_bulanan, 0) : '–' }}</td>
                            <td>{{ $r->bekerja_dalam_bidang ?? '–' }}</td>
                            <td>
                                <form method="post" action="{{ route('admin.employability.destroy', $r->id) }}" onsubmit="return confirm('Padam rekod ini?')" style="display:inline;">
                                    @csrf
                                    @method('delete')
                                    <button type="submit" class="link-danger">Padam</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination">
                <div>
                    Menunjukkan {{ $records->firstItem() }}–{{ $records->lastItem() }} daripada {{ $records->total() }} rekod.
                </div>
                <div>
                    @if ($records->onFirstPage())
                        <span class="link" style="opacity:.4;">« Sebelum</span>
                    @else
                        <a href="{{ $records->previousPageUrl() }}" class="link">« Sebelum</a>
                    @endif

                    @foreach ($records->getUrlRange(1, $records->lastPage()) as $page => $url)
                        @if ($page == $records->currentPage())
                            <span class="link" style="font-weight:600;text-decoration:underline;">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="link">{{ $page }}</a>
                        @endif
                    @endforeach

                    @if ($records->hasMorePages())
                        <a href="{{ $records->nextPageUrl() }}" class="link">Seterusnya »</a>
                    @else
                        <span class="link" style="opacity:.4;">Seterusnya »</span>
                    @endif
                </div>
            </div>
        @else
            <div class="empty">Belum ada rekod kebolehpasaran. Muat naik fail CSV menggunakan butang “Muat naik CSV”. Pastikan baris pertama CSV mengandungi tajuk: tahun bergraduat, Nombor Kad Pengenalan, Nama, Program Pengajian, Status Pekerjaan, Bekerja : Taraf Pekerjaan, Bekerja : Sektor Pekerjaan, Bekerja : Pendapatan Bulanan (Termasuk Elaun), Bekerja : Kumpulan Pekerjaan Utama, Bekerja dalam bidang (ya/tidak).</div>
        @endif
    </div>
</div>
</body>
</html>
