<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $mode === 'create' ? 'Tambah' : 'Edit' }} Rekod 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" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 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;
        }
        .admin-shell{
            min-height:100vh;
            padding:24px 18px 28px;
            display:flex;
            justify-content:center;
        }
        .card-glass{
            width:100%;
            max-width:920px;
            background:linear-gradient(160deg, rgba(30,41,59,.98) 0%, rgba(15,23,42,.98) 100%);
            border-radius:18px;
            border:1px solid rgba(148,163,184,.35);
            box-shadow:0 24px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
        }
        .card-glass .card-body{padding:20px 20px 18px;}
        .page-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0;}
        .subtitle{margin:6px 0 0;font-size:13px;color:#94a3b8;}

        .form-control, .form-select{
            background:rgba(15,23,42,.85);
            border-color:rgba(148,163,184,.5);
            color:#e5e7eb;
        }
        .form-control:focus, .form-select:focus{
            background:rgba(15,23,42,.95);
            border-color:rgba(56,189,248,.8);
            box-shadow:0 0 0 .25rem rgba(56,189,248,.18);
            color:#e5e7eb;
        }
        .form-select option{background:#1e293b;color:#e5e7eb;}
        .form-text{color:#9ca3af;}
        .btn-gradient{
            border:none;
            background:linear-gradient(135deg,#38bdf8,#0ea5e9);
            color:#0f172a;
            font-weight:700;
        }
        .btn-gradient:hover{filter:brightness(1.05);}
        .divider{
            border-top:1px solid rgba(148,163,184,.25);
            margin-top:14px;
            padding-top:14px;
        }
    </style>
</head>
<body>
<div class="admin-shell">
    <div class="card card-glass">
        @include('admin.partials.nav')

        <div class="card-body">
            <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
                <div>
                    <h1 class="page-title">{{ $mode === 'create' ? 'Tambah Rekod Staf' : 'Edit Rekod Staf' }}</h1>
                    <p class="subtitle">Isikan maklumat staf (nama, jantina, jawatan).</p>
                </div>
                <a href="{{ route('admin.staff.index') }}" class="btn btn-outline-light btn-sm">
                    &larr; Kembali
                </a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger mt-3 mb-0">
                    <div class="fw-bold mb-1">Ralat Pengesahan</div>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form class="mt-3" method="post" action="{{ $mode === 'create' ? route('admin.staff.store') : route('admin.staff.update', $staff) }}">
                @csrf
                @if ($mode === 'edit')
                    @method('put')
                @endif

                <div class="row g-3">
                    <div class="col-12">
                        <label for="nama" class="form-label">Nama</label>
                        <input
                            type="text"
                            id="nama"
                            name="nama"
                            value="{{ old('nama', $staff->nama) }}"
                            class="form-control @error('nama') is-invalid @enderror"
                            required
                            maxlength="120"
                            placeholder="Contoh: Ahmad bin Ali"
                        >
                        @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div class="form-text">Nama penuh staf.</div>
                    </div>

                    <div class="col-12 col-md-6">
                        <label for="jantina" class="form-label">Jantina</label>
                        @php $selectedJantina = old('jantina', $staff->jantina ?? ''); @endphp
                        <select
                            name="jantina"
                            id="jantina"
                            class="form-select @error('jantina') is-invalid @enderror"
                            required
                        >
                            <option value="">-- Pilih jantina --</option>
                            <option value="Lelaki" {{ $selectedJantina === 'Lelaki' ? 'selected' : '' }}>Lelaki</option>
                            <option value="Perempuan" {{ $selectedJantina === 'Perempuan' ? 'selected' : '' }}>Perempuan</option>
                        </select>
                        @error('jantina')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-md-6">
                        <label for="jawatan" class="form-label">Jawatan</label>
                        <input
                            type="text"
                            id="jawatan"
                            name="jawatan"
                            value="{{ old('jawatan', $staff->jawatan) }}"
                            class="form-control @error('jawatan') is-invalid @enderror"
                            required
                            maxlength="120"
                            placeholder="Contoh: Pembantu Tadbir"
                        >
                        @error('jawatan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="divider d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="small text-secondary">Pastikan maklumat tepat sebelum simpan.</div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.staff.index') }}" class="btn btn-outline-light">
                            Batal
                        </a>
                        <button type="submit" class="btn btn-gradient">
                            {{ $mode === 'create' ? 'Simpan Rekod' : 'Kemaskini Rekod' }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

