<x-app-layout customClass="justify-center items-center" mainClass="my-16 w-11/12 bg-white px-6 py-4 shadow-sm ring-1 ring-gray-950/5   sm:rounded-xl sm:px-12 sm:max-w-lg">
    
    <x-slot:title>
        Register
    </x-slot>

    <div class="text-center grid gap-y-1">
        <h2 class="text-lg font-bold">Sistem Tugas Akhir Fasilkom</h2>
        <h2 class="text-lg font-bold">Register</h2>
    </div>

    <form method="POST" action="{{ route('register.store') }}" class="grid gap-y-3">
        @csrf

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

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

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

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

        <div>
            <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>

        <div>
            <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 flex-col items-center justify-end">
            <x-button class="ms-3 w-full">
                {{ __('Register') }}
            </x-button>

            <a class="underline mt-2 text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
                {{ __('Already registered?') }}
            </a>
        </div>
    </form>
</x-app-layout>