<!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 Pelajar</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:linear-gradient(135deg,#0f172a,#1e293b);
        color:#e2e8f0;
    }
    .field.number-field{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}

.field.number-field input[type="number"]{
    width:80px;
}
    .wrap{
        min-height:100vh;
        padding:40px 20px;
        display:flex;
        justify-content:center;
        align-items:flex-start;
    }

    .card{
        width:100%;
        max-width:1100px;
        background:rgba(30,41,59,.85);
        backdrop-filter: blur(14px);
        border-radius:24px;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 30px 80px rgba(0,0,0,.45);
        padding:36px 40px;
    }

    h1{
        margin:0;
        font-size:24px;
        font-weight:600;
        letter-spacing:-.02em;
    }

    .subtitle{
        margin:6px 0 28px;
        font-size:14px;
        color:#94a3b8;
    }

    form{
        display:grid;
        grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
        gap:20px 24px;
    }

    label{
        font-size:12px;
        font-weight:500;
        margin-bottom:6px;
        display:block;
        color:#cbd5e1;
        letter-spacing:.04em;
    }

    .field{
        display:flex;
        flex-direction:column;
    }

    input[type="text"],
    input[type="number"],
    select{
        width:100%;
        padding:12px 14px;
        border-radius:14px;
        border:1px solid rgba(148,163,184,.3);
        background:rgba(15,23,42,.75);
        color:#f1f5f9;
        font-size:13px;
        outline:none;
        transition:all .25s ease;
    }

    input[type="number"]{
        text-align:right;
    }

    select{
        cursor:pointer;
    }

    input:focus,
    select:focus{
        border-color:#38bdf8;
        box-shadow:0 0 0 4px rgba(56,189,248,.15);
        background:rgba(15,23,42,.95);
    }

    .group-title{
        grid-column:1 / -1;
        margin-top:26px;
        padding-bottom:6px;
        border-bottom:1px solid rgba(148,163,184,.2);
        font-size:12px;
        font-weight:600;
        text-transform:uppercase;
        letter-spacing:.18em;
        color:#7dd3fc;
    }

    .group-title:first-of-type{
        margin-top:10px;
    }

    .error{
        margin-top:5px;
        font-size:11px;
        color:#f87171;
    }

    .alert-errors{
        margin-bottom:20px;
        padding:14px 16px;
        border-radius:14px;
        background:rgba(248,113,113,.12);
        border:1px solid rgba(248,113,113,.4);
        font-size:13px;
        color:#fecaca;
    }

    .actions{
        grid-column:1 / -1;
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-top:30px;
        padding-top:20px;
        border-top:1px solid rgba(148,163,184,.15);
    }

    .btn-primary{
        border:none;
        border-radius:14px;
        padding:12px 26px;
        background:linear-gradient(135deg,#38bdf8,#0ea5e9);
        color:#0f172a;
        font-size:14px;
        font-weight:600;
        cursor:pointer;
        box-shadow:0 6px 18px rgba(14,165,233,.4);
        transition:all .2s ease;
    }

    .btn-primary:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 24px rgba(14,165,233,.5);
    }

    .back-link{
        font-size:13px;
        color:#94a3b8;
        text-decoration:none;
        transition:color .2s ease;
    }

    .back-link:hover{
        color:#f1f5f9;
    }

    @media(max-width:768px){
        .card{
            padding:26px 22px;
        }
    }
