{{-- premium-sidebar.blade.php --}}
@once
    {{-- Alpine (only include once site-wide) --}}
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <style>
        [x-cloak] {
            display: none !important
        }
    </style>
@endonce

<div x-data="{ open: false, walletOpen: {{ json_encode(request()->routeIs('user.wallet.*')) }} }"
    x-init="$nextTick(() => { if (window.innerWidth >= 968) open = true })" class="relative" x-cloak>
    <!-- Mobile Toggle -->
    <button @click="open = !open" class="md:hidden fixed top-4 left-4 z-[60] flex items-center gap-3 px-4 py-2 rounded-2xl
               backdrop-blur-md bg-gradient-to-r from-white/6 to-white/3 border border-white/10
               shadow-lg text-white hover:scale-[1.02] transition transform" aria-expanded="false"
        aria-controls="premium-sidebar">
        {{-- burger --}}
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
    </button>

    <!-- Sidebar -->
    <aside id="premium-sidebar"
        class="fixed inset-y-0 left-0 z-50 w-72 md:w-64 px-2 md:static md:translate-x-0 transform transition-transform duration-300 ease-in-out pt-16"
        :class="open ? 'translate-x-0' : '-translate-x-full md:translate-x-0'" @keydown.window.escape="open = false"
        @click.outside="if ($event.target.closest('#premium-sidebar') === null) { walletOpen = {{ json_encode(request()->routeIs('user.wallet.*')) }}; open = (window.innerWidth >= 768); }"
        aria-hidden="false" style="position:fixed">
        {{-- Sidebar background: matte with gold gradient accent on the right --}}
        <div class="h-full flex flex-col  backdrop-blur-sm 
                    border-r-2 border-border-primary border-opacity-20 shadow-xl overflow-hidden">
            {{-- Top gradient bar (gold accent) --}}

            <div class="p-5 flex flex-col flex-1">
                {{-- Logo / title --}}
                <div class="flex items-center gap-3 mb-6">
                    <div class="h-11 w-11 rounded-xl flex items-center justify-center
                                bg-gradient-to-br from-slate-800 to-slate-700 shadow-inner">
                        {{-- small badge icon (svg) --}}
                        <img src="https://public.nftstatic.com/static/nft/res/nft-cex/S3/1695716378565_p7gg128kqzin6mp0ezo3tlwjbbmqblp9.png"
                            class="h-11 w-11 rounded-xl" />
                    </div>

                    <div>
                        <div class="text-white font-semibold text-lg">{{ Auth::user()->username }}</div>
                        <div class="text-xs text-gray-400">{{ ucfirst(Auth::user()->type) }}</div>
                    </div>
                </div>

                {{-- nav --}}
                <nav class="flex flex-col gap-2">
                    {{-- Dashboard --}}
                    <a href="{{ route('user.dashboard') }}"
                        class="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-150
                              {{ request()->routeIs('user.dashboard') ? 'bg-gradient-to-r from-amber-500/20 to-yellowBase/10 text-white shadow-md border border-yellowBase/10' : 'text-gray-300 hover:bg-white/5 hover:text-white' }}">
                        {{-- dashboard svg --}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-500" fill="currentColor"
                            viewBox="0 0 16 16">
                            <path
                                d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5" />
                        </svg>
                        <span class="font-medium">Dashboard</span>
                    </a>

                    {{-- Wallet parent (glass dropdown) --}}
                    <div class="relative">
                        <button @click="walletOpen = !walletOpen" :aria-expanded="walletOpen"
                            class="nav-link w-full flex items-center justify-between px-3 py-2 rounded-lg transition-all duration-150
                                   {{ request()->routeIs('user.wallet.*') ? 'bg-gradient-to-r from-amber-500/20 to-beige/10 text-white shadow-md border border-beige/10' : 'text-gray-300 hover:bg-beige/5 hover:text-black' }}">
                            <div class="flex items-center gap-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#707A8A"
                                    viewBox="0 0 24 24" cursor="auto" aria-label="" class="" style="cursor: inherit;">
                                    <path fill-rule="evenodd"
                                        d="M4.257 18.328A9.956 9.956 0 0 1 2 12c0-4.477 2.943-8.267 7-9.542a10 10 0 0 1 2-.408v6.076a4.002 4.002 0 0 0-2.446 5.906zm.376-3.204 1.57-1.57A6.004 6.004 0 0 1 9 6.802V4.58a8.004 8.004 0 0 0-4.367 10.543m5.335.322-4.297 4.296A9.958 9.958 0 0 0 12 22c4.478 0 8.268-2.942 9.542-7 .202-.64.34-1.31.409-2h-6.077a4.002 4.002 0 0 1-5.906 2.447m7.229-.447a5.995 5.995 0 0 1-6.75 2.797l-1.572 1.57A8.004 8.004 0 0 0 19.42 15zm-1.323-4h6.077a10 10 0 0 0-.409-2A10.02 10.02 0 0 0 15 2.457a10 10 0 0 0-2-.408v6.076A4.01 4.01 0 0 1 15.874 11M15 6.802A6 6 0 0 1 17.197 9h2.222A8.03 8.03 0 0 0 15 4.581z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <span class="font-medium">Wallet</span>
                            </div>

                            <svg :class="walletOpen ? 'rotate-180' : ''"
                                class="w-4 h-4 text-gray-300 transition-transform" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor">
                                <path stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    d="M6 9l6 6 6-6" />
                            </svg>
                        </button>

                        {{-- Submenu: glass card floating on the matte panel --}}
                        <div x-show="walletOpen" x-transition.opacity.origin.top.duration.200
                            class="mt-4 ml-2 p-3 rounded-lg bg-white/6 backdrop-blur-md border border-white/6 shadow-lg">
                            <a href="{{ route('user.wallet.index') }}"
                                class="flex px-3  items-center gap-4 py-2 rounded-md text-sm transition-colors
                                      {{ request()->routeIs('user.wallet.index') ? 'text-beige font-semibold' : 'text-white hover:text-beige' }}">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#707A8A"
                                    viewBox="0 0 24 24" cursor="auto" aria-label="" class="" style="cursor: inherit;">
                                    <path fill-rule="evenodd"
                                        d="M4.257 18.328A9.956 9.956 0 0 1 2 12c0-4.477 2.943-8.267 7-9.542a10 10 0 0 1 2-.408v6.076a4.002 4.002 0 0 0-2.446 5.906zm.376-3.204 1.57-1.57A6.004 6.004 0 0 1 9 6.802V4.58a8.004 8.004 0 0 0-4.367 10.543m5.335.322-4.297 4.296A9.958 9.958 0 0 0 12 22c4.478 0 8.268-2.942 9.542-7 .202-.64.34-1.31.409-2h-6.077a4.002 4.002 0 0 1-5.906 2.447m7.229-.447a5.995 5.995 0 0 1-6.75 2.797l-1.572 1.57A8.004 8.004 0 0 0 19.42 15zm-1.323-4h6.077a10 10 0 0 0-.409-2A10.02 10.02 0 0 0 15 2.457a10 10 0 0 0-2-.408v6.076A4.01 4.01 0 0 1 15.874 11M15 6.802A6 6 0 0 1 17.197 9h2.222A8.03 8.03 0 0 0 15 4.581z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                Assets
                            </a>
                            <a href="{{ route('user.wallet.index', ['send']) }}"
                                class="flex items-center gap-4 px-3 py-2 rounded-md text-sm transition-colors
                                      {{ request()->routeIs('user.wallet.send.index') ? 'text-beige font-semibold' : 'text-white hover:text-beige' }}">
                                <svg class="bn-svg h-xl w-xl flex-shrink-0 text-IconNormal" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M10.5 15.963h3V8.987l.312-.003 4.176-.01L12.013 3 6.038 8.975l4.159.04.303-.002v6.95zM6.5 14h-3v7h17v-7h-3v4h-11v-4z"
                                        fill="currentColor"></path>
                                </svg>
                                Send
                            </a>

                            <a href="{{ route('user.wallet.index', ['receive']) }}"
                                class="flex px-3  items-center gap-4 py-2 rounded-md text-sm transition-colors
                                      {{ request()->routeIs('user.wallet.index') ? 'text-beige font-semibold' : 'text-white hover:text-beige' }}">
                                <svg class="bn-svg h-xl w-xl flex-shrink-0 text-IconNormal" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M13.5 3h-3v6.95l-.303-.003-4.159.04 5.975 5.976 5.975-5.975-4.176-.01-.312-.002V3zm-10 11h3v4h11v-4h3v7h-17v-7z"
                                        fill="currentColor"></path>
                                </svg>
                                Receive
                            </a>
                            <a href="{{ route('user.wallet.swap.index') }}"
                                class="flex px-3  items-center gap-4 py-2 rounded-md text-sm transition-colors
                                      {{ request()->routeIs('user.wallet.swap.index') ? 'text-beige font-semibold' : 'text-white hover:text-beige' }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#707A8A"
                                    viewBox="0 0 24 24" cursor="auto" aria-label="" style="cursor: inherit;"
                                    class="bn-svg">
                                    <path
                                        d="M5.315 7.211a1 1 0 0 0 0 1.46l3.136 2.933a1 1 0 1 0 1.367-1.46L8.532 8.94h7.467a1 1 0 0 1 1 1v1.074a1 1 0 0 0 2 0V9.94a3 3 0 0 0-3-3H8.53l1.29-1.21A1 1 0 1 0 8.45 4.273z">
                                    </path>
                                    <path
                                        d="M18.683 16.788a1 1 0 0 0 0-1.46l-3.136-2.933a1 1 0 1 0-1.366 1.46l1.285 1.203H8a1 1 0 0 1-1-1v-1.073a1 1 0 1 0-2 0v1.073a3 3 0 0 0 3 3h7.471l-1.29 1.21a1 1 0 0 0 1.368 1.459z">
                                    </path>
                                </svg>
                                Swap
                            </a>

                            


                        </div>
                    </div>

                    {{-- extra items if needed (Activity / Settings etc.) --}}
                    <a href="{{ route('user.wallet.history') }}"
                        class="nav-link flex items-center gap-3 px-3 py-2 rounded-lg text-white hover:bg-white/5 hover:text-white transition">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#707A8A"
                            class="bi bi-clock-history" viewBox="0 0 16 16">
                            <path
                                d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z" />
                            <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z" />
                            <path
                                d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5" />
                        </svg>
                        <span class="font-medium">Activity</span>
                    </a>
                </nav>

                {{-- spacer --}}
                <div class="flex-1"></div>

                {{-- bottom area: balance card (glass) + actions --}}
                <div class="mt-4">
                    <div
                        class="p-3 rounded-xl bg-gradient-to-r from-white/4 to-white/3 border border-white/6 backdrop-blur-sm">
                        <div class="flex items-center justify-between">
                            <div>
                                <div class="text-xs text-gray-300">Total Balance</div>
                                <div class="text-lg font-semibold text-white">
                                    {{ fiat_format(get_total_balance()['fiat']) }}
                                    {{ Auth::user()->userCurrency }}
                                </div>
                            </div>

                            <a
                                class="px-3 py-1 rounded-lg bg-beige/10 text-white text-sm hover:bg-beige/20 transition">
                                Help
                            </a>
                        </div>
                    </div>

                    {{-- footer --}}
                    <div class="mt-4 text-center text-xs text-gray-400 opacity-80">
                        © {{ date('Y') }} {{ system_settings('site_name') }}
                    </div>
                </div>
            </div>
        </div>
    </aside>
</div>