@php
    $navUser = auth('admin')->user() ?? auth()->user();
    $navRole = $navUser?->role;
    $logoutRoute = auth('admin')->check() ? 'admin.logout' : 'logout';
    $navShowUserAvatar = $navUser instanceof \App\Models\User && ! auth('admin')->check();
    $navInitials = 'Ac';
    if ($navUser && ! auth('admin')->check()) {
        $name = trim($navUser->name ?? 'Account');
        $words = preg_split('/\s+/', $name, -1, PREG_SPLIT_NO_EMPTY);
        $navInitials = count($words) >= 2 ? strtoupper(mb_substr($words[0], 0, 1) . mb_substr($words[count($words) - 1], 0, 1)) : strtoupper(mb_substr($name, 0, 2));
    }
@endphp

<div x-data="{ open: false, logoutConfirmOpen: false }" @keydown.escape.window="logoutConfirmOpen = false">
<nav class="sticky top-0 z-50 bg-white/85 backdrop-blur border-b border-slate-100 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16 gap-4">
            <!-- Logo -->
            <div class="flex items-center gap-2 shrink-0">
                <a href="{{ route('home') }}" class="flex items-center gap-2">
                    <img src="/images/logo.png" alt="CuraHealthLine" class="h-8 w-8 rounded">
                    <span class="font-heading text-lg text-ink hidden sm:inline">CuraHealthLine</span>
                </a>
            </div>

            <!-- Mobile icon nav (always visible on mobile, like homepage) -->
            <div class="flex items-center gap-2 md:hidden">
                <a href="{{ route('home') }}" class="linkedin-nav-item {{ request()->routeIs('home') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23 9v2h-2v7a3 3 0 01-3 3h-4v-6h-4v6H6a3 3 0 01-3-3v-7H1V9l11-7 11 7z"/>
                    </svg>
                    <span class="text-xs">Home</span>
                </a>
                <a href="{{ route('jobs.index') }}" class="linkedin-nav-item {{ request()->routeIs('jobs.*') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
                    </svg>
                    <span class="text-xs">Jobs</span>
                </a>
                @if(auth()->check() && in_array(auth()->user()->role, ['nurse', 'user']))
                    <a href="{{ route('nurse.connect.index') }}" class="linkedin-nav-item {{ request()->routeIs('nurse.connect.*', 'user.connect.*') ? 'active' : '' }}">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                        </svg>
                        <span class="text-xs">Connect</span>
                    </a>
                @endif
                <a href="{{ route('dashboard') }}" class="linkedin-nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M3 13h8V3H3v10zm10 8h8V3h-8v18zM3 21h8v-6H3v6z"/>
                    </svg>
                    <span class="text-xs">Dashboard</span>
                </a>
            </div>

            <!-- Icon Nav -->
            <div class="hidden md:flex items-center gap-3">
                <a href="{{ route('home') }}" class="linkedin-nav-item {{ request()->routeIs('home') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M23 9v2h-2v7a3 3 0 01-3 3h-4v-6h-4v6H6a3 3 0 01-3-3v-7H1V9l11-7 11 7z"/>
                    </svg>
                    <span class="text-xs">Home</span>
                </a>
                <a href="{{ route('jobs.index') }}" class="linkedin-nav-item {{ request()->routeIs('jobs.*') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/>
                    </svg>
                    <span class="text-xs">Jobs</span>
                </a>
                @if(auth()->check() && in_array(auth()->user()->role, ['nurse', 'user']))
                    <a href="{{ route('nurse.connect.index') }}" class="linkedin-nav-item {{ request()->routeIs('nurse.connect.*', 'user.connect.*') ? 'active' : '' }}">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                        </svg>
                        <span class="text-xs">Connect</span>
                    </a>
                @endif
                <a href="{{ route('dashboard') }}" class="linkedin-nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M3 13h8V3H3v10zm10 8h8V3h-8v18zM3 21h8v-6H3v6z"/>
                    </svg>
                    <span class="text-xs">Dashboard</span>
                </a>
            </div>

            <!-- Right controls -->
        <div class="hidden sm:flex sm:items-center sm:gap-3">
            <x-notification-dropdown />
            <x-dropdown align="right" width="48">
                <x-slot name="trigger">
                    <button class="inline-flex items-center gap-2 px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-full text-ink bg-white hover:bg-slate-50 hover:text-brand focus:outline-none transition ease-in-out duration-150">
                        @if($navShowUserAvatar)
                            <img src="{{ $navUser->displayAvatarUrl() }}" alt="{{ $navUser->name }}" class="w-8 h-8 rounded-full object-cover ring-1 ring-slate-200 shrink-0" width="32" height="32" loading="lazy" decoding="async">
                        @else
                            <span class="w-8 h-8 rounded-full bg-[#1D5BBF] text-white text-xs font-semibold flex items-center justify-center shrink-0">{{ $navInitials }}</span>
                        @endif
                        <span class="hidden sm:inline pr-1">{{ $navUser?->name ?? 'Account' }}</span>
                        <svg class="fill-current h-4 w-4 text-slate-500 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </button>
                </x-slot>

                <x-slot name="content">
                        @if(in_array($navRole, ['nurse', 'user']))
                            <x-dropdown-link :href="route('user.profile.view', auth()->id())">
                                {{ __('My Healthcare Worker Profile') }}
                            </x-dropdown-link>
                        @endif
                        
                        @if($navRole === 'employer')
                            <x-dropdown-link :href="route('employer.profile.edit')">
                                {{ __('Company Profile') }}
                            </x-dropdown-link>
                        @endif

                        @if(auth('admin')->check())
                            <x-dropdown-link :href="route('admin.profile.show')">
                                {{ __('Admin Profile') }}
                            </x-dropdown-link>
                        @else
                            <x-dropdown-link :href="route('account.settings')">
                                {{ __('Account Settings') }}
                            </x-dropdown-link>
                        @endif

                        <button type="button" @click="logoutConfirmOpen = true" class="block w-full text-left px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 text-red-600 hover:text-red-700 hover:bg-red-50">
                            {{ __('Log Out') }}
                        </button>
                    </x-slot>
                </x-dropdown>
            </div>

            <!-- Mobile menu button -->
            <div class="flex items-center md:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-slate-500 hover:text-brand hover:bg-soft focus:outline-none focus:bg-soft focus:text-brand transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden md:hidden bg-white border-t border-slate-100">
        <div class="pt-4 pb-4 flex items-center justify-center gap-6 text-slate-700 text-center">
            @if(!auth('admin')->check())
                <a href="{{ route('account.settings') }}" class="text-sm font-semibold text-brand hover:text-brand/80 px-2">Account</a>
            @endif
            @if(in_array($navRole, ['nurse', 'user']))
                <a href="{{ route('user.profile.view', auth()->id()) }}" class="text-sm font-semibold text-slate-700 hover:text-slate-900 px-2">Profile</a>
            @endif
            @if($navRole === 'employer')
                <a href="{{ route('employer.profile.edit') }}" class="text-sm font-semibold text-slate-700 hover:text-slate-900 px-2">Profile</a>
            @endif
            @if(auth('admin')->check())
                <a href="{{ route('admin.profile.show') }}" class="text-sm font-semibold text-slate-700 hover:text-slate-900 px-2">Admin Profile</a>
            @endif
            <button type="button" @click="logoutConfirmOpen = true" class="text-sm font-semibold text-slate-600 hover:text-slate-900 px-3 py-1 rounded-full hover:bg-slate-100 transition">
                Logout
            </button>
        </div>
    </div>

