<section>
    <header>
        <h2 class="text-lg font-medium text-theme-heading flex items-center">
            <i class="fas fa-user mr-2 text-theme-primary"></i>
            {{ __('Profile Information') }}
        </h2>

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

    <form id="send-verification" method="post" action="{{ route('verification.send') }}" x-data="{ isSubmitting: false }" @submit="isSubmitting = true">
        @csrf
    </form>

    <form method="post" action="{{ route('profile.update') }}" class="mt-6" x-data="{ isSubmitting: false }" @submit="isSubmitting = true">
        @csrf
        @method('patch')

        <div class="border-2 theme-divider rounded-lg p-6 theme-card">
            
            <x-forms.input 
                name="name"
                label="Full Name"
                icon="user"
                :required="true"
                :value="old('name', $user->name)"
                help-text="Your full name as it should appear on your profile"
            />

            <x-forms.input 
                name="email"
                label="Email Address"
                type="email"
                icon="envelope"
                :required="true"
                :value="old('email', $user->email)"
                help-text="We'll never share your email with anyone else"
            />

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <p class="text-sm text-yellow-800 mb-2">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        {{ __('Your email address is unverified.') }}
                    </p>

                    <button form="send-verification" :disabled="isSubmitting" class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                        <i x-show="!isSubmitting" class="fas fa-paper-plane mr-2"></i>
                        <i x-show="isSubmitting" class="fas fa-spinner fa-spin mr-2"></i>
                        <span x-text="isSubmitting ? 'Sending...' : '{{ __('Resend Verification Email') }}'"></span>
                    </button>

                    @if (session('status') === 'verification-link-sent')
                        <p class="mt-2 text-sm text-green-600">
                            <i class="fas fa-check-circle mr-2"></i>
                            {{ __('A new verification link has been sent to your email address.') }}
                        </p>
                    @endif
                </div>
            @endif

        </div>

        <div class="flex items-center gap-4 mt-6">
            <button type="submit" :disabled="isSubmitting" class="px-6 py-3 theme-btn-primary rounded-lg transition transform hover:scale-105 shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                <i x-show="!isSubmitting" class="fas fa-save mr-2"></i>
                <i x-show="isSubmitting" class="fas fa-spinner fa-spin mr-2"></i>
                <span x-text="isSubmitting ? 'Saving...' : '{{ __('Save Changes') }}'"></span>
            </button>

            @if (session('status') === 'profile-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 3000)"
                    class="text-sm text-green-600 font-medium"
                >
                    <i class="fas fa-check-circle mr-1"></i>
                    {{ __('Saved successfully!') }}
                </p>
            @endif
        </div>
    </form>
</section>
