{{-- components/navbar-customer.blade.php — Premium Glass Navbar --}}
<nav class="navbar navbar-sparkwash navbar-expand-lg" id="customerNavbar">
<div class="container">

    {{-- Brand --}}
    <a class="navbar-brand" href="{{ route('customer.dashboard') }}">
        <div class="brand-icon"><i class="fas fa-soap"></i></div>
        Spark<span>Wash</span>
    </a>

    {{-- Mobile: right side buttons + toggler --}}
    <div class="d-flex d-lg-none align-items-center gap-2 ms-auto me-2">
        <a href="{{ route('customer.booking.create') }}"
           class="btn btn-primary btn-sm px-3 py-1"
           style="font-size:0.78rem;border-radius:50rem;">
            <i class="fas fa-plus"></i>
        </a>
        <button class="navbar-toggler border-0 shadow-none p-1" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarMenu"
                aria-controls="navbarMenu" aria-expanded="false" aria-label="Menu"
                style="color:var(--sw-primary);font-size:1.1rem;">
            <i class="fas fa-bars"></i>
        </button>
    </div>

    {{-- Nav links --}}
    <div class="collapse navbar-collapse" id="navbarMenu">
        <ul class="navbar-nav navbar-nav-pills mx-auto gap-1">
            @php
            $navLinks = [
                ['route'=>'customer.dashboard',   'label'=>'Dashboard',  'icon'=>'fa-gauge-high'],
                ['route'=>'customer.booking.*',    'label'=>'Booking',    'icon'=>'fa-calendar-plus',   'href'=>route('customer.booking.index')],
                ['route'=>'customer.payment.*',    'label'=>'Pembayaran', 'icon'=>'fa-credit-card',     'href'=>route('customer.payment.list')],
                ['route'=>'customer.queue.*',      'label'=>'Antrian',    'icon'=>'fa-list-check',      'href'=>route('customer.queue.index')],
                ['route'=>'customer.history.*',    'label'=>'Riwayat',    'icon'=>'fa-clock-rotate-left','href'=>route('customer.history.index')],
            ];
            @endphp
            @foreach($navLinks as $nl)
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs($nl['route']) ? 'active' : '' }}"
                   href="{{ isset($nl['href']) ? $nl['href'] : route(rtrim($nl['route'],'.*')) }}">
                    <i class="fas {{ $nl['icon'] }}"></i>
                    {{ $nl['label'] }}
                </a>
            </li>
            @endforeach
        </ul>

        {{-- Right: CTA + Profile --}}
        <div class="d-flex align-items-center gap-2 mt-3 mt-lg-0">

            {{-- Quick Booking --}}
            <a href="{{ route('customer.booking.create') }}"
               class="btn btn-primary btn-sm px-4 d-none d-lg-flex align-items-center gap-1"
               style="border-radius:50rem;font-size:0.825rem;">
                <i class="fas fa-plus"></i> Booking
            </a>

            {{-- Profile dropdown --}}
            <div class="dropdown">
                <button class="sw-profile-btn dropdown-toggle"
                        type="button" id="profileDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                    {{-- Avatar --}}
                    <div class="sw-profile-avatar">
                        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                    </div>
                    <span class="sw-profile-name d-none d-md-inline">
                        {{ Str::words(auth()->user()->name, 1, '') }}
                    </span>
                    <i class="fas fa-chevron-down" style="font-size:0.6rem;color:var(--sw-gray-400);"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sw-md" aria-labelledby="profileDropdown"
                    style="min-width:220px;">
                    {{-- User info --}}
                    <li>
                        <div class="px-3 py-2" style="border-bottom:1px solid var(--sw-gray-100);">
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:38px;height:38px;background:var(--sw-gradient);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.9rem;flex-shrink:0;">
                                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                                </div>
                                <div>
                                    <div class="fw-700" style="font-size:0.85rem;color:var(--sw-dark);">{{ auth()->user()->name }}</div>
                                    <div style="font-size:0.72rem;color:var(--sw-gray-400);">{{ auth()->user()->email }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('customer.dashboard') }}">
                            <i class="fas fa-gauge-high me-2" style="color:var(--sw-primary);"></i>Dashboard
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('customer.profile.edit') }}">
                            <i class="fas fa-user-pen me-2" style="color:var(--sw-primary);"></i>Edit Profil
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('customer.history.index') }}">
                            <i class="fas fa-clock-rotate-left me-2" style="color:var(--sw-primary);"></i>Riwayat Booking
                        </a>
                    </li>
                    <li><hr class="dropdown-divider my-1"></li>
                    <li>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger fw-600">
                                <i class="fas fa-right-from-bracket me-2"></i>Keluar
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{{-- Shimmer strip --}}
<div class="bubble-strip" aria-hidden="true"></div>
</nav>