<div class="topbar">
    <div class="topbar-left">
        <button class="burger" id="burger" aria-label="Toggle menu">☰</button>
    </div>

    <div class="topbar-heading">@yield('page_title', 'Dashboard')</div>

    <div class="top-actions">
        <a class="btn pill" href="{{ route('admin.sales.create') }}">SALE / POS</a>

        <span class="today" id="liveDateTime">Loading...</span>

        <span class="today">
            {{ $currentAdmin->name ?? session('admin_name') }}{{ isset($currentAdmin) ? ' · '.$currentAdmin->role : '' }}
        </span>

        <form method="POST" action="{{ route('admin.logout') }}">
            @csrf
            <button class="btn btn-light" type="submit">Logout</button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const liveDateTime = document.getElementById('liveDateTime');

    function updateLiveDateTime() {
        const now = new Date();

        const day = String(now.getDate()).padStart(2, '0');
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const year = now.getFullYear();

        let hours = now.getHours();
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12;
        hours = String(hours).padStart(2, '0');

        liveDateTime.textContent = `${day}-${month}-${year} ${hours}:${minutes}:${seconds} ${ampm}`;
    }

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