@props(['method' => 'POST', 'action', 'message' => 'Are you sure? This action cannot be undone.', 'confirmText' => 'Confirm', 'cancelText' => 'Cancel', 'buttonClass' => 'text-red-600 hover:text-red-800'])
<form action="{{ $action }}" method="POST" class="inline" x-data="{ open: false }" @submit="if (!open) { $event.preventDefault(); open = true }">
    @csrf
    @if(strtoupper($method) !== 'POST')@method($method)@endif
    <button type="button" {{ $attributes->merge(['class' => $buttonClass]) }} @click="open = true">
        {{ $slot }}
    </button>
    <template x-teleport="body">
        <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="opacity-0">
            <div class="fixed inset-0 bg-slate-900/50" @click="open = false"></div>
            <div class="relative z-10 w-full max-w-sm rounded-xl bg-white p-6 shadow-xl" @click.stop>
                <p class="text-sm text-slate-700">{{ $message }}</p>
                <div class="mt-6 flex gap-3 justify-end">
                    <button type="button" @click="open = false" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">{{ $cancelText }}</button>
                    <button type="submit" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">{{ $confirmText }}</button>
                </div>
            </div>
        </div>
    </template>
</form>