<header class="h-20 flex-shrink-0 flex items-center justify-between px-8 bg-[var(--bg-dark)] border-b border-[var(--border-color)]">
    <!-- Left: Search & Title (Mobile) -->
    <div class="flex items-center gap-8">
        <div class="relative group hidden md:block">
            <i class="bi bi-search absolute left-4 top-1/2 -translate-y-1/2 text-[var(--text-secondary)] transition-colors group-focus-within:text-[var(--accent-green)]"></i>
            <input type="text" placeholder="Quick search (Ctrl + K)" 
                class="w-80 bg-[var(--input-bg)] border border-[var(--border-color)] rounded-xl py-2.5 pl-12 pr-4 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-green)]/20 focus:border-[var(--accent-green)]/50 transition-all">
        </div>
    </div>

    <!-- Right: Actions & User -->
    <div class="flex items-center gap-6">
        <!-- Actions Container (Place for potential future header actions) -->
        <div class="hidden lg:flex items-center gap-3">
        </div>

        <!-- Utility Icons -->
        <div class="flex items-center gap-4">
            <!-- Theme Toggler -->
            <button id="theme-toggler" class="w-10 h-10 rounded-xl bg-[var(--input-bg)] border border-[var(--border-color)] flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all">
                <i class="bi bi-moon-stars"></i>
            </button>

            <!-- Notifications -->
            <div class="relative" id="notification-wrapper">
                <button id="notification-trigger" class="w-10 h-10 rounded-xl bg-[var(--input-bg)] border border-[var(--border-color)] flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all relative cursor-pointer" style="z-index: 60;">
                    <i class="bi bi-bell"></i>
                    <span id="notif-count" class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-[10px] text-white font-bold rounded-full flex items-center justify-center border-2 border-[var(--bg-dark)]">0</span>
                </button>
                <div id="notification-dropdown" class="hidden absolute right-0 mt-3 w-80 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-2xl z-[100] overflow-hidden">
                    <div class="p-4 border-b border-[var(--border-color)] bg-[var(--input-bg)] flex items-center justify-between">
                        <span class="text-xs font-bold uppercase tracking-wider">Notifications</span>
                        <span class="text-[10px] text-[var(--accent-green)] cursor-pointer hover:underline">Mark all read</span>
                    </div>
                    <ul id="notif-list" class="max-h-96 overflow-y-auto">
                        <li class="p-8 text-center text-xs text-[var(--text-secondary)] italic">Loading notifications...</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- User Profile -->
        <div class="relative" id="profile-wrapper">
            <button id="profile-trigger" class="flex items-center gap-3 pl-4 border-l border-[var(--border-color)] cursor-pointer" style="z-index: 60;">
                <div class="text-right hidden sm:block">
                    <div class="text-sm font-bold text-[var(--text-primary)] leading-tight"><?php echo e(auth()->user()->name ?? 'Administrator'); ?></div>
                    <div class="text-[10px] font-bold uppercase tracking-widest text-[var(--accent-green)]"><?php echo e(auth()->user()->role ?? 'Root'); ?></div>
                </div>
                <div class="w-10 h-10 rounded-xl border-2 border-[var(--accent-green)]/20 p-0.5 transition-transform hover:scale-105">
                    <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode(auth()->user()->name ?? 'U')); ?>&background=B5FF6B&color=000" class="w-full h-full rounded-[9px] object-cover">
                </div>
            </button>
            <div id="profile-dropdown" class="hidden absolute right-0 mt-3 w-56 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-2xl shadow-2xl z-[100] overflow-hidden p-2 space-y-1">
                <a href="<?php echo e(route('employee.dashboard')); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-[var(--text-secondary)] hover:bg-[var(--input-bg)] hover:text-[var(--text-primary)] transition-all">
                    <i class="bi bi-person-circle"></i> My Profile
                </a>
                <a href="<?php echo e(route('settings.index')); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-[var(--text-secondary)] hover:bg-[var(--input-bg)] hover:text-[var(--text-primary)] transition-all">
                    <i class="bi bi-gear-wide-connected"></i> System Settings
                </a>
                <div class="h-px bg-[var(--border-color)] mx-2 my-1"></div>
                <form action="<?php echo e(route('logout')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-red-400 hover:bg-red-500/10 transition-all cursor-pointer">
                        <i class="bi bi-box-arrow-right"></i> Sign Out
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const notifTrigger = document.getElementById('notification-trigger');
    const notifDropdown = document.getElementById('notification-dropdown');
    const profileTrigger = document.getElementById('profile-trigger');
    const profileDropdown = document.getElementById('profile-dropdown');

    if (notifTrigger && notifDropdown) {
        notifTrigger.addEventListener('click', (e) => {
            e.stopPropagation();
            notifDropdown.classList.toggle('hidden');
            if (profileDropdown) profileDropdown.classList.add('hidden');
        });
    }

    if (profileTrigger && profileDropdown) {
        profileTrigger.addEventListener('click', (e) => {
            e.stopPropagation();
            profileDropdown.classList.toggle('hidden');
            if (notifDropdown) notifDropdown.classList.add('hidden');
        });
    }

    document.addEventListener('click', () => {
        if (notifDropdown) notifDropdown.classList.add('hidden');
        if (profileDropdown) profileDropdown.classList.add('hidden');
    });

    if (notifDropdown) {
        notifDropdown.addEventListener('click', (e) => e.stopPropagation());
    }
    if (profileDropdown) {
        profileDropdown.addEventListener('click', (e) => e.stopPropagation());
    }

    refreshNotifications();
    setInterval(refreshNotifications, 30000);
});

async function refreshNotifications() {
    try {
        const res = await fetch('<?php echo e(route('notifications.unread')); ?>', { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const countEl = document.getElementById('notif-count');
        if(countEl) {
            countEl.textContent = data.count;
            countEl.style.display = data.count > 0 ? 'flex' : 'none';
        }
        
        const list = document.getElementById('notif-list');
        if (!list) return;
        
        if (!data.items || !data.items.length) {
            list.innerHTML = '<li class="p-8 text-center text-xs text-[var(--text-secondary)]">No new notifications</li>';
            return;
        }
        list.innerHTML = data.items.map(item => `
            <li class="p-4 border-b border-[var(--border-color)] hover:bg-[var(--input-bg)] transition-colors cursor-pointer" onclick="markRead(${item.id})">
                <div class="text-xs font-bold text-[var(--text-primary)] mb-1">${item.title ?? 'System Alert'}</div>
                <div class="text-[10px] text-[var(--text-secondary)] line-clamp-2">${item.message}</div>
            </li>
        `).join('');
    } catch (e) {}
}

async function markRead(id) {
    await fetch(`/notifications/${id}/read`, {
        method: 'PATCH',
        headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>', 'Accept': 'application/json' }
    });
    refreshNotifications();
}
</script>

<?php /**PATH C:\Users\Kunal Jhaveri\Documents\Playground\apps\flow\resources\views/components/header.blade.php ENDPATH**/ ?>