<!doctype html>
<html class="loading dark-layout" lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-layout="dark-layout"
      data-textdirection="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="theme-color" content="#080B12">
    <title>@yield('title') | {{ brand_name() }}</title>
    @include('partials.portal-theme-script')

    <link rel="icon" href="{{ site_setting('favicon_path') ? Storage::url(site_setting('favicon_path')) : asset('app-assets/images/ico/favicon.png') }}" type="image/x-icon">
    <link rel="manifest" href="{{ asset('site.webmanifest') }}">
    <link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/extensions/toastr.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/fonts/font-awesome/css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/feather-icons/feather-icons.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/bootstrap-extended.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/colors.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/components.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/themes/dark-layout.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
    @include('partials.theme-style')
    @stack('css')
</head>

<body class="user-sidebar-layout user-portal-v2">
<a class="user-skip-link" href="#userMainContent">Skip to main content</a>
@php
    $currentUser = auth()->user();
    $balanceMode = $currentUser->balanceDisplayMode();
    $currentLevel = max(1, (int) floor($currentUser->total_points / 1000) + 1);
    $nextLevel = $currentLevel + 1;
    $levelProgress = min(100, (int) (($currentUser->total_points % 1000) / 10));
@endphp
<div class="user-shell">
    <aside class="user-side-nav" id="userSideNav" aria-label="User navigation">
        <button class="user-side-nav-close" type="button" id="userSidebarClose" aria-label="Close navigation">
            <i data-feather="x" aria-hidden="true"></i>
        </button>
        <div class="user-side-tabs" aria-label="Dashboard sections">
            <a class="{{ !Route::is('user.shop*', 'user.leaderboard', 'user.referrals') ? 'active' : '' }}" href="{{ route('user.home') }}"><i data-feather="zap" aria-hidden="true"></i><span>Earn</span></a>
            <a class="{{ Route::is('user.shop*', 'user.leaderboard', 'user.referrals') ? 'active' : '' }}" href="{{ route('user.shop') }}"><i data-feather="gift" aria-hidden="true"></i><span>Rewards</span></a>
        </div>

        <nav class="user-side-menu">
        <div class="user-nav-group" aria-label="Earn">
            <span class="user-nav-label">Earn</span>
            <a class="user-nav-link {{ Route::is('user.home') ? 'active' : '' }}" href="{{ route('user.home') }}" @if(Route::is('user.home')) aria-current="page" @endif>
                <i data-feather="home" aria-hidden="true"></i><span>Home</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.earn*') ? 'active' : '' }}" href="{{ route('user.earn') }}" @if(Route::is('user.earn*')) aria-current="page" @endif>
                <i data-feather="database" aria-hidden="true"></i><span>Earn</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.earn*') && request('type') === 'surveys' ? 'active' : '' }}" href="{{ route('user.earn') }}?type=surveys" @if(Route::is('user.earn*') && request('type') === 'surveys') aria-current="page" @endif>
                <i data-feather="clipboard" aria-hidden="true"></i><span>Surveys</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.history') && !request()->boolean('settings') ? 'active' : '' }}" href="{{ route('user.history') }}" @if(Route::is('user.history') && !request()->boolean('settings')) aria-current="page" @endif>
                <i data-feather="check-square" aria-hidden="true"></i><span>My Activity</span>
            </a>
        </div>

        <div class="user-nav-group" aria-label="Rewards">
            <span class="user-nav-label">Rewards</span>
            <a class="user-nav-link {{ Route::is('user.shop*') ? 'active' : '' }}" href="{{ route('user.shop') }}" @if(Route::is('user.shop*')) aria-current="page" @endif>
                <i data-feather="credit-card" aria-hidden="true"></i><span>Cashout</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.leaderboard') ? 'active' : '' }}" href="{{ route('user.leaderboard') }}" @if(Route::is('user.leaderboard')) aria-current="page" @endif>
                <i data-feather="award" aria-hidden="true"></i><span>Leaderboard</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.referrals') ? 'active' : '' }}" href="{{ route('user.referrals') }}" @if(Route::is('user.referrals')) aria-current="page" @endif>
                <i data-feather="users" aria-hidden="true"></i><span>Affiliates</span>
            </a>
        </div>

        <div class="user-nav-group" aria-label="Account">
            <span class="user-nav-label">Account</span>
            <a class="user-nav-link {{ Route::is('user.history') && request()->boolean('settings') ? 'active' : '' }}" href="{{ route('user.history', ['settings' => 1]) }}" @if(Route::is('user.history') && request()->boolean('settings')) aria-current="page" @endif>
                <i data-feather="user" aria-hidden="true"></i><span>Profile</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.transactions') ? 'active' : '' }}" href="{{ route('user.transactions') }}" @if(Route::is('user.transactions')) aria-current="page" @endif>
                <i data-feather="list" aria-hidden="true"></i><span>Transactions</span>
            </a>
            <a class="user-nav-link {{ Route::is('user.tickets*') ? 'active' : '' }}" href="{{ route('user.tickets') }}" @if(Route::is('user.tickets*')) aria-current="page" @endif>
                <i data-feather="headphones" aria-hidden="true"></i><span>Support</span>
            </a>
        @if(auth()->user()->isStaff())
            <a class="user-nav-link" href="{{ route(auth()->user()->adminEntryRoute()) }}">
                <i data-feather="shield" aria-hidden="true"></i><span>Admin</span>
            </a>
        @endif
        </div>
        </nav>
        <div class="user-sidebar-theme"><span>Appearance</span>@include('partials.portal-theme-toggle')</div>
    </aside>
    <div class="user-sidebar-overlay" id="userSidebarOverlay"></div>

    <header class="user-topbar">
        <div class="user-topbar-main">
            <div class="user-topbar-brand">
                <button class="user-menu-toggle" type="button" id="userSidebarToggle" aria-label="Toggle navigation" aria-controls="userSideNav" aria-expanded="false">
                    <i data-feather="menu" aria-hidden="true"></i>
                </button>
                <a class="loot-brand" href="{{ route('user.home') }}">
                    @if(brand_logo())
                        <img src="{{ Storage::url(brand_logo()) }}" alt="{{ brand_name() }}">
                    @else
                        <span class="loot-brand-mark">{{ brand_mark() }}</span>{{ brand_name() }}
                    @endif
                </a>
            </div>
            <form class="user-topbar-balance" action="{{ route('user.settings.update') }}" method="POST">
                @csrf
                <input type="hidden" name="balance_display" value="{{ $balanceMode === 'usd' ? 'coins' : 'usd' }}">
                <button type="submit" class="loot-balance-button" title="Available balance · switch to {{ $balanceMode === 'usd' ? 'coins' : 'USD' }}">
                    <small>Available balance</small>
                    <span>{{ $currentUser->formattedBalance($balanceMode) }}</span>
                    <em>{{ $balanceMode === 'usd' ? 'USD' : 'Coins' }}</em>
                </button>
            </form>
            <div class="user-live-strip is-auto-slide flex-grow-1" id="userLiveStrip" aria-label="Recent member earnings and withdrawals">
                @forelse($communityActivities as $activityProfile)
                    @php
                        $activity = $activityProfile['lead'];
                        $isPrivateActivity = $activityProfile['is_private'];
                    @endphp
                    <button class="user-live-pill" type="button" data-bs-toggle="modal" data-bs-target="#activityProfileModal"
                            data-user="{{ $activityProfile['username'] }}"
                            data-avatar="{{ $activityProfile['avatar'] }}"
                            data-private="{{ $isPrivateActivity ? '1' : '0' }}"
                            data-joined="{{ $activityProfile['joined'] }}"
                            data-completed="{{ number_format($activityProfile['completed_offers']) }}"
                            data-total-usd="{{ $activityProfile['total_usd'] }}"
                            data-total-coins="{{ number_format($activityProfile['total_points']) }} coins"
                            data-time="{{ $activityProfile['latest_time'] }}"
                            data-activities="{{ json_encode($activityProfile['recent'], JSON_UNESCAPED_SLASHES | JSON_INVALID_UTF8_SUBSTITUTE) }}"
                            aria-label="View {{ $activityProfile['username'] }} profile details">
                        <img src="{{ $activityProfile['avatar'] }}" alt="">
                        <div>
                            <strong>{{ Str::limit($activityProfile['username'], 13) }}</strong>
                            <div class="loot-muted small">{{ $isPrivateActivity ? 'Private activity' : $activityProfile['latest_provider'] }} · {{ $activityProfile['latest_time'] }}</div>
                        </div>
                        <span class="loot-status warning ms-auto">{{ $isPrivateActivity ? $activityProfile['total_usd'] : $activityProfile['latest_usd'] }}</span>
                    </button>
                @empty
                    <div class="user-live-empty"><i data-feather="activity" aria-hidden="true"></i><span>Verified member earnings will appear here.</span></div>
                @endforelse
            </div>
            <div class="user-top-actions">
                @include('partials.notification-bell', ['bellScope' => 'user'])
                <div class="dropdown user-profile-dropdown">
                    <a class="nav-link dropdown-toggle dropdown-user-link" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="loot-avatar-wrap">
                            <img class="rounded-circle" src="{{ $currentUser->avatar() }}" alt="{{ $currentUser->username }}"
                                 width="42" height="42">
                            <span class="loot-online-dot" aria-label="Online"></span>
                        </span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end loot-profile-menu">
                        <div class="loot-profile-head">
                            <span class="loot-avatar-wrap loot-avatar-wrap-lg">
                                <img src="{{ $currentUser->avatar() }}" alt="{{ $currentUser->username }}">
                                <span class="loot-online-dot" aria-label="Online"></span>
                            </span>
                            <strong>{{ $currentUser->username }}</strong>
                            <div class="loot-level-row">
                                <span>lvl {{ $currentLevel }}</span>
                                <span>lvl {{ $nextLevel }}</span>
                            </div>
                            <div class="loot-progress" style="--value: {{ $levelProgress }}%">
                                <span></span>
                            </div>
                        </div>
                        <a class="dropdown-item" href="{{ route('user.history') }}">
                            <i class="me-50" data-feather="user"></i> Profile
                        </a>
                        <a class="dropdown-item" href="{{ route('user.tickets') }}">
                            <i class="me-50" data-feather="users"></i> Support
                        </a>
                        <a class="dropdown-item" href="{{ route('logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            <i class="me-50" data-feather="log-out"></i> Logout
                        </a>
                        <div class="loot-profile-toggle">
                            <span>Show USD</span>
                            <form action="{{ route('user.settings.update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="balance_display" value="{{ $balanceMode === 'usd' ? 'coins' : 'usd' }}">
                                <button class="loot-mini-switch {{ $balanceMode === 'usd' ? 'active' : '' }}" type="submit" aria-label="Toggle USD balance">
                                    <span></span>
                                </button>
                            </form>
                        </div>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="user-content" id="userMainContent" tabindex="-1">
        @yield('content')
    </main>

    <footer class="user-footer">
        <div class="user-footer-brand">
            <a class="loot-brand" href="{{ route('user.home') }}">
                @if(brand_logo())
                    <img src="{{ Storage::url(brand_logo()) }}" alt="{{ brand_name() }}">
                @else
                    <span class="loot-brand-mark">{{ brand_mark() }}</span>{{ brand_name() }}
                @endif
            </a>
            <p>
                Earn rewards from trusted offerwalls, track your activity, and redeem your balance with clear support
                and policy access.
            </p>
            <span class="loot-muted">&copy; {{ date('Y') }} {{ brand_name() }}. All rights reserved.</span>
        </div>
        <div class="user-footer-links">
            <div>
                <h5>Earn</h5>
                <a href="{{ route('user.home') }}">Dashboard</a>
                <a href="{{ route('user.earn') }}">Offerwalls</a>
                <a href="{{ route('user.earn') }}?type=surveys">Surveys</a>
                <a href="{{ route('user.leaderboard') }}">Leaderboard</a>
                <a href="{{ route('user.referrals') }}">Referrals</a>
            </div>
            <div>
                <h5>Account</h5>
                <a href="{{ route('user.shop') }}">Cashout center</a>
                <a href="{{ route('user.transactions') }}">Full transactions</a>
                <a href="{{ route('user.history', ['settings' => 1]) }}">Profile settings</a>
                <a href="{{ route('user.tickets') }}">Support tickets</a>
            </div>
            <div>
                <h5>Policies</h5>
                <a href="{{ route('privacy-policy') }}">Privacy Policy</a>
                <a href="{{ route('term-condition') }}">Terms & Conditions</a>
                <a href="{{ route('refund-policy') }}">Refund Policy</a>
                <a href="{{ route('faq') }}">FAQ</a>
            </div>
            <div>
                <h5>Help</h5>
                <a href="mailto:{{ site_setting('support_email', config('rewards.support_email')) }}">
                    {{ site_setting('support_email', config('rewards.support_email')) }}
                </a>
                <a href="{{ route('user.tickets') }}">Create ticket</a>
                <a href="{{ route('home') }}">Public home</a>
            </div>
        </div>
    </footer>

    <nav class="user-mobile-nav" aria-label="Mobile navigation">
        <a class="{{ Route::is('user.home') ? 'active' : '' }}" href="{{ route('user.home') }}" @if(Route::is('user.home')) aria-current="page" @endif>
            <i data-feather="home" aria-hidden="true"></i><span>Home</span>
        </a>
        <a class="{{ Route::is('user.earn*') ? 'active' : '' }}" href="{{ route('user.earn') }}" @if(Route::is('user.earn*')) aria-current="page" @endif>
            <i data-feather="database" aria-hidden="true"></i><span>Earn</span>
        </a>
        <a class="{{ Route::is('user.history') ? 'active' : '' }}" href="{{ route('user.history') }}" @if(Route::is('user.history')) aria-current="page" @endif>
            <i data-feather="check-square" aria-hidden="true"></i><span>Activity</span>
        </a>
        <a class="{{ Route::is('user.shop*') ? 'active' : '' }}" href="{{ route('user.shop') }}" @if(Route::is('user.shop*')) aria-current="page" @endif>
            <i data-feather="credit-card" aria-hidden="true"></i><span>Cashout</span>
        </a>
        <button type="button" id="userMobileMore" aria-label="Open full navigation" aria-controls="userSideNav" aria-expanded="false">
            <i data-feather="menu" aria-hidden="true"></i><span>Menu</span>
        </button>
    </nav>
