{{-- resources/views/livewire/components/sidebar.blade.php --}}
<div x-data="{ open: true, mobile: false }"
     x-init="mobile = window.matchMedia('(max-width: 1024px)').matches; if(mobile){ open = false }"
     class="relative">

  {{-- Toggle (mobile) --}}
  <button
    @click="open = !open; $dispatch('sidebar:toggled', { open, mobile })"
    class="lg:hidden fixed top-4 left-4 z-50 inline-flex items-center gap-2 rounded-xl bg-orange-600/90 px-3 py-2 text-white shadow-lg hover:bg-orange-600 transition"
    aria-label="Toggle sidebar">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
    Menu
  </button>

  {{-- Overlay (mobile) --}}
  <div x-show="open && mobile" x-transition.opacity class="fixed inset-0 z-40 bg-black/40" @click="open=false"></div>

  {{-- Sidebar --}}
  <aside
    class="fixed z-50 lg:z-0 top-0 left-0 h-screen
           bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 text-slate-100
           shadow-2xl ring-1 ring-white/5 backdrop-blur
           transition-all duration-300
           flex flex-col"
    :class="open ? 'w-72' : 'w-20 -translate-x-0 lg:-translate-x-0' + (mobile ? (open ? '' : ' -translate-x-full') : '')">

    {{-- Header / Brand --}}
    <div class="flex items-center gap-3 p-4 border-b border-white/10">
      <div class="h-10 w-10 rounded-xl bg-orange-500/20 grid place-items-center">
        <span class="text-orange-400 font-black">SMP</span>
      </div>
      <div class="flex-1">
        <div class="font-semibold tracking-wide" x-show="open" x-transition>KONSELING SMP NEGERI 4 AMBON</div>
        <div class="text-xs text-slate-400" x-show="open" x-transition>Dashboard</div>
      </div>
      <button
        class="hidden lg:inline-flex text-slate-400 hover:text-white"
        @click="open = !open; $dispatch('sidebar:toggled', { open, mobile })"
        aria-label="Collapse">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition"
             :class="open ? '' : 'rotate-180'" viewBox="0 0 24 24" fill="currentColor">
          <path d="M15.75 19.5 8.25 12l7.5-7.5"/>
        </svg>
      </button>
    </div>

    {{-- User card --}}
    <div class="mx-3 mt-3 rounded-2xl bg-white/5 p-3 ring-1 ring-white/10">
      <div class="flex items-center gap-3">
        <img src="https://ui-avatars.com/api/?background=ea580c&color=fff&name={{ urlencode($username) }}"
             alt="avatar" class="h-9 w-9 rounded-full ring-2 ring-white/10">
        <div class="min-w-0" x-show="open" x-transition>
          <p class="truncate text-sm font-medium">{{ $username }}</p>
          <p class="truncate text-xs text-slate-400">{{ $role }}</p>
        </div>
      </div>
    </div>

    {{-- Search (optional) --}}
    <div class="px-3 mt-3" x-show="open" x-transition>
      <div class="relative">
        <input type="text" placeholder="Search…" class="w-full rounded-xl bg-white/5 pl-9 pr-3 py-2 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-orange-500/60">
        <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-2.5 h-4 w-4 text-slate-400" viewBox="0 0 24 24" fill="currentColor">
          <path fill-rule="evenodd" d="M10 4.5a5.5 5.5 0 1 0 3.473 9.812l3.607 3.608a.75.75 0 1 0 1.06-1.06l-3.608-3.607A5.5 5.5 0 0 0 10 4.5Zm-4 5.5a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/>
        </svg>
      </div>
    </div>

    {{-- Nav --}}
    <nav class="mt-3 flex-1 overflow-y-auto pr-1 custom-scroll">
      <ul class="space-y-1 px-2">
        @foreach ($menus as $menu)
          @php
            $hasChildren = !empty($menu['children'] ?? []);
            $routeName = $menu['route'] ?? null;
            $routeExists = $routeName ? \Illuminate\Support\Facades\Route::has($routeName) : false;
            $isActive = $routeName ? request()->routeIs($routeName.'*') : false;
          @endphp

          <li x-data="{ openItem: {{ $isActive ? 'true' : 'false' }} }">
            <a
              @if(!$hasChildren && $routeName && $routeExists) href="{{ route($routeName) }}" @else href="#" @endif
              class="group flex items-center gap-3 rounded-xl px-3 py-2.5 transition ring-1 ring-transparent
                     hover:bg-white/5 hover:ring-white/10
                     {{ $isActive && !$hasChildren ? 'bg-orange-500/10 ring-1 ring-orange-400/30' : '' }}"
              @if($hasChildren) @click.prevent="openItem = !openItem" @endif
            >
              <i class="{{ $menu['icon'] ?? 'bi bi-dot' }} text-base opacity-90"></i>

              <div class="flex-1 min-w-0" x-show="open" x-transition>
                <div class="flex items-center justify-between">
                  <span class="truncate text-sm font-medium">{{ $menu['label'] }}</span>
                  @if(isset($menu['badge']))
                    <span class="ml-2 inline-flex items-center rounded-full bg-orange-500/20 px-2 py-0.5 text-[10px] font-semibold text-orange-300 ring-1 ring-orange-400/20">
                      {{ $menu['badge'] }}
                    </span>
                  @endif
                </div>
                @if(isset($menu['desc']))
                  <p class="truncate text-xs text-slate-400">{{ $menu['desc'] }}</p>
                @endif
              </div>

              @if($hasChildren)
                <svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-slate-400" :class="open ? '' : 'hidden'" viewBox="0 0 24 24" fill="currentColor">
                  <path :class="openItem ? 'rotate-180 transition' : 'transition'" d="M6.75 9l5.25 6 5.25-6"/>
                </svg>
              @endif
            </a>

            {{-- Children --}}
            @if($hasChildren)
              <div x-show="open && openItem" x-collapse x-cloak>
                <ul class="mt-1 space-y-1 pl-9 pr-2">
                  @foreach($menu['children'] as $child)
                    @php
                      $childRoute = $child['route'] ?? null;
                      $childExists = $childRoute ? \Illuminate\Support\Facades\Route::has($childRoute) : false;
                      $childActive = $childRoute ? request()->routeIs($childRoute.'*') : false;
                    @endphp
                    <li>
                      <a href="{{ $childRoute && $childExists ? route($childRoute) : '#' }}"
                         class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-white/5 transition
                                {{ $childActive ? 'bg-orange-500/10 ring-1 ring-orange-400/30' : '' }}">
                        <span class="h-1.5 w-1.5 rounded-full {{ $childActive ? 'bg-orange-400' : 'bg-slate-500' }}"></span>
                        <span class="truncate">{{ $child['label'] }}</span>
                      </a>
                    </li>
                  @endforeach
                </ul>
              </div>
            @endif
          </li>
        @endforeach
      </ul>
    </nav>

    {{-- Footer --}}
    <div class="mt-3 border-t border-white/10 px-3 py-3">
      {{-- mode penuh --}}
      <div class="flex items-center gap-2" x-show="open" x-transition>
        @auth
          @if (\Illuminate\Support\Facades\Route::has('logout'))
            <form method="POST" action="{{ route('logout') }}" class="flex-1">
              @csrf
              <button type="submit" class="w-full rounded-xl bg-white/5 px-3 py-2 text-sm hover:bg-white/10 transition">
                <i class="bi bi-box-arrow-right mr-1"></i> Logout
              </button>
            </form>
          @endif
        @else
          <a href="{{ route('login') }}" class="w-full text-center rounded-xl bg-white/5 px-3 py-2 text-sm hover:bg-white/10 transition">
            <i class="bi bi-box-arrow-in-right mr-1"></i> Login
          </a>
        @endauth

        @if(\Illuminate\Support\Facades\Route::has('settings.profile'))
          <a href="{{ route('settings.profile') }}"
             class="rounded-xl bg-white/5 px-3 py-2 text-sm hover:bg-white/10 transition">
            <i class="bi bi-gear"></i><span class="ml-2">Settings</span>
          </a>
        @endif
      </div>

      {{-- mode collapse (ikon saja) --}}
      <div class="flex items-center justify-center gap-2" x-show="!open" x-transition>
        @auth
          @if (\Illuminate\Support\Facades\Route::has('logout'))
            <form method="POST" action="{{ route('logout') }}">
              @csrf
              <button type="submit" class="p-2 rounded-lg hover:bg-white/10 transition" title="Logout">
                <i class="bi bi-box-arrow-right"></i>
              </button>
            </form>
          @endif
        @else
          <a href="{{ route('login') }}" class="p-2 rounded-lg hover:bg-white/10 transition" title="Login">
            <i class="bi bi-box-arrow-in-right"></i>
          </a>
        @endauth

        @if(\Illuminate\Support\Facades\Route::has('settings.profile'))
          <a href="{{ route('settings.profile') }}" class="p-2 rounded-lg hover:bg-white/10 transition" title="Settings">
            <i class="bi bi-gear"></i>
          </a>
        @endif
      </div>
    </div>
  </aside>
</div>

@push('styles')
<style>
  .custom-scroll::-webkit-scrollbar{ width:.55rem; }
  .custom-scroll::-webkit-scrollbar-track{ background: transparent; }
  .custom-scroll::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.35); border-radius: 9999px; }
  .custom-scroll:hover::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.6); }
</style>
@endpush