<!-- resources/views/livewire/logout.blade.php -->
<div>
    <button class="logout-btn" 
            title="Logout"
            wire:click="confirmLogout"
            wire:loading.attr="disabled"
            wire:loading.class="opacity-50">
        <span wire:loading.remove wire:target="confirmLogout">
            <i class="bi bi-box-arrow-right"></i>
        </span>
        <span wire:loading wire:target="confirmLogout">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        </span>
    </button>

    @push('scripts')
    <script>
        document.addEventListener('livewire:init', function() {
            // Listen for the showLogoutConfirmation event
            Livewire.on('showLogoutConfirmation', () => {
                Swal.fire({
                    title: 'Ready to Leave?',
                    text: "You will be logged out of your session",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#4361ee',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, logout',
                    cancelButtonText: 'Stay logged in',
                    background: 'var(--card-bg)',
                    color: 'var(--text-primary)',
                    reverseButtons: true,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Call the logout method
                        @this.call('logout');
                    }
                });
            });
        });
    </script>
    @endpush
</div>