@if($guard_web ?? false)
<script>
(function () {
    if (!window.jQuery) {
        return;
    }

    var $ = window.jQuery;
    var COUNT_INTERVAL_MS = 120000;
    var countTimer = null;

    function updateBadge($root, count) {
        var n = parseInt(count, 10) || 0;
        $root.find('.order-notif-count').text(n);
        var $badge = $root.find('.order-notif-badge');
        if (n > 0) {
            $badge.text(n).show();
        } else {
            $badge.hide();
        }
    }

    function fetchCount($root) {
        return $.getJSON($root.data('count-url'))
            .then(function (data) {
                updateBadge($root, data.unreadCount || 0);
                return data.unreadCount || 0;
            })
            .fail(function (xhr) {
                if (xhr.status === 401 || xhr.status === 403 || xhr.status === 419) {
                    stopCountPolling();
                }
            });
    }

    function renderList($root, notifications) {
        var $container = $root.find('.order-notification-list');
        $container.empty();

        if (!notifications || !notifications.length) {
            $container.html('<div class="text-muted small py-2 px-2">Aucune notification</div>');
            return;
        }

        notifications.forEach(function (item) {
            var isValid = item.state === 'valid';
            var stateClass = isValid ? 'order-notification-item--valid' : 'order-notification-item--invalid';
            var readClass = item.read ? ' order-notification-item--read' : ' order-notification-item--unread';
            var modifiedClass = item.articles_changed ? ' order-notification-item--articles-changed' : '';
            var iconClass = isValid ? 'fa-check-circle' : 'fa-times-circle';
            var message = isValid
                ? 'La commande N° ' + item.order_id + ' a été validée.'
                : 'La commande N° ' + item.order_id + ' a été rejetée.';
            var tagHtml = item.articles_changed
                ? '<span class="order-notification-item__tag"><i class="fas fa-pen"></i> Articles modifiés</span>'
                : '';
            var statusHtml = item.read
                ? '<span class="order-notification-item__status order-notification-item__status--read"><i class="fas fa-check"></i> Lu</span>'
                : '<span class="order-notification-item__status order-notification-item__status--unread"><span class="order-notification-item__dot" aria-hidden="true"></span> Non lu</span>';

            $container.append(
                '<a href="' + item.url + '" class="order-notification-item ' + stateClass + readClass + modifiedClass + '">' +
                '<span class="order-notification-item__icon"><i class="fas ' + iconClass + '"></i></span>' +
                '<span class="order-notification-item__body">' +
                '<div class="order-notification-item__head">' +
                '<div class="order-notification-item__title">' + (item.label || 'Statut de commande') + '</div>' +
                statusHtml +
                '</div>' +
                '<div class="order-notification-item__text">' + message + '</div>' +
                tagHtml +
                '</span>' +
                '</a>'
            );
        });
    }

    function fetchList($root) {
        var $container = $root.find('.order-notification-list');
        $container.html('<div class="text-muted small py-2 px-2">Chargement...</div>');

        return $.getJSON($root.data('list-url')).then(function (data) {
            updateBadge($root, data.unreadCount || 0);
            renderList($root, data.notifications || []);
        });
    }

    function positionNotificationsDropdown($root) {
        var $menu = $root.find('.dropdown-menu.order-notifications-menu');
        var $trigger = $root.find('[data-toggle="dropdown"]').first();
        if (!$menu.length || !$trigger.length) {
            return;
        }

        if ($root.hasClass('order-notifications-root--mobile')) {
            var $headerMobile = $('#kt_header_mobile');
            var top = 64;
            if ($headerMobile.length) {
                top = $headerMobile.get(0).getBoundingClientRect().bottom + 8;
            }
            var width = Math.min(380, window.innerWidth - 20);
            $menu.css({
                position: 'fixed',
                top: top + 'px',
                right: '10px',
                left: 'auto',
                bottom: 'auto',
                transform: 'none',
                margin: '0',
                width: width + 'px',
                'max-width': 'calc(100vw - 20px)'
            });
            return;
        }

        if ($root.hasClass('order-notifications-root--desktop')) {
            var rect = $trigger[0].getBoundingClientRect();
            var menuWidth = Math.min(380, $menu.outerWidth() || 380);
            var left = rect.right - menuWidth;
            if (left < 10) {
                left = 10;
            }
            $menu.css({
                position: 'fixed',
                top: (rect.bottom + 8) + 'px',
                left: left + 'px',
                right: 'auto',
                bottom: 'auto',
                transform: 'none',
                margin: '0',
                width: menuWidth + 'px',
                'max-width': 'calc(100vw - 20px)'
            });
        }
    }

    function initRoot(root) {
        var $root = $(root);
        updateBadge($root, $root.data('initial-count') || 0);

        $root.on('show.bs.dropdown', function () {
            fetchList($root);
        });
        $root.on('shown.bs.dropdown', function () {
            positionNotificationsDropdown($root);
        });
        $root.on('hidden.bs.dropdown', function () {
            fetchCount($root);
        });
    }

    function refreshAllCounts() {
        if (document.hidden) {
            return;
        }
        $('.order-notifications-root').each(function () {
            fetchCount($(this));
        });
    }

    function startCountPolling() {
        stopCountPolling();
        countTimer = setInterval(refreshAllCounts, COUNT_INTERVAL_MS);
    }

    function stopCountPolling() {
        if (countTimer) {
            clearInterval(countTimer);
            countTimer = null;
        }
    }

    $(function () {
        $('.order-notifications-root').each(function () {
            initRoot(this);
        });
        startCountPolling();

        document.addEventListener('visibilitychange', function () {
            if (document.hidden) {
                stopCountPolling();
            } else {
                refreshAllCounts();
                startCountPolling();
            }
        });
    });
})();
</script>
@endif