{{-- State Top Navbar - Phoenix v1.22.0 --}}
<nav class="navbar navbar-top navbar-slim fixed-top navbar-expand" id="topNavSlim" data-navbar-appearance="darker">
    <div class="collapse navbar-collapse justify-content-between">
        <div class="navbar-logo">
            <button class="btn navbar-toggler navbar-toggler-humburger-icon hover-bg-transparent" type="button" 
                data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" 
                aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggle-icon"><span class="toggle-line"></span></span>
            </button>
            @php
                $authStateUser = Auth::guard('state')->user();
                // Prefer related state name, else fallback to fname/lname, else generic 'State'
                $resolvedStateName = 'State';
                if($authStateUser){
                    if($authStateUser->relationLoaded('state') && $authStateUser->state){
                        $resolvedStateName = $authStateUser->state->name ?? $resolvedStateName;
                    } elseif (method_exists($authStateUser, 'state')) {
                        try { $resolvedStateName = optional($authStateUser->state)->name ?? $resolvedStateName; } catch (Throwable $e) {}
                    }
                    if($resolvedStateName === 'State'){
                        $composed = trim(($authStateUser->fname ?? '').' '.($authStateUser->lname ?? ''));
                        if($composed !== '') $resolvedStateName = $composed;
                    }
                }
            @endphp
            <a class="navbar-brand navbar-brand" href="{{ route('state.dashboard') }}">
                🏛️ {{ $resolvedStateName }} <span class="text-body-highlight d-none d-sm-inline">Dashboard</span>
            </a>
        </div>
        <ul class="navbar-nav navbar-nav-icons flex-row">
            <!-- Theme Toggle -->
            <li class="nav-item">
                <div class="theme-control-toggle fa-ion-wait pe-2 theme-control-toggle-slim">
                    <input class="form-check-input ms-0 theme-control-toggle-input" id="themeControlToggle" type="checkbox" 
                        data-theme-control="phoenixTheme" value="dark" />
                    <label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggle" 
                        data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme">
                        <span class="d-none d-sm-flex flex-center" style="height:16px;width:16px;">
                            <span class="me-1 icon" data-feather="moon"></span>
                        </span>
                        <span class="fs-9 fw-bold">Dark</span>
                    </label>
                    <label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggle" 
                        data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme">
                        <span class="d-none d-sm-flex flex-center" style="height:16px;width:16px;">
                            <span class="me-1 icon" data-feather="sun"></span>
                        </span>
                        <span class="fs-9 fw-bold">Light</span>
                    </label>
                </div>
            </li>
            <!-- Search -->
            <li class="nav-item">
                <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#searchBoxModal">
                    <span class="d-inline-block" style="height:12px;width:12px;">
                        <span data-feather="search" style="height:12px;width:12px;"></span>
                    </span>
                </a>
            </li>
            <!-- Notifications -->
            <li class="nav-item dropdown">
                <a class="nav-link" id="navbarDropdownNotification" href="#" role="button" 
                    data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
                    <span class="d-inline-block" style="height:12px;width:12px;">
                        <span data-feather="bell" style="height:12px;width:12px;"></span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end notification-dropdown-menu py-0 shadow border navbar-dropdown-caret">
                    <div class="card position-relative border-0">
                        <div class="card-header p-2">
                            <div class="d-flex justify-content-between">
                                <h5 class="text-body-emphasis mb-0">Notifications</h5>
                                <button class="btn btn-link p-0 fs-9 fw-normal" type="button">Mark all as read</button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="scrollbar-overlay" style="height: 27rem;">
                                <div class="d-flex align-items-center justify-content-center p-4">
                                    <div class="text-center">
                                        <span data-feather="bell" class="text-body-tertiary" style="height:48px;width:48px;"></span>
                                        <p class="fs-9 text-body-tertiary mt-2">No new notifications</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer p-0 border-top border-translucent border-0">
                            <div class="my-2 text-center fw-bold fs-10 text-body-tertiary text-opactity-85">
                                <a class="fw-bolder" href="#">Notification history</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Nine Dots Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" 
                    data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="outside" aria-expanded="false">
                    <svg width="10" height="10" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
                        <circle cx="2" cy="8" r="2" fill="currentColor"></circle>
                        <circle cx="2" cy="14" r="2" fill="currentColor"></circle>
                        <circle cx="8" cy="8" r="2" fill="currentColor"></circle>
                        <circle cx="8" cy="14" r="2" fill="currentColor"></circle>
                        <circle cx="14" cy="8" r="2" fill="currentColor"></circle>
                        <circle cx="14" cy="14" r="2" fill="currentColor"></circle>
                        <circle cx="8" cy="2" r="2" fill="currentColor"></circle>
                        <circle cx="14" cy="2" r="2" fill="currentColor"></circle>
                    </svg>
                </a>
                <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-nine-dots shadow border">
                    <div class="card bg-body-emphasis position-relative border-0">
                        <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                            <div class="row text-center align-items-center gx-0 gy-0">
                                
                                <div class="col-4">
                                    <a class="d-block bg-body-secondary-hover p-2 rounded-3 text-center text-decoration-none mb-3" 
                                        href="{{ route('state.events.index') }}">
                                        <span data-feather="calendar" style="height:30px;width:30px;"></span>
                                        <p class="mb-0 text-body-emphasis text-truncate fs-10 mt-1 pt-1">Events</p>
                                    </a>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- User Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link lh-1 pe-0 white-space-nowrap" id="navbarDropdownUser" href="#" role="button" 
                    data-bs-toggle="dropdown" aria-haspopup="true" data-bs-auto-close="outside" aria-expanded="false">
                    {{ Auth::guard('state')->user()->name ?? 'State User' }} 
                    <span class="d-inline-block" style="height:10.2px;width:10.2px;">
                        <span class="fa-solid fa-chevron-down fs-10"></span>
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border">
                    <div class="card position-relative border-0">
                        <div class="card-body p-0">
                            <div class="text-center pt-4 pb-3">
                                <div class="avatar avatar-xl">
                                    <div class="avatar-name rounded-circle">
                                        <span>{{ substr(Auth::guard('state')->user()->name ?? 'S', 0, 1) }}</span>
                                    </div>
                                </div>
                                <h6 class="mt-2 text-body-emphasis">{{ Auth::guard('state')->user()->name ?? 'State User' }}</h6>
                            </div>
                        </div>
                        <div class="overflow-auto scrollbar" style="height: 10rem;">
                            <ul class="nav d-flex flex-column mb-2 pb-1">
                                <li class="nav-item">
                                    <a class="nav-link px-3 d-block" href="{{ route('state.profile.edit') }}">
                                        <span class="me-2 text-body align-bottom" data-feather="user"></span>
                                        <span>Profile</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-3 d-block" href="{{ route('state.dashboard') }}">
                                        <span class="me-2 text-body align-bottom" data-feather="pie-chart"></span>
                                        Dashboard
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-3 d-block" href="{{ route('state.settings.index') }}">
                                        <span class="me-2 text-body align-bottom" data-feather="settings"></span>
                                        Settings
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-footer p-0 border-top border-translucent">
                            <hr />
                            <div class="px-3">
                                <form method="POST" action="{{ route('state.logout') }}">
                                    @csrf
                                    <button type="submit" class="btn btn-phoenix-secondary d-flex flex-center w-100">
                                        <span class="me-2" data-feather="log-out"></span>Sign out
                                    </button>
                                </form>
                            </div>
                            <div class="my-2 text-center fw-bold fs-10 text-body-quaternary">
                                <a class="text-body-quaternary me-1" href="#">Privacy policy</a>&bull;
                                <a class="text-body-quaternary mx-1" href="#">Terms</a>&bull;
                                <a class="text-body-quaternary ms-1" href="#">Help</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>