@extends('layouts.user.app')

@section('content')
<div class="col-12 mt-2">
    <div class="row g-2">
        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$user->balances()->sum('balance')}} $</h5>
                    <small>Total Balance</small>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$totalInvestment}} $</h5>
                    <small>Total Investment</small>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$totalProfitLoss}} $</h5>
                    <small>Total Profit/Loss</small>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$totalPercentageGain}} %</h5>
                    <small>Total Percentage Gain</small>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$totalTrades}}</h5>
                    <small>Total Trades</small>
                </div>
            </div>
        </div>

        <div class="col-lg-2 col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title mb-0 mt-2">{{$duration}} Month</h5>
                    <small>Duration</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-2 mt-1">
        <div class="col-lg-3 col-md-6">
            <div class="card h-100">
                <div class="card-body d-flex justify-content-between">
                    <div class="d-flex flex-column">
                        <div class="card-title mb-auto">
                            <h5 class="mb-0 text-nowrap">Buy/Sell</h5>
                        </div>
                        <div class="chart-statistics">
                            <h5 class="card-title text-success mb-0">Buy: {{$buy}}</h5>
                            <h5 class="text-danger text-nowrap mb-0">Sell: {{$sell}}</h5>
                        </div>
                    </div>
                    <div id="generatedLeadsChart"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card h-100">
                <div class="card-body d-flex justify-content-between">
                    <div class="d-flex flex-column">
                        <div class="card-title mb-auto">
                            <h5 class="mb-0 text-nowrap">Profit By Instrument</h5>
                        </div>
                        <ul>
                            @foreach ($profitableTradePairNames as $key => $name)
                                @if ($key < 5)
                                    <li>{{$name}}</li>
                                @elseif($key == 5)
                                    <li>Others</li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                    <div id="generatedProfitChart"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card h-100">
                <div class="card-body d-flex justify-content-between">
                    <div class="d-flex flex-column">
                        <div class="card-title mb-auto">
                            <h5 class="mb-0 text-nowrap">Loss By Instrument</h5>
                        </div>
                        <ul>
                            @foreach ($loosableTradePairNames as $key => $name)
                                @if ($key < 5)
                                    <li>{{$name}}</li>
                                    @elseif($key == 5)
                                    <li>Others</li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                    <div id="generatedLossChart"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card h-100">
                <div class="card-body d-flex justify-content-between">
                    <div class="d-flex flex-column">
                        <div class="card-title mb-auto">
                            <h5 class="mb-0 text-nowrap">Profit / Loss Ratio</h5>
                        </div>
                        <div class="chart-statistics">
                            <h5 class="card-title text-success mb-0">Profit: {{$totalProfit}}</h5>
                            <h5 class="text-danger text-nowrap mb-0">Loss: {{$totalLoss}}</h5>
                        </div>
                    </div>
                    <div id="generatedProfitLossChart"></div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('script')




    <script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
    <script src="/assets/js/forms-selects.js"></script>
    <script src="/assets/js/cards-actions.js"></script>
    <script src="/assets/vendor/js/sweet.js"></script>
    <script src="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

    <!-- Page JS -->
    <script>
        drawCharts({{$buy}}, {{$sell}}, {!!json_encode($profitableTradePairNames)!!}, {!!json_encode($profitablePairsCount)!!},  {!!json_encode($loosableTradePairNames)!!}, {!!json_encode($loosablePairsCount)!!}, {{$totalProfit}}, {{$totalLoss}}, {{$totalTrades}});
    </script>
@endpush