{{-- resources/views/profile/partials/update-profile-information-form.blade.php --}}
<section>
    <div class="max-w-3xl mx-auto">
        <header>
            <h2 class="text-lg font-medium text-gray-900">
                {{ __('Profile Information') }}
            </h2>

            <p class="mt-1 text-sm text-gray-600">
                {{ __("Update your account's profile information and email address.") }}
            </p>
        </header>

        <form id="send-verification" method="post" action="{{ route('verification.send') }}">
            @csrf
        </form>

        <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
            @csrf
            @method('patch')

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

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

                @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && !$user->hasVerifiedEmail())
                    <div>
                        <p class="text-sm mt-2 text-gray-800">
                            {{ __('Your email address is unverified.') }}
                            <button form="send-verification"
                                class="underline 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">
                                {{ __('Click here to re-send the verification email.') }}
                            </button>
                        </p>
                        @if (session('status') === 'verification-link-sent')
                            <p class="mt-2 font-medium text-sm text-green-600">
                                {{ __('A new verification link has been sent to your email address.') }}
                            </p>
                        @endif
                    </div>
                @endif
            </div>

            {{-- Phone Number (only render if column exists on users table) --}}
            @if (\Illuminate\Support\Facades\Schema::hasColumn('users', 'phone_number'))
                <div>
                    <x-input-label for="phone_number" :value="__('Phone Number')" />
                    <x-text-input id="phone_number" name="phone_number" type="text" class="mt-1 block w-full"
                        :value="old('phone_number', $user->phone_number)" autocomplete="tel" />
                    <x-input-error class="mt-2" :messages="$errors->get('phone_number')" />
                </div>
            @endif

            {{-- Bio (agents only) --}}
            @if (isset($user) && $user->role === 'agent' && \Illuminate\Support\Facades\Schema::hasColumn('users', 'bio'))
                <div>
                    <x-input-label for="bio" :value="__('Bio (agents only)')" />
                    <textarea id="bio" name="bio" rows="5" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"
                        placeholder="{{ __('Tell your clients about your experience, specialties, states licensed in, etc.') }}">{{ old('bio', $user->bio) }}</textarea>
                    <small class="text-gray-500">{{ __('Up to 2000 characters.') }}</small>
                    <x-input-error class="mt-2" :messages="$errors->get('bio')" />
                </div>
            @endif

            {{-- Personal Info Section --}}
            <hr class="my-4">
            <h3 class="text-md font-semibold text-gray-800">{{ __('Personal Information') }}</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <x-input-label for="first_name" :value="__('First Name')" />
                    <x-text-input id="first_name" name="first_name" type="text" class="mt-1 block w-full"
                        :value="old('first_name', $user->first_name)" autocomplete="given-name" />
                    <x-input-error class="mt-2" :messages="$errors->get('first_name')" />
                </div>

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

                <div>
                    <x-input-label for="address" :value="__('Address')" />
                    <x-text-input id="address" name="address" type="text" class="mt-1 block w-full"
                        :value="old('address', $user->address)" autocomplete="street-address" />
                    <x-input-error class="mt-2" :messages="$errors->get('address')" />
                </div>

                <div>
                    <x-input-label for="city" :value="__('City')" />
                    <x-text-input id="city" name="city" type="text" class="mt-1 block w-full"
                        :value="old('city', $user->city)" autocomplete="address-level2" />
                    <x-input-error class="mt-2" :messages="$errors->get('city')" />
                </div>

                <div>
                    <x-input-label for="state" :value="__('State')" />
                    <x-text-input id="state" name="state" type="text" class="mt-1 block w-full"
                        :value="old('state', $user->state)" autocomplete="address-level1" />
                    <x-input-error class="mt-2" :messages="$errors->get('state')" />
                </div>

                <div>
                    <x-input-label for="zipcode" :value="__('Zipcode')" />
                    <x-text-input id="zipcode" name="zipcode" type="text" class="mt-1 block w-full"
                        :value="old('zipcode', $user->zipcode)" autocomplete="postal-code" />
                    <x-input-error class="mt-2" :messages="$errors->get('zipcode')" />
                </div>

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

            {{-- Save Button --}}
            <div class="flex items-center gap-4 mt-6">
                <button type="submit"
                    class="inline-flex items-center px-4 py-2 bg-green-600 border border-transparent rounded-md font-semibold text-white text-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition">
                    {{ __('Save') }}
                </button>

                @if (session('status') === 'profile-updated')
                    <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 2000)"
                        class="text-sm text-gray-600">
                        {{ __('Saved.') }}
                    </p>
                @endif
            </div>
        </form>
    </div>
</section>