@extends('layouts.user')

@section('title')
My Account
@endsection

@section('content')

@php
// NEXUS Session State for home page
$nexusActive = \App\Nexus\Engine\NexusConfig::isNexusActive();
$homeSessionOpen = false;
$homeSessionEndTime = null;
$homeNextSessionTime = null;
$homeActiveSessionName = null;
$homeActiveSessionNumber = null;
$homeNextSessionName = null;
$homeNextSessionNumber = null;

$homeSessionNames = [1 => 'Dawn', 2 => 'Midday', 3 => 'Dusk'];
$homeSessionTimes = [
1 => (int) \App\Nexus\Engine\NexusConfig::get('session_1_start_utc'),
2 => (int) \App\Nexus\Engine\NexusConfig::get('session_2_start_utc'),
3 => (int) \App\Nexus\Engine\NexusConfig::get('session_3_start_utc'),
];

if ($nexusActive) {
$homeSc = new \App\Nexus\Engine\SessionController();
$homeActiveSession = $homeSc->getActiveSession();
$homeSessionOpen = ($homeActiveSession !== null);

if ($homeSessionOpen) {
$homeActiveSessionNumber = $homeActiveSession->session_number;
$homeActiveSessionName = $homeSessionNames[$homeActiveSessionNumber] ?? 'Session';
$homeDuration = \App\Nexus\Engine\NexusConfig::getInt('session_duration_minutes', 60);
$homeSessionEndTime = \Carbon\Carbon::parse($homeActiveSession->actual_start)
->addMinutes($homeDuration)
->toIso8601String();
} else {
$homeNextSessionTime = $homeSc->getNextSessionTime()->toIso8601String();
$curHour = now()->utc()->hour;
$homeNextNum = 1;
foreach ($homeSessionTimes as $num => $hour) {
if ($hour > $curHour) { $homeNextNum = $num; break; }
}
$homeNextSessionNumber = $homeNextNum;
$homeNextSessionName = $homeSessionNames[$homeNextNum] ?? 'Session';
}
}
@endphp

