<x-guest-layout>
    <form method="POST" action="{{ route('register') }}">
        @csrf

        <!-- Name -->
        <div>
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
            <x-input-error :messages="$errors->get('name')" class="mt-2" />
        </div>

        <!-- No KP -->
        <div class="mt-4">
            <x-input-label for="nokp" :value="__('No KP')" />
            <x-text-input id="nokp" class="block mt-1 w-full" type="text" name="nokp" :value="old('nokp')" required autofocus autocomplete="nokp" />
            <x-input-error :messages="$errors->get('nokp')" class="mt-2" />
        </div>

        <!-- No Telefon -->
        <div class="mt-4">
            <x-input-label for="notelefon" :value="__('No Telefon')" />
            <x-text-input id="notelefon" class="block mt-1 w-full" type="text" name="notelefon" :value="old('notelefon')" required autofocus autocomplete="notelefon" />
            <x-input-error :messages="$errors->get('notelefon')" class="mt-2" />
        </div>

        <!-- Alamat -->
        <div class="mt-4">
            <x-input-label for="alamat" :value="__('Alamat')" />
            <x-textarea id="alamat" class="block mt-1 w-full" name="alamat" :value="old('alamat')" required autofocus autocomplete="alamat" rows="5" cols="60" />
            <x-input-error :messages="$errors->get('alamat')" class="mt-2" />
        </div>

        <!-- Jantina -->
        <div class="mt-4">
            <x-input-label for="jantina" :value="__('Jantina')" />
            <x-select id="jantina" class="block mt-1 w-full" name="jantina"
                :options="[''=>'','lelaki' => 'Lelaki', 'perempuan' => 'Perempuan']" 
                :selected="old('jantina')"  
                
            />
            <x-input-error :messages="$errors->get('jantina')" class="mt-2" />
        </div>

        <!-- Bangsa -->
        <div class="mt-4">
            <x-input-label for="bangsa" :value="__('Bangsa')" />
            <x-select id="bangsa" class="block mt-1 w-full" name="bangsa"
                :options="[''=>'','melayu' => 'Melayu', 'asli' => 'Asli', 'bumiputera sabah' => 'Bumiputera Sabah', 'bumiputera sarawak' => 'Bumiputera Sarawak', 'cina' => 'Cina', 'india' => 'India', 'peranakan' => 'Peranakan', 'lain-lain' => 'Lain-lain']" 
                :selected="old('bangsa')" 
                
            />
            <x-input-error :messages="$errors->get('bangsa')" class="mt-2" />
        </div>

        <!-- Email Address -->
        <div class="mt-4">
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm Password -->
        <div class="mt-4">
            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />

            <x-text-input id="password_confirmation" class="block mt-1 w-full"
                            type="password"
                            name="password_confirmation" required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center justify-end mt-4">
            <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('login') }}">
                {{ __('Already registered?') }}
            </a>

            <x-primary-button class="ms-4">
                {{ __('Register') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout>
