@extends('layouts.app')
@section('content')
<section class="flex h-full flex-1 flex-col bg-slate-100 pt-16">
    <div class="flex-1 lg:grid lg:min-h-full lg:grid-cols-12">
        <aside class="relative hidden h-16 items-center justify-center bg-gradient-to-l from-blue-700 lg:order-last lg:col-span-5 lg:flex lg:h-full xl:col-span-6">
            <img class="inset-0 h-1/2 w-1/2" src="{{ asset('assets/images/undraw_accept_tasks_re_09mv.svg') }}" alt="Pattern" />
        </aside>

        <main class="flex items-center justify-center px-8 py-8 sm:px-12 lg:col-span-7 lg:px-16 lg:py-28 xl:col-span-6" aria-label="Main">
            <div class="max-w-xl lg:max-w-3xl">
                <a class="flex w-full items-center justify-center text-accent1" href="/">
                    <img src="https://flowbite.com/docs/images/logo.svg" class="h-20" alt="">
                </a>

                <h1 class="mt-6 text-center text-2xl font-bold text-gray-900 sm:text-3xl md:text-4xl">
                    register kliniksapi.<span class="text-blue-700">go</span>
                </h1>

                <p class="mt-4 text-center leading-relaxed text-gray-500">
                    Silahkan lengkapi form register berikut dengan data yang valid
                </p>

                <form class="mt-8 grid grid-cols-6 gap-6" action="{{ route('register') }}" method="POST" autocomplete="off">
                    @csrf
                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700" for="name">
                            Nama
                        </label>

                        <input class="mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm p-3"
                                id="name" name="name" type="text" />
                        @if ($errors->has('name'))
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span
                                        class="font-medium">Oops!</span> {{ $errors->first('name') }}</p>
                        @endif
                    </div>

                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700" for="Email">
                            Email
                        </label>

                        <input class="mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm p-3"
                                id="Email" name="email" type="email" />
                        @if ($errors->has('email'))
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span
                                        class="font-medium">Oops!</span> {{ $errors->first('email') }}</p>
                        @endif
                    </div>

                    <div class="col-span-6">
                        <label class="block text-sm font-medium text-gray-700" for="Nope">
                            Nomor Telepon
                        </label>

                        <input class="mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm p-3"
                                id="Nope" name="nope" type="number" />
                        @if ($errors->has('nope'))
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span
                                        class="font-medium">Oops!</span> {{ $errors->first('nope') }}</p>
                        @endif
                    </div>

                    <div class="col-span-6 sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700" for="Password">
                            Password
                        </label>

                        <input class="mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm p-3"
                                id="Password" name="password" type="password" />
                        @if ($errors->has('password'))
                            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span
                                        class="font-medium">Oops!</span> {{ $errors->first('password') }}</p>
                        @endif
                    </div>

                    <div class="col-span-6 sm:col-span-3">
                        <label class="block text-sm font-medium text-gray-700" for="PasswordConfirmation">
                            Password Confirmation
                        </label>

                        <input class="mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm p-3"
                                id="PasswordConfirmation" name="password_confirmation" type="password" />
                    </div>

                    <input type="hidden" name="role" value="peternak">

                    <div class="col-span-6">
                        <div class="flex items-center">
                            <input id="link-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" required>
                            <label for="link-checkbox" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Saya setuju dengan <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">kebijakan privasi dan syarat/ketentuan</a>.</label>
                        </div>
                        <div class="w-full mt-4">
                            <button type="submit" class="text-white w-full mt-2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Daftar</button>
                        </div>
                        <p class="mt-4 text-sm text-gray-500 text-right">
                            Sudah punya akun?
                            <a class="text-blue-500 underline" href="{{ route('login') }}">Masuk di sini.</a>.
                        </p>
                    </div>
                </form>
            </div>
        </main>
    </div>
</section>
@endsection
