@if($guard_web ?? false)
    @php
        $initialUnread = (int) ($orderNotificationsUnreadCount ?? 0);
        $variant = $variant ?? 'desktop';
        $legacyHeader = $legacyHeader ?? ((int) config('app.template_version', 2)) === 1;
        $rootClasses = 'dropdown order-notifications-root order-notifications-root--' . $variant;
        if ($legacyHeader) {
            $rootClasses .= ' order-notifications-root--legacy';
        }
        $legacyDesktop = $legacyHeader && $variant === 'desktop';
        $triggerClasses = 'order-notifications-trigger';
        if ($variant === 'desktop' && !$legacyHeader) {
            $triggerClasses .= ' app-header-pill';
        } elseif ($legacyDesktop) {
            $triggerClasses = 'btn btn-icon btn-clean btn-lg mr-1';
        } else {
            $triggerClasses .= ' btn p-0 mobile-action-btn';
        }
        $triggerStyle = $legacyDesktop ? 'background-color: #FFFFFF; position: relative;' : '';
        $badgeClasses = 'order-notif-badge';
        if ($legacyDesktop) {
            $badgeClasses .= ' label label-danger label-rounded';
        }
        $badgeStyle = 'position: absolute; top: -8px; right: -8px; background-color: #F64E60; color: #ffffff; border-radius: 50%; padding: 4px 6px; font-size: 10px; min-width: 18px; text-align: center;';
        if ($initialUnread < 1) {
            $badgeStyle .= ' display: none;';
        }

        $notifThemeBase = '#' . ltrim(trim((string) ($backgroundColor ?? '0c447c')), '#');
        $notifR = hexdec(substr($notifThemeBase, 1, 2));
        $notifG = hexdec(substr($notifThemeBase, 3, 2));
        $notifB = hexdec(substr($notifThemeBase, 5, 2));
        $notifDarkRatio = 0.25;
        $notifThemeDark = sprintf(
            '#%02X%02X%02X',
            (int) round($notifR * (1 - $notifDarkRatio)),
            (int) round($notifG * (1 - $notifDarkRatio)),
            (int) round($notifB * (1 - $notifDarkRatio))
        );
        $notifThemeRgb = $notifR . ', ' . $notifG . ', ' . $notifB;
        $notifThemeStyle = '--notif-primary: ' . $notifThemeBase . '; --notif-primary-dark: ' . $notifThemeDark . '; --notif-primary-rgb: ' . $notifThemeRgb . ';';
    @endphp

    @once
    <style>
        .order-notifications-root {
            position: relative;
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            line-height: 1;
        }
        .order-notifications-root .dropdown-menu.order-notifications-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0;
            float: none;
            margin-top: 0.45rem;
            transform: none !important;
            will-change: auto;
        }
        .order-notifications-root--desktop { margin-right: 8px; }
        /* Header V2 — menu ancré sous le bouton (évite Popper / centre de page) */
        #kt_header.app-modern-header .app-header-right,
        #kt_header.app-modern-header .topbar {
            overflow: visible;
        }
        #kt_header.app-modern-header .order-notifications-root--desktop {
            position: relative;
        }
        #kt_header.app-modern-header .order-notifications-root--desktop .dropdown-menu.order-notifications-menu {
            position: absolute !important;
            top: calc(100% + 8px) !important;
            right: 0 !important;
            left: auto !important;
            bottom: auto !important;
            transform: none !important;
            margin: 0 !important;
            float: none !important;
        }
        /* Header V1 — aligné horizontalement avec le panier */
        #kt_header .header-topbar-cart-group {
            gap: 0;
            vertical-align: middle;
        }
        #kt_header .header-topbar-cart-group > .topbar-item,
        #kt_header .header-topbar-cart-group > a.topbar-item {
            display: inline-flex !important;
            align-items: center;
            flex: 0 0 auto;
            margin: 0;
        }
        #kt_header .order-notifications-root--legacy {
            display: inline-flex !important;
            align-items: center;
            flex: 0 0 auto;
            position: relative;
            vertical-align: middle;
        }
        #kt_header .order-notifications-root--legacy > .topbar-item {
            display: inline-flex !important;
            align-items: center;
            cursor: pointer;
            margin: 0;
        }
        #kt_header .order-notifications-root--legacy .dropdown-menu.order-notifications-menu {
            position: absolute !important;
            top: calc(100% + 10px) !important;
            right: 0 !important;
            left: auto !important;
            transform: none !important;
            margin: 0;
            will-change: auto;
        }
        #kt_header_mobile .order-notifications-root--legacy.order-notifications-root--mobile {
            margin-right: 0.35rem;
        }
        /* Mobile — menu ancré au bouton (sans décalage Popper) */
        #kt_header_mobile .order-notifications-root--mobile,
        .header-mobile .order-notifications-root--mobile {
            position: relative;
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
        }
        @media (max-width: 991.98px) {
            #kt_header_mobile .order-notifications-root--mobile .dropdown-menu.order-notifications-menu,
            .header-mobile .order-notifications-root--mobile .dropdown-menu.order-notifications-menu {
                position: fixed !important;
                top: calc(var(--mobile-header-height, 56px) + 8px) !important;
                right: 10px !important;
                left: auto !important;
                width: min(380px, calc(100vw - 20px)) !important;
                max-width: calc(100vw - 20px) !important;
                transform: none !important;
                margin: 0 !important;
                float: none !important;
                will-change: auto;
            }
        }
        .order-notif-badge {
            min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
            background: #d94141; color: #fff; font-size: 11px; font-weight: 900;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .order-notifications-menu {
            width: min(380px, 92vw); border: 1px solid #dfe5ee; border-radius: 18px;
            overflow: hidden; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
            z-index: 1105;
        }
        .order-notifications-head {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, var(--notif-primary-dark), var(--notif-primary));
            color: #fff;
        }
        .order-notifications-head h4 { color: #fff; font-size: 16px; font-weight: 900; margin: 0; }
        .order-notif-count {
            min-width: 28px; height: 28px; border-radius: 999px;
            background: rgba(255, 255, 255, 0.18);
            display: inline-flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 12px;
        }
        .order-notification-list { max-height: 360px; overflow-y: auto; padding: 10px 12px; background: #fff; }
        .order-notification-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 14px; margin-bottom: 8px;
            border: 1px solid #e8edf3; border-radius: 14px; background: #f9fbfd;
            border-left-width: 4px; text-decoration: none !important; color: inherit;
            transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
        }
        .order-notification-item:last-child { margin-bottom: 0; }
        .order-notification-item__icon {
            flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
        }
        .order-notification-item__body { flex: 1; min-width: 0; }
        .order-notification-item__head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 10px; margin-bottom: 4px;
        }
        .order-notification-item__title { font-weight: 900; font-size: 14px; line-height: 1.3; flex: 1; min-width: 0; }
        .order-notification-item__text { font-size: 13px; line-height: 1.4; margin-bottom: 0; }
        .order-notification-item__status {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
            padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
            letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
        }
        .order-notification-item__status--unread {
            background: var(--notif-primary); color: #fff;
            box-shadow: 0 0 0 2px rgba(var(--notif-primary-rgb), 0.22);
        }
        .order-notification-item__dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #fff; flex-shrink: 0;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
            animation: order-notif-dot-pulse 1.8s ease-in-out infinite;
        }
        @keyframes order-notif-dot-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.15); opacity: 0.85; }
        }
        .order-notification-item__status--read {
            background: #eef1f5; color: #7a8699; border: 1px solid #dde3eb;
        }
        .order-notification-item__status--read i { font-size: 9px; }
        .order-notification-item__tag {
            display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
            padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
            letter-spacing: .01em;
        }
        .order-notification-item__tag i { font-size: 10px; }
        /* Validée — vert */
        .order-notification-item--valid {
            border-left-color: #22a06b; background: linear-gradient(135deg, #f3fbf7 0%, #ecfdf3 100%);
            border-color: #b7e4c7;
        }
        .order-notification-item--valid .order-notification-item__icon {
            background: rgba(34, 160, 107, 0.14); color: #168a57;
        }
        .order-notification-item--valid .order-notification-item__title { color: #145a3a; }
        .order-notification-item--valid .order-notification-item__text { color: #3d6f56; }
        .order-notification-item--valid:hover {
            border-color: #86d9a8; background: #e8f8ef; box-shadow: 0 6px 16px rgba(34, 160, 107, 0.12);
        }
        /* Rejetée — rouge */
        .order-notification-item--invalid {
            border-left-color: #d94141; background: linear-gradient(135deg, #fff8f8 0%, #fff1f1 100%);
            border-color: #f5c2c2;
        }
        .order-notification-item--invalid .order-notification-item__icon {
            background: rgba(217, 65, 65, 0.12); color: #c53030;
        }
        .order-notification-item--invalid .order-notification-item__title { color: #8b1e1e; }
        .order-notification-item--invalid .order-notification-item__text { color: #9b4d4d; }
        .order-notification-item--invalid:hover {
            border-color: #f0a8a8; background: #ffecec; box-shadow: 0 6px 16px rgba(217, 65, 65, 0.12);
        }
        /* Articles modifiés — accent ambre */
        .order-notification-item--articles-changed .order-notification-item__tag {
            background: #fff4de; color: #9a6700; border: 1px solid #f5d78e;
        }
        .order-notification-item--valid.order-notification-item--articles-changed .order-notification-item__tag {
            background: #e3f5eb; color: #168a57; border-color: #9fd4b6;
        }
        .order-notification-item--invalid.order-notification-item--articles-changed .order-notification-item__tag {
            background: #ffe8e8; color: #b42318; border-color: #f0b4b4;
        }
        /* Non lue — mise en avant */
        .order-notification-item--unread {
            box-shadow: 0 4px 14px rgba(var(--notif-primary-rgb), 0.14);
            border-width: 1px 1px 1px 5px;
        }
        .order-notification-item--unread.order-notification-item--valid {
            border-left-color: #168a57;
            background: linear-gradient(135deg, #e8f8ef 0%, #d4f0e0 100%);
        }
        .order-notification-item--unread.order-notification-item--invalid {
            border-left-color: #c53030;
            background: linear-gradient(135deg, #ffe8e8 0%, #ffd6d6 100%);
        }
        .order-notification-item--unread .order-notification-item__title { font-weight: 900; }
        .order-notification-item--unread .order-notification-item__icon {
            transform: scale(1.05);
        }
        /* Déjà lue — style neutre et discret */
        .order-notification-item--read {
            background: #f4f6f9 !important;
            border-color: #e2e8f0 !important;
            border-left-color: #c5cdd8 !important;
            border-left-width: 3px;
            box-shadow: none !important;
        }
        .order-notification-item--read:hover {
            background: #eef1f5 !important;
            border-color: #d5dde8 !important;
            box-shadow: none !important;
        }
        .order-notification-item--read .order-notification-item__icon {
            background: #e8ecf1 !important;
            color: #8b95a5 !important;
            opacity: 1;
        }
        .order-notification-item--read .order-notification-item__title {
            font-weight: 600; color: #5c6778 !important;
        }
        .order-notification-item--read .order-notification-item__text {
            color: #8b95a5 !important;
        }
        .order-notification-item--read .order-notification-item__tag {
            background: #e8ecf1 !important; color: #7a8699 !important;
            border-color: #d5dde8 !important;
        }
        .order-notifications-root--desktop .order-notifications-trigger {
            border: 1px solid #e4e6ef; background: #fff; color: #3f4254;
            border-radius: 999px; min-height: 44px; padding: 10px 14px;
            display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer;
        }
        .order-notifications-root--desktop .order-notifications-trigger i {
            color: var(--notif-primary);
        }
        .order-notifications-root--desktop .order-notifications-trigger:hover {
            border-color: rgba(var(--notif-primary-rgb), 0.28);
            background: rgba(var(--notif-primary-rgb), 0.06);
        }
        .order-notifications-root--legacy .svg-icon-primary,
        .order-notifications-root--legacy .svg-icon-primary svg {
            color: var(--notif-primary) !important;
            stroke: var(--notif-primary) !important;
        }
        .order-notifications-root--mobile .order-notifications-trigger {
            width: 42px; height: 42px; border: 1px solid #dfe8f1 !important;
            border-radius: 15px !important; background: #fff !important;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
            display: inline-flex !important; align-items: center; justify-content: center;
            position: relative; padding: 0;
        }
        .order-notifications-root--mobile .order-notifications-trigger i {
            color: var(--notif-primary); font-size: 15px;
        }
        .order-notifications-root--mobile .order-notif-badge {
            position: absolute; right: -5px; top: -6px; border: 2px solid #fff;
        }
    </style>
    @endonce

    <div class="{{ $rootClasses }}"
         style="{{ $notifThemeStyle }}"
         data-count-url="{{ route('client.notifications.count') }}"
         data-list-url="{{ route('client.notifications.index') }}"
         data-initial-count="{{ $initialUnread }}">
        @if($legacyDesktop)
            <div class="topbar-item"
                 data-toggle="dropdown"
                 data-offset="10px,0px"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-label="Notifications">
                <div class="{{ $triggerClasses }}" style="{{ $triggerStyle }}">
                    <span class="svg-icon svg-icon-xl svg-icon-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <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>
                    <span class="{{ $badgeClasses }}" style="{{ $badgeStyle }}">{{ $initialUnread > 0 ? $initialUnread : '' }}</span>
                </div>
            </div>
        @else
            <button type="button"
                    class="{{ $triggerClasses }}"
                    data-toggle="dropdown"
                    data-display="static"
                    data-flip="false"
                    data-offset="{{ $variant === 'mobile' ? '0,8px' : '10px,0px' }}"
                    aria-label="Notifications">
                <i class="fas fa-bell"></i>
                @if($variant === 'desktop')
                    <span>Notifications</span>
                @endif
                <span class="{{ $badgeClasses }}" @if($initialUnread < 1) style="display:none;" @endif>{{ $initialUnread > 0 ? $initialUnread : '' }}</span>
            </button>
        @endif

        @include('components.partials.order-notifications-panel', ['initialUnread' => $initialUnread])
    </div>
@endif