@props([
    'title' => 'Apakah anda yakin ingin menghapus data ini?',
    'description' => '',
])

<div
    x-data="{
        open: false,
        action: '',
        title: @js($title),
        description: @js($description),

        init() {
            this.$watch('open', value => {
                document.body.style.overflow = value ? 'hidden' : '';
            });

            window.addEventListener('open-delete-modal', event => {
                this.open = true;
                this.action = event.detail.action || '';
                this.title = event.detail.title || @js($title);
                this.description = event.detail.description || @js($description);
            });
        },

        close() {
            this.open = false;
            this.action = '';
            this.title = @js($title);
            this.description = @js($description);
            document.body.style.overflow = '';
        }
    }"
    {{ $attributes }}
>
    <template x-teleport="body">
        <div
            x-show="open"
            x-cloak
            @keydown.escape.window="close()"
            class="fixed inset-0 flex items-center justify-center p-4"
            style="z-index: 2147483647;"
        >
            {{-- Backdrop --}}
            <div
                x-show="open"
                x-transition.opacity
                @click="close()"
                class="fixed inset-0 bg-gray-900/60"
                style="z-index: 2147483646;"
            ></div>

            {{-- Modal --}}
            <div
                x-show="open"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95 translate-y-2"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-0 scale-95 translate-y-2"
                @click.stop
                class="relative flex max-h-[90vh] w-full max-w-sm flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-gray-900"
                style="z-index: 2147483647;"
            >
                {{-- Body --}}
                <div class="overflow-y-auto p-6 text-center">
                    <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-error-50 dark:bg-error-500/15">
                        <svg
                            class="h-7 w-7 text-error-500"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                            />
                        </svg>
                    </div>

                    <h3
                        class="mb-2 text-lg font-semibold text-gray-900 dark:text-white"
                        x-text="title"
                    ></h3>

                    <p
                        x-show="description"
                        x-text="description"
                        class="text-sm text-gray-500 dark:text-gray-400"
                    ></p>
                </div>

                {{-- Footer --}}
                <form
                    :action="action"
                    method="POST"
                    class="flex flex-col-reverse gap-2 border-t border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900 sm:flex-row sm:justify-center"
                >
                    @csrf
                    @method('DELETE')

                    <button
                        type="button"
                        @click="close()"
                        class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-700 sm:w-auto"
                    >
                        Batal
                    </button>

                    <button
                        type="submit"
                        class="w-full rounded-lg bg-error-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-error-600 focus:outline-none focus:ring-2 focus:ring-error-300 dark:focus:ring-error-800 sm:w-auto"
                    >
                        Ya, Hapus
                    </button>
                </form>
            </div>
        </div>
    </template>
</div>

<style>
    [x-cloak] {
        display: none !important;
    }
</style>