<style>
    /* ── Page-level resets & custom tokens ── */
    :root {
        --orange: #f97316;
        --orange-light: rgba(249, 115, 22, 0.12);
        --orange-glow: rgba(249, 115, 22, 0.25);
        --purple: #660066;
        --purple-light: rgba(102, 0, 102, 0.10);
        --card-bg: #ffffff;
        --card-border: rgba(0, 0, 0, 0.06);
        --text-muted: #94a3b8;
        --radius: 16px;
        --radius-sm: 10px;
        --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.07);
        --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.13);
        --transition: 0.22s cubic-bezier(.4, 0, .2, 1);
    }

    .dark {
        --card-bg: #0f172a;
        --card-border: rgba(255, 255, 255, 0.06);
        --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
        --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.55);
    }

    /* ── Hero banner ── */
    .profile-banner {
        height: 200px;
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .profile-banner::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.35) 0%, rgba(102, 0, 102, 0.45) 100%);
    }

    /* ── Sidebar card ── */
    .sidebar-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--card-border);
        padding: 1.5rem;
        transition: box-shadow var(--transition);
    }

    .avatar-ring {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        padding: 3px;
        background: linear-gradient(135deg, var(--orange), var(--purple));
        display: inline-block;
    }

    .avatar-ring img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid var(--card-bg);
        object-fit: cover;
        display: block;
    }

    /* ── Wallet section ── */
    .wallet-section {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--card-border);
        overflow: hidden;
    }

    .wallet-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--card-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* ── Balance cards grid ── */
    .balance-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        gap: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .balance-card {
        border-radius: var(--radius-sm);
        border: 1px solid var(--card-border);
        padding: 1.1rem 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
        background: var(--card-bg);
        position: relative;
        overflow: hidden;
    }

    .balance-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        border-radius: 0 0 0 0;
        background: var(--accent, var(--orange));
        opacity: 0.7;
    }

    .balance-card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-2px);
        border-color: var(--accent, var(--orange));
    }

    .balance-card.ictp-card {
        --accent: #0ea5e9;
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(6, 182, 212, 0.04) 100%);
        border-color: rgba(14, 165, 233, 0.2);
    }

    .balance-card.ictp-card::before {
        background: linear-gradient(180deg, #0ea5e9, #06b6d4);
        opacity: 1;
    }

    .balance-card.main-card {
        --accent: var(--orange);
    }

    .balance-card.rebate-card {
        --accent: var(--purple);
    }

    .balance-card.store-card {
        --accent: #10b981;
    }

    .balance-card.ai-card {
        --accent: #8b5cf6;
    }

    .balance-card.loyalty-card {
        --accent: #f59e0b;
    }

    .balance-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.2rem;
    }

    .balance-card.main-card .balance-icon {
        background: var(--orange-light);
        color: var(--orange);
    }

    .balance-card.rebate-card .balance-icon {
        background: var(--purple-light);
        color: var(--purple);
    }

    .balance-card.store-card .balance-icon {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .balance-card.ai-card .balance-icon {
        background: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
    }

    .balance-card.loyalty-card .balance-icon {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .balance-card.ictp-card .balance-icon {
        background: rgba(14, 165, 233, 0.1);
        color: #0ea5e9;
    }

    .balance-amount {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2;
        color: inherit;
    }

    .balance-label {
        font-size: 0.72rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-top: 2px;
    }

    .balance-info {
        flex: 1;
        min-width: 0;
    }

    /* Move-to-wallet button */
    .move-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.38rem 0.85rem;
        border-radius: 8px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        white-space: nowrap;
        cursor: pointer;
        transition: all var(--transition);
        border: none;
        flex-shrink: 0;
    }

    .move-btn-orange {
        background: var(--orange-light);
        color: var(--orange);
    }

    .move-btn-orange:hover {
        background: var(--orange);
        color: #fff;
    }

    .move-btn-purple {
        background: var(--purple-light);
        color: var(--purple);
    }

    .move-btn-purple:hover {
        background: var(--purple);
        color: #fff;
    }

    .move-btn-green {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .move-btn-green:hover {
        background: #10b981;
        color: #fff;
    }

    .move-btn-violet {
        background: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
    }

    .move-btn-violet:hover {
        background: #8b5cf6;
        color: #fff;
    }

    .move-btn-amber {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
    }

    .move-btn-amber:hover {
        background: #f59e0b;
        color: #fff;
    }

    .move-btn-sky {
        background: rgba(14, 165, 233, 0.1);
        color: #0ea5e9;
    }

    .move-btn-sky:hover {
        background: #0ea5e9;
        color: #fff;
    }

    /* ── ICTP badge pill ── */
    .ictp-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.18rem 0.6rem;
        border-radius: 99px;
        background: rgba(14, 165, 233, 0.12);
        color: #0ea5e9;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border: 1px solid rgba(14, 165, 233, 0.25);
    }

    .ictp-badge svg {
        width: 10px;
        height: 10px;
    }

    /* ── Pulsing trade indicator ── */
    @keyframes tradePulse {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.55;
            transform: scale(0.88);
        }
    }

    .trade-pulse {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #0ea5e9;
        display: inline-block;
        animation: tradePulse 1.6s ease-in-out infinite;
    }

    /* ── Section heading ── */
    .section-heading {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .section-heading::before {
        content: '';
        width: 3px;
        height: 1rem;
        border-radius: 2px;
        background: var(--orange);
        flex-shrink: 0;
    }

    /* ── Inventory card ── */
    .inventory-section {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--card-border);
        padding: 1.5rem;
    }

    .inventory-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--card-border);
        gap: 1rem;
        transition: background var(--transition);
        border-radius: 8px;
    }

    .inventory-item:last-child {
        border-bottom: none;
    }

    .inventory-item:hover {
        background: rgba(249, 115, 22, 0.03);
    }

    .inventory-thumb {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .sell-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.75rem;
        border-radius: 99px;
        font-size: 0.72rem;
        font-weight: 600;
        background: var(--orange-light);
        color: var(--orange);
    }

    .sell-action-btn {
        padding: 0.38rem 1rem;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        background: #ef4444;
        color: #fff;
        transition: background var(--transition), transform var(--transition);
        display: inline-block;
        text-decoration: none;
    }

    .sell-action-btn:hover {
        background: #dc2626;
        transform: scale(1.04);
        color: #fff;
    }

    /* ── History table ── */
    .history-section {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--card-border);
        overflow: hidden;
    }

    .tab-list {
        display: flex;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--card-border);
    }

    .tab-btn {
        padding: 0.45rem 1.1rem;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition);
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-muted);
    }

    .tab-btn.active,
    .tab-btn:hover {
        background: var(--orange-light);
        color: var(--orange);
        border-color: rgba(249, 115, 22, 0.2);
    }

    .tab-panel {
        display: none;
    }

    .tab-panel.active {
        display: block;
    }

    .history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.78rem;
    }

    .history-table th {
        padding: 0.7rem 1rem;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        background: rgba(248, 250, 252, 0.8);
        border-bottom: 1px solid var(--card-border);
    }

    .dark .history-table th {
        background: rgba(15, 23, 42, 0.8);
    }

    .history-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--card-border);
        vertical-align: middle;
    }

    .history-table tr:last-child td {
        border-bottom: none;
    }

    .history-table tr:hover td {
        background: rgba(249, 115, 22, 0.025);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.22rem 0.6rem;
        border-radius: 99px;
        font-size: 0.68rem;
        font-weight: 600;
    }

    .status-pending {
        background: rgba(148, 163, 184, 0.12);
        color: #94a3b8;
    }

    .status-success {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }

    .status-failed {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }

    /* ── Chart wrapper ── */
    .chart-section {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        border: 1px solid var(--card-border);
        padding: 1.5rem;
    }

    .chart-select {
        appearance: none;
        padding: 0.4rem 2rem 0.4rem 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--card-border);
        font-size: 0.78rem;
        font-weight: 600;
        background: var(--card-bg);
        color: inherit;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.6rem center;
    }

    /* ── Deposit button ── */
    .deposit-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 1.2rem;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 700;
        background: var(--orange);
        color: #fff;
        transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
        text-decoration: none;
        box-shadow: 0 2px 12px var(--orange-glow);
    }

    .deposit-btn:hover {
        background: #ea6c0a;
        transform: translateY(-1px);
        box-shadow: 0 4px 18px var(--orange-glow);
        color: #fff;
    }

    /* ── Stat chip ── */
    .store-value-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.85rem;
        border-radius: 99px;
        background: var(--orange-light);
        color: var(--orange);
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* ── Session Module (NEXUS addition) ── */
    .home-session-mod {
        margin: 1.25rem 0;
        border-radius: 16px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
    }

    .home-session-mod.hsm-open {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 40%, #f0fdf4 100%);
        border: 1.5px solid rgba(34, 197, 94, 0.18);
    }

    .home-session-mod.hsm-closed {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 40%, #fffbeb 100%);
        border: 1.5px solid rgba(249, 115, 22, 0.15);
    }

    .dark .home-session-mod.hsm-open {
        background: linear-gradient(135deg, #052e16 0%, #064e3b 40%, #022c22 100%);
        border-color: rgba(34, 197, 94, 0.25);
    }

    .dark .home-session-mod.hsm-closed {
        background: linear-gradient(135deg, #431407 0%, #7c2d12 40%, #451a03 100%);
        border-color: rgba(249, 115, 22, 0.25);
    }

    .home-session-mod::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.3;
        background-image: radial-gradient(circle at 85% 50%, rgba(255, 255, 255, 0.7) 0%, transparent 45%);
    }

    .dark .home-session-mod::before {
        opacity: 0.1;
    }

    .hsm-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.25rem 1.5rem;
    }

    .hsm-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
        min-width: 0;
    }

    .hsm-pulse {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background 0.3s;
    }

    .hsm-open .hsm-pulse {
        background: rgba(34, 197, 94, 0.10);
    }

    .hsm-closed .hsm-pulse {
        background: rgba(249, 115, 22, 0.08);
    }

    .hsm-open .hsm-pulse::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(34, 197, 94, 0.18);
        animation: hsmRing 2s ease-out infinite;
    }

    @keyframes hsmRing {
        0% {
            transform: scale(1);
            opacity: 0.6;
        }

        100% {
            transform: scale(1.7);
            opacity: 0;
        }
    }

    .hsm-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transition: all 0.3s;
    }

    .hsm-open .hsm-dot {
        background: #22c55e;
        box-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
    }

    .hsm-closed .hsm-dot {
        background: var(--orange);
        box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
    }

    .hsm-label {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: color 0.3s;
    }

    .hsm-open .hsm-label {
        color: #15803d;
    }

    .hsm-closed .hsm-label {
        color: #c2410c;
    }

    .dark .hsm-open .hsm-label {
        color: #4ade80;
    }

    .dark .hsm-closed .hsm-label {
        color: #fb923c;
    }

    .hsm-name {
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-top: 0.1rem;
    }

    .hsm-name .dim {
        font-weight: 400;
        opacity: 0.3;
    }

    .hsm-sub {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted, #666);
        margin-top: 0.15rem;
    }

    .hsm-right {
        flex-shrink: 0;
    }

    .hsm-timer {
        font-size: 2.25rem;
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        transition: color 0.3s;
    }

    .hsm-open .hsm-timer {
        color: #16a34a;
    }

    .hsm-closed .hsm-timer {
        color: var(--orange);
    }

    .dark .hsm-open .hsm-timer {
        color: #4ade80;
    }

    .hsm-timer-label {
        font-size: 0.6rem;
        font-weight: 600;
        color: var(--text-muted, #666);
        margin-top: 0.2rem;
    }

    .hsm-bottom {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.5rem 1.1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hsm-pills {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    .hsm-pill {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.28rem 0.6rem;
        border-radius: 99px;
        font-size: 0.6rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.5);
        color: #666;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .dark .hsm-pill {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .hsm-pill.hp-active {
        background: rgba(255, 255, 255, 0.75);
        color: #15803d;
        border-color: rgba(34, 197, 94, 0.2);
        font-weight: 700;
    }

    .hsm-pill.hp-next {
        background: rgba(255, 255, 255, 0.75);
        color: #c2410c;
        border-color: rgba(249, 115, 22, 0.2);
        font-weight: 700;
    }

    .dark .hsm-pill.hp-active {
        background: rgba(34, 197, 94, 0.15);
        color: #4ade80;
    }

    .dark .hsm-pill.hp-next {
        background: rgba(249, 115, 22, 0.15);
        color: #fb923c;
    }

    .hp-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #ccc;
        flex-shrink: 0;
    }

    .hp-active .hp-dot {
        background: #22c55e;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    }

    .hp-next .hp-dot {
        background: var(--orange);
    }

    .hsm-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.72rem;
        font-weight: 700;
        text-decoration: none;
        transition: gap 0.2s, color 0.15s;
    }

    .hsm-open .hsm-link {
        color: #15803d;
    }

    .hsm-open .hsm-link:hover {
        color: #16a34a;
        gap: 0.55rem;
    }

    .hsm-closed .hsm-link {
        color: #c2410c;
    }

    .hsm-closed .hsm-link:hover {
        color: var(--orange);
        gap: 0.55rem;
    }

    .dark .hsm-open .hsm-link {
        color: #4ade80;
    }

    .dark .hsm-closed .hsm-link {
        color: #fb923c;
    }

    @media (max-width: 768px) {
        .hsm-inner {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem 1.15rem;
        }

        .hsm-right {
            width: 100%;
        }

        .hsm-timer {
            font-size: 1.75rem;
            text-align: left;
        }

        .hsm-name {
            font-size: 1rem;
        }

        .hsm-bottom {
            padding: 0 1.15rem 0.85rem;
        }
    }

    @media (max-width: 420px) {
        .hsm-inner {
            padding: 0.85rem 1rem;
            gap: 0.75rem;
        }

        .hsm-pulse {
            width: 36px;
            height: 36px;
        }

        .hsm-dot {
            width: 10px;
            height: 10px;
        }

        .hsm-name {
            font-size: 0.9rem;
        }

        .hsm-sub {
            font-size: 0.68rem;
        }

        .hsm-timer {
            font-size: 1.5rem;
        }

        .hsm-bottom {
            padding: 0 1rem 0.75rem;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .hsm-pill {
            font-size: 0.55rem;
            padding: 0.22rem 0.5rem;
        }

        .hsm-link {
            font-size: 0.68rem;
        }
    }
</style>

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="profile-banner bg-cover bg-center"
            style="background-image: url('{{ asset('images/profile-1.jpg') }}');">
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex" style="gap: 1.5rem;">

            {{-- ── Sidebar ── --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top: -7rem;">
                    <div class="sidebar-card">
                        <div class="mb-5 text-center">
                            <div class="flex justify-center mb-4">
                                <span class="avatar-ring">
                                    <img src="{{ asset('images/avatar-1.png') }}" id="profile-image" alt="avatar">
                                </span>
                            </div>
                            <h5 class="text-base font-bold">{{ auth()->user()->username }}</h5>
                            <p class="text-xs mt-1" style="color: var(--text-muted);">{{ auth()->user()->email }}</p>

                            {{-- KYC chip --}}
                            @if(auth()->user()->kyc_status == 1)
                            <span style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:0.5rem;padding:0.2rem 0.65rem;border-radius:99px;background:rgba(16,185,129,0.1);color:#10b981;font-size:0.68rem;font-weight:700;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.97 5.03L7 10l-2.47-2.47a.75.75 0 1 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l5.5-5.5a.75.75 0 0 0-1.06-1.06z" />
                                </svg>
                                KYC Verified
                            </span>
                            @endif
                        </div>
                        <x-side-nav />
                    </div>
                </div>
            </div>

            {{-- ── Main content ── --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:1.5rem;">

                <x-alert />

                {{-- ── Wallet card ── --}}
                <div class="wallet-section">
                    <div class="wallet-header">
                        <div>
                            <h5 class="text-base font-bold">My Wallet</h5>
                            <p class="text-xs mt-0.5" style="color:var(--text-muted);">Manage your balances</p>
                        </div>
                        <a href="{{ route('deposit') }}" class="deposit-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                            </svg>
                            Deposit Funds
                        </a>
                    </div>

                    <div class="balance-grid">

                        {{-- Main Balance --}}
                        <div class="balance-card main-card">
                            <div class="balance-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div class="balance-amount">${{ number_format(auth()->user()->balance, 2) }}</div>
                                <div class="balance-label">Main Wallet · USDT</div>
                            </div>
                        </div>

                        @if(auth()->user()->type != 'marketer')

                        {{-- ── ICTP Balance ── --}}
                        <div class="balance-card ictp-card">
                            <div class="balance-icon">
                                {{-- Candlestick/trading icon --}}
                                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                    <line x1="6" y1="3" x2="6" y2="6" stroke-linecap="round" />
                                    <rect x="4" y="6" width="4" height="7" rx="1" />
                                    <line x1="6" y1="13" x2="6" y2="21" stroke-linecap="round" />
                                    <line x1="14" y1="2" x2="14" y2="5" stroke-linecap="round" />
                                    <rect x="12" y="5" width="4" height="9" rx="1" />
                                    <line x1="14" y1="14" x2="14" y2="21" stroke-linecap="round" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div style="display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap;">
                                    <div class="balance-amount">${{ number_format(auth()->user()->ictp_balance ?? 0, 2) }}</div>
                                    <span class="ictp-badge">
                                        <span class="trade-pulse"></span>
                                        ICTP
                                    </span>
                                </div>
                                <div class="balance-label">Inhouse Capital Traders Program</div>
                            </div>
                            <a href="{{ route('ictp_withdraw_page') }}" class="move-btn move-btn-sky">
                                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                </svg>
                                Move
                            </a>
                        </div>

                        {{-- Rebate Bonus --}}
                        <div class="balance-card rebate-card">
                            <div class="balance-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div class="balance-amount">${{ number_format(auth()->user()->rebates, 2) }}</div>
                                <div class="balance-label">Rebate Bonus</div>
                            </div>
                            <form action="{{ route('rebate_to_balance') }}" method="post">
                                @csrf
                                <input type="hidden" name="amount" value="{{ auth()->user()->rebates }}">
                                <button type="submit" class="move-btn move-btn-purple">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                    Move
                                </button>
                            </form>
                        </div>

                        {{-- Store Setup Bonus --}}
                        <div class="balance-card store-card">
                            <div class="balance-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div class="balance-amount">${{ number_format(auth()->user()->store_bonus, 2) }}</div>
                                <div class="balance-label">Referral Store Bonus</div>
                            </div>
                            <form action="{{ route('store_to_balance') }}" method="post">
                                @csrf
                                <input type="hidden" name="amount" value="{{ auth()->user()->store_bonus }}">
                                <button type="submit" class="move-btn move-btn-green">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                    Move
                                </button>
                            </form>
                        </div>

                        {{-- AI Referral Bonus --}}
                        <div class="balance-card ai-card">
                            <div class="balance-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2h-2" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div class="balance-amount">${{ number_format(auth()->user()->ai_bonus, 2) }}</div>
                                <div class="balance-label">AI Referral Purchase Bonus</div>
                            </div>
                            <form action="{{ route('ai_to_balance') }}" method="post">
                                @csrf
                                <input type="hidden" name="amount" value="{{ auth()->user()->ai_bonus }}">
                                <button type="submit" class="move-btn move-btn-violet">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                    Move
                                </button>
                            </form>
                        </div>

                        {{-- Loyalty Bonus --}}
                        <div class="balance-card loyalty-card">
                            <div class="balance-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402z" />
                                </svg>
                            </div>
                            <div class="balance-info">
                                <div class="balance-amount">${{ number_format(auth()->user()->loyalty_bonus, 2) }}</div>
                                <div class="balance-label">🎁 Loyalty Bonus</div>
                            </div>
                            <form action="{{ route('loyalty_to_balance') }}" method="post">
                                @csrf
                                <input type="hidden" name="amount" value="{{ auth()->user()->loyalty_bonus }}">
                                <button type="submit" class="move-btn move-btn-amber">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                    Move
                                </button>
                            </form>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- ── NEXUS Session Module (hidden when inactive) ── --}}
                @if($nexusActive)
                <div class="home-session-mod {{ $homeSessionOpen ? 'hsm-open' : 'hsm-closed' }}">
                    <div class="hsm-inner">
                        <div class="hsm-left">
                            <div class="hsm-pulse">
                                <div class="hsm-dot"></div>
                            </div>
                            <div>
                                @if($homeSessionOpen)
                                <div class="hsm-label">Trading Session Open</div>
                                <div class="hsm-name">{{ $homeActiveSessionName }} <span class="dim">/ Session {{ $homeActiveSessionNumber }}</span></div>
                                <div class="hsm-sub">Place your bids now. Session closes automatically.</div>
                                @else
                                <div class="hsm-label">Next Session</div>
                                <div class="hsm-name">{{ $homeNextSessionName }} <span class="dim">/ Session {{ $homeNextSessionNumber }}</span></div>
                                <div class="hsm-sub">Browse markets and get your bids ready.</div>
                                @endif
                            </div>
                        </div>
                        <div class="hsm-right">
                            <div class="hsm-timer" id="homeTimer">--:--</div>
                            <div class="hsm-timer-label">{{ $homeSessionOpen ? 'remaining' : 'until open' }}</div>
                        </div>
                    </div>
                    <div class="hsm-bottom">
                        <div class="hsm-pills">
                            @foreach($homeSessionTimes as $num => $hour)
                            @php
                            $isActive = $homeSessionOpen && $homeActiveSessionNumber === $num;
                            $isNext = !$homeSessionOpen && $homeNextSessionNumber === $num;
                            $pClass = $isActive ? 'hp-active' : ($isNext ? 'hp-next' : '');
                            @endphp
                            <div class="hsm-pill {{ $pClass }}" data-utc-home="{{ $hour }}">
                                <span class="hp-dot"></span>
                                <span class="hp-text">Session {{ $num }}</span>
                            </div>
                            @endforeach
                        </div>
                        <a href="{{ route('bid-markets') }}" class="hsm-link">
                            Browse Markets
                            <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </a>
                    </div>
                </div>
                @endif

                {{-- ── Inventory ── --}}
                <div id="inventory"></div>
                @php $total = 0; foreach($ownerships as $o){ $total += $o->value * $o->quantity; } @endphp

                <div class="inventory-section">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.75rem;">
                        <span class="section-heading">My Inventory</span>
                        <span class="store-value-chip">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 10V7" />
                            </svg>
                            Store Value: ${{ number_format($total, 2) }} USDT
                        </span>
                    </div>

                    <ul style="padding:0;margin:0;list-style:none;">
                        @forelse($ownerships as $ownership)
                        <li class="inventory-item">
                            <div style="display:flex;align-items:center;gap:0.85rem;flex:1;min-width:0;">
                                <img src="{{ asset('storage/products/'.$ownership->product?->image1) }}"
                                    class="inventory-thumb" alt="{{ $ownership->product?->name }}" loading="lazy">
                                <div style="min-width:0;">
                                    <p class="text-xs font-semibold" style="margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $ownership->product?->name }}</p>
                                    <p class="text-xs" style="margin:0.25rem 0 0;color:#10b981;font-weight:600;">${{ number_format($ownership->value, 2) }}</p>
                                    <p class="text-xs" style="margin:0.15rem 0 0;color:var(--text-muted);">{{ $ownership->product?->market?->name }} · Qty {{ $ownership->quantity }}</p>
                                </div>
                            </div>
                            @php $pendingSell = $ownership->sells?->where('status', 0)->first(); @endphp
                            @if($pendingSell)
                            <span class="sell-status-badge" data-eval-time="{{ \Carbon\Carbon::parse($pendingSell->sell_time)->addHours(24)->toIso8601String() }}">
                                <span style="width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;animation:tradePulse 1.6s ease-in-out infinite;"></span>
                                In Sale... <span class="countdown-text" style="font-size:0.65rem;opacity:0.8;"></span>
                            </span>
                            @else
                            <a href="{{ route('sell-markets', $ownership->slug) }}" class="sell-action-btn">Sell Off</a>
                            @endif
                        </li>
                        @empty
                        <div style="padding:2.5rem 1rem;text-align:center;">
                            <img src="{{ asset('images/store-1.png') }}" style="height:9rem;margin:0 auto 1rem;" alt="store">
                            <p class="text-sm" style="color:var(--text-muted);margin-bottom:1rem;">You have no items in your store!</p>
                            <a href="{{ route('bid-markets') }}" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1.25rem;border-radius:10px;border:1.5px solid var(--card-border);font-size:0.82rem;font-weight:600;text-decoration:none;transition:all var(--transition);"
                                onmouseover="this.style.borderColor='var(--orange)';this.style.color='var(--orange)'"
                                onmouseout="this.style.borderColor='var(--card-border)';this.style.color=''">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                                </svg>
                                Add Items
                            </a>
                        </div>
                        @endforelse
                    </ul>
                </div>

                {{-- ── Performance Chart ── --}}
                <div class="chart-section">
                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:0.75rem;">
                        <span class="section-heading">Manual Performance Chart</span>
                        @if(empty(auth()->user()->chart_first))
                        <select id="periodSelect" class="chart-select">
                            <option value="7days">Last 7 Days</option>
                            <option value="30days">Last 30 Days</option>
                            <option value="6months">Last 6 Months</option>
                        </select>
                        @else
                        <select id="customPeriodSelect" class="chart-select">
                            <option value="7days">Last 7 Days</option>
                            <option value="30days">Last 30 Days</option>
                            <option value="6months">Last 6 Months</option>
                        </select>
                        @endif
                    </div>

                    @if(empty(auth()->user()->chart_first))
                    <div style="display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap;">
                        <div>
                            <p id="totalSales" class="text-base font-bold" style="margin:0;"></p>
                            <p id="totalProfit" class="text-xs" style="margin:0.2rem 0 0;color:var(--text-muted);"></p>
                        </div>
                    </div>
                    <canvas id="salesChart" style="max-height:260px;"></canvas>
                    @else
                    <div style="display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap;">
                        <div>
                            <p id="customTotalSales" class="text-base font-bold" style="margin:0;"></p>
                            <p id="customTotalProfit" class="text-xs" style="margin:0.2rem 0 0;color:var(--text-muted);"></p>
                        </div>
                    </div>
                    <canvas id="customSalesChart" style="max-height:260px;"></canvas>
                    @endif
                </div>

                {{-- ── Bid & Sell History ── --}}
                <div class="history-section">
                    <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--card-border);">
                        <span class="section-heading">Manual Bid & Sell History</span>
                    </div>
                    <div class="tab-list">
                        <button class="tab-btn active" onclick="switchTab('bids', this)">My Manual Bids</button>
                        <button class="tab-btn" onclick="switchTab('sells', this)">My Manual Sell Offs</button>
                    </div>

                    {{-- Bids panel --}}
                    <div id="tab-bids" class="tab-panel active" style="overflow-x:auto;">
                        <table class="history-table">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Total</th>
                                    <th>Status</th>
                                    <th>Market</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($bids as $bid)
                                <tr>
                                    <td>
                                        <span class="font-semibold">{{ mb_strimwidth($bid->product?->name, 0, 20, '...') }}</span>
                                        <br><span style="color:var(--text-muted);font-size:0.68rem;">×{{ $bid->quantity }}</span>
                                    </td>
                                    <td class="font-semibold">${{ number_format($bid->amount * $bid->quantity, 2) }}</td>
                                    <td>
                                        @if($bid->status == 0)
                                        <span class="status-badge status-pending" data-eval-time="{{ \Carbon\Carbon::parse($bid->bid_time)->addHour()->toIso8601String() }}"><span class="countdown-text">● In Progress...</span></span>
                                        @elseif($bid->status == 1)
                                        <span class="status-badge status-success">✓ Successful</span>
                                        @elseif($bid->status == 2)
                                        <span class="status-badge status-failed">✕ Unsuccessful</span>
                                        @endif
                                    </td>
                                    <td style="color:var(--text-muted);">{{ mb_strimwidth($bid->market?->name, 0, 20, '...') }}</td>
                                    <td style="color:var(--text-muted);font-size:0.7rem;">{{ Carbon\Carbon::parse($bid->bid_time)->setTimezone('GMT')->format('D d-M-Y H:i T') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- Sells panel --}}
                    <div id="tab-sells" class="tab-panel" style="overflow-x:auto;">
                        <table class="history-table">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Total</th>
                                    <th>Status</th>
                                    <th>Market</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sells as $sell)
                                <tr>
                                    <td>
                                        <span class="font-semibold">{{ mb_strimwidth($sell->product?->name, 0, 20, '...') }}</span>
                                        <br><span style="color:var(--text-muted);font-size:0.68rem;">×{{ $sell->quantity }}</span>
                                    </td>
                                    <td class="font-semibold">${{ number_format($sell->amount * $sell->quantity, 2) }}</td>
                                    <td>
                                        @if($sell->status == 0)
                                        <span class="status-badge status-pending" data-eval-time="{{ \Carbon\Carbon::parse($sell->sell_time)->addHours(24)->toIso8601String() }}"><span class="countdown-text">● In Progress...</span></span>
                                        @elseif($sell->status == 1)
                                        <span class="status-badge status-success">✓ Successful</span>
                                        @elseif($sell->status == 2)
                                        <span class="status-badge status-failed">✕ Unsuccessful</span>
                                        @endif
                                    </td>
                                    <td style="color:var(--text-muted);">{{ mb_strimwidth($sell->market?->name, 0, 20, '...') }}</td>
                                    <td style="color:var(--text-muted);font-size:0.7rem;">{{ Carbon\Carbon::parse($sell->sell_time)->setTimezone('GMT')->format('D d-M-Y H:i T') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>{{-- end main --}}
        </div>
    </div>
</section>

@include('components.social-modal')
@php
$updatedChartBool = empty(auth()->user()->chart_first) ? 'true' : 'false';
@endphp

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // ── Tab switcher ──
    window.switchTab = function(name, btn) {
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.getElementById('tab-' + name).classList.add('active');
        btn.classList.add('active');
    }
</script>
<script>
    // ── Charts ──
    let chart;
    let updatedChart = '{{$updatedChartBool}}'

    if (updatedChart === 'true') {
        function fetchData(period) {
            fetch(`/manual-sales?period=${period}`)
                .then(r => r.json()).then(data => {
                    updateChart(data);
                    updateTotalSales(data);
                    updateTotalProfits(data);
                });
        }

        function updateChart(data) {
            const labels = data.map(i => i.date),
                values = data.map(i => i.total);
            if (chart) {
                chart.data.labels = labels;
                chart.data.datasets[0].data = values;
                chart.update();
                return;
            }
            chart = new Chart(document.getElementById('salesChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        label: 'Total Sales',
                        data: values,
                        backgroundColor: 'rgba(249,115,22,0.15)',
                        borderColor: 'rgba(249,115,22,1)',
                        borderWidth: 2,
                        borderRadius: 6
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148,163,184,0.1)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }

        function updateTotalSales(data) {
            const t = data.reduce((s, i) => s + parseFloat(i.total), 0);
            document.getElementById('totalSales').innerText = 'Total Sales: ' + new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
            }).format(t);
        }

        function updateTotalProfits(data) {
            const t = data.reduce((s, i) => s + parseFloat(i.profits), 0);
            document.getElementById('totalProfit').innerText = 'Total Profits: ' + new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
            }).format(t);
        }
        document.getElementById('periodSelect').addEventListener('change', function() {
            fetchData(this.value);
        });
        fetchData('7days');
    } else {
        function customFetchData(period) {
            fetch(`/dummy-sales?period=${period}`)
                .then(r => r.json()).then(data => {
                    updateCustomChart(data);
                    updateCustomTotalSales(data);
                    updateCustomTotalProfits(data);
                });
        }

        function updateCustomChart(data) {
            const labels = data.map(i => i.date),
                values = data.map(i => i.total);
            if (chart) {
                chart.data.labels = labels;
                chart.data.datasets[0].data = values;
                chart.update();
                return;
            }
            chart = new Chart(document.getElementById('customSalesChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        label: 'Total Sales',
                        data: values,
                        backgroundColor: 'rgba(249,115,22,0.15)',
                        borderColor: 'rgba(249,115,22,1)',
                        borderWidth: 2,
                        borderRadius: 6
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148,163,184,0.1)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }

        function updateCustomTotalSales(data) {
            const t = data.reduce((s, i) => s + parseFloat(i.total), 0);
            document.getElementById('customTotalSales').innerText = 'Total Sales: ' + new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
            }).format(t);
        }

        function updateCustomTotalProfits(data) {
            const t = data.reduce((s, i) => s + parseFloat(i.profits), 0);
            document.getElementById('customTotalProfit').innerText = 'Total Profits: ' + new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
            }).format(t);
        }
        document.getElementById('customPeriodSelect').addEventListener('change', function() {
            customFetchData(this.value);
        });
        customFetchData('7days');
    }
