@extends('layouts.user')

@section('content')



<section class="balance-section">
            <div class="total-balance">
                <h2>Total Balance</h2>
                <p class="balance-amount">{{ $currencySymbol }}{{ number_format($totalBalanceInUSD, 2) }}</p>
                <p class="balance-change text-green">+0.5% <span>Today</span></p>
            </div>
        </section>
@if($siteKyc == '1')
        
        
        @if($user->kyc_verified == 0)
        <div class="alert alert-warning alert-dismissible fade show" role="alert"  style="
    padding: 12px;
    background: #dd940e;
    border-radius: 12px;
    font-size: 13px;
">
              <span>@lang('KYC Verification Required')! @lang('Please submit the required KYC information to verify yourself. Otherwise, you couldn\'t make any withdrawal requests to the system.') <a href="{{ route('user.kyc.form') }}" class="link-color">@lang('Click here')</a> @lang('to submit KYC information').</span> 
               
            </div>
        
        
        
         
        @elseif($user->kyc_verified == 2)
        <div class="alert alert-warning alert-dismissible fade show" role="alert" style="
    padding: 12px;
    background: #dd940e;
    border-radius: 12px;
    font-size: 13px;
">
              <span>@lang('KYC Verification Pending')! @lang('Your submitted KYC information is pending for admin approval. Please wait till that.') <a href="{{ route('user.kyc.form') }}" class="link-color">@lang('Click here')</a> @lang('to see your submitted information')</span> 
               
            </div>
        
         
        @endif
        
        @endif
        <section class="quick-actions">
            <div class="action-buttons">
                <button onclick="window.location.href='/buycoin';"  class="btn-buy" style="color:#DFAB29;">
                    <img data-v-6049d237="" src="https://cdn-icons-png.flaticon.com/128/1198/1198299.png" style="width: 30px;height: 30px;" alt="">
                    Buy
                </button>
                <button onclick="window.location.href='/deposit';"  class="btn-sell" style="color:#DFAB29;">
                    <img data-v-6049d237="" src="https://cdn-icons-png.flaticon.com/128/2618/2618524.png" style="width: 30px;height: 30px;" alt="">
                    Deposit
                </button>
                <button onclick="window.location.href='/linkwallet';" class="btn-send" style="color:#DFAB29;">
                    <img data-v-6049d237="" src="https://cdn-icons-png.flaticon.com/128/10580/10580332.png" style="width: 30px;height: 30px;" alt="">
                    Link
                </button>
                <button onclick="window.location.href='/profile';" class="btn-receive" style="color:#DFAB29;">
                    <img data-v-6049d237="" src="https://cdn-icons-png.flaticon.com/128/3577/3577429.png" style="width: 30px;height: 30px;" alt="">
                    Profile
                </button>
            </div>
        </section>

        <section class="crypto-markets">
    <div class="section-header">
        <h3>Markets</h3>
        <a href="{{ url('/coins') }}" class="see-all">See All</a>
    </div>
    <div class="market-list">
        
        @foreach($coinBalances as $coinBalance)
            @php
                $coin = $coinBalance->coin;
            @endphp
            <!-- Item -->
            @if($siteKyc == '1' && in_array($user->kyc_verified, [0, 2]))
            <div class="market-item disabled" onclick="showKycAlert()">
                <div class="crypto-icon" >
                    <img src="{{ $coin->icon }}" alt="img" class="image-block imaged w48" style="width: 40px;">
                </div>
                <div class="crypto-details">
                    <h4>{{ $coin->name }}</h4>
                    <p>{{ $coin->symbol }}</p>
                </div>
                <div class="crypto-price">
                    <p>${{ number_format($coinBalance->usd_equivalent, 2) }}</p>
                    <p class="price-change">
                        {{ number_format($coinBalance->balance, 8) }} {{ $coin->symbol }}
                    </p>
                </div>
            </div>    
            @else
            <div class="market-item" onclick="window.location.href='{{ route('user.coindetails', ['coin' => $coin->name]) }}';">
               <div class="crypto-icon" >
    <a href="{{ route('user.coindetails', ['coin' => $coin->name]) }}">
        <img src="{{ $coin->icon }}" alt="img" class="image-block imaged w48" style="width: 40px;">
    </a>
</div>
<div class="crypto-details">
    <h4>{{ $coin->name }}</h4>
    <p>{{ $coin->symbol }}</p>
</div>
<div class="crypto-price">
    <p>${{ number_format($coinBalance->usd_equivalent, 2) }}</p>
    <p class="price-change">
        {{ number_format($coinBalance->balance, 8) }} {{ $coin->symbol }}
    </p>
</div>
</div>
            @endif
        @endforeach
        
        
        
        
        
    </div>
</section>

<style>
    #portfolioChart {
    height: 300px; /* Set your desired height here */
}
</style>

<section class="portfolio">
    <div class="section-header">
        <h3>Your Portfolio</h3>
    </div>
    <canvas id="portfolioChart"></canvas>
</section>

<script>
    // Function to generate random hex colors
    const getRandomColor = () => {
        return '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
    };

    // Convert PHP data to JavaScript
    const coinBalances = @json($coinBalances);

    // Process data for chart
    const portfolioData = coinBalances.map(balance => ({
        name: balance.coin.name,
        symbol: balance.coin.symbol,
        usd: parseFloat(balance.usd_equivalent),
        color: getRandomColor() // Generate random color
    }));

    // Get the portfolio canvas element
    const portfolioChart = document.getElementById('portfolioChart');

    if (portfolioChart && portfolioData.length > 0) {
        // Extract chart data
        const labels = portfolioData.map(coin => coin.name);
        const data = portfolioData.map(coin => coin.usd);
        const colors = portfolioData.map(coin => coin.color);

        new Chart(portfolioChart, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 0
                }]
            },
            options: {
                 responsive: true,
        maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            boxWidth: 12,
                            padding: 20
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const coin = portfolioData[context.dataIndex];
                                return `${coin.name}: $${coin.usd.toFixed(2)} (${coin.symbol})`;
                            }
                        }
                    }
                }
            }
        });
    } else {
        portfolioChart.style.display = 'none'; // Hide chart if no data
    }
</script>




						
@endsection
 