@extends('user.layout')

@section('content')
    <style>
        p.sponsertext {
            color: #8F8F9A;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 21px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        p.sponsername {
            color: #000;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            margin: 0;
        }

        p.sponserid {
            color: #000;
            font-family: 'Poppins', sans-serif;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            margin: 0;
        }


        .dashboardcard {
            height: 166px;
        }

        h5.dashboardcard-title {
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 400;
            line-height: 21px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            margin-top: 18px;
            margin-bottom: 18px;
        }

        p.dashboardcard-text {
            font-family: 'Poppins', sans-serif;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        .tradingview-widget-copyright {
            display: none;
        }


        .carousel-item img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        .donut-chart {
            position: relative;
        }

        .card-body {
            padding: 1rem;
        }

        h5.carddonut--title.mt-3 {
            text-align: center;
            font-family: 'Poppins', sans-serif;
            font-size: 24px;
            font-weight: 600;
            line-height: 36px;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        p.carddonut-chart-text.mt-3 {
            font-family: Poppins;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            text-align: center;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        h6.carddonut-chart-center-text {
            font-family: 'Poppins', sans-serif;
            font-size: 12px;
            font-weight: 400;
            line-height: 18px;
            text-align: center;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        p.carddonut-chart-center-text {
            color: #000B58;
            font-family: 'Poppins', sans-serif;
            font-size: 15px;
            font-weight: 600;
            line-height: 22.5px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

        }

        h5.dashboardcard-title2 {
            font-family: 'Poppins', sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        p.dashboardcard-text2 {
            font-family: Poppins;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
        }

        .card {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-title {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .card-text {
            font-size: 1rem;
        }

        .marquee-container {
            width: 100%;
            height: 50px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(90deg, #3e3c3c, #115544);
            display: flex;
            align-items: center;
            border-radius: 10px;
        }
        .marquee-text {
            position: absolute;
            white-space: nowrap;
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            font-family: 'IBM Plex Sans', sans-serif;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            animation: marquee 12s linear infinite;
        }

        @keyframes marquee {
            from {
                left: -100%;
            }
            to {
                left: 100%;
            }
        }

        }
    </style>
   <style>
        .carousel-container {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            width: 100%;
        }

        .carousel-track {
            /* display: flex; */
            overflow:auto;
            /* animation: scroll-left 10s linear infinite; */
        }

        .carousel-track::-webkit-scrollbar {
  display: none;
}

        .achiever-card {
            width: 300px;
            margin: 10px;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0px 4px 8px #115544;
            background: #fff;
            display: inline-block;
        }

        .achiever-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 10px;
        }

   
        @media (max-width: 768px) {
            .achiever-card {
                width: 250px;
            }
        }
    </style>
  
    <div class="row d-flex justify-content-between">
        <h4 class="page-top-heading">Dashboard</h4>
    </div>


    <div class="marquee-container">
        <div class="marquee-text">🚀 Welcome to Invicta 🌟  (IBC) Empowering Health And Wealth ✨</div>
    </div>

    <div class="row mt-4">

        <div class="col-lg-12">

            {{-- <div class="dashboard-profile card">
                <div class="card-body">
                    <div class="d-flex align-items-center" style="margin-bottom:20px;">
                        <div class="mx-3">

                            @if ($user_details->profile_image)
                                <img src="{{ asset($user_details->profile_image) }}" alt="Profile" class="rounded-circle"
                                    style=" width:94px; height:94px;">
                            @else
                                <img src="{{ asset('/assets/images/avatar/avatar2.svg?v=2') }}" alt="Profile"
                                    class="rounded-circle" style=" width:94px; height:94px;">
                            @endif

                        </div>
                        <div class="ps-3">
                            <p class="sponserid">{{ $user_details->user_id }}</p>
                            <p class="sponsername">{{ $user_details->name }}</p>
                        </div>

                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="mx-3">
                            <p class="sponsertext">Sponsor</p>
                            <p class="sponsername">{{ $sponsor->name }}</p>
                            <p class="sponserid">{{ $sponsor->user_id }}</p>
                        </div>
                        <div class="ps-3">
                            <a href="{{ route('user.profile') }}" class="btn btn-primary btn-sm">viewmore</a>
                        </div>
                    </div>
                </div>
            </div> --}}
         
            <div class="dashboard-profile card shadow-lg">
                <div class="card-body">
                    <!-- Profile Section -->
                    <div class="row g-3 align-items-center mb-4">
                        <!-- Profile Image Column -->
                        <div class="col-12 col-md-4 text-center">
                            <div class="profile-image position-relative">
                                @if ($user_details->profile_image)
                                    <img src="{{ asset($user_details->profile_image) }}" alt="Profile"
                                        class="rounded-circle border border-primary mx-auto d-block"
                                        style="width:100px; height:100px;">
                                @else
                                    <img src="{{ asset('/assets/images/avatar/avatar2.svg?v=2') }}" alt="Profile"
                                        class="rounded-circle border border-secondary mx-auto d-block"
                                        style="width:100px; height:100px;">
                                @endif
                                @if ($user_details->is_active == 1)
                                    <span
                                        class="badge bg-success position-absolute bottom-0 start-50 translate-middle-x mt-2">Active</span>
                                @else
                                    <span
                                        class="badge bg-danger position-absolute bottom-0 start-50 translate-middle-x mt-2">Inactive</span>
                                @endif
                            </div>
                        </div>

                        <!-- User Details Column -->
                        <div class="col-12 col-md-4 text-center text-md-start">
                            <div class="user-details">
                                <h4 class="user-id text-dark fw-bold mb-1">
                                    <strong>ID:</strong> {{ $user_details->user_id }}
                                </h4>
                                <p class="user-name text-muted fw-bold mb-1">
                                    <strong>Name:</strong> {{ $user_details->name }}
                                </p>
                                {{-- <p class="sponsor-id text-muted fw-bold mb-1">
                  <strong>Sponsor ID:</strong> {{ $sponsor->user_id }}
                </p>
                <p class="sponsor-name text-muted fw-bold mb-1">
                  <strong>Sponsor Name:</strong> {{ $sponsor->name }}
                </p> --}}
                            </div>
                        </div>

                        <!-- Extra Column -->
                        <div class="col-12 col-md-4 text-center">
                            <a href="{{ route('user.profile') }}" class="btn btn-outline-primary btn-sm mt-2">View
                                Profile</a>
                        </div>
                    </div>



                    <!-- Additional Information Section -->
                    <div class="additional-info row text-center mt-4">
                        <!-- Total PV -->
                        <div class="col-12 col-md-3 mb-3">
                            <div class="info-card p-3  shadow-sm mx-auto" style="max-width: 300px;">
                                <img src="{{ asset('/assets/images/icons/dashboard/total_pv.svg?v=2') }}"
                                    alt="Total PV Icon" class="icon mb-2" style="width: 40px; height: 40px;">
                                <h6 class="info-title fw-bold mb-1">Total Matching PV</h6>
                                <p class="info-text mb-0 text-primary fs-5">{{ $matching_pv ?? 0 }}</p>
                            </div>
                        </div>


                        <div class="col-12 col-md-3 mb-3">
                            <div class="info-card p-3  shadow-sm mx-auto" style="max-width: 300px;">
                                <img src="{{ asset('/assets/images/icons/dashboard/total_royalty_bonus.svg?v=2') }}"
                                    alt="Total PV Icon" class="icon mb-2" style="width: 40px; height: 40px;">
                                <h6 class="info-title fw-bold mb-1">Activated PV</h6>
                                <p class="info-text mb-0 text-primary fs-5">{{ $activation_package->pv ?? 0 }}</p>
                            </div>
                        </div>

                        <!-- Current Rank -->
                        <div class="col-12 col-md-3 mb-3">
                            <div class="info-card p-3 shadow-sm mx-auto" style="max-width: 300px;">
                                <img src="{{ asset('/assets/images/icons/dashboard/total_rank_rewards.svg?v=2') }}"
                                    alt="Rank Icon" class="icon mb-2" style="width: 40px; height: 40px;">
                                <h6 class="info-title fw-bold mb-1">Current Rank</h6>
                                <p class="info-text mb-0 text-success fs-5">{{ $income_wallet->rank ?? 'Not In Rank' }}</p>
                            </div>
                        </div>

                        <!-- Genealogy Tree -->
                        <div class="col-12 col-md-3 mb-3">
                            <div class="info-card p-3  shadow-sm mx-auto" style="max-width: 300px;">
                                <img src="{{ asset('/assets/images/icons/dashboard/genealogy_tree.svg?v=2') }}"
                                    alt="Genealogy Icon" class="icon mb-2" style="width: 40px; height: 40px;">
                                <h6 class="info-title fw-bold mb-1">Genealogy Tree</h6>
                                <a href="{{ route('user.genealogy') }}" class="btn btn-primary btn-sm">View</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>




        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="row">
                <!-- Total Income  -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard fourteen card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_royalty_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Income</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->total_earnings ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Right Business -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard three card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_right_business.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Right PV</h5>
                            <p class="dashboardcard-text">{{ $team_business->right_pv ?? 0 }}</p>
                        </div>
                    </div>
                </div>
                <!-- Total Left Business -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard two card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_left_business.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Left PV</h5>
                            <p class="dashboardcard-text">{{ $team_business->left_pv ?? 0 }}</p>
                        </div>
                    </div>
                </div>
                <!-- Total Left Users -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard four card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_left_user.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Left Members</h5>
                            <p class="dashboardcard-text">{{ $left_count ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Right Users -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard five card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_right_user.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Right Members</h5>
                            <p class="dashboardcard-text">{{ $right_count ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Direct Referrals -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard six card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_direct_refferal.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Direct Referrals</h5>
                            <p class="dashboardcard-text">{{ $direct_count ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Retail Profit -->
                {{-- <div class="col-lg-4 mb-3">
          <div class="dashboardcard seven card">
            <div class="card-body">
              <img src="{{ asset('/assets/images/icons/dashboard/total_retail_profit.svg?v=2') }}" alt="Icon"
                class="icon-top-left">
              <h5 class="dashboardcard-title">Total Retail Profit</h5>
              <p class="dashboardcard-text">{{ $income_wallet->retail_bonus ?? 0 }}</p>
            </div>
          </div>
        </div> --}}

                <!-- Total Self Purchase Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard eight card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_self_purchase.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Consumer Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->self_purchase_bonus ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Referral Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard nine card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_refferal_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Referral Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->referral_bonus ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Matching Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard ten card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_matching_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Matching Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->matching_bonus ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Quarterly Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard twelve card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_quarterly_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Quarterly Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->quarterly_bonus ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Annual Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard thirteen card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_annual_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Annual Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->annual_bonus ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Total Royalty Bonus -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard fourteen card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_royalty_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">Total Royalty Bonus</h5>
                            <p class="dashboardcard-text">{{ $income_wallet->royality ?? 0 }}</p>
                        </div>
                    </div>
                </div>

                <!-- Cutoff PV  -->
                <div class="col-lg-4 mb-3">
                    <div class="dashboardcard fourteen card">
                        <div class="card-body">
                            <img src="{{ asset('/assets/images/icons/dashboard/total_royalty_bonus.svg?v=2') }}"
                                alt="Icon" class="icon-top-left">
                            <h5 class="dashboardcard-title">PV After Cutoff</h5>
                            <p class="dashboardcard-text">{{ $cut_off ?? 0 }}</p>
                        </div>
                    </div>
                </div>
          
        
    <!-- Withdraw  -->
    <div class="col-lg-4 mb-3">
      <div class="dashboardcard fourteen card">
          <div class="card-body">
              <img src="{{ asset('/assets/images/icons/dashboard/total_royalty_bonus.svg?v=2') }}"
                  alt="Icon" class="icon-top-left">
              <h5 class="dashboardcard-title">Withdraw</h5>
              <p class="dashboardcard-text">{{ $income_wallet->withdrawal ?? 0 }}</p>
          </div>
      </div>
  </div>
</div>
        {{-- <div class="row mt-4">
            <div class="tradingview-widget-container">
                <div class="tradingview-widget-container__widget"></div>
                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
                <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
                    {
                        "symbols": [{
                                "description": "",
                                "proName": "BITSTAMP:BTCUSD"
                            },
                            {
                                "description": "",
                                "proName": "COINBASE:ETHUSD"
                            },
                            {
                                "description": "",
                                "proName": "CRYPTOCAP:LTC"
                            }
                        ],
                        "showSymbolLogo": true,
                        "isTransparent": false,
                        "displayMode": "adaptive",
                        "colorTheme": "light",
                        "locale": "en"
                    }
                </script>
            </div>
        </div> --}}
    </div>

    </div>


    {{-- <div class="row mt-4">
    <div class="col-lg-8 mb-3" style="height: 402px;">
        <!-- Image Carousel with Dots -->
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner" style="height: 100%;">
                <div class="carousel-item active">
                    <img src="{{ asset('/assets/images/icons/dashboard/slider1.png') }}" class="d-block w-100" alt="First slide" style="border-radius:10px;">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('/assets/images/icons/dashboard/slider1.png') }}" class="d-block w-100" alt="Second slide" style="border-radius:10px;">
                </div>
                <div class="carousel-item">
                    <img src="{{ asset('/assets/images/icons/dashboard/slider1.png') }}" class="d-block w-100" alt="Third slide" style="border-radius:10px;">
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4 mb-3" style="height: 402px;">
        <!-- Investment Card with Donut Chart -->
        <div class="card h-100">
            <div class="card-body text-center">
                <h5 class="carddonut--title mt-3">Total Investment</h5>
                <p class="carddonut-chart-text mt-3">1522.08 USDT</p>
                <!-- Donut Chart -->
                <div class="donut-chart" id="donut-chart" style="height: 250px; width: 250px; margin: auto;">
                    <canvas id="donutCanvas"></canvas>
                    <div class="position-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
                        <h6 class="carddonut-chart-center-text">Total Return</h6>
                        <p class="carddonut-chart-center-text">25.35 USDT</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}

    {{-- <div class="row mt-4">
    <!-- Card 1: Direct Income -->
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <img src="{{ asset('/assets/images/icons/dashboard/directincome.svg?v=2') }}" alt="Icon" class="icon-top-left">
                <div class="ms-3">
                    <h5 class="dashboardcard-title2">Direct Income</h5>
                    <p class="dashboardcard-text2">4,156.45 USDT</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2: Level Income -->
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <img src="{{ asset('/assets/images/icons/dashboard/levelincome.svg?v=2') }}" alt="Icon" class="icon-top-left">
                <div class="ms-3">
                    <h5 class="dashboardcard-title2">Level Income</h5>
                    <p class="dashboardcard-text2">3,146.45 USDT</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 3: Income 3 -->
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <img src="{{ asset('/assets/images/icons/dashboard/income3.svg?v=2') }}" alt="Icon" class="icon-top-left">
                <div class="ms-3">
                    <h5 class="dashboardcard-title2">Income 3</h5>
                    <p class="dashboardcard-text2">1,146.45 USDT</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 4: Income 4 -->
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="card">
            <div class="card-body">
                <img src="{{ asset('/assets/images/icons/dashboard/income4.svg?v=2') }}" alt="Icon" class="icon-top-left">
                <div class="ms-3">
                    <h5 class="dashboardcard-title2">Income 4</h5>
                    <p class="dashboardcard-text2">2,146.45 USDT</p>
                </div>
            </div>
        </div>
    </div>
</div> --}}


    {{-- <div class="row mt-4">
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
            {
                "width": "100%",
                "height": "610",
                "symbol": "BITSTAMP:BTCUSD",
                "interval": "D",
                "timezone": "Etc/UTC",
                "theme": "dark",
                "style": "1",
                "locale": "en",
                "backgroundColor": "rgba(255, 255, 255, 1)",
                "gridColor": "rgba(255, 255, 255, 0.06)",
                "hide_top_toolbar": true,
                "allow_symbol_change": false,
                "save_image": false,
                "calendar": false,
                "hide_volume": true,
                "support_host": "https://www.tradingview.com"
            }
        </script>
    </div>
    <!-- TradingView Widget END -->
</div> --}}
@endsection



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    window.onload = function() {
        var ctx = document.getElementById('donutCanvas').getContext('2d');
        var donutChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                // labels: ['Return', 'Investment'],
                datasets: [{
                    data: [205.35, 1522.08],
                    backgroundColor: ['#000B58', '#E6E7EE'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                cutout: '70%', // Use cutout instead of cutoutPercentage
                plugins: {
                    tooltip: {
                        enabled: true
                    }
                }
            }
        });
    };
</script>