@extends('layouts.dasht')
@section('title', $title)
@section('content')
<div class="container mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6 lg:py-8" x-data="{ showCopied: false }">

    <x-danger-alert />
    <x-success-alert />
    <x-notify-alert />

    <!-- Dashboard Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-6 sm:mb-8 gap-4">
        <div>
           <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
    Welcome back, {{ explode(' ', Auth::user()->name)[0] }}!
</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">BrimStone Brokers Premium Wealth & Stock Portfolio</p>
        </div>
        <div class="flex flex-wrap gap-2 sm:gap-3">
            @if(isset($settings->enable_kyc) && $settings->enable_kyc === 'yes')
                @if(Auth::user()->account_verify === 'Verified')
                    <div class="inline-flex items-center gap-1.5 px-4 py-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-xl text-sm font-semibold border border-emerald-500/20">
                        <i data-lucide="shield-check" class="w-4 h-4"></i> Verified Account
                    </div>
                @else
                    <a href="{{ route('account.verify') }}" class="inline-flex items-center gap-1.5 px-4 py-2 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-xl text-sm font-semibold border border-yellow-500/20 hover:bg-yellow-500/20 transition">
                        <i data-lucide="shield-alert" class="w-4 h-4 animate-pulse"></i> Complete Verification
                    </a>
                @endif
            @endif
            <a href="{{ route('mplans') }}" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-[#d4af37] to-[#b3922e] hover:from-[#e5c150] hover:to-[#cfa736] text-gray-900 font-bold rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-0.5 text-sm">
                <i data-lucide="trending-up" class="w-4 h-4"></i> Asset Allocation
            </a>
        </div>
    </div>

    <!-- Priority Cards Grid (Cards 1 to 6) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
        
        <!-- Card 1: Portfolio Value (Featured, Span 2 on md/lg) -->
        <div class="md:col-span-2 bg-[#0f2b48] border border-[#d4af37]/30 rounded-2xl p-6 shadow-2xl flex flex-col justify-between text-white relative overflow-hidden group">
            <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-[#d4af37]/5 rounded-full blur-3xl group-hover:bg-[#d4af37]/10 transition-all duration-500"></div>
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-sm sm:text-base font-semibold text-gray-300 flex items-center">
                        <i data-lucide="briefcase" class="w-4 h-4 mr-2 text-[#d4af37]"></i>
                        Portfolio Value
                    </h2>
                    <span class="text-xs bg-[#d4af37]/20 text-[#d4af37] px-2.5 py-1 rounded-full font-bold">Total Capital</span>
                </div>
                <div class="flex items-baseline mb-2">
                    <h3 class="text-3xl sm:text-4xl lg:text-5xl font-black text-[#d4af37] tracking-tight">
                        {{ Auth::user()->currency }}{{ number_format($portfolio_value, 2, '.', ',') }}
                    </h3>
                </div>
                <p class="text-xs text-gray-300 flex items-center gap-1.5 mb-4">
                    <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-400"></i>
                    Combined available balance and active assets.
                </p>
            </div>
            <div class="border-t border-white/10 pt-4 mt-auto flex justify-between items-center text-xs">
                <span class="text-gray-400">Cash Balance: {{ Auth::user()->currency }}{{ number_format(Auth::user()->account_bal, 2, '.', ',') }}</span>
                <a href="{{ route('deposits') }}" class="text-[#d4af37] hover:text-[#e5c150] font-bold flex items-center gap-1">
                    Manage Funds <i data-lucide="arrow-right" class="w-3 h-3"></i>
                </a>
            </div>
        </div>

        <!-- Card 2: Active Investments -->
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between group hover:border-[#d4af37]/50 transition-all duration-300">
            <div>
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Active Investments</span>
                    <div class="w-8 h-8 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400">
                        <i data-lucide="activity" class="w-4 h-4"></i>
                    </div>
                </div>
                <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ Auth::user()->currency }}{{ number_format($active_investments_sum, 2, '.', ',') }}
                </h3>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400">
                    {{ $active_investments_count }} Active Positions
                </span>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-xs">
                <a href="{{ route('myplans', 'All') }}" class="text-blue-600 dark:text-blue-400 font-semibold flex items-center justify-between">
                    <span>View Holdings</span>
                    <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Card 3: Investment Returns -->
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between group hover:border-[#d4af37]/50 transition-all duration-300">
            <div>
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Investment Returns</span>
                    <div class="w-8 h-8 rounded-full bg-emerald-50 dark:bg-emerald-900/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                        <i data-lucide="line-chart" class="w-4 h-4"></i>
                    </div>
                </div>
                <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ Auth::user()->currency }}{{ number_format(Auth::user()->roi, 2, '.', ',') }}
                </h3>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400">
                    Total Returns
                </span>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-xs">
                <a href="{{ route('tradinghistory') }}" class="text-emerald-600 dark:text-emerald-400 font-semibold flex items-center justify-between">
                    <span>Performance Log</span>
                    <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Card 4: Total Deposits -->
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between group hover:border-[#d4af37]/50 transition-all duration-300">
            <div>
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Total Deposits</span>
                    <div class="w-8 h-8 rounded-full bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400">
                        <i data-lucide="arrow-down" class="w-4 h-4"></i>
                    </div>
                </div>
                <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ Auth::user()->currency }}{{ number_format($deposited, 2, '.', ',') }}
                </h3>
                <span class="text-xs text-gray-400">Processed Capital Inflows</span>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-xs">
                <a href="{{ route('deposits') }}" class="text-indigo-600 dark:text-indigo-400 font-semibold flex items-center justify-between">
                    <span>Deposit History</span>
                    <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Card 5: Pending Transactions -->
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between group hover:border-[#d4af37]/50 transition-all duration-300">
            <div>
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Pending Transactions</span>
                    <div class="w-8 h-8 rounded-full bg-amber-50 dark:bg-amber-900/20 flex items-center justify-center text-amber-600 dark:text-amber-400">
                        <i data-lucide="clock" class="w-4 h-4"></i>
                    </div>
                </div>
                <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ $pending_transactions_count }}
                </h3>
                <span class="text-xs text-gray-400">In process or verification</span>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-xs">
                <a href="{{ route('accounthistory') }}" class="text-amber-600 dark:text-amber-400 font-semibold flex items-center justify-between">
                    <span>Transaction Audits</span>
                    <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Card 6: Loan Applications -->
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between group hover:border-[#d4af37]/50 transition-all duration-300">
            <div>
                <div class="flex items-center justify-between mb-3">
                    <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 font-medium">Credit & Financing</span>
                    <div class="w-8 h-8 rounded-full bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center text-purple-600 dark:text-purple-400">
                        <i data-lucide="credit-card" class="w-4 h-4"></i>
                    </div>
                </div>
                <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ $loan_applications_count }}
                </h3>
                <span class="text-xs text-gray-400">Financing facilities applied</span>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-xs">
                <a href="{{ route('loan') }}" class="text-purple-600 dark:text-purple-400 font-semibold flex items-center justify-between">
                    <span>Apply / View Credit</span>
                    <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

    </div>

    <!-- Secondary section: Market Overview & Allocations -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 items-stretch mb-6 sm:mb-8">
        
        <!-- Live Stock & Markets Overview -->
        <div class="xl:col-span-2 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-lg text-gray-900 dark:text-white flex items-center gap-2">
                        <i data-lucide="line-chart" class="w-5 h-5 text-[#d4af37]"></i> Market Overview (Equities & Indexes)
                    </h3>
                    <div class="flex gap-2">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
                            AAPL
                        </span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
                            SPX
                        </span>
                    </div>
                </div>
                
                <!-- Stock Ticker Panel -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
                    <div class="p-3 bg-gray-50 dark:bg-gray-900 border border-gray-150 dark:border-gray-800 rounded-xl text-center">
                        <span class="text-xs text-gray-500 font-medium block">S&P 500</span>
                        <span class="text-sm font-bold text-gray-900 dark:text-white" id="spx-value">5,432.20</span>
                    </div>
                    <div class="p-3 bg-gray-50 dark:bg-gray-900 border border-gray-150 dark:border-gray-800 rounded-xl text-center">
                        <span class="text-xs text-gray-500 font-medium block">NASDAQ 100</span>
                        <span class="text-sm font-bold text-gray-900 dark:text-white" id="ndx-value">18,620.40</span>
                    </div>
                    <div class="p-3 bg-gray-50 dark:bg-gray-900 border border-gray-150 dark:border-gray-800 rounded-xl text-center">
                        <span class="text-xs text-gray-500 font-medium block">AAPL (Apple)</span>
                        <span class="text-sm font-bold text-[#d4af37]" id="aapl-value">$188.50</span>
                    </div>
                    <div class="p-3 bg-gray-50 dark:bg-gray-900 border border-gray-150 dark:border-gray-800 rounded-xl text-center">
                        <span class="text-xs text-gray-500 font-medium block">MSFT (Microsoft)</span>
                        <span class="text-sm font-bold text-[#d4af37]" id="msft-value">$425.20</span>
                    </div>
                </div>

                <!-- Advanced TradingView Widget (S&P 500 Index / Stock Focus) -->
                <div id="tradingview_stock_advanced" class="w-full rounded-xl overflow-hidden border border-gray-200 dark:border-gray-800" style="height: 320px; min-height: 320px;"></div>
                <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
                <script type="text/javascript">
                    new TradingView.widget({
                        autosize: true,
                        symbol: "SPX",
                        interval: "60",
                        timezone: "Etc/UTC",
                        theme: "dark",
                        style: "1",
                        locale: "en",
                        toolbar_bg: "#0f2b48",
                        enable_publishing: false,
                        allow_symbol_change: true,
                        container_id: "tradingview_stock_advanced"
                    });
                </script>
            </div>
        </div>

        <!-- Portfolio Allocation / Instant Trade -->
        <div class="xl:col-span-1 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between">
            <form method="POST" action="{{ route('joinplan') }}" id="createTrade" class="space-y-4">
                @csrf
                <div class="flex items-center gap-2 mb-2 pb-2 border-b border-gray-100 dark:border-gray-800">
                    <i data-lucide="pie-chart" class="w-5 h-5 text-[#d4af37]"></i>
                    <h4 class="font-bold text-base text-gray-900 dark:text-white">Portfolio Allocation</h4>
                </div>
                
                <div id="notifiAlert"></div>

                <!-- Stock / Equity Select -->
                <div>
                    <label for="select_assetss" class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Select Security</label>
                    <select id="select_assetss" name="asset" required
                        class="block w-full px-3 py-2.5 text-sm border border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-[#d4af37]/30 focus:border-[#d4af37]">
                        <optgroup label="Blue-Chip Equities">
                            <option value="AAPL" selected>AAPL (Apple Inc.)</option>
                            <option value="MSFT">MSFT (Microsoft Corp.)</option>
                            <option value="GOOG">GOOG (Alphabet Inc.)</option>
                            <option value="TSLA">TSLA (Tesla Inc.)</option>
                            <option value="AMZN">AMZN (Amazon.com Inc.)</option>
                            <option value="NVDA">NVDA (NVIDIA Corp.)</option>
                        </optgroup>
                        <optgroup label="Major Indices">
                            <option value="SPX">S&P 500 INDEX</option>
                            <option value="NDX">NASDAQ 100 INDEX</option>
                        </optgroup>
                        <optgroup label="Treasury & Commodities">
                            <option value="GOLD">XAUUSD (Gold Bullion)</option>
                            <option value="USOIL">Crude Oil Futures</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Investment Capital Amount -->
                <div>
                    <label for="IAmount" class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Allocation Capital</label>
                    <div class="flex rounded-xl overflow-hidden border border-gray-300 dark:border-gray-700 bg-gray-55 dark:bg-gray-900">
                        <span class="px-4 inline-flex items-center text-sm text-gray-500 bg-gray-100 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700">
                            {{ $settings->s_currency }}
                        </span>
                        <input type="number" name="amount" id="IAmount" placeholder="1,000.00" min="50" max="500000"
                            class="w-full bg-transparent focus:outline-none px-4 py-2.5 text-sm text-gray-900 dark:text-white" required>
                    </div>
                    <div class="flex justify-between text-xxs text-gray-400 mt-1">
                        <span>Min: 50</span>
                        <span>Max: 500,000</span>
                    </div>
                </div>

                <!-- Leverage and Plan Duration -->
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label for="leverage" class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Exposure</label>
                        <select name="leverage" id="leverage" required
                            class="block w-full px-3 py-2 text-xs border border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-[#d4af37]/30">
                            <option value="1">1:1 (Direct)</option>
                            <option value="5">1:5 (Margin)</option>
                            <option value="10">1:10</option>
                            <option value="20">1:20</option>
                            <option value="30">1:30</option>
                        </select>
                    </div>
                    <div>
                        <label for="expire" class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Holding Period</label>
                        <select name="expire" id="expire" required
                            class="block w-full px-3 py-2 text-xs border border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-white focus:ring-2 focus:ring-[#d4af37]/30">
                            <option value="1 Days">1 Day</option>
                            <option value="7 Days">1 Week</option>
                            <option value="30 Days">1 Month</option>
                            <option value="90 Days">3 Months</option>
                            <option value="365 Days">1 Year</option>
                        </select>
                    </div>
                </div>

                <!-- Submit Buy/Sell Actions -->
                <div class="grid grid-cols-2 gap-3 pt-3">
                    <button type="submit" name="order_type" value="Buy"
                        class="bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-xl font-bold transition flex items-center justify-center gap-1.5 text-xs uppercase shadow-sm">
                        <i data-lucide="arrow-up" class="w-3.5 h-3.5"></i> Allocate (Buy)
                    </button>
                    <button type="submit" name="order_type" value="Sell"
                        class="bg-red-600 hover:bg-red-500 text-white py-3 rounded-xl font-bold transition flex items-center justify-center gap-1.5 text-xs uppercase shadow-sm">
                        <i data-lucide="arrow-down" class="w-3.5 h-3.5"></i> Hedge (Sell)
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Recent Activity & Referrals (Card 7 & Support) -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        
        <!-- Card 7: Recent Activity Panel -->
        <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between">
            <div>
                <h4 class="font-bold text-base text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                    <i data-lucide="history" class="w-5 h-5 text-[#d4af37]"></i> Recent Portfolio Activity
                </h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-xs sm:text-sm">
                        <thead class="text-gray-600 dark:text-gray-400">
                            <tr class="border-b border-gray-100 dark:border-gray-800 text-left">
                                <th class="px-2 py-2">Details</th>
                                <th class="px-2 py-2">Allocation</th>
                                <th class="px-2 py-2">Action / Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($t_history as $history)
                            <tr class="border-b border-gray-50 dark:border-gray-900/50 hover:bg-gray-55 dark:hover:bg-gray-900/30 transition">
                                <td class="py-3 px-2">
                                    <span class="font-bold text-gray-800 dark:text-gray-200">{{ $history->plan }}</span>
                                    <div class="text-xxs text-gray-400 mt-0.5">{{ $history->created_at->format('M d, Y h:i A') }}</div>
                                </td>
                                <td class="py-3 px-2 font-semibold text-gray-750 dark:text-gray-300">
                                    {{ Auth::user()->currency }}{{ number_format($history->amount, 2, '.', ',') }}
                                </td>
                                <td class="py-3 px-2">
                                    @if($history->type == 'WIN')
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-xs font-bold">
                                            Return +{{ $history->leverage }}%
                                        </span>
                                    @elseif($history->type == 'LOSE')
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-red-500/10 text-red-600 dark:text-red-400 text-xs font-bold">
                                            Loss -{{ $history->leverage }}%
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 text-xs font-bold">
                                            {{ $history->type }}
                                        </span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="py-6 text-center text-gray-400">No recent transactions recorded.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 text-center">
                <a href="{{ route('tradinghistory') }}" class="text-blue-600 dark:text-blue-400 font-bold text-xs inline-flex items-center gap-1">
                    Audit Full Trade Ledger <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>

        <!-- Partnership & Referral Programs -->
        <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between">
            <div>
                <h4 class="font-bold text-base text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                    <i data-lucide="gift" class="w-5 h-5 text-[#d4af37]"></i> Client Referral Partnership
                </h4>
                <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
                    Introduce new investors to BrimStone Brokers. Earn recurring affiliate commissions based on their capital deposits. No personal allocation is required to begin.
                </p>
                
                <div class="bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 rounded-xl p-4 mb-4">
                    <span class="text-xxs text-gray-400 uppercase font-semibold block mb-1">Your Referral Link</span>
                    <div class="flex items-center gap-2">
                        <input type="text" class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-700 dark:text-gray-300 flex-1 min-w-0" value="{{ Auth::user()->ref_link }}" readonly>
                        <button class="bg-[#d4af37] text-gray-900 px-3 py-2 rounded-lg text-xs font-bold hover:bg-[#e5c150] transition whitespace-nowrap" x-on:click="navigator.clipboard.writeText('{{ Auth::user()->ref_link }}'); showCopied = true">Copy</button>
                    </div>
                    <p x-show="showCopied" class="text-xs text-emerald-500 mt-1.5 flex items-center gap-1"><i data-lucide="check" class="w-3.5 h-3.5"></i> Copied to clipboard!</p>
                </div>
            </div>
            
            <div class="border-t border-gray-100 dark:border-gray-800 pt-3 mt-4 flex items-center justify-between text-xs">
                <span class="text-gray-400 font-semibold">Affiliate Reward: {{$settings->referral_commission}}%</span>
                <a href="{{ route('referuser') }}" class="text-blue-600 dark:text-blue-400 font-bold inline-flex items-center gap-1">
                    Partnership Portal <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>
        </div>
        
    </div>

</div>

<!-- Real-time mock price walk ticks for client overview visual elements -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const randomWalk = (id, baseVal, isCurrency = true) => {
            let current = baseVal;
            setInterval(() => {
                const element = document.getElementById(id);
                if (element) {
                    const change = (Math.random() - 0.5) * (baseVal * 0.001);
                    current = Math.max(1, current + change);
                    element.textContent = isCurrency ? '$' + current.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : current.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                }
            }, 3000);
        };
        
        randomWalk('spx-value', 5432.20, false);
        randomWalk('ndx-value', 18620.40, false);
        randomWalk('aapl-value', 188.50, true);
        randomWalk('msft-value', 425.20, true);
    });
</script>

@endsection
