<nav id="navigation-menu"
     class="shadow-md border-b border-theme-primary bg-theme-background fixed top-0 left-0 right-0 z-50"
     x-data="{ open: false }"
     wire:ignore.self>
    @auth
        <!-- Primary Navigation Menu -->
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            <div class="flex h-0 md:h-16 items-center justify-between">
                <!-- Logo -->
                <div class="hidden md:flex shrink-0 items-center mr-4">
                    <a href="{{ route('main') }}">
                        <x-jetstream.application-mark class="block h-7 lg:h-9 w-auto" logoTitle="Home"/>
                    </a>
                </div>
                <!-- Navigation Links -->
                <div class="hidden items-center space-x-4 lg:space-x-8 md:-my-px md:ml-6 md:flex">
                   
                    <!-- Only if activeProfile has the accounts relation and has any accounts -->
                    @if (getActiveProfile()
                        && method_exists(getActiveProfile(), 'accounts') &&
                        getActiveProfile()->accounts()->notRemoved()->count() > 0)
                        <!-- Only if activeProfile has active accounts -->
                        @if (getActiveProfile()->accounts()->active()->count() > 0)
                            @if (canActiveProfileCreatePayments())
                                <x-jetstream.nav-link :active="request()->routeIs('pay')" href="{{ route('pay') }}">
                                    {{ __('Pay') }}
                                </x-jetstream.nav-link>
                            @else
                                <span class="inline-flex items-center px-1 pt-1 text-sm font-medium leading-5 text-gray-400 cursor-not-allowed select-none">
                                    {{ __('Pay') }}
                                </span>
                            @endif
                        @endif
                        <x-jetstream.nav-link :active="request()->routeIs('transactions')" href="{{ route('transactions') }}">
                            {{ __('Transactions') }}
                        </x-jetstream.nav-link>

                        <x-jetstream.nav-link :active="request()->routeIs('reports')" href="{{ route('reports') }}">
                            {{ __('Reports') }}
                        </x-jetstream.nav-link>

                        <x-jetstream.nav-link :active="request()->routeIs('contacts')" href="{{ route('contacts') }}">
                            {{ __('Contacts') }}
                        </x-jetstream.nav-link>
                        <x-jetstream.nav-link :active="request()->routeIs('calls.manage')" href="{{ route('calls.manage') }}">
                            {{ __('Calls') }}
                        </x-jetstream.nav-link>
                    @endif

                    @usercan('manage posts')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('posts.manage')" href="{{ route('posts.manage') }}">
                                {{ __('Posts') }}
                            </x-jetstream.nav-link>
                            @endprofile
                    @endusercan
                    @usercan('manage categories')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('categories.manage')" href="{{ route('categories.manage') }}">
                                {{ __('Categories') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan
                    @usercan('manage tags')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('tags.manage')" href="{{ route('tags.manage') }}">
                                {{ __('Tags') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan
                    @usercan('manage profiles')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('profiles.manage')" href="{{ route('profiles.manage') }}">
                                {{ __('Profiles') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan
                    @profile('admin')
                        <x-jetstream.nav-link :active="request()->routeIs('calls.manage')" href="{{ route('calls.manage') }}">
                            {{ __('Calls') }}
                        </x-jetstream.nav-link>
                    @endprofile
                    @usercan('manage mailings')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('mailings.index')" href="{{ route('mailings.index') }}">
                                {{ __('Mailings') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan
                    {{-- @usercan('manage permissions')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('permissions.manage')" href="{{ route('permissions.manage') }}">
                                {{ __('Permissions') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan --}}
                    {{-- @usercan('manage roles')
                        @profile('admin')
                            <x-jetstream.nav-link :active="request()->routeIs('roles.manage')" href="{{ route('roles.manage') }}">
                                {{ __('Roles') }}
                            </x-jetstream.nav-link>
                        @endprofile
                    @endusercan --}}
                    <!-- Main Search Bar -->
                    @livewire('main-search-bar')
                </div>

            <div class="hidden md:ml-6 md:flex md:items-center flex-shrink-0">


                <div class="items-end ml-3 flex">
                    <!-- Wirechat Messenger -->
                    <x-jetstream.dropdown align="right" width="60">
                        <x-slot name="trigger">
                             <span class="inline-flex rounded-md">
                                <button id="messenger-nav-button" class="relative inline-flex items-center rounded-md bg-theme-background pr-2 lg:pr-3 py-2 text-sm font-medium leading-4 text-theme-primary hover:text-theme-secondary focus:outline-none active:bg-theme-surface">
                                    <x-icon name="chat-bubble-bottom-center-text" class="w-5 h-5" outline />
                                    <div class="ml-3 hidden lg:inline">
                                        {{ __('Messenger') }}
                                    </div>
                                    <span id="nav-unread-dot-main"
                                        class="absolute top-1 right-0 h-2 w-2 rounded-full bg-red-700"
                                        style="display: none;">
                                    </span>
                                </button>
                            </span>
                        </x-slot>
                        <!-- Wirechat chats dropdown -->
                        <x-slot name="content">
                            <div id="messenger-dropdown-content" class="w-96 z-50">
                                <livewire:wirechat.chats
                                    :title="''"
                                    :showHomeRouteButton="false"
                                />
                            </div>
                        </x-slot>
                    </x-jetstream.dropdown>
                {{-- @endif --}}
                    <!-- Language selector ---->
                        <!-- This changes the session('locale') and by the Middleware StoreUserLangPreference this locale
                        is stored as the lang_preference in the user table -->
                    @php
                        $languages = Illuminate\Support\Facades\DB::table('languages')->orderBy('lang_code', 'asc')->get();
                        $supportedLocales = LaravelLocalization::getSupportedLocales();
                        // Sort the supported locales alphabetically by the language name
                        uasort($supportedLocales, function ($a, $b) {
                            return strcmp($a['native'], $b['native']);
                        });
                    @endphp
                    <x-jetstream.dropdown align="right" width="60">
                        <x-slot name="trigger">
                            <span class="inline-flex rounded-md">
                                <button class="inline-flex items-center rounded-md bg-theme-background px-2 lg:px-3 py-2 text-sm font-medium leading-4 text-theme-primary transition hover:text-theme-secondary focus:outline-none active:bg-theme-surface"
                                        type="button">
                                        <x-icon name="globe-alt" class="w-6 h-5" outline />
                                </button>
                            </span>
                        </x-slot>
                        <!-- Language select options -->
                        <x-slot name="content">
                            <div class="w-60">
                                @foreach ($supportedLocales as $localeCode => $properties)
                                    @php
                                        $language = $languages->firstWhere('lang_code', strtolower($localeCode));
                                    @endphp
                                    @if ($language)
                                        @php $isActive = strtolower($localeCode) === strtolower(app()->getLocale()); @endphp
                                        <a class="block pl-3 pr-4 py-2 border-l-4 text-sm leading-5 text-theme-primary hover:bg-theme-surface focus:outline-none focus:bg-theme-surface transition {{ $isActive ? 'border-black bg-theme-surface font-semibold' : 'border-transparent' }}"
                                            href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}"
                                            hreflang="{{ $localeCode }}" rel="alternate">
                                            {{ $language->flag }}
                                            <span class="ml-3 text-theme-primary">{{ Lang::get($language->name, [], $localeCode) }}</span>
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        </x-slot>
                    </x-jetstream.dropdown>
                </div>


                <!-- Settings / Profile Dropdown -->
                <div class="relative ml-2 shrink-0">
                    <x-jetstream.dropdown align="right" width="48">
                        <x-slot name="trigger">
                            @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                                <button
                                        class="border-none hover:border-none focus:border-grey-900 flex items-center rounded-full text-sm transition focus:border-none relative">
                                        <a class="hidden lg:inline items-center pr-2 pt-1 border-theme-primary text-sm font-medium leading-5 text-theme-primary hover:text-theme-secondary focus:outline-none focus:border-theme-primary transition"
                                            href="#">
                                                {{ \Illuminate\Support\Str::limit(Session('activeProfileName'), 25, '...') }}
                                            </a>
                                        <div class="relative">
                                            <img alt="" class="h-9 w-9 aspect-square rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-theme-secondary shrink-0 hover:opacity-80"
                                            src="{{ Storage::url(Session('activeProfilePhoto')) }}" />
                                            @livewire('switch-profile-unread-indicator')
                                        </div>
                                </button>
                            @else
                                <span class="inline-flex rounded-md">
                                    <button class="inline-flex items-center rounded-md border border-transparent bg-theme-background px-3 py-2 text-sm font-medium leading-4 text-theme-secondary transition hover:text-theme-primary focus:outline-none"
                                            type="button">
                                            {{ \Illuminate\Support\Str::limit(Session('activeProfileName'), 25, '...') }}

                                        <svg class="-mr-0.5 ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path clip-rule="evenodd"
                                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                                fill-rule="evenodd" />
                                        </svg>

                                    </button>
                                </span>
                            @endif
                            <span class="badge-pill badge-danger mr-n2 badge" id="nav_mobile_total_count"></span>

                        </x-slot>

                        <x-slot name="content">

                            <!---- Balance Info --->
                            @if (session('activeProfileType') !== 'App\Models\Admin')
                                <x-jetstream.dropdown-link href="#" wire:click.prevent="$dispatch('openAccountInfoModal')">
                                    {{ __('Account info') }}
                                </x-jetstream.dropdown-link>
                                <div class="border-t border-theme-primary"></div>
                            @endif

                            <!---- Switch Profile --->
                            @if (auth()->guard('web')->user()?->hasOtherProfiles())
                                <livewire:switch-profile>
                            @endif

                            <!---- Edit profile info--->
                            @if (session('activeProfileType') !== 'App\Models\Admin')
                                <x-jetstream.dropdown-link :active="request()->routeIs('profile.edit')" href="{{ route('profile.edit') }}">
                                    {{ __('Edit profile') }}
                                </x-jetstream.dropdown-link>

                            <!---- Show profile --->
                            <x-jetstream.dropdown-link href="{{ route('profile.show_active') }}">
                                {{ __('Show profile') }}
                            </x-jetstream.dropdown-link>
                            @else
                                {{-- Disabled link --}}
                                <div class="block cursor-default px-4 py-2 text-sm leading-5 text-theme-light">
                                    {{ __('Edit profile') }}
                                </div>

                                {{-- Disabled link --}}
                                <div class="block cursor-default px-4 py-2 text-sm leading-5 text-theme-light">
                                    {{ __('Show profile') }}
                                </div>
                            @endif

                            <!---- Settings --->
                            <x-jetstream.dropdown-link href="{{ route('profile.settings') }}">
                                {{ __('Settings') }}
                            </x-jetstream.dropdown-link>


                            @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                                <x-jetstream.dropdown-link href="{{ route('api-tokens.index') }}">
                                    {{ __('API Tokens') }}
                                </x-jetstream.dropdown-link>
                            @endif

                            <div class="border-t border-theme-primary"></div>

                            <!-- Log out -->
                            <form action="{{ route('logout') }}" method="POST" x-data>
                                @csrf
                                <x-jetstream.dropdown-link @click.prevent="$root.submit();" href="{{ route('logout') }}">
                                    {{ __('Log out') }}
                                </x-jetstream.dropdown-link>
                            </form>
                        </x-slot>
                    </x-jetstream.dropdown>
                </div>
            </div>
            </div>


            <!-- Hamburger -->
            <div class="fixed top-4 right-4 z-50 md:hidden">
                <button @click="open = ! open"
                    id="hamburger-menu-button"
                    class="inline-flex items-center justify-center rounded-md p-2 text-theme-primary transition border border-1 border-theme-primary hover:bg-theme-surface focus:bg-theme-surface focus:text-theme-primary focus:outline-none bg-theme-background shadow-lg relative">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex"
                            d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" />
                        <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" d="M6 18L18 6M6 6l12 12"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                    </svg>
                    <span id="nav-unread-dot-hamburger"
                        class="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-700"
                        style="display: none;">
                    </span>
                </button>
            </div>
        </div>

        <!-- Responsive Navigation Menu -->
        <div x-show="open"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-0 scale-0 origin-top-right"
             x-transition:enter-end="opacity-100 scale-100 origin-top-right"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100 origin-top-right"
             x-transition:leave-end="opacity-0 scale-0 origin-top-right"
             class="md:hidden w-[300px] fixed top-16 right-4 z-40 shadow-xl border border-theme-border rounded-lg bg-theme-background max-h-[calc(100vh-5rem)] overflow-y-auto origin-top-right"
             style="display: none;"
             @click.away="open = false">
            <div class="space-y-1 pt-2">

  <x-jetstream.responsive-nav-link :active="request()->routeIs('main')" href="{{ route('main') }}">
                            {{ __('Main page') }}
                        </x-jetstream.responsive-nav-link>
                <!-- Only if activeProfile has the accounts relation and has any accounts -->
                @if (getActiveProfile() && method_exists(getActiveProfile(), 'accounts') && getActiveProfile()->accounts()->notRemoved()->count() > 0)
                    <!-- Only if activeProfile has active accounts -->
                    @if (getActiveProfile()->accounts()->active()->count() > 0)
                        @if (canActiveProfileCreatePayments())
                            <x-jetstream.responsive-nav-link :active="request()->routeIs('pay')" href="{{ route('pay') }}">
                                {{ __('Pay') }}
                            </x-jetstream.responsive-nav-link>
                        @else
                            <span class="block pl-3 pr-4 py-2 text-base font-medium text-gray-400 cursor-not-allowed select-none">
                                {{ __('Pay') }}
                            </span>
                        @endif
                    @endif
                    <x-jetstream.responsive-nav-link :active="request()->routeIs('transactions')" href="{{ route('transactions') }}">
                        {{ __('Transactions') }}
                    </x-jetstream.responsive-nav-link>

                    <x-jetstream.responsive-nav-link :active="request()->routeIs('reports')" href="{{ route('reports') }}">
                        {{ __('Reports') }}
                    </x-jetstream.responsive-nav-link>

                    <x-jetstream.responsive-nav-link :active="request()->routeIs('contacts')" href="{{ route('contacts') }}">
                        {{ __('Contacts') }}
                    </x-jetstream.responsive-nav-link>
                    <x-jetstream.responsive-nav-link :active="request()->routeIs('calls.manage')" href="{{ route('calls.manage') }}">
                        {{ __('Calls') }}
                    </x-jetstream.responsive-nav-link>
                @endif

                @usercan('manage posts')
                    @profile('admin')
                        <x-jetstream.responsive-nav-link :active="request()->routeIs('posts.manage')" href="{{ route('posts.manage') }}">
                            {{ __('Posts') }}
                        </x-jetstream.responsive-nav-link>
                    @endprofile
                @endusercan

                @usercan('manage categories')
                    @profile('admin')
                        <x-jetstream.responsive-nav-link :active="request()->routeIs('categories.manage')" href="{{ route('categories.manage') }}">
                            {{ __('Categories') }}
                        </x-jetstream.responsive-nav-link>
                    @endprofile
                @endusercan
                @usercan('manage tags')
                    @profile('admin')
                        <x-jetstream.responsive-nav-link :active="request()->routeIs('tags.manage')" href="{{ route('tags.manage') }}">
                            {{ __('Tags') }}
                        </x-jetstream.responsive-nav-link>
                    @endprofile
                @endusercan
                @usercan('manage profiles')
                    @profile('admin')
                        <x-jetstream.responsive-nav-link :active="request()->routeIs('profiles.manage')" href="{{ route('profiles.manage') }}">
                            {{ __('Profiles') }}
                        </x-jetstream.responsive-nav-link>
                    @endprofile
                @endusercan
                @profile('admin')
                    <x-jetstream.responsive-nav-link :active="request()->routeIs('calls.manage')" href="{{ route('calls.manage') }}">
                        {{ __('Calls') }}
                    </x-jetstream.responsive-nav-link>
                @endprofile
                @usercan('manage mailings')
                    @profile('admin')
                        <x-jetstream.responsive-nav-link :active="request()->routeIs('mailings.index')" href="{{ route('mailings.index') }}">
                            {{ __('Mailings') }}
                        </x-jetstream.responsive-nav-link>
                    @endprofile
                @endusercan

                <!-- Messenger Link -->
                    <x-jetstream.responsive-nav-link
                        id="messenger-nav-button-responsive"
                        class="relative"
                        href="{{ route('chats') }}"
                        :active="request()->routeIs('chats')">
                        <span class="flex items-center">
                            {{ __('Messenger') }}
                            <span id="nav-unread-dot-responsive"
                                class="ml-4 h-2 w-2 rounded-full bg-red-700"
                                style="display: none;"></span>
                        </span>
                    </x-jetstream.responsive-nav-link>
                </div>
                <div class="w-full px-2 lg:px-3 pt-2">
                    @livewire('main-search-bar')
                </div>
            <!-- Responsive Settings Options -->
            <div class="border-t border-theme-primary mt-4 w-full"></div>
            <div class="pb-4 pt-4">
            <div class="flex items-center px-4">
                    @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                        <div class="mr-3 shrink-0">
                            <img alt="" class="h-10 w-10 aspect-square rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-theme-secondary"
                                src="{{ Storage::url(Session('activeProfilePhoto')) }}" />
                        </div>
                    @endif

                    <div>
                        @if (auth()->guard('web')->user()?->hasOtherProfiles())
                            <livewire:switch-profile>
                        @else
                            <div class="text-base font-medium text-theme-primary">{{ Auth::user()->name }}</div>
                        @endif
                    </div>

                    <!---- Language Selector ---->
                    <div class="flex ml-auto items-center">
                        <x-jetstream.dropdown align="right" width="60">
                            <x-slot name="trigger">
                                <span class="inline-flex rounded-md">
                                    <button class="inline-flex items-center rounded-md bg-theme-background px-3 py-2 text-sm font-medium leading-4 text-theme-primary transition hover:bg-theme-surface hover:text-theme-secondary focus:bg-theme-surface focus:outline-none active:bg-theme-surface"
                                            type="button">
                                            <x-icon name="globe-alt" class="w-6 h-5" outline />
                                    </button>
                                </span>
                            </x-slot>
                            <!-- Language select options -->
                            <x-slot name="content">
                                <div class="w-60">
                                    @foreach ($supportedLocales as $localeCode => $properties)
                                        @php
                                            $language = $languages->firstWhere('lang_code', strtolower($localeCode));
                                        @endphp
                                        @if ($language)
                                            @php $isActive = strtolower($localeCode) === strtolower(app()->getLocale()); @endphp
                                            <a class="block pl-3 pr-4 py-2 border-l-4 text-sm leading-5 text-theme-primary hover:bg-theme-surface focus:outline-none focus:bg-theme-surface transition {{ $isActive ? 'border-black bg-theme-surface font-semibold' : 'border-transparent' }}"
                                                href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}"
                                                hreflang="{{ $localeCode }}" rel="alternate">
                                                {{ $language->flag }}
                                                <span class="ml-3 text-theme-primary">{{ Lang::get($language->name, [], $localeCode) }}</span>
                                            </a>
                                        @endif
                                    @endforeach
                                </div>
                            </x-slot>
                        </x-jetstream.dropdown>
                    </div>
                </div>


                <div class="mt-3 space-y-1">
                    <!-- Account Management -->

                    <!-- Balance Info -->
                    @if (session('activeProfileType') !== 'App\Models\Admin')
                        <div class="border-t border-theme-primary"></div>
                        <x-jetstream.responsive-nav-link href="#" wire:click.prevent="$dispatch('openAccountInfoModal')">
                            {{ __('Account info') }}
                        </x-jetstream.responsive-nav-link>
                        <div class="border-t border-theme-primary"></div>
                    @endif

                    <!-- Edit profile info -->
                    @if (session('activeProfileType') !== 'App\Models\Admin')
                        <x-jetstream.responsive-nav-link href="{{ route('profile.edit') }}" :active="request()->routeIs('profile.edit')">
                            {{ __('Edit profile') }}
                        </x-jetstream.responsive-nav-link>

                    <!-- Show Profile -->
                        <x-jetstream.responsive-nav-link href="{{ route('profile.show_active') }}">
                            {{ __('Show profile') }}
                        </x-jetstream.responsive-nav-link>
                    @else
                        <div class="block cursor-default px-4 py-2 text-sm leading-5 text-theme-light">
                            {{ __('Edit profile') }}
                        </div>

                        {{-- Disabled link --}}
                        <div class="block cursor-default px-4 py-2 text-sm leading-5 text-theme-light">
                            {{ __('Show profile') }}
                        </div>
                    @endif

                    <!-- Settings -->
                        <x-jetstream.responsive-nav-link href="{{ route('profile.settings') }}">
                            {{ __('Settings') }}
                        </x-jetstream.responsive-nav-link>

                    @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                        <x-jetstream.responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')">
                            {{ __('API Tokens') }}
                        </x-jetstream.responsive-nav-link>
                    @endif
                </div>

                    <div class="border-t border-theme-primary mt-3 w-full"></div>
                    <div class="pt-2">

                    <!-- Authentication -->
                    <form method="POST" action="{{ route('logout') }}" x-data>
                        @csrf
                        <x-jetstream.responsive-nav-link href="{{ route('logout') }}"
                                       @click.prevent="$root.submit();">
                            {{ __('Log out') }}
                        </x-jetstream.responsive-nav-link>
                    </form>
                    </div>
            </div>
        </div>

        {{-- <script>
        window.Pusher.logToConsole = true;
        window.Echo.private('switchProfile')
        .listen('ProfileSwitchEvent', (e) => {
            window.location.reload();
            });
        </script> --}}

<script>
document.addEventListener('DOMContentLoaded', () => {
    const unreadDotMain = document.getElementById('nav-unread-dot-main');
    const unreadDotResponsive = document.getElementById('nav-unread-dot-responsive');
    const unreadDotHamburger = document.getElementById('nav-unread-dot-hamburger');
    const dropdownContent = document.getElementById('messenger-dropdown-content');
    const hamburgerMenuButton = document.getElementById('hamburger-menu-button');

    if (!dropdownContent) return;

    // Track switch profile unread status (for non-active profiles)
    let hasSwitchProfileUnread = false;

    function updateUnreadDots() {
        // Check for both Alpine-controlled visibility and element presence
        const unreadDots = dropdownContent.querySelectorAll('[dusk="unreadMessagesDot"]');
        let hasVisibleUnread = false;

        // Check if any unread dot is actually visible (not hidden by Alpine x-show)
        unreadDots.forEach(dot => {
            const computedStyle = window.getComputedStyle(dot);
            if (computedStyle.display !== 'none') {
                hasVisibleUnread = true;
            }
        });

        const isMenuOpen = hamburgerMenuButton && hamburgerMenuButton.__x && hamburgerMenuButton.__x.$data.open;

        // Main Messenger button dot (only show for active profile messages)
        if (unreadDotMain) {
            unreadDotMain.style.display = hasVisibleUnread ? 'block' : 'none';
        }
        // Responsive nav dot (only show for active profile messages)
        if (unreadDotResponsive) {
            unreadDotResponsive.style.display = hasVisibleUnread ? 'block' : 'none';
        }
        // Hamburger menu dot (show for EITHER active profile messages OR other profile messages)
        if (unreadDotHamburger) {
            const shouldShowHamburgerDot = (hasVisibleUnread || hasSwitchProfileUnread) && !isMenuOpen;
            unreadDotHamburger.style.display = shouldShowHamburgerDot ? 'block' : 'none';
        }
    }

    const observer = new MutationObserver(() => {
        // Slight delay to let Alpine finish its display updates
        setTimeout(updateUnreadDots, 50);
    });

    observer.observe(dropdownContent, {
        childList: true,
        subtree: true,
        attributes: true, // Also watch for attribute changes (Alpine modifies style attributes)
        attributeFilter: ['style', 'x-show']
    });

    // Initial check
    updateUnreadDots();

    // Listen for menu open/close changes (Alpine)
    document.addEventListener('click', () => {
        setTimeout(updateUnreadDots, 50);
    });

    // Listen for Livewire updates
    window.addEventListener('livewire:update', () => {
        setTimeout(updateUnreadDots, 100);
    });

    // Listen for custom WireChat events
    window.addEventListener('chat-opened', updateUnreadDots);
    window.addEventListener('chat-closed', updateUnreadDots);

    // Listen for unread count updates from UnreadIndicator component
    window.addEventListener('unread-count-updated', (event) => {
        setTimeout(updateUnreadDots, 100);
    });

    // Also listen for Livewire component updates
    Livewire.on('unread-count-updated', () => {
        setTimeout(updateUnreadDots, 100);
    });

    // Listen for switch profile unread updates (non-active profiles)
    window.addEventListener('switch-profile-unread-updated', (event) => {
        hasSwitchProfileUnread = event.detail.hasUnread;
        setTimeout(updateUnreadDots, 50);
    });

    // Also listen via Livewire
    Livewire.on('switch-profile-unread-updated', (data) => {
        hasSwitchProfileUnread = data.hasUnread;
        setTimeout(updateUnreadDots, 50);
    });
});
</script>
    @endauth
</nav>
