@extends('layouts.guest')

@section('content')
    <div class="flex justify-center items-center min-h-screen bg-gray-50">
        <div class="bg-white text-gray-600 max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl w-full mx-4 md:p-6 p-4 rounded-2xl shadow-[0px_4px_20px_rgba(0,0,0,0.1)]">

            <h2 class="text-3xl font-semibold mb-6 text-center text-gray-800">
                Create Your Account
            </h2>

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

                <!-- Name -->
                <div class="mb-4">
                    <input  id="name"
                            type="text"
                            name="name"
                            value="{{ old('name') }}"
                            placeholder="Full Name"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm"
                            required autofocus>
                    <x-input-error :messages="$errors->get('name')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Email -->
                <div class="mb-4">
                    <input  id="email"
                            type="email"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="Email Address"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm"
                            required>
                    <x-input-error :messages="$errors->get('email')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Phone -->
                <div class="mb-4">
                    <input  id="phone"
                            type="text"
                            name="phone"
                            value="{{ old('phone') }}"
                            placeholder="Phone Number"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm">
                    <x-input-error :messages="$errors->get('phone')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Gender -->
                <div class="mb-4">
                    <select name="gender"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm text-gray-600">
                        <option value="">Select Gender</option>
                        <option value="Male" {{ old('gender')=='Male' ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ old('gender')=='Female' ? 'selected' : '' }}>Female</option>
                    </select>
                    <x-input-error :messages="$errors->get('gender')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Date of Birth -->
                <div class="mb-4">
                    <a class="text-xs ml-1">Date of birth</a>
                    <input  id="dob"
                            type="date"
                            name="dob"
                            value="{{ old('dob') }}"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm">
                    <x-input-error :messages="$errors->get('dob')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Address -->
                <div class="mb-4">
                    <textarea name="address"
                              placeholder="Address (optional)"
                              class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-2xl py-3 px-4 text-sm resize-none"
                              rows="2">{{ old('address') }}</textarea>
                    <x-input-error :messages="$errors->get('address')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Password -->
                <div class="mb-4">
                    <input  id="password"
                            type="password"
                            name="password"
                            placeholder="Password"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm"
                            required autocomplete="new-password">
                    <x-input-error :messages="$errors->get('password')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Confirm Password -->
                <div class="mb-4">
                    <input  id="password_confirmation"
                            type="password"
                            name="password_confirmation"
                            placeholder="Confirm Password"
                            class="w-full bg-transparent border border-gray-300 focus:border-indigo-500 outline-none rounded-full py-3 px-4 text-sm"
                            required autocomplete="new-password">
                    <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 text-red-500 text-xs" />
                </div>

                <!-- Register Button -->
                <button type="submit"
                    class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-3 rounded-full font-medium transition">
                    Create Account
                </button>
            </form>

            <!-- Login link -->
            <p class="text-center mt-4 text-sm">
                Already have an account?
                <a href="{{ route('login') }}" class="text-indigo-500 hover:underline">Log in</a>
            </p>
        </div>
    </div>
@endsection