@extends('layouts.admin')
@section('title', 'Tambah Guru')
@section('page-title', 'Tambah Guru')
@section('admin-content')
<x-card title="Form Guru" subtitle="Akun login guru otomatis memakai NIG (bukan username terpisah).">
<form action="{{ route('admin.guru.store') }}" method="POST" class="grid grid-cols-1 gap-4 md:grid-cols-2">
    @csrf
    <x-input name="nig" label="NIG" required />
    <x-input name="nama_lengkap" label="Nama Lengkap" required />

    <div>
        <label class="mb-1 block text-sm font-semibold text-slate-700">Jenis Kelamin</label>
        <select name="jenis_kelamin" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200">
            <option value="L" {{ old('jenis_kelamin')=='L'?'selected':'' }}>Laki-laki</option>
            <option value="P" {{ old('jenis_kelamin')=='P'?'selected':'' }}>Perempuan</option>
        </select>
    </div>

    <div class="md:col-span-2">
        <label class="mb-1 block text-sm font-semibold text-slate-700">Alamat</label>
        <textarea name="alamat" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-200" rows="3">{{ old('alamat') }}</textarea>
    </div>

    <x-input name="no_hp" label="No HP" placeholder="08xxxxxxxxxx" />
    <div class="md:col-span-2 my-2 border-t border-slate-200 pt-4"></div>
    <p class="md:col-span-2 text-sm text-slate-600">Login guru menggunakan <strong>NIG</strong> yang sama dengan kolom di atas.</p>

    <x-input name="password" label="Password" type="password" required />
    <x-input name="password_confirmation" label="Konfirmasi Password" type="password" required />

    <div class="md:col-span-2 mt-2 flex flex-wrap gap-2">
        <x-button type="submit" variant="secondary">Simpan</x-button>
        <x-button href="{{ route('admin.guru.index') }}" variant="ghost">Batal</x-button>
    </div>
</form>
</x-card>
@endsection