@extends('layouts.app')

@section('content')
<div class="bg-white w-full border p-7 rounded-lg shadow-custom">
    <div class="mb-8 grid gap-1 text-center">
        <h3 class="text-2xl text-darkblue font-syne font-semibold">{{$loginHeader}}</h3>
        <p class="text-gray-600">
            Already have an account?
            <a href="{{ route($loginUrl)  }}" class="text-primary underline">Sign In here</a>
        </p>
    </div>

    <form method="POST" action="{{ route('register') }}">
        @csrf
        <div class="flex flex-col gap-4">
            <div class="grid gap-1.5">
                <input id="name" type="text"
                    class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full @error('name') border-red-600 is-invalid @enderror"
                    name="name" value="{{ old('name') }}" placeholder="Name" required autocomplete="off">

                @error('name')
                <span class="invalid-feedback invalid-feedback text-red-600 text-sm" role="alert">
                    {{ $message }}
                </span>
                @enderror
            </div>

            <div class="grid gap-1.5">
                <input id="email" type="email"
                    class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full @error('email') border-red-600 is-invalid @enderror"
                    name="email" value="{{ old('email') }}" placeholder="Email" required autocomplete="off">

                @error('email')
                <span class="invalid-feedback invalid-feedback text-red-600 text-sm" role="alert">
                    {{ $message }}
                </span>
                @enderror
            </div>

            <div class="grid gap-1.5">
                <input id="mobile" type="tel"
                    class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full @error('mobile') border-red-600 is-invalid @enderror"
                    name="mobile" value="{{ old('mobile') }}" placeholder="Mobile" required autocomplete="off">

                @error('mobile')
                <span class="invalid-feedback invalid-feedback text-red-600 text-sm" role="alert">
                    {{ $message }}
                </span>
                @enderror
            </div>

            <div class="grid gap-1.5">
                <input id="address" type="text"
                    class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full @error('address') border-red-600 is-invalid @enderror"
                    name="address" value="{{ old('address') }}" placeholder="Address" required autocomplete="off">

                @error('address')
                <span class="invalid-feedback invalid-feedback text-red-600 text-sm" role="alert">
                    {{ $message }}
                </span>
                @enderror
            </div>



            <div class="grid gap-1.5">
                <input id="password" type="password"
                    class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full @error('password') border-red-600 is-invalid @enderror"
                    name="password" placeholder="Password" required autocomplete="off">

                @error('password')
                <span class="invalid-feedback text-red-600 text-sm" role="alert">
                    {{ $message }}
                </span>
                @enderror
            </div>

            <input id="password-confirm" type="password"
                class="border border-gray-200 focus:ring-0 outline-none autofill:!bg-transparent focus:border-primary px-5 py-3 rounded w-full"
                name="password_confirmation" placeholder="Confirm Password" required autocomplete="off">

            <button type="submit" class="w-full text-lg button button--secondary">
                Sign Up
            </button>
        </div>
    </form>
</div>
@endsection