<!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 Guru</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:820px;
            background:linear-gradient(160deg, rgba(30,41,59,.98) 0%, rgba(15,23,42,.98) 100%);
            border-radius:22px;
            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;
            padding:24px 24px 22px;
        }
        h1{
            margin:0 0 4px;
            font-size:20px;
            font-weight:600;
            letter-spacing:-.02em;
        }
        .subtitle{
            margin:0 0 20px;
            font-size:13px;
            color:#94a3b8;
        }
        form{
            display:grid;
            grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
            gap:14px 18px;
            margin-top:8px;
        }
        label{
            font-size:12px;
            font-weight:500;
            margin-bottom:6px;
            display:block;
            color:#cbd5e1;
        }
        .field{
            display:flex;
            flex-direction:column;
        }
        input[type="text"],
        input[type="email"],
        select{
            width:100%;
            padding:10px 12px;
            border-radius:12px;
            border:1px solid rgba(148,163,184,.5);
            background:rgba(15,23,42,.85);
            color:#e5e7eb;
            font-size:13px;
            outline:none;
            transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right 12px center;
            padding-right:36px;
        }
        select{
            cursor:pointer;
            min-height:42px;
        }
        select option{
            background:#1e293b;
            color:#e5e7eb;
            padding:10px 12px;
        }
        select:focus,
        input:focus{
            border-color:rgba(56,189,248,.8);
            box-shadow:0 0 0 3px rgba(56,189,248,.2);
            background:rgba(15,23,42,.95);
        }
        input[type="text"],
        input[type="email"]{
            background-image:none;
            padding-right:12px;
        }
        .error{
            margin-top:4px;
            font-size:11px;
            color:#fca5a5;
        }
        .actions{
            grid-column:1 / -1;
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-top:16px;
            padding-top:16px;
            border-top:1px solid rgba(148,163,184,.25);
        }
        .btn-primary{
            border:none;
            border-radius:12px;
            padding:10px 20px;
            background:linear-gradient(135deg,#38bdf8,#0ea5e9);
            color:#0f172a;
            font-size:13px;
            font-weight:600;
            cursor:pointer;
            box-shadow:0 4px 14px rgba(14,165,233,.4);
            transition:transform .15s ease, box-shadow .15s ease;
        }
        .btn-primary:hover{
            transform:translateY(-1px);
            box-shadow:0 6px 20px rgba(14,165,233,.5);
        }
        .back-link{
            font-size:13px;
            color:#94a3b8;
            text-decoration:none;
            transition:color .15s ease;
        }
        .back-link:hover{color:#e2e8f0}
        .alert-errors{
            margin-bottom:14px;
            padding:10px 14px;
            border-radius:12px;
            background:rgba(248,113,113,.12);
            border:1px solid rgba(248,113,113,.35);
            font-size:12px;
            color:#fecaca;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>{{ $mode === 'create' ? 'Tambah Rekod Guru' : 'Edit Rekod Guru' }}</h1>
        <p class="subtitle">Isikan maklumat guru seperti IC, nama, emel, program, gred, sijil kemahiran dan VTO.</p>

       
        @if ($errors->any())
    <div class="alert-errors">
        <strong>Ralat Pengesahan:</strong>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

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

            <div class="field">
                <label for="ic">No. IC</label>
                <input type="text" id="ic" name="ic" value="{{ old('ic', $teacher->ic) }}" required>
                @error('ic')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="nama">Nama</label>
                <input type="text" id="nama" name="nama" value="{{ old('nama', $teacher->nama) }}" required>
                @error('nama')<div class="error">{{ $message }}</div>@enderror
            </div>
            <div class="field">
                <label for="jantina">Jantina</label>
                <select name="jantina" id="jantina" required>
                @php $selectedjantina = old('jantina', $teacher->jantina ?? ''); @endphp
                    <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="error">{{ $message }}</div>@enderror
            </div>
            <div class="field">
                <label for="emel">Emel</label>
                <input type="email" id="emel" name="emel" value="{{ old('emel', $teacher->emel) }}">
                @error('emel')<div class="error">{{ $message }}</div>@enderror
            </div>
            <div class="field">
                <label for="jabatan">Jabatan</label>
                <select name="jabatan" id="jabatan" required>
                @php $selectedjabatan = old('jabatan', $teacher->jabatan ?? ''); @endphp
                    <option value="">-- Pilih jabatan --</option>
                    <option value="PERNIAGAAN" {{ $selectedjabatan === 'PERNIAGAAN' ? 'selected' : '' }}>PERNIAGAAN</option>
                    <option value="SENI REKA " {{ $selectedjabatan === 'SENI REKA ' ? 'selected' : '' }}>SENI REKA </option>
                    <option value="HOSPITALITI" {{ $selectedjabatan === 'HOSPITALITI' ? 'selected' : '' }}>HOSPITALITI</option>
                    <option value="TEKNOLOGI MAKLUMAT" {{ $selectedjabatan === 'TEKNOLOGI MAKLUMAT' ? 'selected' : '' }}>TEKNOLOGI MAKLUMAT</option>
                    <option value="MEKANINAL DAN PEMBUATAN" {{ $selectedjabatan === 'MEKANINAL DAN PEMBUATAN' ? 'selected' : '' }}>MEKANINAL DAN PEMBUATAN</option>
                </select>               
                 @error('jabatan')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="program">Program</label>
                <select name="program" id="program" required>
                @php $selectedProgram = old('program', $teacher->program ?? ''); @endphp
                    <option value="">-- Pilih program --</option>
                    <option value="PERAKAUNAN" {{ $selectedProgram === 'PERAKAUNAN' ? 'selected' : '' }}>PERAKAUNAN</option>
                    <option value="SENI REKA FESYEN" {{ $selectedProgram === 'SENI REKA FESYEN' ? 'selected' : '' }}>SENI REKA FESYEN</option>
                    <option value="SENI KULINARI" {{ $selectedProgram === 'SENI KULINARI' ? 'selected' : '' }}>SENI KULINARI</option>
                    <option value="TEKNOLOGI KOMPUTERAN" {{ $selectedProgram === 'TEKNOLOGI KOMPUTERAN' ? 'selected' : '' }}>TEKNOLOGI KOMPUTERAN</option>
                    <option value="TEKNOLOGI MAKLUMAT" {{ $selectedProgram === 'TEKNOLOGI MAKLUMAT' ? 'selected' : '' }}>TEKNOLOGI MAKLUMAT</option>
                    <option value="TEKNOLOGI PENYEJUKAN DAN PENYAMAN UDARA" {{ $selectedProgram === 'TEKNOLOGI PENYEJUKAN DAN PENYAMAN UDARA' ? 'selected' : '' }}>TEKNOLOGI PENYEJUKAN DAN PENYAMAN UDARA</option>
                    <option value="TEKNOLOGI Automotif" {{ $selectedProgram === 'TEKNOLOGI Automotif' ? 'selected' : '' }}>TEKNOLOGI Automotif</option>
                </select>               
                 @error('program')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="gred">Gred</label>
                <select id="gred" name="gred" required>
                    @php $selectedDg = old('gred', $teacher->gred ?? ''); @endphp
                    <option value="">-- Pilih status SKM--</option>
                    <option value="DG 9" {{ $selectedDg === 'DG 9' ? 'selected' : '' }}>DG 9</option>
                    <option value="DG 10" {{ $selectedDg === 'DG 10' ? 'selected' : '' }}>DG 10</option>
                    <option value="DG 12" {{ $selectedDg === 'DG 12' ? 'selected' : '' }}>DG 12</option>
                    <option value="DG 13" {{ $selectedDg === 'DG 13' ? 'selected' : '' }}>DG 13</option>
                    <option value="DG 14" {{ $selectedDg === 'DG 14' ? 'selected' : '' }}>DG 14</option>
                </select>
                @error('gred')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="sijil_kemahiran">Sijil Kemahiran</label>
                <select id="sijil_kemahiran" name="sijil_kemahiran" required>
                    @php $selectedSkm = old('sijil_kemahiran', $teacher->sijil_kemahiran ?? ''); @endphp
                    <option value="">-- Pilih status SKM--</option>
                    <option value="SKM 1" {{ $selectedSkm === 'SKM 1' ? 'selected' : '' }}>SKM 1</option>
                    <option value="SKM 2" {{ $selectedSkm === 'SKM 2' ? 'selected' : '' }}>SKM 2</option>
                    <option value="SKM 3" {{ $selectedSkm === 'SKM 3' ? 'selected' : '' }}>SKM 3</option>
                    <option value="SKM 4" {{ $selectedSkm === 'SKM 4' ? 'selected' : '' }}>SKM 4</option>
                    <option value="SKM 5" {{ $selectedSkm === 'SKM 5' ? 'selected' : '' }}>SKM 5</option>
                    <option value="Tiada" {{ $selectedSkm === 'Tiada' ? 'selected' : '' }}>Tiada</option>
                </select>
                @error('sijil_kemahiran')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="status_vto">Status VTO</label>
                <select id="status_vto" name="status_vto" required>
                    @php $selectedVto = old('status_vto', $teacher->status_vto ?? ''); @endphp
                    <option value="">-- Pilih status VTO --</option>
                    <option value="VTO" {{ $selectedVto === 'VTO' ? 'selected' : '' }}>VTO</option>
                    <option value="TVET-i" {{ $selectedVto === 'TVET-i' ? 'selected' : '' }}>TVET-i</option>
                    <option value="Tiada" {{ $selectedVto === 'Tiada' ? 'selected' : '' }}>Tiada</option>
                </select>
                @error('status_vto')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="actions">
                <a href="{{ route('admin.teachers.index') }}" class="back-link">&larr; Kembali ke senarai guru</a>
                <button type="submit" class="btn-primary">
                    {{ $mode === 'create' ? 'Simpan Rekod' : 'Kemaskini Rekod' }}
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

