@php
    $authUser04 = Auth::guard('web')->user();
    if ($authUser04 && $authUser04->image) {
        $userImage04 = asset('assets/uploads/profile/' . $authUser04->image);
    } else {
        $userImage04 = asset('assets/static/img/author/author.jpg');
    }

    $liveChatRoute04    = null;
    $unreadMsgCount04   = 0;
    $topbarNotifs04     = collect();
    $unreadNotifCount04 = 0;
    $notifReadRoute04   = '#';

    if ($authUser04) {
        $liveChatRoute04 = $authUser04->user_type == 2 ? 'freelancer.live.chat' : 'client.live.chat';

        if ($authUser04->user_type == 2) {
            $topbarNotifs04     = \App\Models\FreelancerNotification::where('freelancer_id', $authUser04->id)->latest()->limit(15)->get();
            $unreadNotifCount04 = \App\Models\FreelancerNotification::where('freelancer_id', $authUser04->id)->where('is_read', 'unread')->count();
            $notifReadRoute04   = route('freelancer.notification.read');
            if (moduleExists('Chat')) {
                $unreadMsgCount04 = \Modules\Chat\Entities\LiveChatMessage::whereHas('liveChat', fn($q) => $q->where('freelancer_id', $authUser04->id))->where('from_user', 1)->where('is_seen', 0)->count();
            }
        } else {
            $topbarNotifs04     = \App\Models\ClientNotification::where('client_id', $authUser04->id)->latest()->limit(15)->get();
            $unreadNotifCount04 = \App\Models\ClientNotification::where('client_id', $authUser04->id)->where('is_read', 'unread')->count();
            $notifReadRoute04   = route('client.notification.read');
            if (moduleExists('Chat')) {
                $unreadMsgCount04 = \Modules\Chat\Entities\LiveChatMessage::whereHas('liveChat', fn($q) => $q->where('client_id', $authUser04->id))->where('from_user', 2)->where('is_seen', 0)->count();
            }
        }
    }

    $notifIconMap04 = [
        'Order'              => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2L3 6v12a1 1 0 001 1h12a1 1 0 001-1V6l-3-4zM3 6h14M13 10a3 3 0 01-6 0"/></svg>',
        'Withdraw'           => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 14V6m-4 4l4-4 4 4"/><rect x="3" y="15" width="14" height="2" rx="1"/></svg>',
        'Deposit'            => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 6v8m4-4l-4 4-4-4"/><rect x="3" y="3" width="14" height="2" rx="1"/></svg>',
        'New Job'            => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="7" width="16" height="11" rx="2"/><path d="M13 7V5a2 2 0 00-6 0v2"/></svg>',
        'Job'                => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="7" width="16" height="11" rx="2"/><path d="M13 7V5a2 2 0 00-6 0v2"/></svg>',
        'Proposal'           => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h12a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1z"/><path d="M7 8h6M7 11h4"/></svg>',
        'Offer'              => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 10l7-7 7 7v7a1 1 0 01-1 1H4a1 1 0 01-1-1v-7z"/><path d="M8 18V12h4v6"/></svg>',
        'Ticket Update'      => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7a2 2 0 012-2h12a2 2 0 012 2v1a2 2 0 010 4v1a2 2 0 01-2 2H4a2 2 0 01-2-2v-1a2 2 0 010-4V7z"/></svg>',
        'Reject Project'     => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="7"/><path d="M7 7l6 6M13 7l-6 6"/></svg>',
        'Activate Project'   => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="7"/><path d="M7 10l2.5 2.5L13 8"/></svg>',
        'Inactivate Project' => '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="10" cy="10" r="7"/><path d="M8 7v6M12 7v6"/></svg>',
    ];
    $notifIconDefault04 = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 2a6 6 0 016 6v2.5l1.5 2.5H2.5L4 10.5V8a6 6 0 016-6zm-1.5 13.5a1.5 1.5 0 003 0"/></svg>';
    $notifColorMap04 = [
        'Order'              => 'color-mix(in srgb, var(--main-color-one) 10%, transparent)',
        'Withdraw'           => '#FFF4E8', 'Deposit' => 'color-mix(in srgb, var(--main-color-one) 10%, transparent)',
        'New Job'            => '#F0F2FF', 'Job' => '#F0F2FF', 'Proposal' => '#F0F2FF',
        'Offer'              => '#FFF4E8', 'Ticket Update' => '#F0F2FF',
        'Reject Project'     => '#FFF0F2', 'Activate Project' => 'color-mix(in srgb, var(--main-color-one) 10%, transparent)',
        'Inactivate Project' => '#ECEDEF',
    ];
    $notifTextColorMap04 = [
        'Order'              => 'var(--main-color-one)', 'Withdraw' => '#FA8C00',
        'Deposit'            => 'var(--main-color-one)', 'New Job' => '#4F46E5',
        'Job'                => '#4F46E5', 'Proposal' => '#4F46E5', 'Offer' => '#FA8C00',
        'Ticket Update'      => '#4F46E5', 'Reject Project' => '#F0416C',
        'Activate Project'   => 'var(--main-color-one)', 'Inactivate Project' => '#637381',
    ];