</style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>{{ $mode === 'create' ? 'Tambah Rekod Pelajar' : 'Edit Rekod Pelajar' }}</h1>
        <p class="subtitle">Isikan maklumat ringkasan pelajar mengikut kelas.</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.students.store') : route('admin.students.update', $student) }}">
            @csrf
            @if ($mode === 'edit')
                @method('put')
            @endif

            <div class="field">
    <label for="kohort">Kohort</label>
    <select name="kohort" id="kohort" required>
        <option value="">-- Pilih Tahun Kohort --</option>
                @php
                    $currentYear = date('Y');
                    $oldKohort = old('kohort', $student->kohort ?? '');
                @endphp

                    @for($year = 2022; $year <= $currentYear; $year++)
                        <option value="{{ $year }}" {{ $oldKohort == $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endfor
                </select>
                @error('kohort')<div class="error">{{ $message }}</div>@enderror
            </div>
            @php
                $oldPeringkat = old('peringkat', $student->peringkat ?? '');
                $oldProgram = old('program', $student->program ?? '');
                $oldKelas = old('kelas', $student->kelas ?? '');
            @endphp

            <div class="field">
                <label for="peringkat">Peringkat</label>
                <select name="peringkat" id="peringkat" required>
                    <option value="">-- Pilih peringkat --</option>
                    <option value="SVM" {{ $oldPeringkat === 'SVM' ? 'selected' : '' }}>Sijil Vokasional Malaysia (SVM)</option>
                    <option value="DVM" {{ $oldPeringkat === 'DVM' ? 'selected' : '' }}>Diploma Vokasional Malaysia (DVM)</option>
                </select>
                @error('peringkat')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="program">Program</label>
                <select name="program" id="program" required>
                    <option value="">-- Pilih program --</option>
                    <option value="Perakaunan" {{ $oldProgram === 'Perakaunan' ? 'selected' : '' }}>Perakaunan</option>
                    <option value="Seni Reka Fesyen" {{ $oldProgram === 'Seni Reka Fesyen' ? 'selected' : '' }}>Seni Reka Fesyen</option>
                    <option value="Seni Kulinari" {{ $oldProgram === 'Seni Kulinari' ? 'selected' : '' }}>Seni Kulinari</option>
                    <option value="Teknologi Komputeran" {{ $oldProgram === 'Teknologi Komputeran' ? 'selected' : '' }}>Teknologi Komputeran</option>
                    <option value="Teknologi Maklumat" {{ $oldProgram === 'Teknologi Maklumat' ? 'selected' : '' }}>Teknologi Maklumat</option>
                    <option value="Teknologi Penyejukan dan Penyamanan Udara" {{ $oldProgram === 'Teknologi Penyejukan dan Penyamanan Udara' ? 'selected' : '' }}>Teknologi Penyejukan dan Penyamanan Udara</option>
                    <option value="Teknologi Automotif" {{ $oldProgram === 'Teknologi Automotif' ? 'selected' : '' }}>Teknologi Automotif</option>
                </select>
                @error('program')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field">
                <label for="kelas">Kelas</label>
                <select name="kelas" id="kelas" required>
                    <option value="">-- Pilih kelas --</option>
                    <option value="1SVM" {{ $oldKelas === '1SVM' ? 'selected' : '' }}>1 SVM</option>
                    <option value="2SVM" {{ $oldKelas === '2SVM' ? 'selected' : '' }}>2 SVM</option>
                    <option value="1DVM" {{ $oldKelas === '1DVM' ? 'selected' : '' }}>1 DVM</option>
                    <option value="2DVM" {{ $oldKelas === '2DVM' ? 'selected' : '' }}>2 DVM</option>
                    <option value="OJT" {{ $oldKelas === 'OJT' ? 'selected' : '' }}>OJT</option>
                </select>
                @error('kelas')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="group-title">Jantina</div>

            <div class="field number-field">
                <label for="bil_lelaki">Bil. Lelaki</label>
                <input type="number" id="bil_lelaki" name="bil_lelaki" min="0" value="{{ old('bil_lelaki', $student->bil_lelaki ?? 0) }}" required>
                @error('bil_lelaki')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="bil_perempuan">Bil. Perempuan</label>
                <input type="number" id="bil_perempuan" name="bil_perempuan" min="0" value="{{ old('bil_perempuan', $student->bil_perempuan ?? 0) }}" required>
                @error('bil_perempuan')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="group-title">Status Asrama</div>

            <div class="field number-field">
                <label for="bil_asrama_lelaki">Bil. Asrama (Pelajar Lelaki)</label>
                <input type="number" id="bil_asrama_lelaki" name="bil_asrama_lelaki" min="0" value="{{ old('bil_asrama_lelaki', $student->bil_asrama_lelaki ?? 0) }}" required>
                @error('bil_asrama_lelaki')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="bil_asrama_perempuan">Bil. Asrama (Pelajar Perempuan)</label>
                <input type="number" id="bil_asrama_perempuan" name="bil_asrama_perempuan" min="0" value="{{ old('bil_asrama_perempuan', $student-> bil_asrama_perempuan ?? 0) }}" required>
                @error('bil_asrama_perempuan')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="bil_bukan_asrama">Bil. Bukan Asrama</label>
                <input type="number" id="bil_bukan_asrama" name="bil_bukan_asrama" min="0" value="{{ old('bil_bukan_asrama', $student->bil_bukan_asrama ?? 0) }}" required>
                @error('bil_bukan_asrama')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="group-title">Agama</div>

            <div class="field number-field">
                <label for="agama_islam">Bil. Islam</label>
                <input type="number" id="agama_islam" name="agama_islam" min="0" value="{{ old('agama_islam', $student->agama_islam ?? 0) }}" required>
                @error('agama_islam')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="agama_bukan_islam">Bil. Bukan Islam</label>
                <input type="number" id="agama_bukan_islam" name="agama_bukan_islam" min="0" value="{{ old('agama_bukan_islam', $student->agama_bukan_islam ?? 0) }}" required>
                @error('agama_bukan_islam')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="group-title">Kaum</div>

            <div class="field number-field">
                <label for="kaum_melayu">Melayu</label>
                <input type="number" id="kaum_melayu" name="kaum_melayu" min="0" value="{{ old('kaum_melayu', $student->kaum_melayu ?? 0) }}" required>
                @error('kaum_melayu')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="kaum_cina">Cina</label>
                <input type="number" id="kaum_cina" name="kaum_cina" min="0" value="{{ old('kaum_cina', $student->kaum_cina ?? 0) }}" required>
                @error('kaum_cina')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="kaum_india">India</label>
                <input type="number" id="kaum_india" name="kaum_india" min="0" value="{{ old('kaum_india', $student->kaum_india ?? 0) }}" required>
                @error('kaum_india')<div class="error">{{ $message }}</div>@enderror
            </div>

            <div class="field number-field">
                <label for="kaum_lain">Lain-lain</label>
                <input type="number" id="kaum_lain" name="kaum_lain" min="0" value="{{ old('kaum_lain', $student->kaum_lain ?? 0) }}" required>
                @error('kaum_lain')<div class="error">{{ $message }}</div>@enderror
            </div>

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