</div>

@php
    $supportTickets = auth()->user()->tickets()->latest('last_reply_at')->take(3)->get();
@endphp
<button class="loot-support-fab" type="button" data-bs-toggle="modal" data-bs-target="#supportChatModal" aria-label="Open support">
    <i data-feather="message-circle"></i>
</button>

<div class="modal fade" id="supportChatModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content loot-support-modal">
            <div class="modal-header">
                <div>
                    <h4 class="modal-title loot-section-title">Live support</h4>
                    <p class="loot-muted mb-0">Send a ticket and continue the conversation from Support.</p>
                </div>
                <button type="button" class="btn-close loot-modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="loot-support-grid">
                    <div class="loot-support-thread">
                        <h5>Recent tickets</h5>
                        @forelse($supportTickets as $ticket)
                            <a class="loot-support-ticket" href="{{ route('user.tickets.show', $ticket) }}">
                                <strong>{{ Str::limit($ticket->subject, 42) }}</strong>
                                <span>{{ ucfirst($ticket->status) }} · {{ $ticket->last_reply_at?->diffForHumans() }}</span>
                            </a>
                        @empty
                            <div class="loot-support-empty">
                                <i data-feather="inbox"></i>
                                <span>No tickets yet. Start with the form here.</span>
                            </div>
                        @endforelse
                    </div>
                    <form class="loot-support-form" method="POST" action="{{ route('user.tickets.store') }}">
                        @csrf
                        <h5>Create ticket</h5>
                        <input class="form-control" name="subject" maxlength="140" placeholder="Subject" required>
                        <div class="row g-1">
                            <div class="col-md-6">
                                <select class="form-select" name="category" required>
                                    <option value="general">General</option>
                                    <option value="offerwall">Offerwall</option>
                                    <option value="cashout">Cashout</option>
                                    <option value="account">Account</option>
                                    <option value="bug">Bug</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <select class="form-select" name="priority" required>
                                    <option value="normal">Normal</option>
                                    <option value="low">Low</option>
                                    <option value="high">High</option>
                                </select>
                            </div>
                        </div>
                        <textarea class="form-control" name="message" rows="5" maxlength="3000" placeholder="Tell us what happened..." required></textarea>
                        <button class="btn btn-loot w-100" type="submit">
                            <i data-feather="send" class="me-50"></i>Send ticket
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="activityProfileModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg loot-activity-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <span class="modal-eyebrow">Community activity</span>
                    <h2 class="modal-title">Member overview</h2>
                </div>
                <button type="button" class="btn-close loot-modal-close" data-bs-dismiss="modal" aria-label="Close activity"></button>
            </div>
            <div class="modal-body">
                <div class="activity-member-summary">
                    <div class="activity-avatar">
                        <img id="activityAvatar" src="{{ auth()->user()->avatar() }}" alt="User" width="80" height="80">
                    </div>
                    <div>
                        <h3 id="activityUser">Basketloot User</h3>
                        <p id="activityMemberMeta">Community member</p>
                    </div>
                    <span class="activity-time" id="activityTime">Recently</span>
                </div>

                <div class="activity-stat-grid">
                    <div>
                        <span>Total earned</span>
                        <strong id="activityTotalUsd">$0.00</strong>
                        <small id="activityTotalCoins">0 coins</small>
                    </div>
                    <div>
                        <span>Completed offers</span>
                        <strong id="activityCompleted">0</strong>
                    </div>
                    <div>
                        <span>Member since</span>
                        <strong id="activityJoined">Member</strong>
                    </div>
                </div>

                <div class="activity-privacy-note" id="activityPrivacyNote" hidden>
                    <i data-feather="lock" aria-hidden="true"></i>
                    <div><strong>Activity is private</strong><span>This member shares their profile and total earnings, but keeps individual offers hidden.</span></div>
                </div>
                <div class="activity-history" id="activityHistory">
                    <div class="activity-history-head"><span>Recent public activity</span><small id="activityTime">Recently</small></div>
                    <div class="activity-history-list" id="activityHistoryList"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('app-assets/vendors/js/vendors.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/js/extensions/toastr.min.js') }}"></script>