@endphp

{{-- Search --}}
<button type="button" id="pub-search-btn" class="flex h-9 w-9 items-center justify-center rounded-full bg-[#ECEDEF] transition hover:bg-[#E0E3E7]" aria-label="{{ __('Search') }}">
    <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M2.5 8.333a5.833 5.833 0 1011.667 0A5.833 5.833 0 002.5 8.333zM17.5 17.5l-5-5" stroke="#242B36" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>

@if($authUser04)
    @php
        $dashRoute04    = $authUser04->user_type == 2 ? route('freelancer.dashboard') : route('client.dashboard');
        $logoutRoute04  = $authUser04->user_type == 2 ? route('freelancer.logout') : route('client.logout');
    @endphp
    {{-- Chat --}}
    @if(moduleExists('Chat'))
    <a href="{{ route($liveChatRoute04) }}" class="relative flex h-9 w-9 items-center justify-center rounded-full bg-[#ECEDEF] transition hover:bg-[#E0E3E7]" aria-label="{{ __('Messages') }}">
        <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M15 3.334C15.663 3.334 16.299 3.597 16.768 4.066 17.237 4.535 17.5 5.171 17.5 5.834v6.667c0 .663-.263 1.299-.732 1.768-.469.469-1.105.732-1.768.732H10.833L6.667 17.5V15H5c-.663 0-1.299-.263-1.768-.732C2.763 13.8 2.5 13.164 2.5 12.5V5.834c0-.663.263-1.299.732-1.768C3.701 3.597 4.337 3.334 5 3.334h10z" stroke="#242B36" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 9.166v.009M6.667 9.166v.009M13.333 9.166v.009" stroke="#242B36" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        @if($unreadMsgCount04 > 0)
        <span class="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[#F0416C] px-1 text-[10px] font-semibold leading-none text-white">{{ $unreadMsgCount04 > 99 ? '99+' : $unreadMsgCount04 }}</span>
        @endif
    </a>
    @endif

    {{-- Notification bell --}}
    <div class="relative" id="pub-notif-wrapper">
        <button type="button" id="pub-notif-bell"
                class="relative flex h-9 w-9 items-center justify-center rounded-full bg-[#ECEDEF] transition hover:bg-[#E0E3E7]"
                aria-label="{{ __('Notifications') }}">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M8.332 4.167a1.667 1.667 0 013.333 0A5.833 5.833 0 0115 9.167v2.5l1.5 2.5H3.5l1.5-2.5V9.167A5.833 5.833 0 018.332 4.167zM7.5 14.167a2.5 2.5 0 005 0" stroke="#242B36" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span id="pub-notif-badge"
                  class="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-[#F0416C] px-1 text-[10px] font-semibold leading-none text-white {{ $unreadNotifCount04 > 0 ? '' : 'hidden' }}">
                {{ $unreadNotifCount04 > 99 ? '99+' : $unreadNotifCount04 }}
            </span>
        </button>

        {{-- Dropdown --}}
        <div id="pub-notif-panel"
             class="absolute right-0 top-[calc(100%+10px)] z-50 hidden w-[340px] overflow-hidden rounded-2xl border border-[#E9EBF0] bg-white shadow-[0_8px_32px_rgba(16,24,40,0.12)]">
            <div class="flex items-center justify-between border-b border-[#E9EBF0] px-5 py-4">
                <div class="flex items-center gap-2">
                    <span class="text-[15px] font-semibold text-[#242B36]">{{ __('Notifications') }}</span>
                    <span id="pub-notif-header-badge" class="rounded-full bg-[#F0416C] px-2 py-0.5 text-[11px] font-semibold text-white {{ $unreadNotifCount04 > 0 ? '' : 'hidden' }}">{{ $unreadNotifCount04 }}</span>
                </div>
                <button id="pub-notif-mark-read" class="text-[12px] font-medium text-[var(--main-color-one)] hover:underline disabled:opacity-40" {{ $unreadNotifCount04 === 0 ? 'disabled' : '' }}>{{ __('Mark all read') }}</button>
            </div>
            <div class="max-h-[400px] divide-y divide-[#F4F5F7] overflow-y-auto" id="pub-notif-list">
                @forelse($topbarNotifs04 as $notif)
                    @php
                        $nType04  = $notif->type ?? 'default';
                        $nBg04    = $notifColorMap04[$nType04]     ?? '#ECEDEF';
                        $nColor04 = $notifTextColorMap04[$nType04]  ?? '#637381';
                        $nIcon04  = $notifIconMap04[$nType04]       ?? $notifIconDefault04;
                        $isUnread04 = ($notif->is_read ?? 'unread') === 'unread';
                    @endphp
                    <div class="flex items-start gap-3 px-5 py-3.5 transition hover:bg-[#F9FBFC] {{ $isUnread04 ? 'bg-[#FAFFFE]' : '' }}">
                        <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl" style="background:{{ $nBg04 }};color:{{ $nColor04 }}">
                            <span class="h-[17px] w-[17px]">{!! $nIcon04 !!}</span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-2">
                                <span class="text-[13px] font-medium leading-snug" style="color:{{ $nColor04 }}">{{ $nType04 }}</span>
                                @if($isUnread04)<span class="mt-1 h-2 w-2 shrink-0 rounded-full bg-[var(--main-color-one)]"></span>@endif
                            </div>
                            <p class="mt-0.5 text-[13px] leading-relaxed text-[#454F5B]">{{ $notif->message }}</p>
                            <p class="mt-1 text-[11px] text-[#637381]">{{ $notif->created_at->diffForHumans() }}</p>
                        </div>
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center px-5 py-10">
                        <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full" style="background:color-mix(in srgb, var(--main-color-one) 10%, transparent)">
                            <svg class="h-6 w-6 text-[var(--main-color-one)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                        </div>
                        <p class="text-[13px] font-medium text-[#242B36]">{{ __('No notifications yet') }}</p>
                        <p class="mt-1 text-[11px] text-[#637381]">{{ __("You're all caught up!") }}</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Avatar dropdown --}}
    <div class="relative" id="pub-avatar-wrapper">
        <button type="button" id="pub-avatar-btn"
                class="h-9 w-9 overflow-hidden rounded-full bg-slate-200 flex-shrink-0 ring-2 ring-transparent hover:ring-[var(--main-color-one)] transition-all"
                aria-label="{{ __('Account menu') }}">
            <img class="h-full w-full object-cover" src="{{ $userImage04 }}" alt="{{ $authUser04->fullname ?? '' }}">
        </button>

        <div id="pub-avatar-panel"
             class="absolute right-0 top-[calc(100%+10px)] z-50 hidden w-52 overflow-hidden rounded-2xl border border-[#E9EBF0] bg-white shadow-[0_8px_32px_rgba(16,24,40,0.12)]">
            @php
                    $orderRoute04   = $authUser04->user_type == 2 ? route('freelancer.order.all') : route('client.order.all');
                    $profileRoute04 = $authUser04->user_type == 2 ? route('freelancer.profile') : route('client.profile');
                @endphp
        <div class="py-2">
                <a href="{{ $dashRoute04 }}"
                   class="flex items-center gap-3 px-4 py-2.5 text-[13px] font-medium text-[#242B36] hover:bg-[#F4F5F7] transition-colors">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M2.5 7.5L10 2.5L17.5 7.5V17.5H12.5V12.5H7.5V17.5H2.5V7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ __('Dashboard') }}
                </a>
                <a href="{{ $orderRoute04 }}"
                   class="flex items-center gap-3 px-4 py-2.5 text-[13px] font-medium text-[#242B36] hover:bg-[#F4F5F7] transition-colors">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M6 2L3 6v12a1 1 0 001 1h12a1 1 0 001-1V6l-3-4zM3 6h14M13 10a3 3 0 01-6 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ __('My Orders') }}
                </a>
                <a href="{{ $profileRoute04 }}"
                   class="flex items-center gap-3 px-4 py-2.5 text-[13px] font-medium text-[#242B36] hover:bg-[#F4F5F7] transition-colors">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="6.5" r="3.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 17.5c0-3.866 3.134-7 7-7s7 3.134 7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    {{ __('Profile Settings') }}
                </a>
                @if(moduleExists('Community'))
                <a href="{{ route('community.all') }}"
                   class="flex items-center gap-3 px-4 py-2.5 text-[13px] font-medium text-[#242B36] hover:bg-[#F4F5F7] transition-colors">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M13.75 6.25a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM2.5 17.5a7.5 7.5 0 0115 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    {{ __('Community') }}
                </a>
                @endif
                <div class="my-1 border-t border-[#F4F5F7]"></div>
                <a href="{{ $logoutRoute04 }}"
                   class="flex items-center gap-3 px-4 py-2.5 text-[13px] font-medium text-[#F0416C] hover:bg-[#FFF0F2] transition-colors">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M7.5 17.5H4.167A1.667 1.667 0 012.5 15.833V4.167A1.667 1.667 0 014.167 2.5H7.5M13.333 14.167L17.5 10l-4.167-4.167M17.5 10H7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    {{ __('Sign Out') }}
                </a>
            </div>
        </div>
    </div>

