@if(customer())
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Check & Request Notification Permission
        function checkNotificationPermission() {
            if (!("Notification" in window)) {
                console.warn("This browser does not support desktop notification");
                return;
            }

            if (Notification.permission === "granted") {
                // Already granted
            } else if (Notification.permission !== "denied") {
                Notification.requestPermission().then(function (permission) {
                    if (permission === "granted") {
                        console.log("Notification permission granted!");
                        new Notification("Thông báo hệ thống", {
                            body: "Bạn sẽ nhận được thông báo khi các tác vụ hoàn tất.",
                            icon: "{{ asset('images/favicon.png') }}"
                        });
                    }
                });
            }
        }

        // Call check on load
        checkNotificationPermission();

        // 2. Listen for Private Channel Events
        if (window.Echo) {
            const userId = {{ customer()->id }};
            window.Echo.private('user.' + userId)
                .listen('.vm.status.changed', (e) => {
                    console.log("VM Status Changed:", e);
                    
                    // Show Browser Notification
                    if (Notification.permission === "granted") {
                        const notification = new Notification("Thông báo từ Portal", {
                            body: e.message,
                            icon: "{{ asset('images/favicon.png') }}", // Replace with actual logo path
                            tag: 'vm-status-' + e.vmId
                        });
                        
                        notification.onclick = function() {
                            window.focus();
                            // Optional: navigating to VM detail page
                            // window.location.href = '/service/' + e.vmId; 
                            this.close();
                        };
                    }

                    // Show In-App Toast (using FuiToast based on your script.blade.php)
                    if (typeof FuiToast !== 'undefined') {
                        FuiToast.success(e.message);
                    } else if (typeof toastr !== 'undefined') {
                        toastr.success(e.message);
                    }
                    
                    // Optional: Reload Livewire components if needed
                     if (window.Livewire) {
                         // Livewire.dispatch('refreshComponent'); 
                     }
                });
        }
    });
</script>
@endif