{{-- resources/views/layouts/topbar.blade.php --}}
<header class="topbar">
    <div class="topbar-left">
        <button onclick="toggleSidebar()"
                class="topbar-btn d-md-none"
                style="border:none;">
            <i class="bi bi-list"></i>
        </button>
        <div>
            <div class="page-title">@yield('page_title', 'Dashboard')</div>
            @hasSection('page_subtitle')
                <div class="page-subtitle">@yield('page_subtitle')</div>
            @endif
        </div>
    </div>

    <div class="topbar-right">

        {{-- Quick new reservation --}}
        <a href="{{ tenant_route('reservations.create') }}"
           class="btn btn-primary btn-sm d-none d-md-flex align-items-center gap-1">
            <i class="bi bi-plus-lg"></i>
            New Reservation
        </a>

        {{-- Notifications --}}
        <a href="{{ tenant_route('notifications.log') }}"
           class="topbar-btn"
           title="Notification log">
            <i class="bi bi-bell" style="font-size:.88rem;"></i>
        </a>

        {{-- User dropdown --}}
        <div class="dropdown">
            <button class="user-btn"
                    data-bs-toggle="dropdown">
                <div class="user-avatar">
                    {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                </div>
                <span class="d-none d-md-block">
                    {{ auth()->user()->name }}
                </span>
                <i class="bi bi-chevron-down"
                   style="font-size:.65rem;color:var(--muted);"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end"
                style="font-size:.8rem;min-width:180px;">
                <li>
                    <div style="padding:10px 14px;border-bottom:1px solid var(--border);">
                        <div class="fw-semibold" style="font-size:.82rem;">
                            {{ auth()->user()->name }}
                        </div>
                        <div style="font-size:.72rem;color:var(--muted);">
                            {{ auth()->user()->email }}
                        </div>
                    </div>
                </li>
                <li>
                    <a class="dropdown-item"
                       href="{{ tenant_route('profile.index') }}">
                        <i class="bi bi-person me-2"></i>Profile
                    </a>
                </li>
                <li>
                    <a class="dropdown-item"
                       href="{{ tenant_route('settings.subscription') }}">
                        <i class="bi bi-credit-card me-2"></i>Subscription
                    </a>
                </li>
                <li>
                    <a class="dropdown-item"
                       href="{{ tenant_route('support.create') }}">
                        <i class="bi bi-headset me-2"></i>Get Support
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="dropdown-item text-danger"
                                type="submit">
                            <i class="bi bi-box-arrow-right me-2"></i>
                            Sign Out
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>