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

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

    <!-- Compact Dashboard Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-3 gap-2">
        <div class="text-left">
            @php
                $userCreatedAt = \Carbon\Carbon::parse(Auth::user()->created_at);
                $secondsSinceCreated = now()->diffInSeconds($userCreatedAt);
            @endphp

            @if ($secondsSinceCreated <= 90)
                <h1 class="text-lg sm:text-xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent animate-gradient">
                    Welcome, {{ Str::limit(Auth::user()->name, 15) }}! 🎉
                </h1>
            @else
                <h1 class="text-lg sm:text-xl font-bold bg-gradient-to-r from-emerald-500 via-cyan-500 to-blue-500 bg-clip-text text-transparent animate-gradient">
                    Welcome back, {{ Str::limit(Auth::user()->name, 15) }} 🚀
                </h1>
            @endif
            <p class="text-xs text-gray-400 flex items-center gap-1">
                <span class="inline-flex items-center gap-0.5">
                    <i data-lucide="activity" class="w-3 h-3 text-emerald-500"></i>
                    Live
                </span>
                <span class="inline-flex items-center gap-0.5">
                    <i data-lucide="clock" class="w-3 h-3 text-amber-500"></i>
                    {{ now()->format('h:i A') }}
                </span>
            </p>
        </div>
        
        <div class="flex gap-1.5">
            @if($settings->wallet_status == "on")
                <a href="{{ route('connect_wallet') }}" class="inline-flex items-center gap-1 px-2 py-1.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg text-xs font-medium shadow-lg">
                    <i data-lucide="link" class="w-3 h-3"></i>
                    <span class="hidden xs:inline">Connect</span>
                    <i data-lucide="sparkles" class="w-3 h-3"></i>
                </a>
            @else
                <div class="inline-flex items-center gap-1 px-2 py-1.5 bg-gradient-to-r from-emerald-500 to-green-600 text-white rounded-lg text-xs font-medium">
                    <i data-lucide="check-circle" class="w-3 h-3"></i>
                    <span class="hidden xs:inline">Connected</span>
                </div>
            @endif
            <a href="{{ route('mplans') }}" class="inline-flex items-center gap-1 px-2 py-1.5 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-lg text-xs font-medium shadow-lg">
                <i data-lucide="trending-up" class="w-3 h-3"></i>
                <span class="hidden xs:inline">Invest</span>
                <i data-lucide="zap" class="w-3 h-3 text-yellow-300"></i>
            </a>
        </div>
    </div>

    <!-- Compact Live Signal Indicator -->
    @if(Auth::user()->progress > 2)
    <div class="mb-3">
        @php
            $signalStrength = Auth::user()->progress;
            $signalColor = $signalStrength < 25 ? 'from-red-500 to-orange-500' : ($signalStrength < 50 ? 'from-yellow-500 to-amber-500' : 'from-emerald-500 to-green-500');
            $signalText = $signalStrength < 25 ? 'Low' : ($signalStrength < 50 ? 'Moderate' : 'Strong');
        @endphp

        <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-3 border border-gray-700 shadow-md">
            <div class="flex items-center justify-between gap-2">
                <div class="flex items-center gap-2">
                    <div class="relative">
                        <div class="w-8 h-8 rounded-lg bg-gradient-to-br {{ $signalColor }} p-0.5 shadow">
                            <div class="w-full h-full rounded-lg bg-gray-900 flex items-center justify-center">
                                <i data-lucide="activity" class="w-4 h-4 text-transparent bg-gradient-to-br {{ $signalColor }} bg-clip-text"></i>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-white">Market Signal</h3>
                        <p class="text-xs text-gray-400">{{ $signalText }}</p>
                    </div>
                </div>
                <div class="text-right">
                    <span class="text-xl font-black text-white">{{ $signalStrength }}%</span>
                </div>
            </div>
            <div class="mt-2">
                <div class="w-full h-1.5 bg-gradient-to-r from-gray-700 to-gray-600 rounded-full overflow-hidden">
                    <div class="bg-gradient-to-r {{ $signalColor }} h-full rounded-full transition-all duration-1000" style="width: {{ $signalStrength }}%"></div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Compact Account Balance Card - DARK MODE -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-3">
        <div class="lg:col-span-2 relative bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 rounded-xl shadow-xl overflow-hidden">
            <div class="relative p-3">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center shadow">
                            <i data-lucide="wallet" class="w-4 h-4 text-white"></i>
                        </div>
                        <div>
                            <h2 class="text-xs font-bold text-white">Balance</h2>
                            <p class="text-[10px] text-blue-200">Available funds</p>
                        </div>
                    </div>
                    <div class="px-2 py-0.5 bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-sm rounded-lg">
                        <span class="text-[10px] font-bold text-emerald-300 flex items-center gap-1">
                            <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
                            LIVE
                        </span>
                    </div>
                </div>

                <div class="mb-2">
                    <h3 class="text-xl sm:text-2xl font-black text-white break-all">
                        {{ Auth::user()->currency }}{{ number_format(Auth::user()->account_bal, 2) }}
                    </h3>
                    @if(isset($bitcoin_price) && $bitcoin_price && $btc_equivalent > 0)
                    <div class="flex items-center gap-2 mt-1">
                        <div class="px-2 py-0.5 bg-gradient-to-r from-amber-500/20 to-yellow-500/20 backdrop-blur-sm rounded-lg">
                            <div class="flex items-center gap-1">
                                <i data-lucide="bitcoin" class="w-3 h-3 text-amber-400"></i>
                                <span class="text-[10px] font-bold text-amber-300">{{ number_format($btc_equivalent, 6) }} BTC</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

                <div class="grid grid-cols-2 gap-2">
                    <a href="{{ route('deposits') }}" 
                       class="group relative overflow-hidden bg-gradient-to-r from-blue-500 to-cyan-400 hover:from-blue-600 hover:to-cyan-500 text-white rounded-lg p-2 text-xs font-bold text-center">
                        Deposit
                    </a>
                    <a href="{{ route('withdrawalsdeposits') }}" 
                       class="group relative overflow-hidden bg-gradient-to-r from-purple-500 to-pink-400 hover:from-purple-600 hover:to-pink-500 text-white rounded-lg p-2 text-xs font-bold text-center">
                        Withdraw
                    </a>
                </div>
            </div>
        </div>

        <!-- Compact Stats Grid - DARK MODE -->
        <div class="grid grid-cols-2 gap-2">
            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-2 border border-gray-700 shadow-lg">
                <div class="flex items-center gap-1.5 mb-1">
                    <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-emerald-500 to-green-400 flex items-center justify-center">
                        <i data-lucide="trending-up" class="w-3 h-3 text-white"></i>
                    </div>
                    <span class="text-[10px] text-gray-400">Total Profit</span>
                </div>
                <p class="text-sm font-bold text-white break-all">
                    {{ Auth::user()->currency }}{{ number_format(Auth::user()->roi, 2) }}
                </p>
            </div>

            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-2 border border-gray-700 shadow-lg">
                <div class="flex items-center gap-1.5 mb-1">
                    <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center">
                        <i data-lucide="arrow-down-circle" class="w-3 h-3 text-white"></i>
                    </div>
                    <span class="text-[10px] text-gray-400">Total Deposit</span>
                </div>
                <p class="text-sm font-bold text-white break-all">
                    {{ Auth::user()->currency }}{{ number_format($deposited, 2) }}
                </p>
            </div>

            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-2 border border-gray-700 shadow-lg">
                <div class="flex items-center gap-1.5 mb-1">
                    <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-purple-500 to-pink-400 flex items-center justify-center">
                        <i data-lucide="arrow-up-circle" class="w-3 h-3 text-white"></i>
                    </div>
                    <span class="text-[10px] text-gray-400">Total Withdrawal</span>
                </div>
                <p class="text-sm font-bold text-white break-all">
                    {{ Auth::user()->currency }}{{ number_format($total_withdrawal, 2) }}
                </p>
            </div>

            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-2 border border-gray-700 shadow-lg">
                <div class="flex items-center gap-1.5 mb-1">
                    <div class="w-6 h-6 rounded-lg bg-gradient-to-br from-amber-500 to-yellow-400 flex items-center justify-center">
                        <i data-lucide="gift" class="w-3 h-3 text-white"></i>
                    </div>
                    <span class="text-[10px] text-gray-400">Bonus Rewards</span>
                </div>
                <p class="text-sm font-bold text-white break-all">
                    {{ Auth::user()->currency }}{{ number_format(Auth::user()->bonus ?? 0, 2) }}
                </p>
            </div>
        </div>
    </div>

    <!-- Compact KYC Section - DARK MODE (FIXED) -->
    @if(isset($settings->enable_kyc) && $settings->enable_kyc === 'yes')
    <div class="mb-3" x-data="{ kycOpen: false }">
        @if(Auth::user()->account_verify === 'Verified')
            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-3 border border-emerald-500/30 shadow-lg">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-green-400 flex items-center justify-center">
                            <i data-lucide="shield-check" class="w-4 h-4 text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xs font-bold text-white">Verified ✅</h3>
                            <p class="text-[10px] text-emerald-400">Full access</p>
                        </div>
                    </div>
                    <div class="px-2 py-1 bg-gradient-to-r from-emerald-500 to-green-400 text-white rounded-lg text-[10px] font-bold">
                        VERIFIED
                    </div>
                </div>
            </div>
        @else
            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border border-blue-500/30 shadow-lg">
                <div class="p-3 border-b border-gray-700">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-400 flex items-center justify-center">
                                <i data-lucide="shield" class="w-4 h-4 text-white"></i>
                            </div>
                            <div>
                                <h3 class="text-xs font-bold text-white">Verify Account 🔓</h3>
                                <p class="text-[10px] text-blue-400">Unlock features</p>
                            </div>
                        </div>
                        <button @click="kycOpen = !kycOpen" class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg text-[10px] font-bold">
                            <span x-text="kycOpen ? 'HIDE' : 'VIEW'"></span>
                        </button>
                    </div>
                </div>
                
                <div x-show="kycOpen" x-transition class="p-3">
                    @if(Auth::user()->account_verify === 'Under review')
                        <div class="text-center">
                            <div class="inline-block w-12 h-12 bg-gradient-to-br from-amber-500 to-yellow-400 rounded-lg flex items-center justify-center mx-auto mb-2">
                                <i data-lucide="clock" class="w-6 h-6 text-white"></i>
                            </div>
                            <h4 class="text-sm font-bold text-white mb-1">Under Review ⚡</h4>
                            <p class="text-xs text-gray-400">Your documents are being reviewed</p>
                        </div>
                    @else
                        <a href="{{ route('account.verify') }}" 
                           class="block w-full px-4 py-2 bg-gradient-to-r from-emerald-500 to-green-400 text-white rounded-lg text-xs font-bold text-center">
                            START VERIFICATION
                        </a>
                    @endif
                </div>
            </div>
        @endif
    </div>
    @endif

    <!-- Compact Trading Interface -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-3">
        <!-- Live Market Chart - Simplified -->
        <div class="lg:col-span-2 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-xl shadow-xl overflow-hidden">
            <div class="p-3">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-white">Market Overview 📊</h3>
                    <div class="px-2 py-0.5 bg-gradient-to-r from-emerald-500/20 to-green-500/20 rounded-full">
                        <span class="text-[10px] font-bold text-emerald-300 flex items-center gap-1">
                            <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
                            LIVE
                        </span>
                    </div>
                </div>
                
                <!-- Compact Asset Tickers -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-2">
                    <div class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-lg p-2 border border-emerald-500/20">
                        <div class="text-[10px] text-gray-400">BTC/USDT</div>
                        <div id="btc-price" class="text-xs font-bold text-emerald-400">$64,823</div>
                    </div>
                    <div class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-lg p-2 border border-blue-500/20">
                        <div class="text-[10px] text-gray-400">ETH/USDT</div>
                        <div id="eth-price" class="text-xs font-bold text-blue-400">$3,422</div>
                    </div>
                    <div class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-lg p-2 border border-cyan-500/20">
                        <div class="text-[10px] text-gray-400">EUR/USD</div>
                        <div id="eurusd-price" class="text-xs font-bold text-cyan-400">1.0824</div>
                    </div>
                    <div class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-lg p-2 border border-purple-500/20">
                        <div class="text-[10px] text-gray-400">GBP/USD</div>
                        <div id="gbpusd-price" class="text-xs font-bold text-purple-400">1.2658</div>
                    </div>
                </div>
                
                <!-- Mini Chart -->
                <div class="relative rounded-lg overflow-hidden" style="height: 150px;">
                    <div id="tradingview_advanced" class="w-full h-full"></div>
                </div>
            </div>
        </div>

        <!-- Compact Trade Execution -->
        <div class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-xl shadow-xl overflow-hidden">
            <div class="p-3">
                <h3 class="text-sm font-bold text-white mb-2">Execute Trade ⚡</h3>

                <form method="POST" action="{{ route('joinplan') }}" id="createTrade">
                    @csrf
                    
                    <div class="space-y-2">
                        <select name="asset" required class="w-full px-3 py-2 bg-gradient-to-r from-gray-800/50 to-gray-900/50 border border-blue-500/30 rounded-lg text-white text-xs">
                            @if(isset($instruments) && $instruments->count() > 0)
                                @foreach($instruments as $type => $typeInstruments)
                                    <optgroup label="{{ ucfirst($type) }}">
                                        @foreach($typeInstruments as $instrument)
                                            <option value="{{ $instrument->symbol }}">{{ $instrument->symbol }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            @else
                                <option value="BTCUSD">BTC/USD</option>
                                <option value="ETHUSD">ETH/USD</option>
                                <option value="EURUSD">EUR/USD</option>
                                <option value="GBPUSD">GBP/USD</option>
                            @endif
                        </select>

                        <div class="relative">
                            <input type="number" name="amount" placeholder="Amount" min="50" max="500000" required 
                                   class="w-full pl-6 pr-3 py-2 bg-gradient-to-r from-gray-800/50 to-gray-900/50 border border-emerald-500/30 rounded-lg text-white text-xs"
                                   value="1000">
                            <span class="absolute left-2 top-1/2 transform -translate-y-1/2 text-[10px] text-emerald-300">{{ Auth::user()->currency }}</span>
                        </div>

                        <div class="grid grid-cols-2 gap-2">
                            <select name="leverage" required class="px-2 py-2 bg-gradient-to-r from-gray-800/50 to-gray-900/50 border border-yellow-500/30 rounded-lg text-white text-[10px]">
                                <option value="10">1:10</option>
                                <option value="20">1:20</option>
                                <option value="30">1:30</option>
                                <option value="40">1:40</option>
                                <option value="50">1:50</option>
                            </select>
                            <select name="expire" required class="px-2 py-2 bg-gradient-to-r from-gray-800/50 to-gray-900/50 border border-purple-500/30 rounded-lg text-white text-[10px]">
                                <option value="5 Minutes">5 Min</option>
                                <option value="15 Minutes">15 Min</option>
                                <option value="30 Minutes">30 Min</option>
                                <option value="60 Minutes">1 Hour</option>
                                <option value="4 Hours">4 Hours</option>
                            </select>
                        </div>

                        <div class="grid grid-cols-2 gap-2 pt-1">
                            <button type="submit" name="order_type" value="Buy" 
                                    class="bg-gradient-to-r from-emerald-500 to-green-400 hover:from-emerald-600 hover:to-green-500 text-white rounded-lg py-2 text-xs font-bold">
                                BUY ↑
                            </button>
                            <button type="submit" name="order_type" value="Sell" 
                                    class="bg-gradient-to-r from-rose-500 to-pink-400 hover:from-rose-600 hover:to-pink-500 text-white rounded-lg py-2 text-xs font-bold">
                                SELL ↓
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Compact Recent Activity & Referrals -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
        <!-- Recent Trades - Compact -->
        <div class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-xl shadow-xl overflow-hidden">
            <div class="p-3">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-bold text-white">Recent Trades ⚡</h3>
                    <a href="{{ route('tradinghistory') }}" class="text-[10px] text-cyan-300">View All →</a>
                </div>

                <div class="space-y-2 max-h-48 overflow-y-auto">
                    @forelse($t_history->take(3) as $history)
                    <div class="bg-gradient-to-r from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-lg p-2 border border-gray-700">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <div class="w-6 h-6 rounded-lg bg-gradient-to-br {{ $history->type == 'WIN' ? 'from-emerald-500 to-green-400' : 'from-rose-500 to-pink-400' }} flex items-center justify-center">
                                    <i data-lucide="{{ $history->type == 'WIN' ? 'trending-up' : 'trending-down' }}" class="w-3 h-3 text-white"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-white">{{ Str::limit($history->plan, 10) }}</p>
                                    <p class="text-[8px] text-gray-400">{{ $history->created_at->format('M d, H:i') }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-black {{ $history->type == 'WIN' ? 'text-emerald-400' : 'text-rose-400' }} break-all">
                                    {{ Auth::user()->currency }}{{ number_format($history->amount, 2) }}
                                </p>
                                <span class="text-[8px] px-1.5 py-0.5 rounded-full {{ $history->type == 'WIN' ? 'bg-emerald-500/20 text-emerald-300' : 'bg-rose-500/20 text-rose-300' }}">
                                    {{ $history->type }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-4">
                        <p class="text-xs text-gray-400">No recent trades</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Referral Program - Compact -->
        <div class="bg-gradient-to-br from-blue-900 via-purple-900 to-pink-900 rounded-xl shadow-xl overflow-hidden">
            <div class="p-3">
                <h3 class="text-sm font-bold text-white mb-2">Referral Program 💰</h3>

                <div class="space-y-2">
                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2">
                        <p class="text-[10px] text-blue-100 mb-2">Share your link:</p>
                        <div class="flex gap-1">
                            <input type="text" value="{{ Auth::user()->ref_link }}" readonly 
                                   class="flex-1 px-2 py-1.5 bg-white/10 border border-white/20 rounded-lg text-[10px] text-white truncate">
                            <button @click="navigator.clipboard.writeText('{{ Auth::user()->ref_link }}'); showCopied = true"
                                    class="px-3 py-1.5 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg text-[10px] font-bold whitespace-nowrap">
                                COPY
                            </button>
                        </div>
                        <div x-show="showCopied" x-transition class="mt-1">
                            <span class="text-[8px] text-emerald-300">✓ Copied!</span>
                        </div>
                    </div>
                    
                    <a href="{{ route('referuser') }}" 
                       class="block w-full px-4 py-2 bg-gradient-to-r from-yellow-500 to-amber-400 text-gray-900 rounded-lg text-xs font-bold text-center">
                        View Referrals →
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- TradingView Scripts -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

<style>
    /* Mobile-first responsive adjustments */
    @media (max-width: 640px) {
        .container {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        
        /* Hide less important text on very small screens */
        .xs\:inline {
            display: inline;
        }
        @media (max-width: 380px) {
            .xs\:inline {
                display: none;
            }
        }
        
        /* Prevent horizontal scroll */
        .break-all {
            word-break: break-all;
        }
        
        /* Smaller tap targets are fine on mobile */
        button, a {
            min-height: 32px;
        }
    }
    
    /* Custom animations */
    @keyframes gradient-x {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    .animate-gradient {
        background-size: 200% auto;
        animation: gradient-x 3s ease infinite;
    }
    
    /* Scrollbar styling for recent trades */
    .overflow-y-auto::-webkit-scrollbar {
        width: 3px;
    }
    
    .overflow-y-auto::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .overflow-y-auto::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }
</style>

<script type="text/javascript">
    // Initialize mini chart
    if (typeof TradingView !== 'undefined') {
        new TradingView.widget({
            autosize: true,
            symbol: "BINANCE:BTCUSDT",
            interval: "30",
            timezone: "Etc/UTC",
            theme: "dark",
            style: "1",
            locale: "en",
            toolbar_bg: "#1e293b",
            enable_publishing: false,
            allow_symbol_change: false,
            container_id: "tradingview_advanced",
            hide_side_toolbar: true,
            hide_top_toolbar: true,
            withdateranges: false,
            show_popup_button: false,
            studies: [],
        });
    }

    // Simple price updates
    async function fetchPrices() {
        try {
            const cryptoRes = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd');
            const cryptoData = await cryptoRes.json();
            
            if (cryptoData.bitcoin) {
                const btcElement = document.getElementById('btc-price');
                if (btcElement) {
                    btcElement.textContent = '$' + cryptoData.bitcoin.usd.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                }
            }
            if (cryptoData.ethereum) {
                const ethElement = document.getElementById('eth-price');
                if (ethElement) {
                    ethElement.textContent = '$' + cryptoData.ethereum.usd.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
                }
            }
        } catch (error) {
            console.error('Error fetching prices:', error);
        }
    }

    // Simulate forex price updates
    function updateForexPrices() {
        const eurUsd = document.getElementById('eurusd-price');
        const gbpUsd = document.getElementById('gbpusd-price');
        
        if (eurUsd) {
            const eurChange = (Math.random() - 0.5) * 0.001;
            let eurValue = parseFloat(eurUsd.textContent) || 1.0824;
            eurValue = Math.max(1.05, Math.min(1.12, eurValue + eurChange));
            eurUsd.textContent = eurValue.toFixed(4);
        }
        
        if (gbpUsd) {
            const gbpChange = (Math.random() - 0.5) * 0.001;
            let gbpValue = parseFloat(gbpUsd.textContent) || 1.2658;
            gbpValue = Math.max(1.24, Math.min(1.29, gbpValue + gbpChange));
            gbpUsd.textContent = gbpValue.toFixed(4);
        }
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        fetchPrices();
        updateForexPrices();
        
        setInterval(fetchPrices, 15000);
        setInterval(updateForexPrices, 5000);
    });
</script>

<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = 'bc1a421c6f23dd727f05b16681f7e846fd6e5d08';
window.smartsupp||(function(d) {
  var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
  s=d.getElementsByTagName('script')[0];c=d.createElement('script');
  c.type='text/javascript';c.charset='utf-8';c.async=true;
  c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
<noscript>Powered by <a href="https://www.smartsupp.com" target="_blank">Smartsupp</a></noscript>
@endsection