{{-- ===== SIDEBAR ===== --}}
<aside class="sidebar" id="sidebar">

  {{-- Brand --}}
  <a href="{{ route('admin.dashboard') }}" class="sidebar-brand" style="text-decoration: none; display: flex; align-items: center; justify-content: center; padding: 20px 10px;">
    <img src="{{ asset('images/logo.png') }}" 
         alt="Greatguy Logo" 
         style="max-height: 27px; width: auto; max-width: 100%; object-fit: contain; transition: transform 0.3s ease;">
</a>

  {{-- Navigation --}}
  <nav class="sidebar-nav">

    <div class="nav-section-label">Main</div>

    <a href="{{ route('admin.dashboard') }}" class="nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" data-tooltip="Dashboard">
      <i class="fa-solid fa-house-chimney"></i>
      <span>Dashboard</span>
    </a>
    <a href="{{route('admin.services.index')}}" class="nav-item {{ request()->routeIs('admin.services.index') ? 'active' : '' }}" data-tooltip="Analytics">
      <i class="fa-solid fa-chart-line"></i>
      <span>Services</span>
      {{-- <span class="nav-badge">New</span> --}}
    </a>
    <a href="{{route('admin.quotes.index')}}" class="nav-item {{ request()->routeIs('admin.quotes.index') ? 'active' : '' }}" data-tooltip="Reports">
      <i class="fa-solid fa-chart-bar"></i>
      <span>Quote</span>
    </a>

    <div class="nav-section-label">Management</div>

    <a href="{{route('admin.reviews.index')}}" class="nav-item {{ request()->routeIs('admin.reviews.index*') ? 'active' : '' }}" data-tooltip="Users">
      <i class="fa-solid fa-users"></i>
      <span>Review</span>
      {{-- <span class="nav-badge">3</span> --}}
    </a>
    <a href="{{route('admin.categories.index')}}" class="nav-item {{ request()->routeIs('admin.categories.index*') ? 'active' : '' }}" data-tooltip="Products">
      <i class="fa-solid fa-table-cells-large"></i>
      <span>Category</span>
    </a>
    <a href="{{route('admin.products.index')}}" class="nav-item {{ request()->routeIs('admin.products.index*') ? 'active' : '' }}" data-tooltip="Orders">
      <i class="fa-solid fa-table-list"></i>
      {{-- <i class="fa-solid fa-bag-shopping"></i> --}}
      <span>Gallery</span>
    </a>
   

    <div class="nav-section-label">System</div>

    <a href="{{route('admin.pages.index')}}" class="nav-item" data-tooltip="Help">
      <i class="fa-solid fa-circle-question"></i>
      <span>Pages</span>
    </a>

    <a href="#" class="nav-item" data-tooltip="Notifications">
      <i class="fa-solid fa-bell"></i>
      <span>Notifications</span>
    </a>
   <div class="nav-section-label">Settings</div>
    <a href="{{route('admin.banners.index')}}" class="nav-item {{ request()->routeIs('admin.banners.index*') ? 'active' : '' }}" data-tooltip="Settings">
      <i class="fa-solid fa-gear"></i>
      <span>Banner Settings</span>
    </a>
  </nav>

  {{-- Sidebar Footer: Auth User --}}
  <div class="sidebar-footer">
    <div class="user-card">
      <div class="profile-avatar" style="position: relative; width: 35px; height: 35px;">
            @if(Auth::user()->image)
                <img src="{{ Storage::url(Auth::user()->image) }}" alt="Profile" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1.5px solid #6366f1;">
            @else
                <div style="width: 100%; height: 100%; border-radius: 50%; background: #334155; display: flex; align-items: center; justify-content: center; border: 1.5px solid #475569;">
                    <i class="fa-solid fa-user" style="font-size: 14px; color: #94a3b8;"></i>
                </div>
            @endif
            <span style="position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: #10b981; border: 2px solid #0f172a; border-radius: 50%;"></span>
        </div>
      <div class="user-info">
        <div class="user-name">{{ auth()->user()->name ?? 'Admin' }}</div>
        <div class="user-role">{{ auth()->user()->role ?? 'Administrator' }}</div>
      </div>
    </div>
  </div>

</aside>