</nav>
    <!-- Logout confirmation modal (outside nav so it overlays full page) -->
    <div x-show="logoutConfirmOpen" x-cloak class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50" style="display: none;" @click.self="logoutConfirmOpen = false">
        <div x-transition class="bg-white rounded-2xl shadow-xl w-full max-w-sm min-w-0 shrink-0 p-6" style="max-width: 24rem;" @click.stop>
            <h3 class="text-lg font-semibold text-slate-900 mb-2">Sign out?</h3>
            <p class="text-sm text-slate-600 mb-6">Are you sure you want to sign out of your account?</p>
            <div class="flex gap-3">
                <button type="button" @click="logoutConfirmOpen = false" class="flex-1 px-4 py-2.5 text-sm font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">Cancel</button>
                <form method="POST" action="{{ route($logoutRoute) }}" class="flex-1">
                    @csrf
                    <button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-xl transition-colors">Yes, sign out</button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .linkedin-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        height: 52px;
        color: rgba(0, 0, 0, 0.6);
        text-decoration: none;
        position: relative;
        transition: color 0.15s ease;
        min-width: 60px;
    }
    
    .linkedin-nav-item:hover {
        color: rgba(0, 0, 0, 0.9);
    }
    
    .linkedin-nav-item.active {
        color: rgba(0, 0, 0, 0.9);
    }
    
    .linkedin-nav-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: var(--color-brand, #1d5bbf);
        transition: width 0.15s ease;
    }
    
    .linkedin-nav-item:hover::after {
        width: calc(100% - 24px);
    }
    
    .linkedin-nav-item.active::after {
        width: calc(100% - 24px);
    }
    
    @media (max-width: 768px) {
        .linkedin-nav-item {
            padding: 0 8px;
            min-width: 48px;
        }
        .linkedin-nav-item span {
            display: none;
        }
    }
</style>