@auth
    <style>
        /* Discord-Style Desktop Toast Notifications */
        #discordToastContainer {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999999;
            display: flex;
            flex-direction: column-reverse;
            gap: 12px;
            pointer-events: none;
            max-width: calc(100vw - 40px);
            width: 370px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        .discord-toast {
            position: relative;
            pointer-events: auto;
            background: #1e1f22;
            color: #dbdee1;
            border-radius: 10px;
            padding: 14px 16px 12px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-left: 4px solid #5865F2;
            /* Discord Blurple */
            cursor: pointer;
            overflow: hidden;
            user-select: none;
            transform-origin: bottom right;
            animation: discordToastIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            transition: transform 0.2s ease, opacity 0.25s ease, box-shadow 0.2s ease;
        }

        .discord-toast:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .discord-toast.is-removed {
            border-left-color: #ED4245;
            /* Discord Danger Red */
        }

        .discord-toast-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .discord-toast-app {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #949ba4;
        }

        .discord-toast-app svg {
            color: #5865F2;
        }

        .discord-toast.is-removed .discord-toast-app svg {
            color: #ED4245;
        }

        .discord-toast-meta {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .discord-toast-time {
            font-size: 11px;
            color: #80848e;
        }

        .discord-toast-close {
            background: transparent;
            border: none;
            color: #80848e;
            cursor: pointer;
            padding: 0;
            font-size: 18px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            transition: color 0.15s, background-color 0.15s;
        }

        .discord-toast-close:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
        }

        .discord-toast-body {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .discord-toast-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #5865F2;
            color: #ffffff;
            font-size: 16px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }

        .discord-toast.is-removed .discord-toast-avatar {
            background: #ED4245;
        }

        .discord-toast-content {
            flex: 1;
            min-width: 0;
        }

        .discord-toast-title {
            font-size: 13px;
            font-weight: 700;
            color: #f2f3f5;
            line-height: 1.35;
            margin-bottom: 3px;
            word-break: break-word;
        }

        .discord-toast-desc {
            font-size: 12px;
            color: #b5bac1;
            line-height: 1.4;
            word-break: break-word;
        }

        .discord-toast-task-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #5865F2;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 4px;
            margin-top: 4px;
            font-size: 11px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .discord-toast.is-removed .discord-toast-task-badge {
            color: #ED4245;
        }

        .discord-toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: #5865F2;
            width: 100%;
            transform-origin: left;
            transition: transform linear;
        }

        .discord-toast.is-removed .discord-toast-progress {
            background: #ED4245;
        }

        @keyframes discordToastIn {
            0% {
                opacity: 0;
                transform: translateX(60px) scale(0.92);
            }

            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes discordToastOut {
            0% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }

            100% {
                opacity: 0;
                transform: translateX(80px) scale(0.85);
            }
        }
    </style>

    {{-- Container for toasts --}}
    <div id="discordToastContainer"></div>

    <script>
        (function() {
            var POLL_URL = '{{ route('kanban.notifications.poll') }}';
            var READ_URL = '{{ route('kanban.notifications.read') }}';
            var shownIds = new Set();
            var pollTimer = null;
            var TOAST_DURATION = 8000; // 8 seconds

            // Đồng bộ giữa các tab qua BroadcastChannel & localStorage
            var channel = null;
            try {
                if ('BroadcastChannel' in window) {
                    channel = new BroadcastChannel('lvt_notifications_channel');
                    channel.onmessage = function(ev) {
                        if (ev.data && ev.data.type === 'notif_shown' && ev.data.id) {
                            shownIds.add(ev.data.id);
                        }
                    };
                }
            } catch (e) {}

            function isAlreadyShown(id) {
                if (shownIds.has(id)) return true;
                try {
                    var stored = JSON.parse(localStorage.getItem('lvt_shown_notifs') || '[]');
                    if (stored.indexOf(id) !== -1) {
                        shownIds.add(id);
                        return true;
                    }
                } catch (e) {}
                return false;
            }

            function markIdShown(id) {
                shownIds.add(id);
                try {
                    var stored = JSON.parse(localStorage.getItem('lvt_shown_notifs') || '[]');
                    if (stored.indexOf(id) === -1) {
                        stored.push(id);
                        if (stored.length > 60) stored.shift(); // Giữ tối đa 60 ID gần nhất
                        localStorage.setItem('lvt_shown_notifs', JSON.stringify(stored));
                    }
                } catch (e) {}
                if (channel) {
                    try {
                        channel.postMessage({
                            type: 'notif_shown',
                            id: id
                        });
                    } catch (e) {}
                }
            }

            // Lấy CSRF token từ meta tag
            function getCsrfToken() {
                var el = document.querySelector('meta[name="csrf-token"]');
                return el ? el.getAttribute('content') : '';
            }

            // Âm thanh Discord Notification (sử dụng Web Audio API không cần load file mp3 bên ngoài)
            function playDiscordChime(isRemoved) {
                try {
                    var AudioCtx = window.AudioContext || window.webkitAudioContext;
                    if (!AudioCtx) return;
                    var ctx = new AudioCtx();
                    if (ctx.state === 'suspended') {
                        ctx.resume();
                    }

                    var now = ctx.currentTime;
                    var osc = ctx.createOscillator();
                    var gain = ctx.createGain();
                    osc.connect(gain);
                    gain.connect(ctx.destination);

                    if (isRemoved) {
                        // Tông trầm cảnh báo: 440Hz -> 330Hz
                        osc.type = 'sine';
                        osc.frequency.setValueAtTime(440, now);
                        osc.frequency.exponentialRampToValueAtTime(330, now + 0.18);
                        gain.gain.setValueAtTime(0.12, now);
                        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.28);
                        osc.start(now);
                        osc.stop(now + 0.28);
                    } else {
                        // Tông Discord ping vui vẻ: 587.3Hz (D5) -> 880Hz (A5)
                        osc.type = 'triangle';
                        osc.frequency.setValueAtTime(587.33, now);
                        osc.frequency.setValueAtTime(880, now + 0.08);
                        gain.gain.setValueAtTime(0.15, now);
                        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
                        osc.start(now);
                        osc.stop(now + 0.35);
                    }
                } catch (e) {
                    // Audio context can be blocked until first user interaction
                }
            }

            // Yêu cầu quyền Browser Desktop Notification
            function requestDesktopPermission(isUserInitiated) {
                if (!('Notification' in window)) return;
                var promptToast = document.getElementById('lvtPermToast');

                Notification.requestPermission().then(function(permission) {
                    if (promptToast) promptToast.remove();

                    if (permission === 'granted') {
                        // Gửi ngay 1 thông báo Windows ra góc màn hình để kiểm tra
                        sendDesktopNotification({
                            id: 'test-welcome-' + Date.now(),
                            actor_name: 'Kanban Board',
                            message: 'Thông báo trên máy tính (Windows) đã sẵn sàng! Bạn sẽ nhận được tin ở góc màn hình khi có công việc mới.',
                            task_title: 'Thông báo Windows'
                        }, false);
                    } else if (permission === 'denied' && isUserInitiated) {
                        alert(
                            'Trình duyệt của bạn đang Chặn (Block) thông báo từ trang web này. Vui lòng bấm vào biểu tượng ổ khóa hoặc biểu tượng cài đặt cạnh thanh địa chỉ URL để chọn "Cho phép (Allow)" thông báo.'
                        );
                    }
                }).catch(function(err) {
                    console.error('[LVT Notification] Lỗi yêu cầu quyền:', err);
                });
            }

            // Hiển thị popup nhắc người dùng bấm bật thông báo Windows (nếu chưa cấp quyền)
            function checkAndPromptDesktopPermission() {
                if (!('Notification' in window)) return;

                if (Notification.permission === 'default') {
                    setTimeout(function() {
                        var container = document.getElementById('discordToastContainer');
                        if (!container || document.getElementById('lvtPermToast')) return;

                        var promptToast = document.createElement('div');
                        promptToast.id = 'lvtPermToast';
                        promptToast.className = 'discord-toast';
                        promptToast.style.borderLeftColor = '#5865F2';
                        promptToast.innerHTML =
                            '<div class="discord-toast-header">' +
                            '<div class="discord-toast-app">' +
                            '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>' +
                            '<span>Thông báo Windows</span>' +
                            '</div>' +
                            '<button type="button" class="discord-toast-close" onclick="this.closest(\'#lvtPermToast\').remove();">&times;</button>' +
                            '</div>' +
                            '<div class="discord-toast-body">' +
                            '<div class="discord-toast-avatar" style="background:#5865F2;">' +
                            '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>' +
                            '</div>' +
                            '<div class="discord-toast-content">' +
                            '<div class="discord-toast-title">Bật thông báo góc màn hình máy tính</div>' +
                            '<div class="discord-toast-desc">Nhận thông báo ngoài màn hình máy tính Windows mỗi khi có task mới.</div>' +
                            '<div style="margin-top:10px;display:flex;gap:8px;">' +
                            '<button type="button" id="lvtEnableNotifBtn" style="background:#5865F2;color:#fff;border:none;border-radius:5px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;">Bật thông báo ngay</button>' +
                            '<button type="button" onclick="this.closest(\'#lvtPermToast\').remove();" style="background:rgba(255,255,255,0.08);color:#b5bac1;border:none;border-radius:5px;padding:6px 10px;font-size:12px;cursor:pointer;">Để sau</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>';

                        container.appendChild(promptToast);

                        var btn = document.getElementById('lvtEnableNotifBtn');
                        if (btn) {
                            btn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                requestDesktopPermission(true);
                            });
                        }
                    }, 1200);
                }
            }

            // Bắn thông báo ngoài desktop OS (Windows/Mac)
            function sendDesktopNotification(n, isRemoved) {
                if (!('Notification' in window)) return;
                if (Notification.permission !== 'granted') return;

                try {
                    var title = 'Bạn được giao task mới';
                    if (n.type === 'kanban_assignee_removed') {
                        title = 'Bạn đã bị gỡ khỏi task';
                    } else if (n.type === 'kanban_task_deleted') {
                        title = 'Công việc đã bị xóa';
                    }

                    var options = {
                        body: (n.actor_name ? n.actor_name + ': ' : '') + (n.message || n.task_title || ''),
                        icon: '{{ asset('images/logo_icon.jpg') }}',
                        badge: '{{ asset('images/logo_icon.jpg') }}',
                        tag: 'kanban-task-' + (n.task_id || n.id),
                        renotify: true
                    };
                    var notif = new Notification(title, options);
                    notif.onclick = function() {
                        window.focus();
                        if (n.url) window.location.href = n.url;
                        notif.close();
                    };
                } catch (e) {
                    console.error('[LVT Notification] Lỗi gửi thông báo Windows:', e);
                }
            }

            // Hiển thị toast popup góc phải màn hình
            function showToast(n) {
                if (!n || !n.id || isAlreadyShown(n.id)) return;
                markIdShown(n.id);

                var container = document.getElementById('discordToastContainer');
                if (!container) return;

                var isRemoved = n.type === 'kanban_assignee_removed' || n.type === 'kanban_task_deleted';
                var toast = document.createElement('div');
                toast.className = 'discord-toast' + (isRemoved ? ' is-removed' : '');

                var titleText = 'Được giao công việc mới';
                if (n.type === 'kanban_assignee_removed') {
                    titleText = 'Đã bị gỡ khỏi công việc';
                } else if (n.type === 'kanban_task_deleted') {
                    titleText = 'Công việc đã bị xóa';
                }

                var iconSvg = isRemoved ?
                    '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="18" y1="8" x2="23" y2="13"/><line x1="23" y1="8" x2="18" y2="13"/></svg>' :
                    '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>';

                if (n.type === 'kanban_task_deleted') {
                    iconSvg =
                        '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>';
                }

                var appSvg =
                    '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>';

                toast.innerHTML =
                    '<div class="discord-toast-header">' +
                    '<div class="discord-toast-app">' +
                    appSvg +
                    '<span>Kanban Board</span>' +
                    '</div>' +
                    '<div class="discord-toast-meta">' +
                    '<span class="discord-toast-time">' + (n.created_at || 'Vừa xong') + '</span>' +
                    '<button type="button" class="discord-toast-close" title="Đóng">&times;</button>' +
                    '</div>' +
                    '</div>' +
                    '<div class="discord-toast-body">' +
                    '<div class="discord-toast-avatar">' + iconSvg + '</div>' +
                    '<div class="discord-toast-content">' +
                    '<div class="discord-toast-title">' + titleText + '</div>' +
                    '<div class="discord-toast-desc">' + (n.message || '') + '</div>' +
                    (n.task_title ? '<div class="discord-toast-task-badge" title="' + n.task_title + '">' + n
                        .task_title + '</div>' : '') +
                    '</div>' +
                    '</div>' +
                    '<div class="discord-toast-progress"></div>';

                // Play chime
                playDiscordChime(isRemoved);

                // Phát desktop notification
                sendDesktopNotification(n, isRemoved);

                // Tự động dismiss với thanh progress bar
                var progressBar = toast.querySelector('.discord-toast-progress');
                var startTime = Date.now();
                var remainingTime = TOAST_DURATION;
                var dismissTimeout = null;

                function startDismissTimer() {
                    if (progressBar) {
                        progressBar.style.transition = 'transform ' + remainingTime + 'ms linear';
                        progressBar.style.transform = 'scaleX(0)';
                    }
                    dismissTimeout = setTimeout(function() {
                        removeToast(toast);
                    }, remainingTime);
                }

                function pauseDismissTimer() {
                    if (dismissTimeout) {
                        clearTimeout(dismissTimeout);
                        dismissTimeout = null;
                    }
                    if (progressBar) {
                        var elapsed = Date.now() - startTime;
                        var progress = Math.max(0, 1 - (elapsed / TOAST_DURATION));
                        progressBar.style.transition = 'none';
                        progressBar.style.transform = 'scaleX(' + progress + ')';
                        remainingTime = Math.max(0, remainingTime - elapsed);
                    }
                }

                // Hover pause
                toast.addEventListener('mouseenter', function() {
                    pauseDismissTimer();
                });
                toast.addEventListener('mouseleave', function() {
                    startTime = Date.now();
                    if (remainingTime > 500) {
                        startDismissTimer();
                    } else {
                        removeToast(toast);
                    }
                });

                // Click để chuyển đến task
                toast.addEventListener('click', function(e) {
                    if (e.target.closest('.discord-toast-close')) {
                        e.stopPropagation();
                        removeToast(toast);
                        return;
                    }
                    if (n.url) {
                        window.location.href = n.url;
                    }
                });

                // Nút close
                var closeBtn = toast.querySelector('.discord-toast-close');
                if (closeBtn) {
                    closeBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        removeToast(toast);
                    });
                }

                container.appendChild(toast);
                startDismissTimer();

                // Đánh dấu thông báo này là đã đọc trên server
                markRead([n.id]);
            }

            // Xóa toast với animation mượt mà
            function removeToast(toastEl) {
                if (!toastEl || !toastEl.parentNode) return;
                toastEl.style.animation = 'discordToastOut 0.25s forwards';
                setTimeout(function() {
                    if (toastEl.parentNode) {
                        toastEl.parentNode.removeChild(toastEl);
                    }
                }, 250);
            }

            // Đánh dấu đã đọc qua API
            function markRead(ids) {
                var csrf = getCsrfToken();
                fetch(READ_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        ids: ids
                    })
                }).catch(function() {});
            }

            // Polling lấy thông báo mới
            function poll() {
                fetch(POLL_URL, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(res) {
                        if (!res.ok) throw new Error('HTTP ' + res.status);
                        return res.json();
                    })
                    .then(function(data) {
                        if (data && data.success && Array.isArray(data.notifications) && data.notifications.length >
                            0) {
                            data.notifications.forEach(function(item, idx) {
                                setTimeout(function() {
                                    showToast(item);
                                }, idx * 400); // stagger if multiple
                            });
                        }
                    })
                    .catch(function(err) {
                        // Silent error on background poll
                    });
            }

            // Kiểm tra và hiển thị popup bật thông báo Windows nếu chưa bật
            checkAndPromptDesktopPermission();

            // Khi người dùng chuyển về lại tab Kanban, kiểm tra ngay lập tức
            document.addEventListener('visibilitychange', function() {
                if (!document.hidden) {
                    poll();
                }
            });

            // Khởi động polling: lần đầu sau 2.5 giây, sau đó lặp lại đều đặn mỗi 15 giây
            // Vẫn chạy ngay cả khi tab đang ở chế độ nền để có thể bắn âm thanh và Desktop Notification
            setTimeout(poll, 2500);
            pollTimer = setInterval(poll, 15000);

            // Export global helper nếu cần trigger test từ console
            window.LvtNotification = {
                poll: poll,
                showToast: showToast,
                requestPermission: requestDesktopPermission,
                testDesktop: function() {
                    if (!('Notification' in window)) {
                        alert('Trình duyệt này không hỗ trợ HTML5 Notification.');
                        return;
                    }
                    if (Notification.permission !== 'granted') {
                        requestDesktopPermission(true);
                    } else {
                        sendDesktopNotification({
                            id: 'manual-test-' + Date.now(),
                            actor_name: 'Hệ thống Kanban',
                            message: 'Đây là thông báo thử nghiệm ở góc màn hình máy tính Windows!',
                            task_title: 'Kiểm tra thông báo Windows'
                        }, false);
                    }
                }
            };
        })
        ();
    </script>
@endauth