<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin – Muat naik CSV 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:640px; 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 24px 24px; }
        h1{ margin:0 0 4px; font-size:20px; }
        .subtitle{ margin:0 0 20px; font-size:13px; color:#9ca3af; }
        .form-group{ margin-bottom:16px; }
        .form-group label{ display:block; margin-bottom:6px; font-size:13px; color:#cbd5e1; }
        input[type="file"]{ padding:8px; border:1px dashed rgba(148,163,184,.6); border-radius:12px; background:rgba(15,23,42,.8); color:#e5e7eb; width:100%; font-size:13px; }
        .btn-primary{ border:none; border-radius:999px; padding:10px 18px; background:linear-gradient(135deg,#38bdf8,#0ea5e9); color:#0f172a; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
        .btn-secondary{ border:1px solid rgba(148,163,184,.6); border-radius:999px; padding:8px 14px; background:transparent; color:#e5e7eb; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
        .actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
        .status{ margin-bottom:12px; font-size:12px; color:#bbf7d0; }
        .error{ margin-bottom:12px; font-size:12px; color:#fecaca; }
        .help{ font-size:12px; color:#94a3b8; margin-top:8px; padding:12px; background:rgba(15,23,42,.6); border-radius:10px; }
        .help ul{ margin:8px 0 0 16px; padding:0; }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>Muat naik CSV Kebolehpasaran</h1>
        <p class="subtitle">Pilih fail CSV yang mengandungi data graduan (tahun bergraduat, nama, program, status pekerjaan, sektor, pendapatan, dll). Baris pertama mesti tajuk kolum. <a href="{{ route('admin.employability.sample') }}" style="color:#93c5fd;">Muat turun contoh CSV</a>.</p>

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

        <form method="post" action="{{ route('admin.employability.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="csv_file">Fail CSV</label>
                <input type="file" id="csv_file" name="csv_file" accept=".csv,.txt" required>
            </div>
            <div class="help">
                <strong>Tajuk kolum yang disokong (baris pertama CSV):</strong>
                <ul>
                    <li>tahun bergraduat</li>
                    <li>Nombor Kad Pengenalan</li>
                    <li>Nama</li>
                    <li>Program Pengajian</li>
                    <li>Status Pekerjaan</li>
                    <li>Bekerja : Taraf Pekerjaan</li>
                    <li>Bekerja : Sektor Pekerjaan</li>
                    <li>Bekerja : Pendapatan Bulanan (Termasuk Elaun)</li>
                    <li>Bekerja : Kumpulan Pekerjaan Utama</li>
                    <li>Bekerja dalam bidang (ya/tidak)</li>
                </ul>
                Encoding disyorkan: UTF-8. Saiz maksimum: 10MB. Anda boleh <a href="{{ route('admin.employability.sample') }}" style="color:#93c5fd;">muat turun fail contoh</a> untuk ujian.
            </div>
            <div class="actions">
                <button type="submit" class="btn-primary">Muat naik & Import</button>
                <a href="{{ route('admin.employability.index') }}" class="btn-secondary">Batal / Kembali</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>
