{{-- components/topbar-admin.blade.php --}}
<header class="topbar">
    {{-- Left: Toggle + Title --}}
    <div class="d-flex align-items-center gap-3">
        <button id="sidebarToggle" class="topbar-btn d-lg-none" aria-label="Toggle Sidebar">
            <i class="fas fa-bars"></i>
        </button>
        <div>
            <div class="topbar-title">
                @yield('topbar-title', 'Admin Panel')
            </div>
            <div style="font-size:0.72rem;color:var(--sw-gray-400);">
                <i class="fas fa-calendar-day me-1"></i>
                {{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM Y') }}
            </div>
        </div>
    </div>

    {{-- Right: Actions --}}
    <div class="topbar-actions">

        {{-- Notifikasi pembayaran --}}
        @php
            $notifCount = \App\Models\Payment::where('status','unpaid')->whereNotNull('proof_image')->count();
        @endphp
        <a href="{{ route('admin.payments.index') }}"
           class="topbar-btn position-relative text-decoration-none"
           title="Pembayaran Menunggu Konfirmasi">
            <i class="fas fa-bell"></i>
            @if($notifCount > 0)
                <span class="notif-badge">{{ $notifCount > 9 ? '9+' : $notifCount }}</span>
            @endif
        </a>

        {{-- User menu --}}
        <div class="dropdown">
            <div class="topbar-user dropdown-toggle"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
                 id="topbarUserMenu">
                <div class="topbar-avatar">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="topbar-user-info d-none d-sm-block">
                    <div class="topbar-user-name">{{ Str::words(auth()->user()->name, 2, '') }}</div>
                    <div class="topbar-user-role">Administrator</div>
                </div>
                <i class="fas fa-chevron-down ms-1 d-none d-sm-block"
                   style="font-size:0.65rem;color:var(--sw-gray-400);"></i>
            </div>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="topbarUserMenu">
                <li>
                    <a class="dropdown-item" href="{{ route('admin.settings.index') }}">
                        <i class="fas fa-gear me-2 text-muted"></i>Pengaturan
                    </a>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item text-danger">
                            <i class="fas fa-right-from-bracket me-2"></i>Keluar
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>