<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 class="relative">
                <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');
                            $deptName = Auth::user()->department_name ?? 'Team';
                        @endphp
                        <img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover" onerror="this.onerror=null; this.src='{{ asset('images/avatar.png') }}';">
                    </div>
                    <div class="hidden sm:flex flex-col leading-tight pr-1">
                        <span class="text-[13px] font-bold text-[#1a2b49] block truncate max-w-[100px]" title="{{ Auth::user()->name }}">{{ Auth::user()->name }}</span>
                        <span class="text-[11px] text-gray-400 font-medium block truncate max-w-[100px]" 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>

                <!-- Dropdown Menu -->
                <div id="profile-dropdown" class="absolute right-0 mt-2 w-40 bg-white rounded-2xl shadow-xl border border-gray-100 py-1.5 hidden z-50 transform origin-top-right transition-all duration-200 scale-95 opacity-0">
                    <form method="POST" action="{{ route('logout') }}" class="m-0">
                        @csrf
                        <button type="submit" class="w-full text-left px-4 py-2.5 text-[14px] font-semibold text-red-500 hover:bg-red-50 transition-colors flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                            </svg>
                            Đăng xuất
                        </button>
                    </form>
                </div>
            </div>
        @endif
    </div>
</header>

@if(Auth::check())
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const profileBtn = document.getElementById('header-profile');
            const dropdown = document.getElementById('profile-dropdown');

            if (profileBtn && dropdown) {
                profileBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    const isHidden = dropdown.classList.contains('hidden');
                    if (isHidden) {
                        dropdown.classList.remove('hidden');
                        requestAnimationFrame(() => {
                            dropdown.classList.remove('scale-95', 'opacity-0');
                            dropdown.classList.add('scale-100', 'opacity-100');
                        });
                    } else {
                        closeDropdown();
                    }
                });

                function closeDropdown() {
                    dropdown.classList.remove('scale-100', 'opacity-100');
                    dropdown.classList.add('scale-95', 'opacity-0');
                    setTimeout(() => {
                        dropdown.classList.add('hidden');
                    }, 200);
                }

                document.addEventListener('click', function (e) {
                    if (!profileBtn.contains(e.target) && !dropdown.contains(e.target)) {
                        closeDropdown();
                    }
                });
            }
        });
    </script>
@endif