</script>

@if($nexusActive)
<script>
    // Home session countdown
    (function() {
        @if($homeSessionOpen && $homeSessionEndTime)
        var endTime = new Date('{{ $homeSessionEndTime }}').getTime();
        @elseif($homeNextSessionTime)
        var endTime = new Date('{{ $homeNextSessionTime }}').getTime();
        @else
        var endTime = 0;
        @endif

        if (!endTime) return;

        var el = document.getElementById('homeTimer');
        if (!el) return;

        function tick() {
            var now = Date.now();
            var diff = Math.max(0, Math.floor((endTime - now) / 1000));
            if (diff <= 0) {
                el.textContent = '00:00';
                setTimeout(function() {
                    location.reload();
                }, 3000);
                return;
            }
            var h = Math.floor(diff / 3600);
            var m = Math.floor((diff % 3600) / 60);
            var s = diff % 60;
            if (h > 0) {
                el.textContent = h + 'h ' + String(m).padStart(2, '0') + 'm';
            } else {
                el.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
            }
        }
        tick();
        setInterval(tick, 1000);
    })();

    // Timezone conversion for session pills
    (function() {
        function homeLocalTime(utcHour) {
            var d = new Date();
            d.setUTCHours(utcHour, 0, 0, 0);
            return d.toLocaleTimeString([], {
                hour: 'numeric',
                minute: '2-digit'
            });
        }
        var pills = @json($homeSessionTimes);
        document.querySelectorAll('[data-utc-home]').forEach(function(el) {
            var utc = parseInt(el.getAttribute('data-utc-home'));
            var num = null;
            for (var k in pills) {
                if (pills[k] === utc) {
                    num = k;
                    break;
                }
            }
            var txt = el.querySelector('.hp-text');
            if (txt && num) txt.textContent = 'Session ' + num + ' \u00b7 ' + homeLocalTime(utc);
        });
    })();
</script>
<script>
    function updateCountdowns() {
    document.querySelectorAll('[data-eval-time]').forEach(function(el) {
        var target = new Date(el.getAttribute('data-eval-time')).getTime();
        var now = Date.now();
        var diff = target - now;
        var text = el.querySelector('.countdown-text');
        if (!text) return;
        var isBadge = el.classList.contains('sell-status-badge');
        var dot = isBadge ? '' : '● ';
        if (diff <= 0) {
            text.textContent = dot + 'Evaluating now...';
            return;
        }
        var h = Math.floor(diff / 3600000);
        var m = Math.floor((diff % 3600000) / 60000);
        var time = h > 0 ? h + 'h ' + m + 'm' : m + 'm';
        text.textContent = isBadge ? time : dot + 'Eval in ' + time;
    });
}
    updateCountdowns();
    setInterval(updateCountdowns, 60000);
</script>
@endif

@endsection