@php

    $user = auth()->user();

    $topbarUserName = $user->name
        ?? $user->nama_lengkap
        ?? $user->nama
        ?? 'User';

    $topbarRoleName = $user->nama_role
        ?? $user->role_name
        ?? null;

    if (!$topbarRoleName && $user) {
        $roleId = $user->id_role ?? $user->role_id ?? null;
        try {
            if ($roleId && \Illuminate\Support\Facades\Schema::hasTable('role')) {
                $topbarRoleName = \Illuminate\Support\Facades\DB::table('role')->where('id_role', $roleId)->value('nama_role');
            }
        } catch (Throwable $e) {
            $topbarRoleName = null;
        }
    }

    $topbarRoleName = $topbarRoleName ?: 'User';
@endphp

<header class="workspace-topbar">
    <div class="topbar-left">
        <button type="button" class="sidebar-toggle" onclick="toggleWorkspaceSidebar()" aria-label="Toggle sidebar">
            ☰
        </button>

        <img
            src="{{ asset('assets/images/simbika-logo.png') }}"
            alt="Koperasi Mandiri Binakarya"
            class="simbika-topbar-logo"
        >

        <div class="topbar-title-block">
            <h1>@yield('page_title', trim($__env->yieldContent('title', 'Workspace')))</h1>
            <p>@yield('page_subtitle', 'Ruang kerja terpadu sesuai peran jabatan')</p>
        </div>
    </div>

    <div class="topbar-right">
        <div class="topbar-clock">
            <span id="workspaceDate">{{ now()->translatedFormat('l, d F Y') }}</span>
            <small id="workspaceTime">{{ now()->format('H:i:s') }}</small>
        </div>

        <div class="topbar-user">
            <div class="user-avatar">{{ strtoupper(substr($topbarUserName, 0, 1)) }}</div>
            <div class="user-meta">
                <strong>{{ $topbarUserName }}</strong>
                <small>{{ $topbarRoleName }}</small>
            </div>
        </div>

        @auth
            <form method="POST" action="{{ route('logout') }}" class="topbar-logout-form">
                @csrf
                <button class="logout-btn" type="submit">Logout</button>
            </form>
        @endauth
    </div>
</header>

<script>
    (function () {
        const dateEl = document.getElementById('workspaceDate');
        const timeEl = document.getElementById('workspaceTime');
        if (!dateEl || !timeEl) return;

        function updateWorkspaceClock() {
            const now = new Date();
            dateEl.textContent = now.toLocaleDateString('id-ID', {
                weekday: 'long',
                day: '2-digit',
                month: 'long',
                year: 'numeric'
            });
            timeEl.textContent = now.toLocaleTimeString('id-ID', {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }

        updateWorkspaceClock();
        setInterval(updateWorkspaceClock, 1000);
    })();
</script>