@php
    $alerts = app(\App\Services\AlertService::class)->headerAlerts();
@endphp

<header class="app-navbar">
    <button class="btn btn-light btn-icon d-lg-none" id="sidebarToggle" type="button">
        <i class="fa-solid fa-bars"></i>
    </button>

    <form action="{{ route('search.global') }}" method="GET" class="navbar-search d-none d-md-flex">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" name="q" value="{{ request('q') }}" class="form-control"
               placeholder="بحث سريع: اسم عميل، جوال، لوحة مركبة، IMEI، رقم فاتورة...">
    </form>

    <div class="navbar-right">
        <div class="dropdown">
            <button class="btn btn-light btn-icon position-relative" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fa-solid fa-bell"></i>
                @if ($alerts['total'] > 0)
                    <span class="badge-dot">{{ $alerts['total'] > 99 ? '99+' : $alerts['total'] }}</span>
                @endif
            </button>
            <ul class="dropdown-menu dropdown-menu-start notif-menu">
                <li class="dropdown-header">التنبيهات</li>
                @forelse ($alerts['items'] as $alert)
                    <li>
                        <a class="dropdown-item d-flex align-items-start gap-2" href="{{ $alert['url'] }}">
                            <i class="fa-solid {{ $alert['icon'] }} text-{{ $alert['color'] }} mt-1"></i>
                            <span>
                                <span class="d-block">{{ $alert['title'] }}</span>
                                <small class="text-muted">{{ $alert['description'] }}</small>
                            </span>
                        </a>
                    </li>
                @empty
                    <li><span class="dropdown-item text-muted">لا توجد تنبيهات حالياً</span></li>
                @endforelse
            </ul>
        </div>

        <div class="dropdown">
            <button class="btn btn-light user-btn" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="{{ auth()->user()->avatar_url }}" alt="">
                <span class="d-none d-sm-inline">{{ auth()->user()->name }}</span>
                <i class="fa-solid fa-chevron-down small"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-start">
                <li class="dropdown-header">
                    {{ auth()->user()->job_title ?: 'مستخدم' }}
                    <div class="small text-muted">{{ auth()->user()->email }}</div>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="{{ route('profile.edit') }}"><i class="fa-solid fa-user ms-2"></i>الملف الشخصي</a></li>
                <li>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button class="dropdown-item text-danger" type="submit"><i class="fa-solid fa-right-from-bracket ms-2"></i>تسجيل الخروج</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>