@php
    $role = auth()->user()->currentRole;
    $activeRecordTypes = activeRecordTypes(true);
    $isClient = auth()->user()->is_client ?? false;
@endphp

<div x-data="{ mobileOpen: false }">
    <nav id="tenant-nav" x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
        <!-- Primary Navigation Menu -->
        <div class="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 left-0 right-0 top-0 z-50">
            <div id="tenant-nav-header" class="flex items-center justify-between lg:justify-start">
                <!-- Logo Section -->
                <div class="flex items-center flex-shrink-0">
                    <a href="{{ route('dashboard') }}" class="flex mr-6">
                        <x-application-mark class="block h-7 w-auto" />
                    </a>
                </div>

                <!-- Search Section -->
                @if(!$isClient)
                <div id="tenant-nav-search" class="hidden lg:flex items-center flex-1 justify-center px-4">
                    <div class="relative w-full max-w-md lg:max-w-2xl xl:max-w-4xl 2xl:max-w-6xl" style="max-width: 56rem;">
                        <style>
                            @media (min-width: 1440px) {
                                #tenant-nav-search .relative {
                                    max-width: 50rem !important;
                                }
                            }
                        </style>
                        <!-- Search Input -->
                        <div class="relative">
                            <input
                                type="text"
                                id="nav-search-input"
                                class="w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                placeholder="Search... (Press / to search)"
                                autocomplete="off"
                            />
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <button
                                type="button"
                                id="nav-search-clear"
                                class="absolute inset-y-0 right-0 flex items-center pr-3 hidden"
                            >
                                <svg class="h-5 w-5 text-gray-400 hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>

                        <!-- Results Dropdown -->
                        <div id="nav-search-results" class="absolute z-10 mt-1 max-h-60 lg:max-h-[500px] w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" style="max-height: 240px; max-height: 500px !important;">
                            <!-- Results will be populated here -->
                        </div>
                    </div>
                </div>
                @endif

                <!-- User Menu Section -->
                <div class="flex items-center lg:flex-shrink-0">
                    <!-- Notifications Dropdown menu -->
                    <livewire:notification-drawer />

                    <span class="hidden mx-2 w-px h-5 bg-gray-200 dark:bg-gray-600 lg:inline lg:mx-2"></span>
                    <x-dropdown align="right" width="48">
                        <x-slot name="trigger">
                            @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                            <button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
                                <img class="h-8 w-8 rounded-full object-cover" src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}" />
                            </button>
                            @else
                            <span class="inline-flex rounded-md">
                                <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
                                    {{ Auth::user()->name }}

                                    <svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                    </svg>
                                </button>
                            </span>
                            @endif
                        </x-slot>

                        <x-slot name="content">
                            @isNotTenant
                            <div class="block px-4 py-2 text-xs text-gray-400">
                                {{ __('Manage Account') }}
                            </div>
                            <x-dropdown-link href="{{ route('account.index') }}">
                                @lang('accounts')
                            </x-dropdown-link>
                            @endisNotTenant

                            @isTenant
                                @php
                                    $instances = session('user_instances', collect())->groupBy('account.name');
                                @endphp
                                    <div class="divide-y divide-gray-200 dark:divide-gray-600">
                                    @foreach($instances as $accountName => $accountInstances)
                                    <div class="">
                                        <div class="block px-4 pt-2 text-xs text-gray-400">
                                            {{ $accountName }}
                                        </div>
                                        @foreach($accountInstances as $instance)
                                            <x-dropdown-link href="https://{{ $instance->id }}.{{ config('app.main_url') }}/dashboard">
                                                {{ $instance->name }}
                                            </x-dropdown-link>
                                        @endforeach
                                    </div>
                                    @endforeach
                                </div>
                            @endisTenant


                            {{-- <x-dropdown-link href="{{ route('profile.show') }}">
                            @lang('profile')
                            </x-dropdown-link> --}}

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

                            <div class="border-t border-gray-200 dark:border-gray-600"></div>

                            <!-- Authentication -->
                            <form method="POST" action="{{ route('logout') }}" x-data>
                                @csrf

                                <x-dropdown-link href="{{ route('logout') }}" @click.prevent="$root.submit();">
                                    {{ __('Log Out') }}
                                </x-dropdown-link>
                            </form>
                        </x-slot>
                    </x-dropdown>
                    <button type="button" @click="mobileOpen = !mobileOpen" class="items-center p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
                        <span class="sr-only">Open menu</span>
                        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Desktop Secondary Navigation -->
        <div class="hidden lg:block dark-bg border-b border-gray-200 dark:bg-gray-700 dark:border-gray-800 z-40">
            <div class="flex items-center">
                <ul class="flex items-center text-sm text-gray-900 font-medium items-stretch">
                    <li class="block flex relative">
                        <a href="/" class="subnav-dd flex align-center icon">
                            <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </li>
                    @if(!$isClient)
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <a href="{{ route('favorites.index') }}" class="subnav-dd flex align-center icon">
                            <i class="fas fa-star"></i>
                        </a>
                        <div class="absolute z-10 top-full left-0 w-48 bg-white shadow-md" x-show="open" x-cloak>
                            @php
                                $favorites = \Domain\Favorites\Models\Favorite::where('user_id', auth()->id())
                                    ->latest()
                                    ->get();
                            @endphp

                            @forelse($favorites as $favorite)
                                <a href="{{ url($favorite->url) }}"
                                   onclick="window.location.href='{{ url($favorite->url) }}'; return false;"
                                   class="block px-4 py-2 text-gray-800 hover:bg-gray-200">
                                    {{ $favorite->name }}
                                </a>
                            @empty
                                <div class="px-4 py-2 text-gray-500 italic">No favorites yet</div>
                            @endforelse

                            @if($favorites->count() > 0)
                                <div class="border-t border-gray-200"></div>
                            @endif

                            <a href="{{ route('favorites.index') }}"
                               class="block px-4 py-2 text-gray-800 hover:bg-gray-200">
                                View All Favorites
                            </a>
                        </div>
                    </li>

                    @if (!empty(array_intersect(['employee', 'subsidiary', 'location'], $activeRecordTypes['All'])))
                        <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                            <div class="subnav-dd">Company</div>
                            <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>

                            @if (
                                in_array("employee", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('employee'))?->can_read ?? $role?->can_read)
                            )
                                <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                    <a href="{{ route('employee.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                        Employees
                                        <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4" />
                                        </svg>
                                    </a>
                                    <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                        <a href="{{ route('employee.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                        {{-- <a href="{{ route('payrollitem.index') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Payroll Items</a> --}}
                                    </div>
                                </div>
                            @endif
                            @if (
                                in_array("location", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('location'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('location.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Locations
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4" />
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('location.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("subsidiary", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('subsidiary'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('subsidiary.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Subsidiaries
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4" />
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('subsidiary.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('user.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Users
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4" />
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('user.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif

                    @if (!empty(array_intersect(["opportunity", "salesorder", "estimate", "invoice", "subscription", "subscriptionplan", "purchaseorder", "itemfulfillment", "itemreceipt"], $activeRecordTypes['All'])))
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">CRM</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            @if (
                                in_array("opportunity", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('opportunity'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('opportunity.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Opportunities
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('opportunity.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("estimate", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('estimate'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('estimate.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Estimates
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('estimate.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("purchaseorder", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('purchaseorder'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('purchaseorder.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Purchase Orders
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('purchaseorder.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("salesorder", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('salesorder'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('salesorder.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Sales Orders
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('salesorder.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif


                            @if (
                                in_array("itemfulfillment", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('itemfulfillment'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('itemfulfillment.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Item Fulfillment
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('itemfulfillment.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("itemreceipt", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('itemreceipt'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('itemreceipt.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Item Receipt
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('itemreceipt.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif

                            @if (
                                in_array("invoice", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('invoice'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('invoice.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Invoices
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('invoice.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif

                            @if (
                                in_array("subscription", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('subscription'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('subscription.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Subscriptions
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('subscription.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                    <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                        <a href="{{ route('subscriptionplan.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                            Subscription Plans
                                            <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                            </svg>
                                        </a>
                                        <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                            <a href="{{ route('subscriptionplan.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </li>
                    @endif
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Setup</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('configuration.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Configuration
                                </a>
                            </div>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('cloud-storage.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Cloud Services
                                </a>
                            </div>
                            @if($role->can_manage_roles)
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('roles.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Roles
                                </a>
                            </div>
                            @endif
                        </div>
                    </li>

                    @if (!empty(array_intersect(["workorder", "item", "billofmaterial", "billofmaterialsrevision"], $activeRecordTypes['All'])))
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Manufacturing</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            @if (
                                in_array("workorder", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('workorder'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('workorder.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Work Orders
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('workorder.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif

                            @if (
                                in_array("workorder", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('billofmaterial'))?->can_read ?? $role?->can_read)
                            )

                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('billofmaterial.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Bill of Materials
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('billofmaterial.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif

                            @if (
                                in_array("workorder", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('billofmaterialsrevision'))?->can_read ?? $role?->can_read)
                            )

                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('billofmaterialsrevision.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    BOM Revisions
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('billofmaterialsrevision.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                        </div>
                    </li>
                    @endif
                    @if($role->can_manage_documents)
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Documents</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('file.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                     File Management
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('file.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif
                    @if (!empty(array_intersect(["customer", "project", "projecttask", "timeentry", "vendor"], $activeRecordTypes['All'])))
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Project Management</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            @if (in_array("customer", $activeRecordTypes['All'])  && auth()->user()->hasPermissionForRecordType('can_read', 'customer'))
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('customer.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Customers
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('customer.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("project", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('project'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('project.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Projects
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('project.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("projecttask", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('projecttask'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('projecttask.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Project Tasks
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('projecttask.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                    @if (
                                        in_array("subtask", $activeRecordTypes['All']) &&
                                        (optional($userPermissionsByType->get('projecttask'))?->can_read ?? $role?->can_read)
                                    )
                                    <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                        <a href="{{ route('subtask.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                            Subtasks
                                            <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                            </svg>
                                        </a>
                                        <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                            <a href="{{ route('subtask.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            @endif

                            @if (
                                in_array("vendor", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('vendor'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('vendor.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Vendors
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('vendor.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            @endif
                            @if (
                                in_array("timeentry", $activeRecordTypes['All']) &&
                                (optional($userPermissionsByType->get('timeentry'))?->can_read ?? $role?->can_read)
                            )
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('timeentry.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Time Entries
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('timeentry.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('timesheet.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Timesheet
                                </a>
                            </div>
                            @endif
                            @if (!in_array("salesorder", $activeRecordTypes['All']))
                            <div class="relative"  >
                                <a href="{{ route('gantt.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Gantt
                                </a>
                            </div>
                            @endif
                            <div class="relative"  >
                                <a href="{{ route('timeline.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Timeline
                                </a>
                            </div>
                            <div class="relative"  >
                                <a href="{{ route('kanban.global') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Kanban
                                </a>
                            </div>
                        </div>
                    </li>
                    @endif
                    @if($role->can_manage_customization)
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Customization</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('entryforms.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Forms
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('entryforms.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('formfields.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Form Fields
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('formfields.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>

                           <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('kpi.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    KPIs
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('kpi.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('lists.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Lists
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('lists.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>

                           <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('savedsearch.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Saved Searches
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('savedsearch.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>

                           <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('tablebuilders.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Table Builder
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('tablebuilders.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif
                    @if($role->can_manage_ipass)
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                        <div class="subnav-dd">IPaaS</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" x-cloak>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('ipaas.flows.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Flows
                                </a>
                            </div>
                            <div class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                                <a href="{{ route('connector.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                    Conectors
                                    <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/>
                                    </svg>
                                </a>
                                <div class="absolute left-full top-0 w-full bg-white shadow-md " x-show="open" @mouseenter="open = true" >
                                    <a href="{{ route('connector.create') }}" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">New</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endif
                    @if($role->can_manage_adhoc)
                    <li class="block flex relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false">
                        <div class="subnav-dd">Forms</div>
                        <div class="absolute z-10 top-full left-0  w-48 bg-white shadow-md " x-show="open" >
                            <a href="{{ route('survey.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                Forms Lists
                            </a>
                            <a href="{{ route('survey-categories.index') }}" class="w-full flex justify-between text-left px-4 py-2 text-gray-800 hover:bg-gray-200 focus:outline-none">
                                Categories Lists
                            </a>
                        </div>
                    </li>
                    @endif
                    @endif {{-- End of !$isClient check for desktop nav --}}
                </ul>
            </div>
          </div>
        </nav>

        <!-- Mobile Navigation Menu -->
        <div :class="{'block': mobileOpen, 'hidden': !mobileOpen}" class="hidden lg:hidden bg-gray-800 overflow-hidden">
            <div class="px-2 pt-2 pb-3 space-y-1">
                @if(!$isClient)
                <!-- Mobile Search Section -->
                <div class="relative px-3 py-3 border-b border-gray-700">
                    <div class="relative w-full">
                        <input
                            type="text"
                            id="mobile-nav-search-input"
                            class="w-full rounded-md border-0 bg-white py-2 pl-10 pr-10 text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                            placeholder="Search... (Press / to focus)"
                            autocomplete="off"
                            style="color: #111827;"
                        />
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <button
                            type="button"
                            id="mobile-nav-search-clear"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 hidden"
                        >
                            <svg class="h-5 w-5 text-gray-400 hover:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                    <!-- Mobile Results Dropdown -->
                    <div id="mobile-nav-search-results" class="absolute left-0 right-0 z-50 mt-1 max-h-60 lg:max-h-[500px] overflow-auto rounded-md bg-gray-700 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" style="max-height: 240px; max-height: 500px !important;">
                        <!-- Results will be populated here -->
                    </div>
                </div>

                <!-- Company Section -->
                @if (!empty(array_intersect(['employee', 'subsidiary', 'location'], $activeRecordTypes['All'])))
                    <div class="px-3 py-2 text-white font-semibold">Company</div>
                    @if (in_array("employee", $activeRecordTypes['All']))
                        <a href="{{ route('employee.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Employees
                        </a>
                    @endif
                    @if (in_array("subsidiary", $activeRecordTypes['All']))
                        <a href="{{ route('subsidiary.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Subsidiaries
                        </a>
                    @endif
                    @if (in_array("location", $activeRecordTypes['All']))
                        <a href="{{ route('location.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Locations
                        </a>
                    @endif
                @endif

                <!-- CRM Section -->
                @if (!empty(array_intersect(["opportunity", "salesorder", "estimate", "invoice", "subscription", "subscriptionplan", "purchaseorder", "itemfulfillment", "itemreceipt"], $activeRecordTypes['All'])))
                    <div class="px-3 py-2 text-white font-semibold">CRM</div>
                    @if (in_array("opportunity", $activeRecordTypes['All']))
                        <a href="{{ route('opportunity.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Opportunities
                        </a>
                    @endif
                    @if (in_array("estimate", $activeRecordTypes['All']))
                        <a href="{{ route('estimate.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Estimates
                        </a>
                    @endif
                    @if (in_array("purchaseorder", $activeRecordTypes['All']))
                        <a href="{{ route('purchaseorder.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Purchase Orders
                        </a>
                    @endif
                    @if (in_array("salesorder", $activeRecordTypes['All']))
                        <a href="{{ route('salesorder.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Sales Orders
                        </a>
                    @endif
                    @if (in_array("invoice", $activeRecordTypes['All']))
                        <a href="{{ route('invoice.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Invoices
                        </a>
                    @endif
                    @if (in_array("itemfulfillment", $activeRecordTypes['All']))
                        <a href="{{ route('itemfulfillment.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Item Fulfillments
                        </a>
                    @endif
                    @if (in_array("itemreceipt", $activeRecordTypes['All']))
                        <a href="{{ route('itemreceipt.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Item Receipts
                        </a>
                    @endif
                    @if (in_array("subscription", $activeRecordTypes['All']))
                        <a href="{{ route('subscription.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Subscriptions
                        </a>
                    @endif
                @endif

                <!-- Other Sections -->
                <div class="px-3 py-2 text-white font-semibold">Setup</div>
                <a href="{{ route('configuration.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Configuration
                </a>

                @if (!empty(array_intersect(["workorder", "item", "billofmaterial", "billofmaterialsrevision"], $activeRecordTypes['All'])))
                    <div class="px-3 py-2 text-white font-semibold">Manufacturing</div>
                    @if (in_array("workorder", $activeRecordTypes['All']))
                        <a href="{{ route('workorder.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Work Orders
                        </a>
                    @endif
                    @if (in_array("billofmaterial", $activeRecordTypes['All']))
                        <a href="{{ route('billofmaterial.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Bill of Materials
                        </a>
                    @endif
                    @if (in_array("billofmaterialsrevision", $activeRecordTypes['All']))
                        <a href="{{ route('billofmaterialsrevision.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            BOM Revisions
                        </a>
                    @endif
                @endif

                <div class="px-3 py-2 text-white font-semibold">Documents</div>
                <a href="{{ route('file.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    File Management
                </a>

                @if (!empty(array_intersect(["customer", "project", "projecttask", "timeentry"], $activeRecordTypes['All'])))
                    <div class="px-3 py-2 text-white font-semibold">Project Management</div>
                    @if (in_array("customer", $activeRecordTypes['All']))
                        <a href="{{ route('customer.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Customers
                        </a>
                    @endif
                    @if (in_array("project", $activeRecordTypes['All']))
                        <a href="{{ route('project.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Projects
                        </a>
                    @endif
                    @if (in_array("projecttask", $activeRecordTypes['All']))
                        <a href="{{ route('projecttask.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Project Tasks
                        </a>
                    @endif
                    @if (in_array("timeentry", $activeRecordTypes['All']))
                        <a href="{{ route('timeentry.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                            Time Entries
                        </a>
                    @endif
                    <a href="{{ route('kanban.global') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                        Kanban
                    </a>
                @endif

                <div class="px-3 py-2 text-white font-semibold">Customization</div>
                <a href="{{ route('entryforms.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Forms
                </a>
                <a href="{{ route('formfields.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Form Fields
                </a>
                <a href="{{ route('kpi.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    KPIs
                </a>
                <a href="{{ route('lists.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Lists
                </a>
                <a href="{{ route('savedsearch.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Saved Searches
                </a>
                <a href="{{ route('tablebuilders.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Table Builder
                </a>

                <div class="px-3 py-2 text-white font-semibold">IPaaS</div>
                <a href="{{ route('ipaas.flows.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Flows
                </a>
                <a href="{{ route('connector.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Conectors
                </a>

                <div class="px-3 py-2 text-white font-semibold">Forms</div>
                <a href="{{ route('survey.index') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                    Forms Lists
                </a>
                @endif {{-- End of !$isClient check for mobile nav --}}
            </div>
        </div>
    </nav>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Desktop search elements
    const searchInput = document.getElementById('nav-search-input');
    const searchResults = document.getElementById('nav-search-results');
    const clearButton = document.getElementById('nav-search-clear');

    // Mobile search elements
    const mobileSearchInput = document.getElementById('mobile-nav-search-input');
    const mobileSearchResults = document.getElementById('mobile-nav-search-results');
    const mobileClearButton = document.getElementById('mobile-nav-search-clear');

    let searchTimeout = null;
    let isSearching = false;

    // Get current tenant ID
    const currentTenantId = '{{ currentTenantId() ?? "" }}';

    // Show/hide clear button based on input value
    function toggleClearButton(input, clearBtn) {
        if (input.value.length > 0) {
            clearBtn.classList.remove('hidden');
        } else {
            clearBtn.classList.add('hidden');
        }
    }

        // Show/hide results dropdown
    function toggleResults(resultsContainer, show) {
        if (show) {
            resultsContainer.classList.remove('hidden');
        } else {
            resultsContainer.classList.add('hidden');
        }
    }

    // Clear search
    function clearSearch(input, clearBtn, resultsContainer) {
        input.value = '';
        toggleClearButton(input, clearBtn);
        toggleResults(resultsContainer, false);
        input.focus();
    }

    // Perform search
    async function performSearch(query, resultsContainer) {
        if (isSearching) return;

        isSearching = true;
        showLoadingState(resultsContainer);

        try {
            // Prepare request body
            const requestBody = {
                query: query,
                limit: 10,
                models: [], // Empty array means search all models
                search_type: 'hybrid',
                alpha: 0.5
            };

            // Add tenant ID if available
            if (currentTenantId && currentTenantId.trim() !== '') {
                requestBody.tenant_id = currentTenantId;
            }

            const response = await fetch('/api/search/semantic', {
                method: 'POST',
                credentials: 'same-origin', // Include cookies
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify(requestBody)
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            if (data.success) {
                showResults(data.data, query, resultsContainer);
            } else {
                throw new Error(data.error || 'Search failed');
            }
        } catch (error) {
            if (window.logger) {
                window.logger.error('Search error:', error);
            }
            showErrorState(error.message, resultsContainer);
        } finally {
            isSearching = false;
        }
    }

    // Show loading state
    function showLoadingState(resultsContainer) {
        const isMobile = resultsContainer.id === 'mobile-nav-search-results';
        const textColor = isMobile ? 'text-white' : 'text-gray-900';

        // Add inline styles for mobile
        if (isMobile) {
            resultsContainer.style.backgroundColor = '#374151'; // bg-gray-700
            resultsContainer.style.color = 'white';
        }

        resultsContainer.innerHTML = `
            <div class="relative cursor-default select-none px-3 py-2 ${textColor}">
                <div class="flex items-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Searching...
                </div>
            </div>
        `;
        toggleResults(resultsContainer, true);
    }

    // Show error state
    function showErrorState(errorMessage, resultsContainer) {
        const isMobile = resultsContainer.id === 'mobile-nav-search-results';
        const textColor = isMobile ? 'text-white' : 'text-gray-900';
        const errorColor = isMobile ? 'text-red-400' : 'text-red-600';

        // Add inline styles for mobile
        if (isMobile) {
            resultsContainer.style.backgroundColor = '#374151'; // bg-gray-700
            resultsContainer.style.color = 'white';
        }

        resultsContainer.innerHTML = `
            <div class="relative cursor-default select-none px-3 py-2 ${textColor}">
                <div class="flex items-center ${errorColor}">
                    <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Error: ${errorMessage}
                </div>
            </div>
        `;
        toggleResults(resultsContainer, true);
    }

    // Show results
    function showResults(results, query, resultsContainer) {
        const resultsArray = Array.isArray(results) ? results : results.toArray();
        const isMobile = resultsContainer.id === 'mobile-nav-search-results';

        // Clear previous results
        resultsContainer.innerHTML = '';

        if (resultsArray.length === 0) {
            resultsContainer.innerHTML = `
                <div class="px-4 py-3">
                    <p class="text-sm ${isMobile ? 'text-white' : 'text-gray-500'}">No results found</p>
                </div>
            `;
            return;
        }

        // Create results list
        const resultsList = document.createElement('div');
        resultsList.className = 'py-2';

        // Add each result in order of relevance
        resultsArray.forEach(result => {
            const recordType = getRecordType(result);
            const icon = getRecordTypeIcon(recordType, isMobile);

            // EDGE CASE: Specific tenant logic for projects
            // Tenant IDs: 3978045 (local), 8374675 (prod), 8374675-sb1 (sandbox)
            const targetTenants = ['3978045', '8374675', '8374675-sb1'];

            let title;
            if (targetTenants.includes(currentTenantId) && recordType === 'project') {
                 title = result.custfield46 || result.entitytitle || result.title || result.name || 'Untitled';
            } else {
                 title = result.title || result.name || 'Untitled';
            }

            const subtitle = getRecordSubtitle(result);
            const url = generateResultUrl(result);

            const resultElement = document.createElement('a');
            resultElement.href = url;
            resultElement.className = `block px-4 py-2 ${isMobile ? 'hover:bg-gray-600' : 'hover:bg-gray-100'} transition-colors duration-200`;
            resultElement.innerHTML = `
                <div class="flex items-start">
                    <div class="flex-shrink-0 mt-1">
                        ${icon}
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium ${isMobile ? 'text-white' : 'text-gray-900'}">${escapeHtml(title)}</p>
                        <p class="text-xs ${isMobile ? 'text-gray-300' : 'text-gray-500'}">${escapeHtml(subtitle)}</p>
                    </div>
                </div>
            `;

            resultsList.appendChild(resultElement);
        });

        resultsContainer.appendChild(resultsList);
    }

    // Generate URL for search result based on record type
    function generateResultUrl(result) {
        const recordType = getRecordType(result);
        const id = result.id;

        // Map of record types to their route names
        const routeMap = {
            'project': '{{ route("project.show", ":id") }}'.replace(':id', 'id='+id),
            'customer': '{{ route("customer.show", ":id") }}'.replace(':id', 'id='+id),
            'employee': '{{ route("employee.show", ":id") }}'.replace(':id', 'id='+id),
            'invoice': '{{ route("invoice.show", ":id") }}'.replace(':id', 'id='+id),
            'estimate': '{{ route("estimate.show", ":id") }}'.replace(':id', 'id='+id),
            'salesorder': '{{ route("salesorder.show", ":id") }}'.replace(':id', 'id='+id),
            'opportunity': '{{ route("opportunity.show", ":id") }}'.replace(':id', 'id='+id),
            'subscription': '{{ route("subscription.show", ":id") }}'.replace(':id', 'id='+id),
            'itemfulfillment': '{{ route("itemfulfillment.show", ":id") }}'.replace(':id', 'id='+id),
            'itemreceipt': '{{ route("itemreceipt.show", ":id") }}'.replace(':id', 'id='+id),
            'workorder': '{{ route("workorder.show", ":id") }}'.replace(':id', 'id='+id),
            'projecttask': '{{ route("projecttask.show", ":id") }}'.replace(':id', 'id='+id),
            'timeentry': '{{ route("timeentry.show", ":id") }}'.replace(':id', 'id='+id),
        };

        return routeMap[recordType] || '#';
    }

    // Get record type from result object
    function getRecordType(result) {
        // First check entity flags if available
        if (result.entity) {
            if (result.entity.is_customer) return 'customer';
            if (result.entity.is_project) return 'project';

            // Check entitiable_type if flags don't match
            if (result.entity.entitiable_type) {
                const entityType = result.entity.entitiable_type.toLowerCase();
                if (entityType.includes('projecttask')) return 'projecttask';
                if (entityType.includes('project')) return 'project';
                if (entityType.includes('customer')) return 'customer';
                if (entityType.includes('employee')) return 'employee';
                if (entityType.includes('invoice')) return 'invoice';
                if (entityType.includes('estimate')) return 'estimate';
                if (entityType.includes('salesorder')) return 'salesorder';
                if (entityType.includes('opportunity')) return 'opportunity';
                if (entityType.includes('subscription')) return 'subscription';
                if (entityType.includes('itemfulfillment')) return 'itemfulfillment';
                if (entityType.includes('itemreceipt')) return 'itemreceipt';
                if (entityType.includes('workorder')) return 'workorder';
                if (entityType.includes('timeentry')) return 'timeentry';
            }
        }

        // Check for explicit record type
        if (result.record_type) {
            return result.record_type.toLowerCase();
        }

        // Check for model class name
        if (result.model_class) {
            const modelClass = result.model_class.toLowerCase();
            if (modelClass.includes('projecttask')) return 'projecttask';
            if (modelClass.includes('project')) return 'project';
            if (modelClass.includes('customer')) return 'customer';
            if (modelClass.includes('employee')) return 'employee';
            if (modelClass.includes('invoice')) return 'invoice';
            if (modelClass.includes('estimate')) return 'estimate';
            if (modelClass.includes('salesorder')) return 'salesorder';
            if (modelClass.includes('opportunity')) return 'opportunity';
            if (modelClass.includes('subscription')) return 'subscription';
            if (modelClass.includes('workorder')) return 'workorder';
            if (modelClass.includes('timeentry')) return 'timeentry';
            if (modelClass.includes('itemfulfillment')) return 'itemfulfillment';
            if (modelClass.includes('itemreceipt')) return 'itemreceipt';
        }

        // If we can't determine the type, check for common properties
        if (result.jobbillingtype !== undefined) return 'project';
        if (result.customer !== undefined) return 'project';

        return 'unknown'; // Instead of defaulting to project, mark as unknown
    }

    // Get human-readable label for record type
    function getRecordTypeLabel(result) {
        const recordType = getRecordType(result);

        const labelMap = {
            'project': 'Project',
            'customer': 'Customer',
            'employee': 'Employee',
            'invoice': 'Invoice',
            'estimate': 'Estimate',
            'salesorder': 'Sales Order',
            'opportunity': 'Opportunity',
            'subscription': 'Subscription',
            'itemfulfillment': 'Item Fullfillment',
            'itemreceipt': 'Item Receipt',
            'workorder': 'Work Order',
            'projecttask': 'Project Task',
            'timeentry': 'Time Entry',
        };

        return labelMap[recordType] || 'Record';
    }

    // Helper to escape HTML to prevent XSS
    function escapeHtml(unsafe) {
        if (!unsafe) return '';
        return unsafe
             .toString()
             .replace(/&/g, "&amp;")
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;")
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#039;");
    }

    // Handle input changes
    function handleInput(input, resultsContainer, clearBtn) {
        const query = input.value.trim();
        toggleClearButton(input, clearBtn);

        // Clear previous timeout
        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }

        // Don't search for very short queries
        if (!query || query.length < 2) {
            toggleResults(resultsContainer, false);
            return;
        }

        // Debounce the search
        searchTimeout = setTimeout(() => {
            performSearch(query, resultsContainer);
        }, 300);
    }

    // Desktop event listeners
    searchInput.addEventListener('input', () => handleInput(searchInput, searchResults, clearButton));
    searchInput.addEventListener('focus', () => {
        if (searchInput.value.trim().length >= 2) {
            toggleResults(searchResults, true);
        }
    });

    clearButton.addEventListener('click', () => clearSearch(searchInput, clearButton, searchResults));

    // Close dropdown when clicking outside desktop search
    document.addEventListener('click', (e) => {
        if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
            toggleResults(searchResults, false);
        }
    });

    // Mobile event listeners
    mobileSearchInput.addEventListener('input', () => handleInput(mobileSearchInput, mobileSearchResults, mobileClearButton));
    mobileSearchInput.addEventListener('focus', () => {
        if (mobileSearchInput.value.trim().length >= 2) {
            toggleResults(mobileSearchResults, true);
        }
    });

    mobileClearButton.addEventListener('click', () => clearSearch(mobileSearchInput, mobileClearButton, mobileSearchResults));

    // Close dropdown when clicking outside mobile search
    document.addEventListener('click', (e) => {
        if (!mobileSearchInput.contains(e.target) && !mobileSearchResults.contains(e.target)) {
            toggleResults(mobileSearchResults, false);
        }
    });

    // Handle keyboard navigation
    function handleKeyboardNavigation(e, input, resultsContainer) {
        const visibleResults = resultsContainer.querySelectorAll('li[role="option"]');
        const currentIndex = Array.from(visibleResults).findIndex(item => item.classList.contains('bg-indigo-600') || item.classList.contains('bg-gray-600'));
        const isMobile = resultsContainer.id === 'mobile-nav-search-results';
        const activeClass = isMobile ? 'bg-gray-600' : 'bg-indigo-600';

        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                if (visibleResults.length > 0) {
                    const nextIndex = currentIndex < visibleResults.length - 1 ? currentIndex + 1 : 0;
                    visibleResults.forEach(item => {
                        item.classList.remove('bg-indigo-600', 'bg-gray-600', 'text-white');
                    });
                    visibleResults[nextIndex].classList.add(activeClass, 'text-white');

                    // Ensure the selected item is visible in the scrollable container
                    visibleResults[nextIndex].scrollIntoView({ block: 'nearest' });
                }
                break;
            case 'ArrowUp':
                e.preventDefault();
                if (visibleResults.length > 0) {
                    const prevIndex = currentIndex > 0 ? currentIndex - 1 : visibleResults.length - 1;
                    visibleResults.forEach(item => {
                        item.classList.remove('bg-indigo-600', 'bg-gray-600', 'text-white');
                    });
                    visibleResults[prevIndex].classList.add(activeClass, 'text-white');

                    // Ensure the selected item is visible in the scrollable container
                    visibleResults[prevIndex].scrollIntoView({ block: 'nearest' });
                }
                break;
            case 'Enter':
                e.preventDefault();
                if (currentIndex >= 0 && visibleResults[currentIndex]) {
                    const link = visibleResults[currentIndex].closest('a');
                    if (link) {
                        window.location.href = link.href;
                    }
                }
                break;
            case 'Escape':
                toggleResults(resultsContainer, false);
                input.blur();
                break;
        }
    }

    // Desktop keyboard navigation
    searchInput.addEventListener('keydown', (e) => handleKeyboardNavigation(e, searchInput, searchResults));

    // Mobile keyboard navigation
    mobileSearchInput.addEventListener('keydown', (e) => handleKeyboardNavigation(e, mobileSearchInput, mobileSearchResults));

    // Global keyboard shortcut for focusing search
    document.addEventListener('keydown', (e) => {
        // Only trigger if "/" is pressed and no input/textarea is focused
        if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
            e.preventDefault();

            // Focus desktop search if visible, otherwise focus mobile search
            if (window.innerWidth >= 1024) { // lg breakpoint
                searchInput.focus();
            } else {
                mobileSearchInput.focus();
            }
        }
    });

    // Handle result clicks for desktop
    searchResults.addEventListener('click', (e) => {
        const link = e.target.closest('a');
        if (link) {
            // Let the link handle the navigation naturally
            toggleResults(searchResults, false);
        }
    });

    // Handle result clicks for mobile
    mobileSearchResults.addEventListener('click', (e) => {
        const link = e.target.closest('a');
        if (link) {
            // Let the link handle the navigation naturally
            toggleResults(mobileSearchResults, false);
        }
    });



    // Helper function to get record type icon
    function getRecordTypeIcon(recordType, isMobile = false) {
        const iconColor = isMobile ? 'text-white' : 'text-gray-400';
        const icons = {
            'project': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/></svg>`,
            'projecttask': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
            'customer': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/></svg>`,
            'opportunity': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd"/></svg>`,
            'estimate': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>`,
            'salesorder': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/></svg>`,
            'invoice': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 01-1.581.814l-4.419-2.944-4.419 2.944A1 1 0 014 16V4zm7 5a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V9z" clip-rule="evenodd"/></svg>`,
            'subscription': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/><path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clip-rule="evenodd"/></svg>`,
            'timeentry': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>`,
            'workorder': `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd"/></svg>`
        };
        return icons[recordType.toLowerCase()] || `<svg class="h-5 w-5 ${iconColor}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>`;
    }

    // Helper function to get record subtitle
    function getRecordSubtitle(result) {
        const recordType = getRecordType(result);
        let subtitle = '';

        if (recordType === 'projecttask') {
            subtitle = 'Project Task';
            if (result.project_title) {
                subtitle += ` • ${result.project_title}`;
            }
        } else {
            subtitle = recordType.charAt(0).toUpperCase() + recordType.slice(1);
        }

        return subtitle;
    }
});
</script>