@php($u = auth()->user())
<div class="mr-topbar">
    <button class="btn btn-sm btn-outline-secondary d-lg-none" id="sidebarToggle">
        <i class="bi bi-list"></i>
    </button>

    <div class="d-none d-md-flex align-items-center gap-2">
        <span class="badge bg-light text-dark border">
            <i class="bi bi-telephone-inbound text-danger"></i>
            الرقم الداخلي: {{ $u->extension ?? '—' }}
        </span>
        <span class="badge bg-light text-dark border">{{ now()->format('Y-m-d') }}</span>
    </div>

    <div class="ms-auto d-flex align-items-center gap-2">

        <div class="dropdown">
            <button class="btn btn-sm btn-light border dropdown-toggle" data-bs-toggle="dropdown">
                <span class="status-dot status-{{ $u->agent_status }}" id="currentStatusDot"></span>
                <span id="currentStatusLabel">{{ $u->statusLabel() }}</span>
            </button>
            <ul class="dropdown-menu">
                @foreach (\App\Models\User::STATUSES as $key => $label)
                    <li>
                        <a class="dropdown-item" href="#" data-agent-status="{{ $key }}">
                            <span class="status-dot status-{{ $key }}"></span> {{ $label }}
                        </a>
                    </li>
                @endforeach
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item" href="#" id="startBreak" data-url="{{ route('attendance.break.start') }}">
                        <i class="bi bi-cup-hot"></i> بدء بريك
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="#" id="endBreak" data-url="{{ route('attendance.break.end') }}">
                        <i class="bi bi-check2-circle"></i> إنهاء البريك
                    </a>
                </li>
            </ul>
        </div>

        @if ($u->hasPermission('calls.create'))
            <a href="{{ route('calls.create') }}" class="btn btn-sm btn-primary">
                <i class="bi bi-plus-circle"></i> تسجيل مكالمة
            </a>
        @endif

        <div class="dropdown">
            <button class="btn btn-sm btn-light border position-relative" data-bs-toggle="dropdown">
                <i class="bi bi-bell"></i>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" id="notifCount"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-start" style="width: 320px; max-height: 400px; overflow-y: auto;" id="notifList"></ul>
        </div>

        <div class="dropdown">
            <button class="btn btn-sm btn-light border dropdown-toggle" data-bs-toggle="dropdown">
                <i class="bi bi-person-circle"></i> {{ $u->name }}
            </button>
            <ul class="dropdown-menu dropdown-menu-start">
                <li><a class="dropdown-item" href="{{ route('profile.edit') }}"><i class="bi bi-person"></i> الملف الشخصي</a></li>
                <li><a class="dropdown-item" href="{{ route('password.change') }}"><i class="bi bi-key"></i> تغيير كلمة المرور</a></li>
                <li><a class="dropdown-item" href="#" id="markAllRead"><i class="bi bi-check2-all"></i> تعليم الإشعارات كمقروءة</a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="dropdown-item text-danger"><i class="bi bi-box-arrow-right"></i> تسجيل الخروج</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>