<section>
    <form method="post" action="{{ route('password.update') }}" class="space-y-5">
        @csrf
        @method('put')

        <div class="grid gap-5 lg:grid-cols-3">
            <div>
                <x-input-label for="update_password_current_password" value="Contraseña actual" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="update_password_current_password" name="current_password" type="password"
                              class="mt-2 block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              autocomplete="current-password" />
                <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="update_password_password" value="Nueva contraseña" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="update_password_password" name="password" type="password"
                              class="mt-2 block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="update_password_password_confirmation" value="Confirmar contraseña" class="text-xs font-bold uppercase tracking-[0.14em] text-ink-500" />
                <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password"
                              class="mt-2 block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-brand-500 focus:bg-white focus:ring-2 focus:ring-brand-500/20"
                              autocomplete="new-password" />
                <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
            </div>
        </div>

        <div class="rounded-xl border border-ink-100 bg-ink-50 px-4 py-3 text-sm text-ink-600">
            <span class="font-black text-ink-800">Recomendación:</span>
            combina letras, números y símbolos. Evita usar datos del negocio o fechas fáciles de adivinar.
        </div>

        <div class="flex flex-col gap-3 border-t border-ink-100 pt-5 sm:flex-row sm:items-center">
            <x-primary-button class="justify-center rounded-full bg-ink-950 px-6 py-3 text-xs font-black hover:bg-ink-800">
                Actualizar contraseña
            </x-primary-button>

            @if (session('status') === 'password-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2600)"
                    class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-700"
                >
                    <span class="grid h-5 w-5 place-items-center rounded-full bg-emerald-500 text-xs text-white">✓</span>
                    Contraseña actualizada.
                </p>
            @endif
        </div>
    </form>
</section>
