@php($user = Auth::user())
        <nav class="layout-navbar navbar navbar-expand-xl align-items-center" id="layout-navbar">
          <div class="container-xxl">
            <div class="navbar-brand app-brand demo d-none d-xl-flex py-0 me-4 ms-0">
              <a href="{{ route('crm.dashboard') }}" class="app-brand-link">
                  <div class="mt-3" id="logoPreviewContainer" style="{{ $businessSetup?->logo ? '' : 'display: none;' }}">
                      <img
                          id="logoPreview"
                          src="{{ $businessSetup?->logo ? asset('storage/logos/' . $businessSetup->logo) : '' }}"
                          alt="Business Logo"
                          class="img-thumbnail"
                          style="height: 40px; width: auto;" />
                  </div>
                      <span class="app-brand-text demo menu-text fw-bold text-heading">{{ config('app.name') }}</span>
              </a>

              <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-xl-none">
                <i class="icon-base ti tabler-x icon-sm d-flex align-items-center justify-content-center"></i>
              </a>
            </div>

            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0  d-xl-none  ">
              <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
                <i class="icon-base ti tabler-menu-2 icon-md"></i>
              </a>
            </div>

            <div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
              <ul class="navbar-nav flex-row align-items-center ms-md-auto">

                <!-- User -->
                <li class="nav-item navbar-dropdown dropdown-user dropdown">
                  <a
                    class="nav-link dropdown-toggle hide-arrow p-0"
                    href="javascript:void(0);"
                    data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                      @if ($user && $user->picture)
                        <img src="{{ asset('storage/profile/' . $user->picture) }}" alt="Profile" class="rounded-circle" />
                      @else
                        <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-weight: bold;">
                          {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}
                        </div>
                      @endif
                    </div>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item mt-0" href="{{ route('crm.profile') }}">
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0 me-2">
                            <div class="avatar avatar-online">
                              @if ($user && $user->picture)
                                <img src="{{ asset('storage/profile/' . $user->picture) }}" alt="Profile" class="rounded-circle" />
                              @else
                                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-weight: bold;">
                                  {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}
                                </div>
                              @endif
                            </div>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="mb-0">{{ $user->first_name ?? 'User' }} {{ $user->last_name ?? '' }}</h6>
                            <small class="text-body-secondary">{{ $user->email ?? '' }}</small>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <div class="dropdown-divider my-1 mx-n2"></div>
                    </li>
                    <li>
                      <a class="dropdown-item" href="{{ route('crm.profile') }}">
                        <i class="icon-base ti tabler-user me-3 icon-md"></i
                        ><span class="align-middle">My Profile</span>
                      </a>
                    </li>


                    <li>
                      <div class="dropdown-divider my-1 mx-n2"></div>
                    </li>


                    <li>
                      <div class="d-grid px-2 pt-2 pb-1">
                        <a class="btn btn-sm btn-danger d-flex" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                          <small class="align-middle">Logout</small>
                          <i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
                        </a>
                        <form id="logout-form" action="{{ route('crm.logout') }}" method="POST" style="display: none;">
                          @csrf
                        </form>
                      </div>
                    </li>
                  </ul>
                </li>
                <!--/ User -->
              </ul>
            </div>
          </div>
        </nav>