<section>
    <p class="text-sm leading-6 text-ink-500">
        Esta acción elimina tu usuario permanentemente. Si administras una empresa, revisa primero los accesos del equipo.
    </p>

    <button type="button"
        x-data=""
        x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
        class="mt-5 inline-flex w-full items-center justify-center rounded-xl bg-rose-50 px-5 py-3 text-sm font-black text-rose-700 ring-1 ring-rose-200 transition hover:bg-rose-100"
    >
        Eliminar mi cuenta
    </button>

    <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
        <form method="post" action="{{ route('profile.destroy') }}" class="p-6 sm:p-7">
            @csrf
            @method('delete')

            <div class="flex items-start gap-4">
                <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-rose-50 text-rose-600">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
                </div>
                <div>
                    <h2 class="text-xl font-black text-slate-950">¿Eliminar tu cuenta?</h2>
                    <p class="mt-2 text-sm leading-6 text-slate-500">
                        Esta acción no se puede deshacer. Escribe tu contraseña para confirmar la eliminación permanente.
                    </p>
                </div>
            </div>

            <div class="mt-6">
                <x-input-label for="password" value="Contraseña" class="sr-only" />
                <x-text-input
                    id="password"
                    name="password"
                    type="password"
                    class="block w-full rounded-xl border-ink-200 bg-ink-50 px-4 py-3 text-sm font-semibold shadow-none transition focus:border-rose-500 focus:bg-white focus:ring-2 focus:ring-rose-500/20"
                    placeholder="Contraseña"
                />

                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
            </div>

            <div class="mt-7 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <x-secondary-button x-on:click="$dispatch('close')" class="justify-center rounded-full px-5 py-3 text-xs font-black">
                    Cancelar
                </x-secondary-button>

                <x-danger-button class="justify-center rounded-full px-5 py-3 text-xs font-black">
                    Sí, eliminar cuenta
                </x-danger-button>
            </div>
        </form>
    </x-modal>
</section>
