{{-- Global Confirmation Modal --}}
<div x-data="confirmModal()">
    <div
        x-show="show"
        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"
        class="modal-backdrop"
        @keydown.escape.window="cancel()"
        style="display: none;"
    >
        <div class="modal max-w-md" @click.away="cancel()">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-900" x-text="title"></h3>
            </div>
            <div class="modal-body">
                <p class="text-sm text-gray-600" x-text="message"></p>
            </div>
            <div class="modal-footer">
                <button @click="cancel()" class="btn-secondary">Cancel</button>
                <button @click="confirm()" :class="confirmClass" x-text="confirmText"></button>
            </div>
        </div>
    </div>
</div>

{{--
Usage from anywhere:
<button @click="$dispatch('open-confirm', {
    title: 'Delete Company',
    message: 'Are you sure? This action cannot be undone.',
    confirmText: 'Delete',
    confirmClass: 'btn-danger',
    action: () => document.getElementById('delete-form-1').submit()
})">Delete</button>
--}}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('confirmModal', () => ({
            show: false, title: '', message: '', confirmText: 'Confirm', confirmClass: 'btn-danger', action: null,
            init() {
                window.addEventListener('open-confirm', (e) => {
                    this.title = e.detail.title || 'Confirm';
                    this.message = e.detail.message || 'Are you sure?';
                    this.confirmText = e.detail.confirmText || 'Confirm';
                    this.confirmClass = e.detail.confirmClass || 'btn-danger';
                    this.action = e.detail.action || null;
                    this.show = true;
                });
            },
            confirm() { if (this.action) this.action(); this.show = false; },
            cancel() { this.show = false; this.action = null; }
        }));
    });
</script>