<nav x-data="{ open: false }" class="relative z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-20 items-center justify-between">
            <div class="flex items-center gap-6">
                <a href="{{ route('dashboard') }}" class="flex items-center gap-3">
                    <div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-cyan-400/15 text-cyan-200 ring-1 ring-cyan-400/20">
                        <x-application-logo class="h-7 w-7 fill-current" />
                    </div>
                    <div>
                        <p class="text-sm font-semibold text-white">{{ config('app.name', 'Laravel') }}</p>
                        <p class="text-xs uppercase tracking-[0.2em] text-slate-400">{{ Auth::user()->is_admin ? 'Admin Panel' : 'Client Area' }}</p>
                    </div>
                </a>

                <div class="hidden items-center gap-2 sm:flex">
                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard') || request()->routeIs('services.show')">
                        {{ __('Produk') }}
                    </x-nav-link>

                    @if (! Auth::user()->is_admin)
                        <x-nav-link :href="route('orders.history')" :active="request()->routeIs('orders.history')">
                            {{ __('Riwayat') }}
                        </x-nav-link>
                    @endif

                    @if (Auth::user()->is_admin)
                        <x-nav-link :href="route('admin.products.index')" :active="request()->routeIs('admin.products.*')">
                            {{ __('Upload Produk') }}
                        </x-nav-link>

                        <x-nav-link :href="route('admin.clients.create')" :active="request()->routeIs('admin.clients.*')">
                            {{ __('Tambah Client') }}
                        </x-nav-link>
                    @endif
                </div>
            </div>

            <div class="hidden items-center gap-4 sm:flex">
                <div class="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-right">
                    <p class="text-sm font-medium text-white">{{ Auth::user()->name }}</p>
                    <p class="text-xs text-slate-400">{{ Auth::user()->email }}</p>
                </div>

                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10 focus:outline-none">
                            Menu
                            <svg class="ms-2 h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <x-dropdown-link :href="route('profile.edit')">
                            {{ __('Profile') }}
                        </x-dropdown-link>

                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:focus:bg-gray-800">
                                {{ __('Log Out') }}
                            </button>
                        </form>
                    </x-slot>
                </x-dropdown>
            </div>

            <div class="flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center rounded-2xl border border-white/10 bg-white/5 p-3 text-slate-300 transition hover:bg-white/10 focus:outline-none">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div :class="{'block': open, 'hidden': ! open}" class="hidden border-t border-white/10 bg-slate-950/90 sm:hidden">
        <div class="space-y-1 px-4 pb-4 pt-3">
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard') || request()->routeIs('services.show')">
                {{ __('Produk') }}
            </x-responsive-nav-link>

            @if (! Auth::user()->is_admin)
                <x-responsive-nav-link :href="route('orders.history')" :active="request()->routeIs('orders.history')">
                    {{ __('Riwayat') }}
                </x-responsive-nav-link>
            @endif

            @if (Auth::user()->is_admin)
                <x-responsive-nav-link :href="route('admin.products.index')" :active="request()->routeIs('admin.products.*')">
                    {{ __('Upload Produk') }}
                </x-responsive-nav-link>

                <x-responsive-nav-link :href="route('admin.clients.create')" :active="request()->routeIs('admin.clients.*')">
                    {{ __('Tambah Client') }}
                </x-responsive-nav-link>
            @endif
        </div>

        <div class="border-t border-white/10 px-4 py-4">
            <div class="mb-3">
                <div class="text-base font-medium text-white">{{ Auth::user()->name }}</div>
                <div class="text-sm text-slate-400">{{ Auth::user()->email }}</div>
            </div>

            <div class="space-y-1">
                <x-responsive-nav-link :href="route('profile.edit')">
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="block w-full rounded-2xl border border-transparent px-4 py-3 text-start text-base font-medium text-slate-300 transition duration-150 ease-in-out hover:border-white/10 hover:bg-white/5 hover:text-white">
                        {{ __('Log Out') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>
