{{-- resources/views/admin/layouts/header.blade.php --}}
<header class="tt-admin-header">
    <button class="tt-mobile-toggle" id="ttMobileToggle" type="button" aria-label="Toggle sidebar">☰</button>

    <h1 class="tt-header-page-title">@yield('title', 'Dashboard')</h1>

    <div class="tt-admin-header-right">
        <div class="tt-admin-user">
            <span class="tt-admin-user-avatar">
                {{ strtoupper(substr(auth('admin')->user()->name ?? 'A', 0, 1)) }}
            </span>
            <span class="tt-admin-user-name">{{ auth('admin')->user()->name ?? 'Admin' }}</span>
        </div>
    </div>
</header>

<style>
    .tt-admin-header {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
        background: var(--tt-navy);
        border-bottom: 1px solid var(--tt-border);
        position: sticky;
        top: 0;
        z-index: 150;
    }

    .tt-header-page-title {
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
    }

    .tt-mobile-toggle {
        display: none;
        background: transparent;
        border: none;
        color: var(--tt-text);
        font-size: 20px;
        cursor: pointer;
    }

    .tt-admin-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tt-admin-user-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--tt-orange);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
    }

    .tt-admin-user-name {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--tt-text);
    }

    @media (max-width: 991px) {
        .tt-mobile-toggle { display: block; }
        .tt-admin-user-name { display: none; }
    }
</style>

<script>
(function () {
    var toggle = document.getElementById('ttMobileToggle');
    var sidebar = document.getElementById('ttSidebar');
    if (toggle && sidebar) {
        toggle.addEventListener('click', function () {
            sidebar.classList.toggle('tt-sidebar-open');
        });
    }
})();
</script>