@props([
    'title' => 'Konfirmasi',
    'description' => 'Apakah anda yakin?',
    'confirmText' => 'Ya, Lanjutkan',
    'cancelText' => 'Batal',
    'color' => 'brand',
])

@php
    $themes = [
        'brand' => [
            'bg' => 'bg-brand-50 dark:bg-brand-500/15',
            'text' => 'text-brand-500',
            'button' => 'bg-brand-500 hover:bg-brand-600 focus:ring-brand-300 dark:focus:ring-brand-800',
            'icon' => '<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
        'error' => [
            'bg' => 'bg-error-50 dark:bg-error-500/15',
            'text' => 'text-error-500',
            'button' => 'bg-error-500 hover:bg-error-600 focus:ring-error-300 dark:focus:ring-error-800',
            'icon' => '<svg class="h-7 w-7" 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>',
        ],
        'warning' => [
            'bg' => 'bg-warning-50 dark:bg-warning-500/15',
            'text' => 'text-warning-500',
            'button' => 'bg-warning-500 hover:bg-warning-600 focus:ring-warning-300 dark:focus:ring-warning-800',
            'icon' => '<svg class="h-7 w-7" 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>',
        ],
        'success' => [
            'bg' => 'bg-success-50 dark:bg-success-500/15',
            'text' => 'text-success-500',
            'button' => 'bg-success-500 hover:bg-success-600 focus:ring-success-300 dark:focus:ring-success-800',
            'icon' => '<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
        'info' => [
            'bg' => 'bg-blue-50 dark:bg-blue-500/15',
            'text' => 'text-blue-500',
            'button' => 'bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:focus:ring-blue-800',
            'icon' => '<svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
        ],
    ];
@endphp

<div
    x-data="{
        open: false,
        action: '',
        requestMethod: 'POST',
        title: @js($title),
        description: @js($description),
        confirmText: @js($confirmText),
        cancelText: @js($cancelText),
        currentColor: @js($color),
        themes: @js($themes),
        init() {
            this.$watch('open', value => {
                document.body.style.overflow = value ? 'hidden' : 'unset';
            });

            window.addEventListener('open-confirm-modal', (event) => {
                this.open = true;
                this.action = event.detail?.action || '';
                this.requestMethod = (event.detail?.method || 'POST').toUpperCase();
                this.title = event.detail?.title || @js($title);
                this.description = event.detail?.description || @js($description);
                this.confirmText = event.detail?.confirmText || @js($confirmText);
                this.cancelText = event.detail?.cancelText || @js($cancelText);
                this.currentColor = event.detail?.color || @js($color);
            });
        },
        get theme() {
            return this.themes[this.currentColor] || this.themes.brand;
        },
        get formMethod() {
            return this.requestMethod === 'GET' ? 'GET' : 'POST';
        },
        get spoofMethod() {
            return ['PUT', 'PATCH', 'DELETE'].includes(this.requestMethod) ? this.requestMethod : '';
        },
    }"
    x-cloak
    {{ $attributes }}
>
    <template x-teleport="body">
        <div
            x-show="open"
            @keydown.escape.window="open = false"
            style="display:none; position:fixed; inset:0; z-index:99999;"
        >
            {{-- Backdrop --}}
            <div
                @click="open = false"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                style="
                    position:fixed;
                    inset:0;
                    z-index:99998;
                    background:rgba(17,24,39,0.55);
                    backdrop-filter:blur(3px);
                    -webkit-backdrop-filter:blur(3px);
                "
            ></div>

            {{-- Modal --}}
            <div
                @click.stop
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
                style="
                    position:fixed;
                    top:50%;
                    left:50%;
                    transform:translate(-50%, -50%);
                    z-index:99999;
                    width:min(92vw, 420px);
                    max-width:420px;
                    max-height:calc(100vh - 32px);
                    overflow:auto;
                    margin:0;
                "
            >
                <div class="text-center">
                    <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full" :class="theme.bg">
                        <span :class="theme.text" x-html="theme.icon"></span>
                    </div>

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

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

                    <form
                        :action="action"
                        :method="formMethod"
                        class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-center"
                    >
                        @csrf
                        <template x-if="spoofMethod">
                            <input type="hidden" name="_method" :value="spoofMethod">
                        </template>

                        <button
                            @click="open = false"
                            type="button"
                            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"
                            x-text="cancelText"
                        ></button>

                        <button
                            type="submit"
                            x-text="confirmText"
                            class="w-full rounded-lg px-4 py-2.5 text-sm font-medium text-white transition-colors focus:outline-none focus:ring-2 text-nowrap sm:w-auto"
                            :class="theme.button"
                        ></button>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>

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