<section>
    <div class="mb-6">
        <h5 class="text-[13px] font-bold text-gray-700 uppercase tracking-widest">
            Informations du Profil
        </h5>
    </div>

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

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Nom complet') }}</label>
                <input id="name" name="name" type="text" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white capitalize"
                    value="{{ old('name', $user->name) }}" required autofocus autocomplete="name" />
                <x-input-error class="mt-2" :messages="$errors->get('name')" />
            </div>

            <div>
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">{{ __('Adresse Email') }}</label>
                <input id="email" name="email" type="email" 
                    class="block w-full px-3 py-2 border border-gray-300 rounded-sm focus:ring-1 focus:ring-blue-600 focus:border-blue-600 transition-all h-[38px] text-sm font-semibold text-gray-700 bg-white"
                    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 class="mt-2 text-xs font-semibold text-amber-600">
                        {{ __("Votre email n'est pas vérifié.") }}
                        <button form="send-verification" class="ml-2 underline hover:text-amber-800 transition-colors">
                            {{ __("Renvoyer le lien") }}
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <div class="pt-4 flex items-center gap-4">
            <button type="submit"
                class="px-5 py-2 text-white rounded-sm hover:opacity-90 transition-all duration-200 text-sm font-semibold shadow-sm hover:shadow-md h-[38px] flex items-center justify-center whitespace-nowrap"
                style="background-color: #5867dd !important;">
                Valider
            </button>

            @if (session('status') === 'profile-updated')
                <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 3000)"
                    class="text-xs font-bold text-emerald-600">
                    {{ __('Profil mis à jour avec succès.') }}
                </p>
            @endif
        </div>
    </form>
</section>