@php
    $user = auth()->user();
    $ws = optional($user->workStation);
    $wsName = $ws->name ?? 'No Work Station';
    $wsLocation = $ws->location ?? null;
    $initials = collect(explode(' ', trim($user->name)))
        ->filter()
        ->map(fn($p) => strtoupper(mb_substr($p, 0, 1)))
        ->take(2)
        ->implode('');

    if (!$initials) $initials = strtoupper(mb_substr($user->name, 0, 1));
@endphp

<header class="main-header navbar">
    <div class="header-inner w-100 d-flex align-items-center justify-content-between">

        {{-- LEFT: Greeting --}}
        <div class="d-flex align-items-center gap-2 gap-md-3">
            <div class="ws-icon d-flex align-items-center justify-content-center">
                <i class="material-icons md-location_on"></i>
            </div>

            <div class="lh-sm">
                <div class="d-flex align-items-center flex-wrap gap-2">
                    <span class="fw-semibold header-title">
                        Hello, {{ $user->name }}
                    </span>

                    <span class="badge ws-badge d-none d-sm-inline-flex">
                        Active Session
                    </span>
                </div>

                <div class="d-flex align-items-center flex-wrap gap-2">
                    <small class="text-muted">Work Station:</small>

                    <span class="ws-pill">
                        {{ $wsName }}
                    </span>

                    @if($wsLocation)
                        <small class="text-muted d-none d-md-inline">• {{ $wsLocation }}</small>
                    @endif
                </div>
            </div>
        </div>

        {{-- RIGHT: Actions --}}
        <div class="d-flex align-items-center gap-2 gap-md-3">

            {{-- Dark mode toggle --}}
            <button type="button" class="btn header-icon-btn" id="themeToggle" title="Toggle Dark Mode">
                <i class="material-icons md-nights_stay"></i>
            </button>

            <div class="vr d-none d-md-block"></div>

            {{-- User dropdown --}}
            <div class="dropdown">
                <button class="btn p-0 border-0 bg-transparent d-flex align-items-center gap-2"
                        type="button"
                        id="dropdownAccount"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">

                    <div class="avatar-circle">
                        {{ $initials }}
                    </div>

                    <div class="d-none d-lg-flex flex-column align-items-start lh-sm">
                        <span class="fw-semibold" style="font-size:.92rem;">{{ $user->name }}</span>
                        <small class="text-muted" style="font-size:.78rem;">{{ $wsName }}</small>
                    </div>

                    <i class="material-icons md-expand_more d-none d-lg-inline" style="opacity:.65;"></i>
                </button>

                <ul class="dropdown-menu dropdown-menu-end shadow-sm p-2" style="min-width: 260px; border-radius: 14px;">
                    <li class="px-2 pt-2 pb-2">
                        <div class="d-flex align-items-center gap-2">
                            <div class="mini-icon">
                                <i class="material-icons md-person"></i>
                            </div>
                            <div class="flex-grow-1">
                                <div class="fw-semibold">{{ $user->name }}</div>
                                <small class="text-muted">{{ $user->email ?? '' }}</small>
                            </div>
                        </div>

                        <div class="mt-2 p-2 rounded ws-card">
                            <small class="text-muted d-block">Work Station</small>
                            <div class="fw-semibold">{{ $wsName }}</div>
                            @if($wsLocation)
                                <small class="text-muted">{{ $wsLocation }}</small>
                            @endif
                        </div>
                    </li>

                    <li><hr class="dropdown-divider my-2"></li>

                    <li>
                        <form action="{{ route('logout') }}" method="POST" class="m-0">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger d-flex align-items-center gap-2 rounded">
                                <i class="material-icons md-exit_to_app"></i>
                                Logout
                            </button>
                        </form>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</header>

<style>
/* Make header clean + consistent */
.main-header.navbar{
    height: 64px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 0 16px;
}

/* Keep everything centered and not floating weirdly */
.header-inner{
    height: 64px;
}

/* Left workstation icon */
.ws-icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(13,110,253,.10);
    color: #0d6efd;
}

/* Title sizing */
.header-title{
    font-size: 1.05rem;
}

/* Active badge */
.ws-badge{
    background: rgba(25,135,84,.12);
    color: #198754;
    border: 1px solid rgba(25,135,84,.18);
}

/* Workstation pill */
.ws-pill{
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
    font-size: .85rem;
}

/* Icon buttons */
.header-icon-btn{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Avatar circle */
.avatar-circle{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg,#0d6efd,#6f42c1);
    box-shadow: 0 10px 20px rgba(13,110,253,.15);
}

/* Dropdown mini icon */
.mini-icon{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(13,110,253,.10);
    color: #0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* workstation card inside dropdown */
.ws-card{
    background:#f8f9fa;
    border: 1px solid rgba(0,0,0,.06);
}

/* Dark mode support */
.dark .main-header.navbar{
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.dark .main-header.navbar .text-muted{ color: rgba(255,255,255,.65) !important; }
.dark .header-icon-btn{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; }
.dark .ws-pill, .dark .ws-card{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.90) !important; }
.dark .dropdown-menu{ background: #0b1220; border-color: rgba(255,255,255,.10); }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const html = document.documentElement;
    const toggleBtn = document.getElementById("themeToggle");

    const storedTheme = localStorage.getItem("theme") || "light";
    html.classList.toggle("dark", storedTheme === "dark");

    toggleBtn?.addEventListener("click", function (e) {
        e.preventDefault();
        const isDark = html.classList.toggle("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
    });
});
</script>