@php
    $authUser = auth()->guard('web')->user();
    $isUserHeader = $authUser && ! $authUser->hasAnyRole(['admin', 'super admin']);
    $userNavSection = $userNavSection ?? null;
@endphp

@include('partials.account-dropdown-styles')

@if($isUserHeader)
    <style>
        html.layout-navbar-fixed body.user-theme .user-global-topnav.layout-navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            transform: none !important;
            z-index: 1082;
        }

        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar,
        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-container,
        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page {
            transform: none !important;
            filter: none !important;
            perspective: none !important;
        }

        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page {
            padding-top: 72px !important;
        }

        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page::before {
            display: none !important;
        }

        body.user-theme .user-global-topnav {
            min-height: 72px;
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0 1.5rem;
            border-radius: 0;
            background: #fff !important;
            border: 0;
            border-bottom: 1px solid rgba(201, 142, 74, 0.12);
            box-shadow: 0 8px 22px rgba(31, 27, 23, 0.05);
        }

        body.user-theme .layout-page .user-global-topnav {
            margin-bottom: 0;
        }

        body.user-theme .subscriptions-shell .subscriptions-header {
            margin-bottom: 1rem;
            border-bottom: 0;
        }

        body.user-theme .subscriptions-shell .subscriptions-main {
            padding-top: 0.35rem;
        }

        body.user-theme .user-global-topnav .navbar-collapse {
            align-items: center;
        }

        body.user-theme .user-global-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0;
            margin-right: 1rem;
            text-decoration: none;
            flex-shrink: 0;
        }

        body.user-theme .user-global-brand img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            display: block;
        }

        body.user-theme .user-global-links {
            display: flex;
            align-items: center;
            gap: 0.2rem;
            margin: 0 auto;
        }

        body.user-theme .user-global-links .nav-link {
            padding: 0.55rem 0.75rem;
            color: #4b4853;
            font-size: 0.98rem;
            font-weight: 700;
            border-radius: 12px;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        body.user-theme .user-global-links .nav-link:hover,
        body.user-theme .user-global-links .nav-link:focus {
            color: var(--user-accent, #c98e4a) !important;
            background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.08);
        }

        body.user-theme .user-global-links .nav-link.is-active {
            color: #2f2b38 !important;
            background: rgba(47, 43, 56, 0.06);
        }

        body.user-theme .user-global-actions {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            margin-left: auto;
        }

        body.user-theme .user-global-coin {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #ffe08a 0%, #f3b31f 48%, #c98500 100%);
            color: #fff8dc;
            box-shadow:
                inset 0 0 0 4px rgba(255, 242, 196, 0.78),
                0 10px 18px rgba(201, 133, 0, 0.25);
            flex-shrink: 0;
            transform-origin: center;
            animation: user-global-coin-spin-pause 3s linear infinite;
        }

        @keyframes user-global-coin-spin-pause {
            0% {
                transform: rotate(0deg);
            }

            33.333% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        body.user-theme .user-global-cta {
            min-height: 46px;
            padding: 0 1.25rem;
            border: 1px solid var(--user-accent, #c98e4a);
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            background: linear-gradient(180deg, rgba(201, 142, 74, 0.94) 0%, var(--user-accent, #c98e4a) 100%);
            color: #fff !important;
            font-size: 1.05rem;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 12px 22px rgba(var(--user-accent-rgb, 201, 142, 74), 0.18);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        body.user-theme .user-global-cta:hover,
        body.user-theme .user-global-cta:focus {
            color: #fff !important;
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(var(--user-accent-rgb, 201, 142, 74), 0.24);
        }

        body.user-theme .user-global-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        body.user-theme .user-global-avatar .avatar img {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        body.user-theme .user-global-topnav .navbar-toggler {
            border-color: rgba(201, 142, 74, 0.2);
        }

        body.user-theme .user-global-topnav .layout-menu-toggle .nav-link {
            color: #4b4853;
        }

        body.user-theme .user-mobile-dock {
            display: none;
        }

        body.user-theme .user-mobile-dock-panel {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 78px minmax(0, 1fr) minmax(0, 1fr);
            align-items: end;
            gap: 0;
            min-height: 68px;
            padding:
                0.45rem
                calc(0.85rem + env(safe-area-inset-right, 0px))
                calc(0.4rem + env(safe-area-inset-bottom, 0px))
                calc(0.85rem + env(safe-area-inset-left, 0px));
            border: 1px solid rgba(228, 223, 218, 0.96);
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
            border-radius: 0;
            background: #fff;
            box-shadow: 0 -8px 24px rgba(31, 27, 23, 0.08);
            overflow: visible;
        }

        body.user-theme .user-mobile-dock-panel::before,
        body.user-theme .user-mobile-dock-panel::after {
            display: none;
        }

        body.user-theme .user-mobile-dock-panel::before {
            left: 0.9rem;
            transform: skewX(-22deg);
            transform-origin: right center;
        }

        body.user-theme .user-mobile-dock-panel::after {
            right: 0.9rem;
            transform: skewX(22deg);
            transform-origin: left center;
        }

        body.user-theme .user-mobile-dock-link {
            position: relative;
            z-index: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 0.28rem;
            padding: 0.35rem 0 0;
            color: #c2bcba;
            text-decoration: none;
            text-align: center;
            overflow: hidden;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        body.user-theme .user-mobile-dock-link:hover,
        body.user-theme .user-mobile-dock-link:focus {
            color: var(--user-accent, #c98e4a) !important;
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-link.is-active {
            color: var(--user-accent, #c98e4a);
        }

        body.user-theme .user-mobile-dock-icon {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            line-height: 1;
        }

        body.user-theme .user-mobile-dock-link.is-active .user-mobile-dock-icon {
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-label {
            font-size: 0.79rem;
            font-weight: 500;
            line-height: 1.1;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.user-theme .user-mobile-dock-center {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            justify-self: center;
            align-self: start;
            width: 78px;
            margin-top: -1.35rem;
            text-decoration: none;
            transition: transform 0.2s ease;
        }

        body.user-theme .user-mobile-dock-center::before {
            display: none;
        }

        body.user-theme .user-mobile-dock-center:hover,
        body.user-theme .user-mobile-dock-center:focus {
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-center.is-active .user-mobile-dock-fab {
            box-shadow: 0 18px 32px rgba(255, 93, 82, 0.42);
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-fab {
            width: 64px;
            height: 64px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 6px solid #fff;
            background: linear-gradient(180deg, #ff7b70 0%, #ff5d52 100%);
            color: #fff;
            box-shadow: 0 14px 24px rgba(255, 93, 82, 0.32);
        }

        body.user-theme .user-mobile-dock-fab i {
            font-size: 1.5rem;
            line-height: 1;
        }

        @media (max-width: 991.98px) {
            html,
            body.user-theme {
                height: 100%;
                min-height: 100%;
                overflow-x: hidden;
                overflow-y: hidden !important;
                overscroll-behavior-x: none;
                overscroll-behavior-y: none;
                touch-action: pan-y;
            }

            body.user-theme.user-mobile-free-scroll {
                overflow-y: auto !important;
            }

            body.user-theme .layout-wrapper.layout-content-navbar,
            body.user-theme .layout-wrapper.layout-content-navbar .layout-container,
            body.user-theme .layout-wrapper.layout-content-navbar .layout-page {
                height: 100vh !important;
                height: 100dvh !important;
                min-height: 100vh !important;
                min-height: 100dvh !important;
                overflow: hidden !important;
            }

            body.user-theme .layout-wrapper.layout-content-navbar .content-wrapper {
                flex: 1 1 auto;
                height: 100% !important;
                min-height: 0 !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                overscroll-behavior-y: contain;
                -webkit-overflow-scrolling: touch;
            }

            body.user-theme .layout-overlay,
            body.user-theme .drag-target {
                pointer-events: none !important;
            }

            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu .layout-overlay,
            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu .drag-target {
                display: none !important;
            }

            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu,
            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu .layout-container,
            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu .layout-page,
            body.user-theme .layout-wrapper.layout-content-navbar.layout-without-menu .content-wrapper {
                height: auto !important;
                min-height: 100% !important;
                overflow: visible !important;
            }

            html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page {
                padding-top: 0 !important;
            }

            body.user-theme .user-global-topnav {
                display: none !important;
            }

            body.user-theme .layout-page .content-wrapper {
                padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
                scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
            }

            body.user-theme .subscriptions-shell .subscriptions-main {
                padding-bottom: 5px !important;
                scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
            }

            body.user-theme .subscriptions-shell .subscriptions-footer {
                padding-bottom: calc(1rem + 76px + env(safe-area-inset-bottom, 0px));
            }

            body.user-theme .container-p-y,
            body.user-theme .container-xxl {
                padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
            }

            body.user-theme .floating-chat-btn {
                right: calc(12px + env(safe-area-inset-right, 0px));
                bottom: calc(92px + env(safe-area-inset-bottom, 0px));
                width: 54px;
                height: 54px;
                border-color: rgba(255, 146, 55, 0.85);
                background: linear-gradient(180deg, #ffac62 0%, #ff892f 100%) !important;
                box-shadow: 0 14px 24px rgba(255, 137, 47, 0.26);
            }

            body.user-theme .user-mobile-dock {
                display: block !important;
                position: static !important;
                inset: auto !important;
                width: auto;
                max-width: none;
                padding: 0;
                pointer-events: none;
            }

            body.user-theme .user-mobile-dock-panel {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100vw;
                max-width: none;
                margin: 0;
                z-index: 1081;
                pointer-events: auto;
            }
        }

        @media (max-width: 575.98px) {
            body.user-theme .user-global-topnav {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            body.user-theme .user-mobile-dock-panel {
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px minmax(0, 1fr) minmax(0, 1fr);
                min-height: 64px;
                padding-top: 0.35rem;
                padding-left: calc(0.65rem + env(safe-area-inset-left, 0px));
                padding-right: calc(0.65rem + env(safe-area-inset-right, 0px));
            }

            body.user-theme .user-mobile-dock-center {
                width: 74px;
                margin-top: -1.2rem;
            }

            body.user-theme .user-mobile-dock-center::before {
                top: 1.7rem;
                width: 116px;
                height: 2.45rem;
            }

            body.user-theme .user-mobile-dock-fab {
                width: 60px;
                height: 60px;
            }

            body.user-theme .user-mobile-dock-label {
                font-size: 0.68rem;
            }

            body.user-theme .floating-chat-btn {
                right: calc(10px + env(safe-area-inset-right, 0px));
                bottom: calc(88px + env(safe-area-inset-bottom, 0px));
                width: 50px;
                height: 50px;
            }
        }
    </style>

    @php
        $displayBalance = number_format((float) ($authUser->balance ?? 0), 2);
        $displayCurrency = optional($authUser->wallet)->currency ?? 'USD';
        $currencySymbol = match (strtoupper((string) $displayCurrency)) {
            'EUR' => '€',
            'GBP' => '£',
            default => '$',
        };
        $avatar = $authUser->avatar ?: 'assets/img/avatars/user_avatar.webp';
    @endphp

    <nav class="layout-navbar navbar navbar-expand-lg align-items-center bg-navbar-theme user-global-topnav"
        id="layout-navbar">
        @if(($showSidebar ?? true))
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-2 me-xl-0 d-xl-none">
                <a class="nav-item nav-link px-0 me-3" href="javascript:void(0)">
                    <i class="icon-base ti tabler-menu-2 icon-md"></i>
                </a>
            </div>
        @endif

        <a class="navbar-brand user-global-brand" href="{{ route('subscriptions.index') }}">
            <img src="{{ asset('assets/img/blacklg.jpeg') }}" alt="BlackSplit logo">
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#userGlobalNavbar"
            aria-controls="userGlobalNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="userGlobalNavbar">
            <ul class="navbar-nav me-auto user-global-links">
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'home' || ($userNavSection === null && (request()->routeIs('subscriptions.index') || request()->routeIs('subscriptions.show') || request()->routeIs('subscriptions.create'))) ? 'is-active' : '' }}"
                        href="{{ route('subscriptions.index') }}">
                        Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'my-subscriptions' || ($userNavSection === null && request()->routeIs('dashboard.my-subscriptions')) ? 'is-active' : '' }}"
                        href="{{ route('dashboard.my-subscriptions') }}">
                        My Subscriptions
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'chat' || ($userNavSection === null && request()->routeIs('messages.index') && request('tab', 'messages') !== 'notifications') ? 'is-active' : '' }}"
                        href="{{ route('messages.index', ['tab' => 'messages']) }}">
                        Chat
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'notice' || ($userNavSection === null && request()->routeIs('messages.index') && request('tab') === 'notifications') ? 'is-active' : '' }}"
                        href="{{ route('messages.index', ['tab' => 'notifications']) }}">
                        Notice
                    </a>
                </li>
                {{--
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'my-listings' || ($userNavSection === null && request()->routeIs('dashboard.my-shared-subscriptions')) ? 'is-active' : '' }}"
                        href="{{ route('dashboard.my-shared-subscriptions') }}">
                        My Listings
                    </a>
                </li>
                --}}
            </ul>

            <div class="user-global-actions">
                <span class="user-global-coin" aria-hidden="true">
                    <i class="ti tabler-currency-dollar"></i>
                </span>

                <button type="button" class="global-music-toggle js-global-music-toggle" aria-label="Play music" title="Play music">
                    <i class="fa-solid fa-music music-play-icon"></i>
                    <i class="fa-solid fa-pause music-pause-icon"></i>
                </button>

                <a href="{{ route('subscriptions.create') }}" class="user-global-cta">
                    <i class="ti tabler-plus"></i>
                    <span>Split a subscription</span>
                </a>

                <div class="dropdown dropdown-user">
                    <a class="user-global-avatar dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                        <div class="avatar avatar-online">
                            <img src="{{ asset($avatar) }}" alt="{{ $authUser->name }}" class="rounded-circle" />
                        </div>
                    </a>
                    @include('partials.account-dropdown-menu')
                </div>
            </div>
        </div>
    </nav>

    <nav class="user-mobile-dock d-lg-none" aria-label="Mobile navigation">
        <div class="user-mobile-dock-panel">
            <a href="{{ route('subscriptions.index') }}" class="user-mobile-dock-link {{ $userNavSection === 'home' || ($userNavSection === null && (request()->routeIs('subscriptions.index') || request()->routeIs('subscriptions.show'))) ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-solid fa-house"></i>
                </span>
                <span class="user-mobile-dock-label">Home</span>
            </a>

            <a href="{{ route('dashboard.my-subscriptions') }}" class="user-mobile-dock-link {{ $userNavSection === 'my-subscriptions' || request()->routeIs('dashboard.my-subscriptions') || request()->routeIs('subscriptions.manage') || request()->routeIs('dashboard.subscription-members.*') || request()->routeIs('refunds.owner') || request()->routeIs('refunds.co-subscribers') ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-solid fa-border-all"></i>
                </span>
                <span class="user-mobile-dock-label">Subscription</span>
            </a>

            <a href="{{ route('subscriptions.create') }}" class="user-mobile-dock-center {{ request()->routeIs('subscriptions.create') ? 'is-active' : '' }}" aria-label="Split a subscription" title="Split a subscription">
                <span class="user-mobile-dock-fab">
                    <i class="fa-solid fa-plus"></i>
                </span>
            </a>

            <a href="{{ route('messages.index', ['tab' => 'messages']) }}" class="user-mobile-dock-link {{ request()->routeIs('messages.index') || in_array($userNavSection, ['chat', 'notice'], true) ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-regular fa-comment-dots"></i>
                </span>
                <span class="user-mobile-dock-label">Message</span>
            </a>

            <a href="{{ route('profile') }}" class="user-mobile-dock-link {{ request()->routeIs('profile') || request()->routeIs('change_password') ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-regular fa-user"></i>
                </span>
                <span class="user-mobile-dock-label">Profile</span>
            </a>
        </div>
    </nav>
@else
    <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
        id="layout-navbar">
        @php
            $displayBalance = number_format((float) ($authUser->balance ?? 0), 2);
            $displayCurrency = optional($authUser->wallet)->currency ?? 'USD';
            $currencySymbol = match (strtoupper((string) $displayCurrency)) {
                'EUR' => '€',
                'GBP' => '£',
                default => '$',
            };
        @endphp

        @if(($showSidebar ?? true))
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                    <i class="icon-base ti tabler-menu-2 icon-md"></i>
                </a>
            </div>
        @endif

        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
            <ul class="navbar-nav flex-row align-items-center ms-auto">
                @php
                    $avatar = auth()->guard('web')->user()->avatar;
                    if (empty($avatar)) {
                        $avatar = 'assets/img/avatars/user_avatar.webp';
                    }
                @endphp
                <li class="nav-item navbar-dropdown dropdown-user dropdown">
                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                        <div class="avatar avatar-online">
                            <img src="{{ asset($avatar) }}" alt class="h-auto rounded-circle" />
                        </div>
                    </a>
                    @include('partials.account-dropdown-menu')
                </li>
            </ul>
        </div>
    </nav>
@endif

@include('partials.account-dropdown-script')