<header class="main-header">
    <div class="header-left">
        <!-- Toggle Button for Mobile/Tablet -->
        <button class="btn d-lg-none p-0 me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu">
            <i class="bi bi-list fs-2 text-dark"></i>
        </button>
        
        <!-- Greeting -->
        <span class="fs-5 fw-bold text-dark">
            {{ __('welcome_user', ['name' => Auth::user()->name ?? 'User']) }}
        </span>
    </div>

    <div class="header-right">
        <!-- Chat Icon -->
        <a href="{{ route('chat.index') }}" class="btn p-0 border-0 position-relative me-2" title="{{ __('chat') }}">
            <i class="bi bi-chat-dots fs-4 text-secondary"></i>
            <span id="header-chat-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size: 0.6rem;">
                0
            </span>
        </a>

        @php
            $unreadNotificationsCount = Auth::user()?->unreadNotifications()?->count() ?? 0;
            $unreadNotifications = Auth::user()?->unreadNotifications()?->latest()?->limit(6)?->get() ?? collect();
        @endphp
        <div class="dropdown">
            <button class="btn p-0 border-0 position-relative" id="notificationsDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="{{ __('notes_reminders.notifications.title') }}">
                <i class="bi bi-bell fs-4 text-secondary"></i>
                @if($unreadNotificationsCount > 0)
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.6rem;">
                        {{ $unreadNotificationsCount > 99 ? '99+' : $unreadNotificationsCount }}
                    </span>
                @endif
            </button>
            <div class="dropdown-menu dropdown-menu-end border-0 shadow-sm p-0" aria-labelledby="notificationsDropdown" style="min-width: 320px;">
                <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                    <div class="fw-semibold">{{ __('notes_reminders.notifications.title') }}</div>
                    @if($unreadNotificationsCount > 0)
                        <form method="POST" action="{{ route('notifications.read-all') }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-link text-decoration-none p-0">
                                {{ __('notes_reminders.notifications.mark_all_read') }}
                            </button>
                        </form>
                    @endif
                </div>

                @if($unreadNotifications->isEmpty())
                    <div class="px-3 py-3 text-muted small">
                        {{ __('notes_reminders.notifications.empty') }}
                    </div>
                @else
                    @foreach($unreadNotifications as $notification)
                        <form method="POST" action="{{ route('notifications.read', $notification->id) }}">
                            @csrf
                            <button type="submit" class="dropdown-item d-flex gap-2 align-items-start py-2">
                                <i class="bi bi-dot fs-3 lh-1 text-danger"></i>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold">{{ data_get($notification->data, 'title_key') ? __(data_get($notification->data, 'title_key')) : data_get($notification->data, 'title', __('notes_reminders.notifications.title')) }}</div>
                                    <div class="text-muted small">{{ data_get($notification->data, 'body', '') }}</div>
                                    <div class="text-muted small">{{ $notification->created_at?->diffForHumans() }}</div>
                                </div>
                            </button>
                        </form>
                    @endforeach
                @endif
            </div>
        </div>

        <!-- Language Switcher -->
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center text-decoration-none" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-globe2 fs-4 text-secondary"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm" aria-labelledby="langDropdown">
                <li><a class="dropdown-item {{ app()->getLocale() == 'en' ? 'active' : '' }}" href="{{ route('lang.switch', 'en') }}">🇬🇧 {{ __('english') }}</a></li>
                <li><a class="dropdown-item {{ app()->getLocale() == 'ar' ? 'active' : '' }}" href="{{ route('lang.switch', 'ar') }}">🇮🇶 {{ __('arabic') }}</a></li>
            </ul>
        </div>

        <!-- User Profile -->
        <div class="dropdown">
            <div class="user-profile" data-bs-toggle="dropdown" aria-expanded="false">
                @php($avatar = Auth::user()?->employee?->avatar_url)
                <img
                    src="{{ $avatar ?: 'https://ui-avatars.com/api/?name='.urlencode(Auth::user()->name ?? 'User').'&background=06adeb&color=fff' }}"
                    alt="Avatar"
                    class="user-avatar"
                >
                <div class="user-info d-none d-md-flex">
                    <span class="user-name">{{ Auth::user()->name ?? 'User' }}</span>
                    <span class="user-status text-muted">
                        <span class="status-dot status-online"></span> {{ __('online') }}
                    </span>
                </div>
                <i class="bi bi-caret-down-fill ms-2 text-secondary small"></i>
            </div>
            <ul class="dropdown-menu dropdown-menu-end border-0 shadow mt-2" aria-labelledby="userDropdown">
                <li><a class="dropdown-item py-2" href="{{ route('profile') }}">{{ __('profile') }}</a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="dropdown-item py-2 text-danger fw-bold">{{ __('logout') }}</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>
