@props([
    'show'       => 'showConfirm',
    'title'      => 'Konfirmasi',
    'message'    => 'Apakah Anda yakin? Tindakan ini tidak dapat dibatalkan.',
    'confirmText'=> 'Ya, Lanjutkan',
    'cancelText' => 'Batal',
    'action'     => '#',
    'method'     => 'DELETE',
    'danger'     => true,
])

<div x-show="{{ $show }}"
     x-cloak
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     class="fixed inset-0 z-[60] flex items-center justify-center bg-gray-900/60 dark:bg-gray-900/80 p-4"
     @keydown.escape.window="{{ $show }} = false">

    <div x-show="{{ $show }}"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         @click.stop
         class="relative w-full max-w-md bg-white rounded-lg shadow dark:bg-gray-700 p-6 text-center">

        {{-- Ikon warning --}}
        <div class="flex justify-center mb-4">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-full {{ $danger ? 'bg-red-100 dark:bg-red-900' : 'bg-yellow-100 dark:bg-yellow-900' }}">
                <svg class="w-7 h-7 {{ $danger ? 'text-red-600 dark:text-red-300' : 'text-yellow-600 dark:text-yellow-300' }}" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                </svg>
            </div>
        </div>

        <h3 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
        <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>

        <div class="flex justify-center gap-3">
            <button type="button" @click="{{ $show }} = false"
                class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:outline-none dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
                {{ $cancelText }}
            </button>
            <form :action="{{ $show }}Url ?? '{{ $action }}'" method="POST" class="inline">
                @csrf
                @if(strtoupper($method) !== 'POST')
                    @method($method)
                @endif
                <button type="submit"
                    class="px-5 py-2.5 text-sm font-medium text-white {{ $danger ? 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900' : 'bg-primary-700 hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700' }} rounded-lg focus:outline-none focus:ring-4">
                    {{ $confirmText }}
                </button>
            </form>
        </div>
    </div>
</div>