@else
    {{-- Guest --}}
    @if(moduleExists('Community'))
    <a href="{{ route('community.all') }}" class="border border-primary text-primary px-5 py-1.5 rounded-full hover:bg-primary hover:text-white transition-all duration-300 font-medium text-sm whitespace-nowrap">
        {{ __('Community') }}
    </a>
    @endif
    <a href="#" id="openLoginModal" class="bg-primary text-white px-5 py-1.5 rounded-full hover:bg-secondary transition-all duration-300 font-medium text-sm whitespace-nowrap">
        {{ __('Sign In') }}
    </a>
@endif

{{-- Search overlay --}}
<div id="pub-search-overlay" class="fixed inset-0 z-[1100] hidden" role="dialog" aria-modal="true">
    <div id="pub-search-backdrop" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
    <div class="relative mx-auto mt-[80px] w-full max-w-[640px] px-4">
        <div class="overflow-hidden rounded-2xl bg-white shadow-[0_20px_60px_rgba(16,24,40,0.18)]">
            <div class="flex items-center gap-2 border-b border-[#E9EBF0] px-4 py-3">
                <svg class="h-5 w-5 shrink-0 text-[#637381]" viewBox="0 0 20 20" fill="none"><path d="M2.5 8.333a5.833 5.833 0 1011.667 0A5.833 5.833 0 002.5 8.333zM17.5 17.5l-5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <input id="pub-search-input" type="text" placeholder="{{ __('Search projects, jobs, talents…') }}" autocomplete="off"
                    class="min-w-0 flex-1 border-0 bg-transparent py-1 text-[15px] text-[#242B36] outline-none placeholder:text-[#9AA3AD]">
                <select id="pub-search-type" class="shrink-0 rounded-lg border border-[#E0E3E7] bg-[#F7F8F9] px-3 py-1.5 text-[13px] font-medium text-[#3B4759] outline-none focus:border-[var(--main-color-one)]">
                    <option value="project">{{ __('Projects') }}</option>
                    @if(get_static_option('home_page_job_section_status') == 'on')
                    <option value="job">{{ __('Jobs') }}</option>
                    @endif
                    <option value="talent">{{ __('Talents') }}</option>
                </select>
                <span id="pub-search-spinner" class="hidden h-5 w-5 shrink-0">
                    <svg class="animate-spin h-5 w-5 text-[var(--main-color-one)]" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
                </span>
                <button type="button" id="pub-search-close" class="ml-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[#637381] transition hover:bg-[#F1F3F5]">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </button>
            </div>
            <div id="pub-search-results" class="max-h-[420px] overflow-y-auto">
                <div class="flex flex-col items-center justify-center py-10 text-[#9AA3AD]">
                    <svg class="mb-3 h-10 w-10 opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M21 21l-4.35-4.35M16.5 10.5A6 6 0 1110.5 4.5a6 6 0 016 6z"/></svg>
                    <p class="text-[13px]">{{ __('Start typing to search…') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    // ── Search ──
    var searchOverlay = document.getElementById('pub-search-overlay');
    var searchBackdrop = document.getElementById('pub-search-backdrop');
    var searchOpenBtn = document.getElementById('pub-search-btn');
    var searchCloseBtn = document.getElementById('pub-search-close');
    var searchInput = document.getElementById('pub-search-input');
    var searchType = document.getElementById('pub-search-type');
    var searchSpinner = document.getElementById('pub-search-spinner');
    var searchResults = document.getElementById('pub-search-results');
    var searchUrl = '{{ route('home.job.project.search') }}';
    var searchTimer = null, searchXhr = null;

    function openSearch() {
        searchOverlay.classList.remove('hidden');
        searchOverlay.style.opacity = '0';
        requestAnimationFrame(function () {
            searchOverlay.style.transition = 'opacity 0.18s ease';
            searchOverlay.style.opacity = '1';
        });
        setTimeout(function () { searchInput && searchInput.focus(); }, 50);
    }
    function closeSearch() {
        searchOverlay.style.opacity = '0';
        setTimeout(function () { searchOverlay.classList.add('hidden'); searchOverlay.style.opacity = ''; }, 180);
    }
    if (searchOpenBtn) searchOpenBtn.addEventListener('click', openSearch);
    if (searchCloseBtn) searchCloseBtn.addEventListener('click', closeSearch);
    if (searchBackdrop) searchBackdrop.addEventListener('click', closeSearch);

    function doSearch() {
        var q = searchInput ? searchInput.value.trim() : '';
        var type = searchType ? searchType.value : 'project';
        if (q.length < 1) {
            searchResults.innerHTML = '<div class="flex flex-col items-center justify-center py-10 text-[#9AA3AD]"><p class="text-[13px]">{{ __('Start typing to search…') }}</p></div>';
            return;
        }
        if (searchXhr) searchXhr.abort();
        if (searchSpinner) searchSpinner.classList.remove('hidden');
        searchXhr = $.ajax({
            url: searchUrl, method: 'GET',
            data: { job_search_string: q, search_type: type },
            success: function (html) {
                if (searchSpinner) searchSpinner.classList.add('hidden');
                var trimmed = (html || '').trim();
                searchResults.innerHTML = trimmed || '<p class="py-4 px-5 text-[13px] text-[#637381]">{{ __('No results found') }}</p>';
            },
            error: function (xhr) {
                if (xhr.statusText === 'abort') return;
                if (searchSpinner) searchSpinner.classList.add('hidden');
                searchResults.innerHTML = '<p class="py-4 px-5 text-[13px] text-red-500">{{ __('Something went wrong. Please try again.') }}</p>';
            }
        });
    }
    if (searchInput) searchInput.addEventListener('keyup', function () { clearTimeout(searchTimer); searchTimer = setTimeout(doSearch, 350); });
    if (searchType) searchType.addEventListener('change', function () { clearTimeout(searchTimer); doSearch(); });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && searchOverlay && !searchOverlay.classList.contains('hidden')) closeSearch();
    });

    // ── Notifications ──
    var bell = document.getElementById('pub-notif-bell');
    var panel = document.getElementById('pub-notif-panel');
    var badge = document.getElementById('pub-notif-badge');
    var hBadge = document.getElementById('pub-notif-header-badge');
    var markBtn = document.getElementById('pub-notif-mark-read');
    if (!bell || !panel) return;

    var notifOpen = false, notifMarked = false;

    function openNotif() {
        panel.classList.remove('hidden');
        panel.style.opacity = '0'; panel.style.transform = 'translateY(-6px)';
        panel.style.transition = 'opacity 0.18s ease, transform 0.18s ease';
        requestAnimationFrame(function () { panel.style.opacity = '1'; panel.style.transform = 'translateY(0)'; });
        notifOpen = true;
        if (!notifMarked) markAllRead();
    }
    function closeNotif() {
        panel.style.opacity = '0'; panel.style.transform = 'translateY(-6px)';
        setTimeout(function () { panel.classList.add('hidden'); }, 180);
        notifOpen = false;
    }
    function markAllRead() {
        $.ajax({
            url: '{{ $notifReadRoute04 }}', method: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function (res) {
                if (res.status === 'success') {
                    notifMarked = true;
                    if (badge) badge.classList.add('hidden');
                    if (hBadge) hBadge.classList.add('hidden');
                    if (markBtn) markBtn.disabled = true;
                    document.querySelectorAll('#pub-notif-list .bg-\\[\\#FAFFFE\\]').forEach(function (el) { el.classList.remove('bg-[#FAFFFE]'); });
                }
            }
        });
    }
    bell.addEventListener('click', function (e) { e.stopPropagation(); notifOpen ? closeNotif() : openNotif(); });
    if (markBtn) markBtn.addEventListener('click', function (e) { e.stopPropagation(); markAllRead(); });
    document.addEventListener('click', function (e) {
        var wrapper = document.getElementById('pub-notif-wrapper');
        if (notifOpen && wrapper && !wrapper.contains(e.target)) closeNotif();
    });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && notifOpen) closeNotif(); });

    // ── Avatar dropdown ──
    var avatarBtn   = document.getElementById('pub-avatar-btn');
    var avatarPanel = document.getElementById('pub-avatar-panel');
    var avatarOpen  = false;

    function openAvatar() {
        avatarPanel.classList.remove('hidden');
        avatarPanel.style.opacity = '0'; avatarPanel.style.transform = 'translateY(-6px)';
        avatarPanel.style.transition = 'opacity 0.18s ease, transform 0.18s ease';
        requestAnimationFrame(function () { avatarPanel.style.opacity = '1'; avatarPanel.style.transform = 'translateY(0)'; });
        avatarOpen = true;
    }
    function closeAvatar() {
        avatarPanel.style.opacity = '0'; avatarPanel.style.transform = 'translateY(-6px)';
        setTimeout(function () { avatarPanel.classList.add('hidden'); }, 180);
        avatarOpen = false;
    }
    if (avatarBtn) avatarBtn.addEventListener('click', function (e) { e.stopPropagation(); avatarOpen ? closeAvatar() : openAvatar(); });
    document.addEventListener('click', function (e) {
        var avatarWrapper = document.getElementById('pub-avatar-wrapper');
        if (avatarOpen && avatarWrapper && !avatarWrapper.contains(e.target)) closeAvatar();
    });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && avatarOpen) closeAvatar(); });
})();
</script>