@php
    $user = auth()->user();
    $notifPollUrl = $user->role === 'restaurant_admin'
        ? route('restaurant-admin.notifications.poll')
        : route('staff.notifications.poll');
    $notifRid = (int) $user->restaurant_id;
@endphp
<script>
(function () {
    var POLL_URL = @json($notifPollUrl);
    var RID      = @json($notifRid);
    var LSK_SEEN   = 'mk_notif_' + RID + '_seen';
    var LSK_LIST   = 'mk_notif_' + RID + '_list';
    var LSK_UNREAD = 'mk_notif_' + RID + '_unread';
    var LSK_TS     = 'mk_notif_' + RID + '_ts';

    var seenIds  = new Set(JSON.parse(localStorage.getItem(LSK_SEEN)  || '[]'));
    var notifList = JSON.parse(localStorage.getItem(LSK_LIST) || '[]');
    var unread   = parseInt(localStorage.getItem(LSK_UNREAD) || '0', 10);
    var since    = parseInt(localStorage.getItem(LSK_TS)     || '0', 10);

    // First visit: anchor to now so old orders don't fire
    if (!since) {
        since = Math.floor(Date.now() / 1000);
        localStorage.setItem(LSK_TS, since);
    }

    // Request browser notification permission on first use
    if ('Notification' in window && Notification.permission === 'default') {
        Notification.requestPermission();
    }

    renderBell();
    renderList();

    setInterval(doPoll, 10000);

    function doPoll() {
        fetch(POLL_URL + '?since=' + since, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.server_ts) {
                since = data.server_ts;
                localStorage.setItem(LSK_TS, since);
            }
            var fresh = [];
            if (data.orders && data.orders.length) {
                fresh = data.orders.filter(function (o) { return !seenIds.has(o.id); });
            }
            window.dispatchEvent(new CustomEvent('mk:orders-polled', {
                detail: { counts: data.counts || null, fresh: fresh }
            }));
            if (!data.orders || !data.orders.length) return;

            if (!fresh.length) return;

            fresh.forEach(function (o) {
                seenIds.add(o.id);
                notifList.unshift(buildItem(o));
                unread++;
            });

            if (notifList.length > 50) notifList = notifList.slice(0, 50);

            localStorage.setItem(LSK_SEEN,   JSON.stringify([...seenIds].slice(-200)));
            localStorage.setItem(LSK_LIST,   JSON.stringify(notifList));
            localStorage.setItem(LSK_UNREAD, unread);

            renderBell();
            renderList();
            playBeep();
            if (navigator.vibrate) navigator.vibrate([200, 100, 200]);
            fireBrowserNotif(fresh[0], fresh.length);
        })
        .catch(function () {});
    }

    function buildItem(o) {
        var typeMap = { dine_in: 'Dine In', takeaway: 'Take Away', delivery: 'Delivery', home_delivery: 'Home Delivery', whatsapp: 'WhatsApp' };
        return {
            id:    o.id,
            title: 'New Order ' + o.order_number,
            sub:   (typeMap[o.order_type] || o.order_type) + ' · ' + o.table_name + (o.customer_phone ? ' · ' + o.customer_phone : ''),
            amount: o.total_amount,
            ts:    o.ts,
            read:  false,
        };
    }

    function renderBell() {
        var badge = document.getElementById('mkBadge');
        var ddCount = document.getElementById('mkUnreadCount');
        [badge, ddCount].forEach(function (el) {
            if (!el) return;
            if (unread > 0) {
                el.textContent = unread > 99 ? '99+' : unread;
                el.style.display = 'block';
            } else {
                el.style.display = 'none';
            }
        });
    }

    function renderList() {
        var list = document.getElementById('mkNotifList');
        if (!list) return;
        if (!notifList.length) {
            list.innerHTML = '<div class="notif-empty">No new orders yet</div>';
            return;
        }
        list.innerHTML = notifList.map(function (n) {
            return '<div class="notif-item ' + (n.read ? '' : 'unread') + '">'
                + '<div class="notif-item-title">' + esc(n.title) + '</div>'
                + '<div class="notif-item-sub">' + esc(n.sub) + '</div>'
                + '<div class="notif-item-time">' + relTime(n.ts) + ' &middot; Rs. ' + parseFloat(n.amount).toFixed(0) + '</div>'
                + '</div>';
        }).join('');
    }

    function fireBrowserNotif(order, count) {
        if (!('Notification' in window) || Notification.permission !== 'granted') return;
        var body = count > 1 ? count + ' new orders received!' : 'Order from ' + order.table_name + (order.customer_phone ? ' (' + order.customer_phone + ')' : '');
        try {
            new Notification('MenuKosh — New Order!', {
                body: body,
                icon: '/images/menukosh.png',
                tag:  'mk-order-' + order.id,
            });
        } catch(e) {}
    }

    function playBeep() {
        try {
            var ctx = new (window.AudioContext || window.webkitAudioContext)();
            [880, 1100].forEach(function (freq, i) {
                var osc  = ctx.createOscillator();
                var gain = ctx.createGain();
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.frequency.value = freq;
                osc.type = 'sine';
                var t = ctx.currentTime + i * 0.18;
                gain.gain.setValueAtTime(0.18, t);
                gain.gain.exponentialRampToValueAtTime(0.001, t + 0.32);
                osc.start(t);
                osc.stop(t + 0.32);
            });
            setTimeout(function () { ctx.close(); }, 1200);
        } catch(e) {}
    }

    function esc(s) {
        return String(s)
            .replace(/&/g,'&amp;')
            .replace(/</g,'&lt;')
            .replace(/>/g,'&gt;')
            .replace(/"/g,'&quot;');
    }

    function relTime(ts) {
        var diff = Math.floor(Date.now() / 1000 - ts);
        if (diff < 60)    return 'Just now';
        if (diff < 3600)  return Math.floor(diff / 60) + 'm ago';
        if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
        return Math.floor(diff / 86400) + 'd ago';
    }

    var MOBILE_QUERY = '(max-width: 640px)';

    function isOpen() {
        var dd = document.getElementById('mkDropdown');
        return !!dd && dd.classList.contains('open');
    }

    function openDropdown() {
        var dd = document.getElementById('mkDropdown');
        var backdrop = document.getElementById('mkNotifBackdrop');
        if (!dd) return;
        dd.classList.add('open');
        if (backdrop) backdrop.classList.add('open');
        if (window.matchMedia && window.matchMedia(MOBILE_QUERY).matches) {
            document.body.style.overflow = 'hidden';
        }
    }

    function closeDropdown() {
        var dd = document.getElementById('mkDropdown');
        var backdrop = document.getElementById('mkNotifBackdrop');
        if (dd) dd.classList.remove('open');
        if (backdrop) backdrop.classList.remove('open');
        document.body.style.overflow = '';
    }

    // Globals called from HTML onclick
    window.mkToggleDropdown = function () {
        // Guard against a stray double-fire (e.g. a fast double-tap) ever
        // resulting in two open panels — toggling is always relative to the
        // single #mkDropdown element's current state, never additive.
        if (isOpen()) {
            closeDropdown();
        } else {
            openDropdown();
        }
    };

    window.mkCloseDropdown = closeDropdown;

    window.mkMarkAllRead = function () {
        notifList = notifList.map(function (n) { return Object.assign({}, n, {read: true}); });
        unread = 0;
        localStorage.setItem(LSK_LIST,   JSON.stringify(notifList));
        localStorage.setItem(LSK_UNREAD, '0');
        renderBell();
        renderList();
    };

    // Close dropdown when clicking outside (backdrop covers the mobile case;
    // this covers desktop, where there's no backdrop element to click).
    document.addEventListener('click', function (e) {
        var wrap = document.getElementById('mkNotifWrap');
        if (wrap && !wrap.contains(e.target) && isOpen()) {
            closeDropdown();
        }
    });

    // Close on Escape from anywhere on the page.
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && isOpen()) {
            closeDropdown();
        }
    });
})();
</script>