{{-- Simple wire:loading loader (always shows) --}}
<div
    wire:loading
    wire:loading.delay.shortest
    wire:target="data.currency,data.game_uuid,data.target_type,data.registered,data.depositors"
    class="fixed inset-0 z-[9999] flex items-center justify-center bg-white/80 backdrop-blur-sm"
    style="display: none;"
>
    <div class="flex flex-col items-center space-y-4 text-slate-800">
        <div class="h-16 w-16 rounded-full border-4 border-blue-300 border-t-blue-600 animate-spin"></div>
        <div class="text-lg font-semibold">Processing, please wait...</div>
    </div>
</div>

{{-- Combined loader for all loading states (Alpine.js enhanced) --}}
<div
    x-data="{
        isLoading: false,
        wireLoading: false,
        checkLoading() {
            // Check is_loading state from form
            try {
                if (typeof $wire !== 'undefined' && $wire.data) {
                    this.isLoading = $wire.data.is_loading === true || $wire.data.is_loading === '1' || $wire.data.is_loading === 1;
                }
            } catch(e) {
                // Silently handle errors
            }
            
            // Check Livewire loading state - multiple methods
            try {
                // Method 1: Check wire:loading class on elements
                const wireLoadingElements = document.querySelectorAll('[wire\\:loading]');
                let hasWireLoading = false;
                wireLoadingElements.forEach(el => {
                    if (el.classList.contains('wire-loading') || 
                        el.hasAttribute('wire:loading') ||
                        window.getComputedStyle(el).display !== 'none') {
                        hasWireLoading = true;
                    }
                });
                
                // Method 2: Check Livewire component instance
                let componentLoading = false;
                const livewireComponent = document.querySelector('[wire\\:id]');
                if (livewireComponent && window.Livewire) {
                    try {
                        const wireId = livewireComponent.getAttribute('wire:id');
                        const component = window.Livewire.find(wireId);
                        if (component && component.__instance) {
                            componentLoading = component.__instance.isLoading || false;
                        }
                    } catch(e) {}
                }
                
                // Method 3: Check for any element with wire:loading attribute that's visible
                const allWireLoading = document.querySelectorAll('[wire\\:loading], [wire\\:loading\\.delay]');
                let hasAnyLoading = false;
                allWireLoading.forEach(el => {
                    const style = window.getComputedStyle(el);
                    if (style.display !== 'none' && style.visibility !== 'hidden') {
                        hasAnyLoading = true;
                    }
                });
                
                this.wireLoading = hasWireLoading || componentLoading || hasAnyLoading;
            } catch(e) {
                // Silently handle errors
            }
        },
        showLoader() {
            const shouldShow = this.isLoading || this.wireLoading;
            return shouldShow;
        },
        init() {
            // Poll every 20ms for maximum responsiveness
            const interval = setInterval(() => {
                this.checkLoading();
            }, 20);
            
            // Watch for Livewire events
            if (window.Livewire) {
                Livewire.hook('morph.updated', () => {
                    setTimeout(() => this.checkLoading(), 5);
                });
                
                Livewire.hook('morph.updating', () => {
                    this.wireLoading = true;
                });
                
                Livewire.hook('request', () => {
                    this.wireLoading = true;
                });
                
                Livewire.hook('response', () => {
                    setTimeout(() => {
                        this.wireLoading = false;
                        this.checkLoading();
                    }, 50);
                });
            }
            
            // Initial check
            this.checkLoading();
            
            // Cleanup
            this.$el.addEventListener('alpine:destroy', () => {
                clearInterval(interval);
            });
        }
    }"
    x-show="showLoader()"
    x-cloak
    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="fixed inset-0 z-[9999] flex items-center justify-center bg-white/80 backdrop-blur-sm"
    style="display: none;"
    wire:loading
    wire:loading.delay.shortest
    wire:target="data.currency,data.game_uuid,data.target_type,data.registered,data.depositors"
>
    <div class="flex flex-col items-center space-y-4 text-slate-800">
        <div class="h-16 w-16 rounded-full border-4 border-blue-300 border-t-blue-600 animate-spin"></div>
        <div class="text-lg font-semibold">Processing, please wait...</div>
    </div>
</div>