@extends('User.layout')

@section('navlink')
    <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Dashboard</span>
@endsection

@section('content')
    @php
        $referralCode = $referralCode ?? (auth()->user()->referral_code ?? 'YOURCODE');
        $referralLink = $referralLink ?? url('/register') . '?ref=' . urlencode($referralCode);
    @endphp

    <style>
        .dashboard-page {
            --dash-gold: #c99a3b;
            --dash-gold-light: #e4be63;
            --dash-text: #f6f1e4;
            --dash-muted: #a69b83;
            --dash-border: rgba(201, 154, 59, .2);
            color: var(--dash-text);
        }

        .dashboard-heading {
            color: var(--dash-text);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .dashboard-subtitle {
            color: var(--dash-muted);
            font-size: 13px;
        }

        /* Financial summary */
        .dashboard-stats {
            margin: 25px 0 30px;
            border-top: 1px solid var(--dash-border);
            border-bottom: 1px solid var(--dash-border);
        }

        .dashboard-stat {
            height: 100%;
            padding: 20px;
            transition: background .25s ease;
        }

        .dashboard-stat:hover {
            background: rgba(201, 154, 59, .05);
        }

        .stat-divider {
            border-right: 1px solid var(--dash-border);
        }

        .stat-icon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(201, 154, 59, .3);
            border-radius: 10px;
            background: rgba(201, 154, 59, .08);
            color: var(--dash-gold-light);
            font-size: 20px;
        }

        .stat-label {
            color: var(--dash-muted);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .6px;
        }

        .stat-value {
            color: var(--dash-text);
            font-family: 'Outfit', sans-serif;
            font-size: clamp(19px, 2vw, 27px);
            font-weight: 700;
            line-height: 1.3;
            text-align: center;
            overflow-wrap: anywhere;
        }

        .stat-currency {
            color: var(--dash-gold-light);
            font-size: 12px;
            text-align: center;
            margin-top: 5px;
        }

        /* Shared section styling */
        .dashboard-panel {
            height: 100%;
            /* overflow: hidden; */
            border: 1px solid var(--dash-border);
            border-radius: 14px;
            background:
                radial-gradient(circle at 95% 5%, rgba(201, 154, 59, .10), transparent 35%),
                linear-gradient(135deg, #17130d, #100d08);
        }

        .panel-heading {
            color: var(--dash-text);
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .panel-description {
            color: var(--dash-muted);
            font-size: 12px;
            margin-bottom: 0;
        }

        .panel-header {
            padding: 20px 22px;
            border-bottom: 1px solid rgba(201, 154, 59, .12);
        }

        /* Referral panel */
        .referral-panel {
            position: relative;
            padding: 22px;
        }



        .referral-icon {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 12px;
            background: rgba(201, 154, 59, .12);
            border: 1px solid rgba(201, 154, 59, .3);
            color: var(--dash-gold-light);
            font-size: 23px;
        }

        .referral-label {
            display: block;
            color: var(--dash-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .7px;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .referral-input-group {
            display: flex;
            width: 100%;
            gap: 7px;
        }

        .referral-input {
            min-width: 0;
            flex: 1;
            width: 100%;
            height: 42px;
            padding: 9px 11px;
            border: 1px solid rgba(201, 154, 59, .25);
            border-radius: 8px;
            background: rgba(255, 255, 255, .035);
            color: var(--dash-text);
            font-size: 11px;
            outline: none;
        }

        .referral-input:focus {
            border-color: var(--dash-gold);
            box-shadow: 0 0 0 3px rgba(201, 154, 59, .08);
        }

        .referral-btn,
        .referral-outline-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 40px;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            transition: .2s ease;
        }

        .referral-btn {
            border: 1px solid var(--dash-gold);
            background: var(--dash-gold);
            color: #100d08;
        }

        .referral-btn:hover {
            background: var(--dash-gold-light);
            border-color: var(--dash-gold-light);
            color: #100d08;
        }

        .referral-outline-btn {
            border: 1px solid rgba(201, 154, 59, .35);
            background: rgba(201, 154, 59, .06);
            color: var(--dash-gold-light);
        }

        .referral-outline-btn:hover {
            color: var(--dash-text);
            border-color: var(--dash-gold);
            background: rgba(201, 154, 59, .14);
        }

        .referral-divider {
            border-top: 1px solid rgba(201, 154, 59, .15);
            margin: 20px 0;
        }

        .referral-code {
            color: var(--dash-gold-light);
            font-family: 'Outfit', sans-serif;
            font-size: 19px;
            font-weight: 800;
            letter-spacing: 1.5px;
        }

        .referral-share {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 16px;
        }

        .referral-note {
            color: var(--dash-muted);
            font-size: 11px;
            margin-top: 12px;
        }

        /* Market chart */
        .market-panel {
            padding: 0;
        }

        .market-chart-header {
            padding: 20px 22px 16px;
        }

        .market-symbol {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .market-symbol-icon {
            width: 45px;
            height: 45px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(201, 154, 59, .10);
            border: 1px solid rgba(201, 154, 59, .35);
            color: var(--dash-gold-light);
            font-size: 23px;
        }

        .market-symbol-name {
            color: var(--dash-text);
            font-family: 'Outfit', sans-serif;
            font-size: 17px;
            font-weight: 700;
        }

        .market-symbol-description {
            color: #849397;
            font-size: 11px;
            margin-top: 3px;
        }

        .market-live-price {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        .market-current-price {
            color: var(--dash-text);
            font-family: 'Outfit', sans-serif;
            font-size: 24px;
            font-weight: 800;
            line-height: 1;
        }

        .market-percent {
            padding: 6px 8px;
            border-radius: 7px;
            color: #00e5a0;
            background: rgba(0, 229, 160, .08);
            font-size: 11px;
            font-weight: 700;
        }

        .market-percent.negative {
            color: #ff5d6c;
            background: rgba(255, 93, 108, .08);
        }

        .market-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 9px 12px;
            border-top: 1px solid rgba(201, 154, 59, .08);
            border-bottom: 1px solid rgba(201, 154, 59, .12);
        }

        .timeframes,
        .chart-actions {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .timeframe-btn {
            min-width: 35px;
            height: 32px;
            padding: 0 8px;
            border: 1px solid transparent;
            border-radius: 7px;
            background: transparent;
            color: #849397;
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
        }

        .timeframe-btn:hover,
        .timeframe-btn.active {
            color: var(--dash-gold-light);
            background: rgba(201, 154, 59, .10);
            border-color: rgba(201, 154, 59, .35);
        }

        .chart-action-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 8px;
            background: rgba(255, 255, 255, .025);
            color: #91a0a3;
            cursor: pointer;
        }

        .chart-action-btn:hover,
        .chart-action-btn.active {
            color: var(--dash-gold-light);
            border-color: rgba(201, 154, 59, .3);
            background: rgba(201, 154, 59, .06);
        }

        .chart-wrapper {
            position: relative;
            width: 100%;
            height: 219px;
        }

        #usdtChart {
            width: 100%;
            height: 100%;
        }

        .chart-loading {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #849397;
            font-size: 12px;
            pointer-events: none;
        }

        .chart-loading.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .chart-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 9px 14px;
            border-top: 1px solid rgba(201, 154, 59, .08);
            color: #849397;
            font-size: 10px;
        }

        .chart-status {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .chart-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #00e5a0;
            box-shadow: 0 0 8px rgba(0, 229, 160, .65);
            animation: livePulse 1.8s infinite;
        }

        @keyframes livePulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .35;
            }
        }

        @media (max-width: 991.98px) {
            .stat-divider:nth-child(2) {
                border-right: 0;
            }

            .stat-divider:nth-child(-n+2) {
                border-bottom: 1px solid var(--dash-border);
            }

            .chart-wrapper {
                height: 360px;
            }
        }

        @media (max-width: 767.98px) {
            .dashboard-heading {
                font-size: 1.3rem;
            }

            .dashboard-stat {
                padding: 16px 10px;
            }

            .stat-divider {
                border-right: 0;
                border-bottom: 1px solid var(--dash-border);
            }

            .market-chart-header {
                padding: 16px;
            }

            .market-live-price {
                justify-content: flex-start;
                margin-top: 12px;
            }

            .market-toolbar {
                overflow-x: auto;
                scrollbar-width: none;
            }

            .market-toolbar::-webkit-scrollbar {
                display: none;
            }

            .timeframes,
            .chart-actions {
                flex-shrink: 0;
            }

            .chart-wrapper {
                height: 330px;
            }

            .referral-panel {
                padding: 20px 16px;
            }
        }

        @media (max-width: 575.98px) {
            .dashboard-stats {
                margin-top: 20px;
            }

            .stat-divider:last-child {
                border-bottom: 0;
            }

            .referral-input-group {
                flex-wrap: wrap;
            }

            .referral-input {
                flex-basis: 100%;
            }

            .referral-btn,
            .referral-outline-btn.copy-code-btn {
                width: 100%;
            }

            .chart-wrapper {
                height: 300px;
            }
        }
    </style>

    <div class="dashboard-page">

        {{-- Dashboard heading --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h1 class="dashboard-heading mb-1">Dashboard</h1>

            </div>
        </div>

        {{-- Financial summary --}}
        <div class="dashboard-stats card-animated-border">
            <div class="row g-0">
                <div class="col-6 col-lg-3">
                    <div class="dashboard-stat stat-divider">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="stat-icon"><i class="ti ti-wallet"></i></div>
                            <div class="stat-label">Wallet Deposit</div>
                        </div>
                        <div class="stat-value">${{ number_format($walletDeposit ?? 0, 2) }}</div>
                        <div class="stat-currency">USDT</div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="dashboard-stat stat-divider">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="stat-icon"><i class="ti ti-chart-line"></i></div>
                            <div class="stat-label">Level Income</div>
                        </div>
                        <div class="stat-value">${{ number_format($levelIncome ?? 0, 2) }}</div>
                        <div class="stat-currency">USDT</div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="dashboard-stat stat-divider">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="stat-icon"><i class="ti ti-users"></i></div>
                            <div class="stat-label">Direct Income</div>
                        </div>
                        <div class="stat-value">${{ number_format($directIncome ?? 0, 2) }}</div>
                        <div class="stat-currency">USDT</div>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="dashboard-stat">
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="stat-icon"><i class="ti ti-cash"></i></div>
                            <div class="stat-label">Withdrawals</div>
                        </div>
                        <div class="stat-value">${{ number_format($withdrawals ?? 0, 2) }}</div>
                        <div class="stat-currency">USDT</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Chart and referral card: equal Bootstrap columns --}}
        <div class="row g-4 align-items-stretch">

            {{-- USDT market chart: half section --}}
            <div class="col-12 col-xl-6">
                <section class="dashboard-panel market-panel card-animated-border h-100">

                    <div class="market-chart-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <div class="market-symbol">
                                    <div class="market-symbol-icon">$</div>
                                    <div>
                                        <div class="market-symbol-name">USDT / USD</div>
                                        <div class="market-symbol-description">Tether USD</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-auto">
                                <div class="market-live-price">
                                    <div class="market-current-price" id="usdtPrice">Loading...</div>
                                    <div class="market-percent" id="usdtPercent">↗ 0.00%</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="market-toolbar">
                        <div class="timeframes">
                            <button type="button" class="timeframe-btn" data-label="1H">1H</button>
                            <button type="button" class="timeframe-btn" data-label="4H">4H</button>
                            <button type="button" class="timeframe-btn active" data-label="1D">1D</button>
                            <button type="button" class="timeframe-btn" data-label="1W">1W</button>
                            <button type="button" class="timeframe-btn" data-label="1M">1M</button>
                            <button type="button" class="timeframe-btn" data-label="ALL">ALL</button>
                        </div>

                        <div class="chart-actions">
                            <button type="button" class="chart-action-btn" id="resetChart" title="Reset chart">
                                <i class="ti ti-refresh"></i>
                            </button>
                            <button type="button" class="chart-action-btn" id="toggleGrid" title="Toggle grid">
                                <i class="ti ti-table"></i>
                            </button>
                            <button type="button" class="chart-action-btn" id="fullscreenChart" title="Fullscreen">
                                <i class="ti ti-arrows-maximize"></i>
                            </button>
                        </div>
                    </div>

                    <div class="chart-wrapper" id="chartWrapper">
                        <div class="chart-loading" id="chartLoading">Loading market data...</div>
                        <div id="usdtChart"></div>
                    </div>

                    <div class="chart-footer">
                        <div class="chart-status">
                            <span class="chart-status-dot"></span>
                            <span id="chartStatus">Live Market</span>
                        </div>
                        <div id="chartUpdated">Updating...</div>
                    </div>
                </section>
            </div>

            {{-- Referral link: half section --}}
            <div class="col-12 col-xl-6">
                <section class="dashboard-panel referral-panel card-animated-border h-100">

                    <div class="d-flex align-items-center gap-3">
                        <div class="referral-icon">
                            <i class="ti ti-users"></i>
                        </div>
                        <div>
                            <h2 class="panel-heading">Your Referral Link</h2>
                            <p class="panel-description">
                                Invite friends and grow your network.
                            </p>
                        </div>
                    </div>

                    <div class="referral-divider"></div>

                    <div class="mb-4">
                        <label class="referral-label" for="referralLink">Referral URL</label>
                        <div class="referral-input-group">
                            <input type="text" id="referralLink" class="referral-input" value="{{ $referralLink }}"
                                readonly>
                            <button type="button" class="referral-btn" onclick="copyReferralLink()">
                                <i class="ti ti-copy"></i>
                                <span id="copyLinkText">Copy Link</span>
                            </button>
                        </div>
                    </div>

                    <div>
                        <label class="referral-label" for="referralCode">Referral Code</label>
                        <div class="referral-input-group">
                            <input type="text" id="referralCode" class="referral-input" value="{{ $referralCode }}"
                                readonly>
                            <button type="button" class="referral-outline-btn copy-code-btn"
                                onclick="copyReferralCode()">
                                <i class="ti ti-copy"></i>
                                <span id="copyCodeText">Copy Code</span>
                            </button>
                        </div>
                    </div>

                    <div class="referral-divider"></div>

                    <div class="referral-share">
                        <a href="https://wa.me/?text={{ urlencode('Join me using my referral link: ' . $referralLink) }}"
                            target="_blank" rel="noopener noreferrer" class="referral-outline-btn">
                            <i class="ti ti-brand-whatsapp"></i>
                            WhatsApp
                        </a>

                        <a href="https://t.me/share/url?url={{ urlencode($referralLink) }}&text={{ urlencode('Join me using my referral link') }}"
                            target="_blank" rel="noopener noreferrer" class="referral-outline-btn">
                            <i class="ti ti-brand-telegram"></i>
                            Telegram
                        </a>

                        <button type="button" class="referral-outline-btn" onclick="shareReferralLink()">
                            <i class="ti ti-share"></i>
                            Share Link
                        </button>
                    </div>

                    <p class="referral-note mb-0">
                        Share your referral link with friends to invite them to join.
                    </p>
                </section>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            /* Referral copy and share */
            async function copyText(text, buttonTextId, defaultText) {
                const textElement = document.getElementById(buttonTextId);

                try {
                    if (navigator.clipboard && window.isSecureContext) {
                        await navigator.clipboard.writeText(text);
                    } else {
                        const tempInput = document.createElement('textarea');
                        tempInput.value = text;
                        tempInput.style.position = 'fixed';
                        tempInput.style.opacity = '0';
                        document.body.appendChild(tempInput);
                        tempInput.select();

                        const copied = document.execCommand('copy');
                        tempInput.remove();

                        if (!copied) throw new Error('Copy failed');
                    }

                    if (textElement) {
                        textElement.textContent = 'Copied!';
                        setTimeout(() => {
                            textElement.textContent = defaultText;
                        }, 1800);
                    }
                } catch (error) {
                    console.error('Unable to copy:', error);
                    alert('Unable to copy. Please select and copy the text manually.');
                }
            }

            window.copyReferralLink = function() {
                const input = document.getElementById('referralLink');
                if (input) copyText(input.value, 'copyLinkText', 'Copy Link');
            };

            window.copyReferralCode = function() {
                const input = document.getElementById('referralCode');
                if (input) copyText(input.value, 'copyCodeText', 'Copy Code');
            };

            window.shareReferralLink = async function() {
                const input = document.getElementById('referralLink');
                if (!input) return;

                const shareData = {
                    title: 'Join me',
                    text: 'Join me using my referral link',
                    url: input.value
                };

                if (navigator.share) {
                    try {
                        await navigator.share(shareData);
                    } catch (error) {
                        if (error.name !== 'AbortError') {
                            console.error('Share failed:', error);
                        }
                    }
                } else {
                    await copyText(input.value, 'copyLinkText', 'Copy Link');
                    alert(
                        'Sharing is not supported in this browser. Your referral link may have been copied.');
                }
            };

            /* USDT chart */
            const chartContainer = document.getElementById('usdtChart');
            const chartWrapper = document.getElementById('chartWrapper');
            const priceElement = document.getElementById('usdtPrice');
            const percentElement = document.getElementById('usdtPercent');
            const loadingElement = document.getElementById('chartLoading');
            const statusElement = document.getElementById('chartStatus');
            const updatedElement = document.getElementById('chartUpdated');

            if (!chartContainer || !window.LightweightCharts) {
                if (loadingElement) {
                    loadingElement.textContent = 'Chart library could not be loaded.';
                }
                return;
            }

            let currentTimeframe = '1D';
            let gridVisible = true;
            let requestId = 0;

            const chart = LightweightCharts.createChart(chartContainer, {
                width: chartContainer.clientWidth,
                height: chartContainer.clientHeight,
                layout: {
                    background: {
                        type: 'solid',
                        color: 'transparent'
                    },
                    textColor: '#819094'
                },
                grid: {
                    vertLines: {
                        color: 'rgba(132,153,160,.08)'
                    },
                    horzLines: {
                        color: 'rgba(132,153,160,.08)'
                    }
                },
                crosshair: {
                    mode: LightweightCharts.CrosshairMode.Normal
                },
                rightPriceScale: {
                    visible: true,
                    borderColor: 'rgba(201,154,59,.10)',
                    scaleMargins: {
                        top: .08,
                        bottom: .08
                    }
                },
                timeScale: {
                    borderColor: 'rgba(201,154,59,.10)',
                    timeVisible: true,
                    secondsVisible: false,
                    rightOffset: 4,
                    barSpacing: 8,
                    minBarSpacing: 3
                },
                handleScroll: {
                    mouseWheel: true,
                    pressedMouseMove: true,
                    horzTouchDrag: true,
                    vertTouchDrag: true
                },
                handleScale: {
                    axisPressedMouseMove: true,
                    mouseWheel: true,
                    pinch: true
                }
            });

            const candleSeries = chart.addSeries(
                LightweightCharts.CandlestickSeries, {
                    upColor: '#00e5a0',
                    borderUpColor: '#00e5a0',
                    wickUpColor: '#00e5a0',
                    downColor: '#ff5d6c',
                    borderDownColor: '#ff5d6c',
                    wickDownColor: '#ff5d6c',
                    priceLineVisible: true,
                    lastValueVisible: true,
                    priceLineColor: '#c99a3b',
                    priceLineWidth: 1,
                    priceFormat: {
                        type: 'price',
                        precision: 4,
                        minMove: .0001
                    }
                }
            );

            const timeframeSettings = {
                '1H': {
                    days: 1,
                    hours: 1
                },
                '4H': {
                    days: 1,
                    hours: 4
                },
                '1D': {
                    days: 1
                },
                '1W': {
                    days: 7
                },
                '1M': {
                    days: 30
                },
                'ALL': {
                    days: 'max'
                }
            };

            async function loadUsdtData(timeframe = currentTimeframe) {
                const thisRequest = ++requestId;
                const settings = timeframeSettings[timeframe];

                if (!settings) return;

                loadingElement.classList.remove('hidden');
                loadingElement.textContent = 'Loading market data...';
                statusElement.textContent = 'Loading Market';

                try {
                    const url =
                        'https://api.coingecko.com/api/v3/coins/tether/market_chart' +
                        `?vs_currency=usd&days=${settings.days}`;

                    const response = await fetch(url);
                    if (!response.ok) throw new Error(`API error: ${response.status}`);

                    const data = await response.json();

                    if (!data.prices || data.prices.length < 2) {
                        throw new Error('No market data available');
                    }

                    if (thisRequest !== requestId) return;

                    let prices = data.prices
                        .map(item => ({
                            timestamp: Math.floor(item[0] / 1000),
                            price: Number(item[1])
                        }))
                        .filter(item =>
                            Number.isFinite(item.timestamp) &&
                            Number.isFinite(item.price)
                        )
                        .sort((a, b) => a.timestamp - b.timestamp);

                    if (settings.hours) {
                        const cutoff = Math.floor(Date.now() / 1000) - settings.hours * 3600;
                        prices = prices.filter(item => item.timestamp >= cutoff);
                    }

                    const candles = [];

                    for (let i = 1; i < prices.length; i++) {
                        const previous = prices[i - 1];
                        const current = prices[i];

                        if (current.timestamp <= previous.timestamp) continue;

                        const open = previous.price;
                        const close = current.price;
                        const padding = Math.max(Math.abs(close - open) * .5, .00001);

                        candles.push({
                            time: current.timestamp,
                            open,
                            high: Math.max(open, close) + padding,
                            low: Math.max(0, Math.min(open, close) - padding),
                            close
                        });
                    }

                    if (!candles.length) {
                        throw new Error('Not enough data to draw the chart');
                    }

                    if (thisRequest !== requestId) return;

                    candleSeries.setData(candles);
                    chart.timeScale().fitContent();

                    const latestPrice = prices[prices.length - 1].price;
                    const firstPrice = prices[0].price;
                    const percent = firstPrice ?
                        ((latestPrice - firstPrice) / firstPrice) * 100 :
                        0;

                    priceElement.textContent = '$' + latestPrice.toFixed(4);
                    percentElement.textContent =
                        `${percent >= 0 ? '↗' : '↘'} ${Math.abs(percent).toFixed(2)}%`;

                    percentElement.classList.toggle('negative', percent < 0);
                    statusElement.textContent = 'Live Market';
                    updatedElement.textContent =
                        'Updated ' + new Date().toLocaleTimeString([], {
                            hour: '2-digit',
                            minute: '2-digit'
                        });

                    loadingElement.classList.add('hidden');
                } catch (error) {
                    if (thisRequest !== requestId) return;

                    console.error('USDT chart error:', error);
                    statusElement.textContent = 'Market Unavailable';
                    updatedElement.textContent = 'Unable to update';
                    loadingElement.textContent = 'Unable to load market data. Please try again.';
                }
            }

            document.querySelectorAll('.timeframe-btn').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.timeframe-btn').forEach(btn => {
                        btn.classList.remove('active');
                    });

                    this.classList.add('active');
                    currentTimeframe = this.dataset.label;
                    loadUsdtData(currentTimeframe);
                });
            });

            document.getElementById('resetChart').addEventListener('click', function() {
                chart.timeScale().fitContent();
            });

            document.getElementById('toggleGrid').addEventListener('click', function() {
                gridVisible = !gridVisible;

                chart.applyOptions({
                    grid: {
                        vertLines: {
                            color: gridVisible ? 'rgba(132,153,160,.08)' : 'transparent'
                        },
                        horzLines: {
                            color: gridVisible ? 'rgba(132,153,160,.08)' : 'transparent'
                        }
                    }
                });

                this.classList.toggle('active', !gridVisible);
            });

            document.getElementById('fullscreenChart').addEventListener('click', async function() {
                try {
                    if (!document.fullscreenElement) {
                        await chartWrapper.requestFullscreen();
                    } else {
                        await document.exitFullscreen();
                    }

                    chart.resize(chartContainer.clientWidth, chartContainer.clientHeight);
                } catch (error) {
                    console.error('Fullscreen error:', error);
                }
            });

            document.addEventListener('fullscreenchange', function() {
                chart.resize(chartContainer.clientWidth, chartContainer.clientHeight);
            });

            const resizeObserver = new ResizeObserver(entries => {
                const rect = entries[0].contentRect;

                if (rect.width > 0 && rect.height > 0) {
                    chart.resize(rect.width, rect.height);
                }
            });

            resizeObserver.observe(chartContainer);

            loadUsdtData('1D');

            setInterval(() => {
                loadUsdtData(currentTimeframe);
            }, 60000);
        });
    </script>
    
@endsection