@props(['markets', 'deposits', 'dateIntervals', 'carbon', 'latestTrades'])
<div class="card mb-4" style="height: 500px; margin-bottom:50px;">
    <div class="card-body h-100">
        <!-- TradingView Widget BEGIN -->
        <div class="tradingview-widget-container">
            <div class="tradingview-widget-container__widget"></div>
            <div class="tradingview-widget-copyright">
                <button class="btn btn-success mb-2" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasRight1" aria-controls="offcanvasRight1"><i class="bx bx-trending-up"></i>
                    Buy</button>
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight1"
                    aria-labelledby="offcanvasRightLabel1">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasRightLabel1">Enter Trade</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="nav-align-top mb-4">
                                    <ul class="nav nav-tabs nav-fill" role="tablist">
                                        <li class="nav-item">
                                            <button type="button" class="nav-link active" role="tab"
                                                data-bs-toggle="tab" data-bs-target="#navs-justified-home"
                                                aria-controls="navs-justified-home" aria-selected="true">
                                                <i class="tf-icons bx bx-home"></i> Demo Trade
                                                ({{ Auth::user()->currency }}{{ number_format(Auth::user()->demo_balance) }})
                                        
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                                data-bs-target="#navs-justified-profile"
                                                aria-controls="navs-justified-profile" aria-selected="false">
                                                <i class="tf-icons bx bx-user"></i> live Trade
                                            </button>
                                        </li>

                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="navs-justified-home" role="tabpanel">
                                            <x-demo-trade-form :markets="$markets" :carbon="$carbon" :dateIntervals="$dateIntervals" />

                                        </div>
                                        <div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
                                            @if (!Auth::user()->is_live)
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h4>
                                                            Ready to take your trading experience to the next level?
                                                            Upgrade to a Live Account today and discover the true power
                                                            of real-time trading!
                                                        </h4>
                                                        <hr>
                                                        <ul>

                                                            <li> Real-Time Market Conditions: Get up-to-the-second updates
                                                            on price movements, news, and events that impact the market.
                                                            React swiftly and seize profitable opportunities as they
                                                            happen!</li>

                                                            <li> Actual Profits and Losses: Experience the thrill and
                                                            accountability of trading with real money. Feel the rush of
                                                            earning actual profits and learn valuable lessons from any
                                                            losses.</li>

                                                            <li> Expanded Trading Options: Access a wider range of assets,
                                                            trading instruments, and markets. Explore new horizons and
                                                            diversify your portfolio for enhanced profitability.</li>

                                                            <li> Advanced Trading Tools: Equip yourself with cutting-edge
                                                            tools and features that are exclusively available to Live
                                                            Account holders. Leverage professional-grade analytics,
                                                            charting tools, and indicators to make informed trading
                                                            decisions.</li>

                                                            <li> Personalized Support: Enjoy priority assistance from our
                                                            dedicated support team. Receive tailored guidance, expert
                                                            advice, and timely responses to all your queries.</li>
                                                            <hr>
                                                            💼 Upgrade to a Live Account today and unlock a world of
                                                            possibilities! Don't miss out on the opportunity to
                                                            transform your trading journey into a truly rewarding
                                                            experience. Sign up now and let the live markets be your
                                                            guide! 📈
                                                        </p>
                                                        <a href={{ route('plan.index') }}>
                                                            <button class="btn btn-success">Switch to live</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            @else
                                                <x-live-trade-form :deposits="$deposits" :carbon="$carbon" :markets="$markets"
                                                    :dateIntervals="$dateIntervals" />
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn btn-danger float-right ms-2" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasRight1" aria-controls="offcanvasRight1"><i class="bx bx-trending-down"></i> Sell</button>
            </div>
            <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js"
                async>
                {
                    "colorTheme": "dark",
                    "dateRange": "3M",
                    "showChart": true,
                    "locale": "en",
                    "width": "100%",
                    "height": "100%",
                    "largeChartUrl": "",
                    "isTransparent": true,
                    "showSymbolLogo": true,
                    "showFloatingTooltip": false,
                    "plotLineColorGrowing": "rgba(0, 0, 255, 1)",
                    "plotLineColorFalling": "rgba(255, 0, 0, 1)",
                    "gridLineColor": "rgba(240, 243, 250, 0)",
                    "scaleFontColor": "rgba(106, 109, 120, 1)",
                    "belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
                    "belowLineFillColorFalling": "rgba(244, 204, 204, 0.12)",
                    "belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
                    "belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
                    "symbolActiveColor": "rgba(41, 98, 255, 0.12)",
                    "tabs": [{
                            "title": "Crypto",
                            "symbols": [{
                                    "s": "BINANCE:BTCUSDT",
                                    "d": "BTC/USDT"
                                },
                                {
                                    "s": "BINANCE:ETHUSDT",
                                    "d": "ETH/USDT"
                                },
                                {
                                    "s": "BINANCE:BNBUSDT",
                                    "d": "BNB/USDT"
                                },
                                {
                                    "s": "BINANCE:XRPUSDT",
                                    "d": "XRP/USDT"
                                },
                                {
                                    "s": "BINANCE:SHIBUSDT",
                                    "d": "SHIB/USDT"
                                }
                            ],
                            "originalTitle": "Indices"
                        },
                        {
                            "title": "Futures",
                            "symbols": [{
                                    "s": "CME_MINI:ES1!",
                                    "d": "S&P 500"
                                },
                                {
                                    "s": "CME:6E1!",
                                    "d": "Euro"
                                },
                                {
                                    "s": "COMEX:GC1!",
                                    "d": "Gold"
                                },
                                {
                                    "s": "NYMEX:CL1!",
                                    "d": "Crude Oil"
                                },
                                {
                                    "s": "NYMEX:NG1!",
                                    "d": "Natural Gas"
                                },
                                {
                                    "s": "CBOT:ZC1!",
                                    "d": "Corn"
                                }
                            ],
                            "originalTitle": "Futures"
                        },
                        {
                            "title": "Bonds",
                            "symbols": [{
                                    "s": "CME:GE1!",
                                    "d": "Eurodollar"
                                },
                                {
                                    "s": "CBOT:ZB1!",
                                    "d": "T-Bond"
                                },
                                {
                                    "s": "CBOT:UB1!",
                                    "d": "Ultra T-Bond"
                                },
                                {
                                    "s": "EUREX:FGBL1!",
                                    "d": "Euro Bund"
                                },
                                {
                                    "s": "EUREX:FBTP1!",
                                    "d": "Euro BTP"
                                },
                                {
                                    "s": "EUREX:FGBM1!",
                                    "d": "Euro BOBL"
                                }
                            ],
                            "originalTitle": "Bonds"
                        },
                        {
                            "title": "Forex",
                            "symbols": [{
                                    "s": "FX:EURUSD",
                                    "d": "EUR/USD"
                                },
                                {
                                    "s": "FX:GBPUSD",
                                    "d": "GBP/USD"
                                },
                                {
                                    "s": "FX:USDJPY",
                                    "d": "USD/JPY"
                                },
                                {
                                    "s": "FX:USDCHF",
                                    "d": "USD/CHF"
                                },
                                {
                                    "s": "FX:AUDUSD",
                                    "d": "AUD/USD"
                                },
                                {
                                    "s": "FX:USDCAD",
                                    "d": "USD/CAD"
                                }
                            ],
                            "originalTitle": "Forex"
                        }
                    ]
                }
            </script>
        </div>
        <!-- TradingView Widget END -->
</div>
</div>