@extends('layouts.user')



@section('main')

@include('layouts.nav')
<div class="row">
    <h3>Welcome {{ Auth::user()->name }}</h3>
</div>
<div class="row justify-content-between">

<div class="row justify-content-between">
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
            {
                "symbols": [{
                        "proName": "FOREXCOM:SPXUSD",
                        "title": "S&P 500"
                    },
                    {
                        "proName": "FOREXCOM:NSXUSD",
                        "title": "US 100"
                    },
                    {
                        "proName": "FX_IDC:EURUSD",
                        "title": "EUR/USD"
                    },
                    {
                        "proName": "BITSTAMP:BTCUSD",
                        "title": "Bitcoin"
                    },
                    {
                        "proName": "BITSTAMP:ETHUSD",
                        "title": "Ethereum"
                    }
                ],
                "showSymbolLogo": true,
                "colorTheme": "light",
                "isTransparent": true,
                "displayMode": "regular",
                "locale": "en"
            }
        </script>
    </div>
    <!-- TradingView Widget END -->
</div>


<div class="row">

    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-white text-dark">
            <div class="stats-icon stats-icon-square bg-gradient-cyan-blue text-white d-flex align-items-center justify-content-center">
                <ion-icon name="analytics-outline" aria-label="analytics outline" role="img" class="md hydrated"></ion-icon>
            </div>
            <div class="stats-content">
                <div class="stats-title text-dark text-opacity-75">ACCOUNNT BALANCE</div>
                <div class="stats-number">{{ Auth::user()->currency }} {{ Auth::user()->bal }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 100%;"></div>
                </div>
                
            </div>
        </div>
    </div>


    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-white text-dark">
            <div class="stats-icon stats-icon-square bg-gradient-cyan-blue text-white d-flex align-items-center justify-content-center">
                <ion-icon name="pricetags-outline" aria-label="pricetags outline" role="img" class="md hydrated"></ion-icon>
            </div>
            <div class="stats-content">
                <div class="stats-title text-dark text-opacity-75">ACCOUNT PROFIT</div>
                <div class="stats-number">{{ Auth::user()->currency }} {{ Auth::user()->profit }}</div>
                <div class="progress">
                        <div id="targetElement"  role="progressbar" style="width: {{Auth::user()->oldp}}%;" aria-valuenow="{{Auth::user()->oldp}}" aria-valuemin="0" aria-valuemax="100">{{Auth::user()->oldp}}%</div>
                        
                        </div>
                        <p>SIGNAL STRENGTH</p>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 100%;"></div>
                </div>
               
            </div> 
        </div>
    </div>


    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-white text-dark">
            <div class="stats-icon stats-icon-square bg-gradient-cyan-blue text-white d-flex align-items-center justify-content-center">
                <ion-icon name="cart-outline" aria-label="cart outline" role="img" class="md hydrated"></ion-icon>
            </div>
            <div class="stats-content">
                <div class="stats-title text-dark text-opacity-75"> BONUS</div>
                <div class="stats-number">{{ Auth::user()->currency }} {{ Auth::user()->bonus }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 100%;"></div>
                </div>
       
            </div>
        </div>
    </div>


    <div class="col-xl-3 col-md-6">
        <div class="widget widget-stats bg-white text-dark">
            <div class="stats-icon stats-icon-square bg-gradient-cyan-blue text-white d-flex align-items-center justify-content-center">
                <ion-icon name="chatbox-outline" aria-label="chatbox outline" role="img" class="md hydrated"></ion-icon>
            </div>
            <div class="stats-content">
                <div class="stats-title text-dark text-opacity-75">ACCOUNT LEVEL</div>
                <div class="stats-number">{{ Auth::user()->plan }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 100%;"></div>
                </div>
                <div class="stats-desc text-dark text-opacity-75">Current Account {{ Auth::user()->status }} </div>
            </div>
        </div>
    </div>

</div>
<div class="row">




    <div class="col-xl-4 col-lg-6">
        <div class="widget widget-stats bg-white text-dark">
            <!-- TradingView Widget BEGIN -->
            <div class="tradingview-widget-container">
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
                    {
                        "symbol": "FX:BTCUSD",
                        "width": "100%",
                        "height": "100%",
                        "locale": "en",
                        "dateRange": "12M",
                        "colorTheme": "light",
                        "trendLineColor": "rgba(255, 0, 0, 1)",
                        "underLineColor": "rgba(255, 0, 0, 0.3)",
                        "underLineBottomColor": "rgba(41, 98, 255, 0)",
                        "isTransparent": true,
                        "autosize": true,
                        "largeChartUrl": ""
                    }
                </script>
            </div>
            <!-- TradingView Widget END -->
        </div>
    </div>


    <div class="col-xl-4 col-lg-6">
        <div class="widget widget-stats bg-white text-dark">
            <!-- TradingView Widget BEGIN -->
            <div class="tradingview-widget-container">
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
                    {
                        "symbol": "FX:ETHUSD",
                        "width": "100%",
                        "height": "100%",
                        "locale": "en",
                        "dateRange": "12M",
                        "colorTheme": "light",
                        "trendLineColor": "rgba(255, 0, 0, 1)",
                        "underLineColor": "rgba(255, 0, 0, 0.3)",
                        "underLineBottomColor": "rgba(41, 98, 255, 0)",
                        "isTransparent": true,
                        "autosize": true,
                        "largeChartUrl": ""
                    }
                </script>
            </div>
            <!-- TradingView Widget END -->
        </div>
    </div>
    <div class="col-xl-4 col-lg-6">
        <div class="widget widget-stats bg-white text-dark">
            <!-- TradingView Widget BEGIN -->
            <div class="tradingview-widget-container">
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
                    {
                        "symbol": "FX:EURUSD",
                        "width": "100%",
                        "height": "100%",
                        "locale": "en",
                        "dateRange": "12M",
                        "colorTheme": "light",
                        "trendLineColor": "rgba(255, 0, 0, 1)",
                        "underLineColor": "rgba(255, 0, 0, 0.3)",
                        "underLineBottomColor": "rgba(41, 98, 255, 0)",
                        "isTransparent": true,
                        "autosize": true,
                        "largeChartUrl": ""
                    }
                </script>
            </div>
            <!-- TradingView Widget END -->
        </div>
    </div>

</div>

<div class="row">

    <div class="col-xl-8">
        <div id="trad" style="height:500px;width:100%;">
            <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
            <script type="text/javascript">
                new TradingView.widget({
                    "autosize": true,
                    "symbol": "COINBASE:BTCUSD",
                    "interval": "1",
                    "timezone": "Etc/UTC",
                    "theme": 'light',
                    "style": "9",
                    "locale": "en",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "hide_side_toolbar": false,
                    "allow_symbol_change": true,
                    "calendar": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "container_id": "trad"
                });
            </script>
        </div>
    </div>


    <div class="col-xl-4">
        <div class="widget widget-stats bg-white text-dark">
            <!-- TradingView Widget BEGIN -->
            <div class="tradingview-widget-container">
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-timeline.js" async>
                    {
                        "feedMode": "all_symbols",
                        "colorTheme": "light",
                        "isTransparent": true,
                        "displayMode": "regular",
                        "width": "100%",
                        "height": "500",
                        "locale": "en"
                    }
                </script>
            </div>
            <!-- TradingView Widget END -->
        </div>
    </div>

</div>





</div>


<script>
        // Function to change CSS class based on value range
        function updateClassBasedOnValue(value) {
            var element = document.getElementById('targetElement');

            // Define your value ranges
            var lowRange = 25;
            var mediumRange = 80;

            if (value < lowRange) {
                element.className = 'progress-bar progress-bar-striped bg-danger';
            } else if (value < mediumRange) {
                element.className = 'progress-bar progress-bar-striped bg-warning';
            } else {
                element.className = 'progress-bar progress-bar-striped bg-success';
            }
        }

        // Example: Call the function with a value to update the class
        var exampleValue = {{Auth::user()->oldp}};
        updateClassBasedOnValue(exampleValue);
    </script>
@endsection