<script src="{{ asset('app-assets/vendors/js/feather-icons/feather-icons.min.js') }}"></script>
<script src="{{ asset('assets/js/basketloot-icons.js') }}"></script>
@stack('scripts')
<script>
    $(window).on('load', function () {
        if (window.BasketLootIcons) {
            window.BasketLootIcons.refresh();
        }
    });

    $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });

    (function () {
        var body = document.body;
        var toggle = document.getElementById('userSidebarToggle');
        var closeButton = document.getElementById('userSidebarClose');
        var mobileMore = document.getElementById('userMobileMore');
        var overlay = document.getElementById('userSidebarOverlay');
        var collapsedKey = 'basketloot_sidebar_collapsed';

        if (window.innerWidth >= 992 && localStorage.getItem(collapsedKey) === '1') {
            body.classList.add('user-sidebar-collapsed');
        }

        function closeMobileMenu() {
            body.classList.remove('user-sidebar-open');
            if (toggle) toggle.setAttribute('aria-expanded', 'false');
            if (mobileMore) mobileMore.setAttribute('aria-expanded', 'false');
        }

        function toggleNavigation(source) {
            if (window.innerWidth < 992) {
                var isOpen = body.classList.toggle('user-sidebar-open');
                if (toggle) toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                if (mobileMore) mobileMore.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                if (isOpen && closeButton) closeButton.focus();
                return;
            }

            body.classList.toggle('user-sidebar-collapsed');
            localStorage.setItem(collapsedKey, body.classList.contains('user-sidebar-collapsed') ? '1' : '0');
            if (source) source.setAttribute('aria-expanded', body.classList.contains('user-sidebar-collapsed') ? 'false' : 'true');
        }

        if (toggle) {
            toggle.addEventListener('click', function () {
                toggleNavigation(toggle);
            });
        }

        if (mobileMore) mobileMore.addEventListener('click', function () { toggleNavigation(mobileMore); });
        if (closeButton) closeButton.addEventListener('click', closeMobileMenu);

        if (overlay) {
            overlay.addEventListener('click', closeMobileMenu);
        }

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && body.classList.contains('user-sidebar-open')) {
                closeMobileMenu();
                if (mobileMore) mobileMore.focus();
            }
        });

        window.addEventListener('resize', function () {
            if (window.innerWidth >= 992) {
                closeMobileMenu();
            }
        });

        var activityModal = document.getElementById('activityProfileModal');
        if (activityModal) {
            activityModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                if (!button) {
                    return;
                }

                var profileName = button.getAttribute('data-user') || 'Basketloot user';
                document.getElementById('activityAvatar').src = button.getAttribute('data-avatar') || '{{ auth()->user()->avatar() }}';
                document.getElementById('activityAvatar').alt = profileName;
                document.getElementById('activityUser').textContent = profileName;
                document.getElementById('activityMemberMeta').textContent = 'Joined ' + (button.getAttribute('data-joined') || 'recently');
                document.getElementById('activityTotalUsd').textContent = button.getAttribute('data-total-usd') || '$0.00';
                document.getElementById('activityTotalCoins').textContent = button.getAttribute('data-total-coins') || '0 coins';
                document.getElementById('activityCompleted').textContent = button.getAttribute('data-completed') || '0';
                document.getElementById('activityJoined').textContent = button.getAttribute('data-joined') || 'Member';
                document.getElementById('activityTime').textContent = button.getAttribute('data-time') || 'Recently';

                var isPrivate = button.getAttribute('data-private') === '1';
                var privacyNote = document.getElementById('activityPrivacyNote');
                var history = document.getElementById('activityHistory');
                var list = document.getElementById('activityHistoryList');
                privacyNote.hidden = !isPrivate;
                history.hidden = isPrivate;
                list.replaceChildren();

                if (!isPrivate) {
                    var activities = [];
                    try { activities = JSON.parse(button.getAttribute('data-activities') || '[]'); } catch (error) {}
                    activities.forEach(function (item) {
                        var row = document.createElement('div');
                        row.className = 'activity-history-item';
                        var copy = document.createElement('div');
                        var title = document.createElement('strong');
                        var meta = document.createElement('span');
                        var reward = document.createElement('b');
                        title.textContent = item.offer || 'Offer completed';
                        meta.textContent = (item.provider || 'Basketloot') + ' · ' + (item.time || 'Recently');
                        reward.textContent = item.usd || '$0.00';
                        copy.append(title, meta);
                        row.append(copy, reward);
                        list.append(row);
                    });
                    if (!activities.length) {
                        var empty = document.createElement('p');
                        empty.className = 'loot-muted mb-0';
                        empty.textContent = 'No public activity is available yet.';
                        list.append(empty);
                    }
                }

                if (window.BasketLootIcons) {
                    window.BasketLootIcons.refresh(activityModal);
                }
            });
        }

        var liveStrip = document.getElementById('userLiveStrip');
        var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if (liveStrip && liveStrip.children.length > 1 && !reduceMotion) {
            var slideTimer = window.setInterval(function () {
                if (liveStrip.matches(':hover') || liveStrip.matches(':focus-within') || document.body.classList.contains('modal-open')) {
                    return;
                }

                var nextLeft = liveStrip.scrollLeft + 1;
                if (nextLeft >= liveStrip.scrollWidth - liveStrip.clientWidth - 2) {
                    liveStrip.scrollTo({left: 0, behavior: 'auto'});
                    return;
                }

                liveStrip.scrollTo({left: nextLeft, behavior: 'auto'});
            }, 28);
        }

        // Provider feeds sync in the background. When their version changes,
        // refresh an idle user page so hot/featured cards stay current without
        // interrupting an open offer or form interaction.
        var feedVersion = null;
        var feedStateUrl = @json(route('user.earn.state'));
        window.setInterval(function () {
            if (document.hidden || document.body.classList.contains('modal-open')) return;

            fetch(feedStateUrl, {
                headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
                cache: 'no-store'
            }).then(function (response) {
                return response.ok ? response.json() : Promise.reject(response);
            }).then(function (state) {
                if (feedVersion === null) {
                    feedVersion = state.version;
                    return;
                }

                if (state.version && state.version !== feedVersion) {
                    window.location.reload();
                }
            }).catch(function () {
                // A transient sync/network failure must not disturb earning.
            });
        }, 30000);
    })();
</script>
</body>
</html>
