{{-- Obvizio glass-sidebar styling + JS (self-contained). --}}
@include('layouts.partials.settings-sidebar')

{{-- Critical sidebar overrides, inlined so they travel with the view (the
     external public/css/beanops.css may not be deployed on every host). Forces
     the menu visible (it was collapsing to 0 height inside the glass card) and
     styles the user-profile footer. --}}
<style>
    /* Always render the menu on desktop, where there is no toggler.
       MUST stay inside this media query: applied unconditionally it also wins
       over Bootstrap's .collapse on mobile, which is exactly what made the
       navbar-toggler look dead — the menu could never hide, so toggling it
       changed nothing on screen. */
    @media (min-width: 992px) {
        #sidebar-menu.navbar-collapse {
            display: flex !important;
            flex-direction: column;
            flex-grow: 1;
            height: auto !important;
            overflow: visible !important;
            visibility: visible !important;
        }
    }
    /* Mobile. Bootstrap's `.collapse:not(.show)` still does the hiding, so the
       toggler keeps working — but the OPEN state has to be spelled out here.
       Several stylesheets fight over display/height on this element, and the
       menu was ending up with no box the moment `.collapsing` was swapped for
       `.show`: visible only mid-transition, gone as soon as it finished. */
    @media (max-width: 991.98px) {
        #sidebar-menu.navbar-collapse.collapsing {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        #sidebar-menu.navbar-collapse.show {
            display: flex !important;
            flex-direction: column;
            /* Bootstrap's .navbar-collapse sets align-items:center, which in a
               column layout centres the whole menu instead of filling it. */
            align-items: stretch;
            flex-basis: 100%;
            width: 100%;
            height: auto !important;
            visibility: visible !important;
            /* A long menu on a short screen scrolls inside the sidebar rather
               than running off the bottom of the sticky header. */
            max-height: calc(100vh - 5rem);
            overflow-y: auto;
        }
    }
    @media (min-width: 992px) {
        aside.navbar-vertical.navbar-expand-lg > .container-fluid {
            height: auto !important;
            min-height: calc(100vh - 1.25rem);
            overflow: visible !important;
            transform: none !important;
        }
    }
    /* User profile footer */
    .navbar-vertical .foa-sb-footer { border-top: 1px solid var(--tblr-border-color); padding-top: .5rem; margin-top: auto; }
    .foa-sb-user { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem; border: none; background: transparent; border-radius: .5rem; text-align: left; cursor: pointer; color: var(--tblr-body-color); transition: background .15s ease; }
    .foa-sb-user:hover { background: color-mix(in srgb, var(--tblr-primary) 10%, transparent); }
    .foa-sb-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tblr-primary); color: #fff; font-weight: 700; font-size: .72rem; }
    .foa-sb-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .foa-sb-user-name { font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .foa-sb-user-role { font-size: .6875rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .foa-sb-user-caret { color: var(--tblr-secondary); flex-shrink: 0; }
</style>

<aside class="navbar navbar-vertical navbar-expand-lg border-bottom sticky-top navbar-transparent">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu"
                aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-brand navbar-brand-autodark">
            <a href="{{ route('dashboard') }}" class="d-flex align-items-center gap-2 text-decoration-none text-reset">
                <img src="{{ asset('beanops-logo.png') }}" alt="Worklance"
                     class="navbar-brand-image rounded" style="height:30px;width:30px;">
                <span class="fw-bold" style="letter-spacing:.02em;">Worklance</span>
            </a>
        </div>

        {{-- No `show` here: on mobile the menu starts collapsed and the toggler
             opens it; on desktop the media query above forces it visible. --}}
        <div class="navbar-collapse collapse" id="sidebar-menu">
            <ul class="navbar-nav pt-lg-2">
                @foreach (config('menu', []) as $item)
                    @if (! empty($item['super_admin']) && ! auth()->user()?->isSuperAdmin())
                        @continue
                    @endif
                    @if (isset($item['section']))
                        <li class="nav-item mt-3">
                            <span class="px-3 text-uppercase text-secondary"
                                  style="font-size:.65rem;letter-spacing:.06em;">{{ $item['section'] }}</span>
                        </li>
                    @elseif (! empty($item['route']) && Route::has($item['route']))
                        <li class="nav-item {{ request()->routeIs($item['route']) ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route($item['route']) }}">
                                <span class="nav-link-icon d-md-none d-lg-inline-block">
                                    <i class="{{ $item['icon'] ?? 'ti ti-point' }}"></i>
                                </span>
                                <span class="nav-link-title">{{ $item['title'] }}</span>
                            </a>
                        </li>
                    @endif
                @endforeach
            </ul>
        </div>

        {{-- User profile footer (sticks to bottom of the flex column) --}}
        @php
            $u = auth()->user();
            $sbInitials = $u
                ? collect(explode(' ', $u->name))->filter()->map(fn ($w) => mb_substr($w, 0, 1))->take(2)->implode('')
                : '?';
        @endphp
        <div class="foa-sb-footer dropup">
            <button class="foa-sb-user dropdown-toggle-custom" data-bs-toggle="dropdown" aria-expanded="false"
                    type="button" id="sb-user-menu">
                <span class="foa-sb-avatar">{{ strtoupper($sbInitials) }}</span>
                <span class="foa-sb-user-meta">
                    <span class="foa-sb-user-name">{{ $u?->name ?? 'User' }}</span>
                    <span class="foa-sb-user-role">{{ $u?->email }}</span>
                </span>
                <i class="ti ti-dots-vertical foa-sb-user-caret"></i>
            </button>
            <ul class="dropdown-menu shadow-sm" aria-labelledby="sb-user-menu">
                @if (Route::has('profile.edit'))
                    <li><a class="dropdown-item" href="{{ route('profile.edit') }}"><i class="ti ti-user me-2"></i> My Profile</a></li>
                    <li><hr class="dropdown-divider"></li>
                @endif
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item text-danger"><i class="ti ti-logout me-2"></i> Sign out</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</aside>