@props(['title' => 'Dashboard'])
<header class="admin-topbar">
    <div class="admin-topbar-title">
        <h1>{{ $title }}</h1>
    </div>

    <div class="admin-topbar-actions">
        <div class="app-search">
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control" placeholder="Search now">
            </div>
        </div>

        <button type="button" class="app-icon-btn" data-theme-toggle title="Toggle dark mode">
            <i class="bi bi-moon-stars"></i>
        </button>

        <div class="dropdown">
            <a class="app-icon-btn position-relative" href="#" id="notificationDropdown" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                <i class="bi bi-bell"></i>
                <span id="notificationBadge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size:.6rem;">0</span>
            </a>
            <div class="dropdown-menu dropdown-menu-end app-dropdown" aria-labelledby="notificationDropdown" style="min-width: 320px;">
                <div class="app-dropdown-header d-flex justify-content-between align-items-center">
                    <span>Notifications</span>
                    <form method="POST" action="{{ route('admin.notifications.read-all') }}" id="markAllReadForm">
                        @csrf
                        <button type="submit" class="btn btn-link btn-sm p-0" style="font-size:12px;">Mark all read</button>
                    </form>
                </div>
                <div id="notificationList">
                    <div class="text-center text-muted px-3 py-4" style="font-size: 13px;">Loading…</div>
                </div>
            </div>
        </div>

        <script>
            (function () {
                const badge = document.getElementById('notificationBadge');
                const list = document.getElementById('notificationList');

                function render(data) {
                    if (data.unread_count > 0) {
                        badge.textContent = data.unread_count;
                        badge.classList.remove('d-none');
                    } else {
                        badge.classList.add('d-none');
                    }

                    if (!data.notifications.length) {
                        list.innerHTML = '<div class="text-center text-muted px-3 py-4" style="font-size: 13px;">No notifications</div>';
                        return;
                    }

                    list.innerHTML = data.notifications.map(n => `
                        <a href="${n.url || '#'}" class="dropdown-item d-block py-2 ${n.read ? '' : 'fw-semibold'}" style="white-space:normal;">
                            <div style="font-size:13px;">${n.title}</div>
                            <div class="text-muted" style="font-size:12px;">${n.message}</div>
                            <div class="text-muted" style="font-size:11px;">${n.created_at}</div>
                        </a>
                    `).join('');
                }

                function load() {
                    fetch('{{ route("admin.notifications.index") }}', { headers: { 'Accept': 'application/json' } })
                        .then(r => r.json())
                        .then(render)
                        .catch(() => {});
                }

                load();
                setInterval(load, 60000);
            })();
        </script>

        <div class="dropdown">
            <a class="nav-link dropdown-toggle profile-link" href="#" id="profileDropdown" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                <div class="app-profile-avatar">{{ substr(auth()->user()->name ?? 'A', 0, 1) }}</div>
                <span class="profile-name">{{ auth()->user()->name ?? 'Admin' }}</span>
                <i class="bi bi-chevron-down"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end app-dropdown" aria-labelledby="profileDropdown">
                <div class="app-dropdown-header">
                    <div class="fw-semibold">{{ auth()->user()->name ?? 'Admin' }}</div>
                    <div class="small" style="opacity:.7">{{ auth()->user()->email ?? '' }}</div>
                </div>
                <a href="{{ route('profile.edit') }}" class="dropdown-item"><i class="bi bi-person-gear me-2"></i>Account Settings</a>
                <div class="dropdown-divider"></div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="dropdown-item text-danger"><i class="bi bi-box-arrow-right me-2"></i>Sign Out</button>
                </form>
            </div>
        </div>
    </div>
</header>
