<header class="bg-transparent sticky top-0 z-30 pt-6 pb-2 px-8 flex justify-between items-center w-full">
    <div class="flex items-center gap-4">
        <!-- Menu hamburger -->
        <button id="sidebar-hamburger" class="p-2 text-gray-500 hover:text-gray-800 rounded-md focus:outline-none transition-colors">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>
    </div>

    <div class="flex items-center gap-4">

        <!-- Primary Action Button -->
        <a href="{{ route('user.send') }}" class="hidden sm:flex items-center gap-2 px-5 py-2.5 bg-[#3462f7] hover:bg-blue-700 text-white text-[14px] font-bold rounded-xl shadow-md transition-all shadow-blue-500/20">
            <span class="text-lg leading-none">+</span>
            Gửi Thanks card
        </a>

        <!-- User Profile Dropdown/Trigger -->
        @if(Auth::check())
            <div id="header-profile" class="flex items-center gap-3 cursor-pointer hover:bg-gray-50/80 p-1.5 rounded-xl transition-all border border-transparent hover:border-gray-100">
                <div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
                    @php
                        $avatarUrl = Auth::user()->avatar ? Auth::user()->avatar : asset('images/avatar.png');
                        $deptVal = Auth::user()->departments;
                        if (is_numeric($deptVal)) {
                            $idx = ((int)$deptVal) - 1;
                            $deptName = config('constants.DEPARTMENTS')[$idx] ?? 'Team';
                        } else {
                            $deptName = $deptVal ?? 'Team';
                        }
                    @endphp
                    <img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover">
                </div>
                <div class="hidden sm:flex flex-col leading-tight pr-1">
                    <span class="text-[13px] font-bold text-[#1a2b49] truncate max-w-[120px]" title="{{ Auth::user()->name }}">{{ Auth::user()->name }}</span>
                    <span class="text-[11px] text-gray-400 font-medium truncate max-w-[120px]" title="{{ $deptName }}">{{ $deptName }}</span>
                </div>
                <svg class="w-3.5 h-3.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
            </div>
        @endif
    </div>
</header>

<!-- Logout Modal -->
@if(Auth::check())
    <div id="logout-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 hidden z-50">
        <div class="bg-white rounded-2xl shadow-xl p-6 w-80 border border-gray-100">
            <h2 class="text-[16px] font-bold text-[#1a2b49] mb-4 text-center">Bạn có chắc chắn muốn đăng xuất?</h2>
            <div class="flex flex-col gap-2">
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white py-2.5 rounded-xl font-semibold text-[14px] transition-colors">Đăng xuất</button>
                </form>
                <button id="close-logout-modal" class="w-full text-gray-500 py-2.5 rounded-xl font-semibold text-[14px] hover:bg-gray-50 transition-colors">Hủy bỏ</button>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const profileBtn = document.getElementById('header-profile');
            const modal = document.getElementById('logout-modal');
            const closeBtn = document.getElementById('close-logout-modal');

            if (profileBtn && modal && closeBtn) {
                profileBtn.addEventListener('click', function () {
                    modal.classList.remove('hidden');
                });
                closeBtn.addEventListener('click', function () {
                    modal.classList.add('hidden');
                });
                modal.addEventListener('click', function (e) {
                    if (e.target === modal) {
                        modal.classList.add('hidden');
                    }
                });
            }
        });
    </script>
@endif
