@extends('components.customer-layout')

@section('header')
<div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
    <h4 class="fw-medium mb-0">Account</h4>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50">Dashboards</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Account</li>
    </ol>
</div>
@endsection

@section('content')
{{-- Top Performers --}}
<div class="row">
    <div class="col-xl-12">
        <div class="row row-cols-xxl-5 row-cols-xl-3 row-cols-md-2">
            <div class="col card-background">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <p class="fw-medium mb-1 text-muted">Total Balance</p>
                                <h3 class="mb-0">${{ $totalBalance ? number_format(floatval($totalBalance), 2) : 0 }}
                                </h3>
                            </div>
                            <div class="avatar avatar-md br-4 bg-primary-transparent ms-auto">
                                <i class="bi bi-currency-dollar fs-20"></i>
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            {{-- <span class="badge bg-primary-transparent rounded-pill">+24% <i
                                    class="fe fe-arrow-down"></i></span>
                            <a href="javascript:void(0);"
                                class="text-muted fs-11 ms-auto text-decoration-underline mt-auto"></a> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col card-background">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <p class="fw-medium mb-1 text-muted">Fortlink Balance</p>
                                <h3 class="mb-0">
                                    {{ $fortlinkBalance ? number_format(floatval($fortlinkBalance), 2) : 0 }}</h3>
                            </div>
                            <div class="avatar avatar-md br-4 bg-secondary-transparent ms-auto">
                                <i class="bi bi-currency-dollar fs-20"></i>
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            {{-- <span class="badge bg-success-transparent rounded-pill">+0.26% <i
                                    class="fe fe-arrow-down"></i></span>
                            <a href="javascript:void(0);"
                                class="text-muted fs-11 ms-auto text-decoration-underline mt-auto"></a> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col card-background">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <p class="fw-medium text-muted mb-1">Referral Earning</p>
                                <h3 class="mb-0">{{ number_format(floatval($referral ? $referral : 0), 2) }} FLT</h3>
                            </div>
                            <div class="avatar avatar-md br-4 bg-info-transparent ms-auto">
                                <i class="bi bi-currency-dollar fs-20"></i>
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            {{-- <span class="badge bg-danger-transparent rounded-pill">+06% <i
                                    class="fe fe-arrow-down"></i></span>
                            <a href="javascript:void(0);"
                                class="text-muted fs-11 ms-auto text-decoration-underline mt-auto"></a> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col card-background">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <p class="fw-medium mb-1 text-muted">Total Amount Invested</p>
                                <h3 class="mb-0">${{ number_format(floatval($investment ? $investment:0), 2) }}</h3>
                            </div>
                            <div class="avatar avatar-md br-4 bg-warning-transparent ms-auto">
                                <i class="bi bi-currency-dollar fs-20"></i>
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            {{-- <span class="badge bg-success-transparent rounded-pill">+10% <i
                                    class="fe fe-arrow-up"></i></span>
                            <a href="javascript:void(0);"
                                class="text-muted fs-11 ms-auto text-decoration-underline mt-auto"></a> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col card-background">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <p class="fw-medium text-muted mb-1">Total Amount Withdrawn</p>
                                <h3 class="mb-0">${{ number_format(floatval( $withdrawal ? $withdrawal : 0 ), 2) }}</h3>
                            </div>
                            <div class="avatar avatar-md br-4 bg-danger-transparent ms-auto">
                                <i class="bi bi-currency-dollar fs-20"></i>
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            {{-- <span class="badge bg-danger-transparent rounded-pill">+16% <i
                                    class="fe fe-arrow-down"></i></span>
                            <a href="javascript:void(0);"
                                class="text-muted fs-11 ms-auto text-decoration-underline mt-auto"></a> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-xxl-12 col-xl-12">
        <div class="row">
            <div class="col-xxl-6 col-xl-6">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">Recent Transactions</div>
                        <a href="{{ route('user.web.transaction') }}" class="btn btn-primary-light btn-sm">
                            <i class="bi bi-arrow-right"></i> Full
                            History</a>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            @if (!empty($transactions) && count($transactions) > 0)
                            @foreach ($transactions as $index => $transaction)
                            @php
                            $Date = $transaction['createdAt'];
                            // dd(config('app.tx_color')[$transaction['type']]);
                            $color = !empty(config('app.tx_color')[$transaction['type']]) ?  config('app.tx_color')[$transaction['type']] : "info";
                            $icon = !empty(config('app.tx_icon')[$transaction['type']]) ?  config('app.tx_icon')[$transaction['type']] : "bi bi-lightning-fill";

                            // !empty(config('app.tx_color'))[$transaction['type']] ? config('app.tx_color')[$transaction['type']] : "success";
                        @endphp
                        <li class="mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-2">
                                    <span 
                                      class="avatar avatar-md rounded-circle bg-{{ $color }}-transparent"
                                     ><i class="{{ $icon }} fs-16"></i></span>
                                </div>
                                <div class="flex-1">
                                    <div class="d-flex align-items-start justify-content-between">
                                        <span class="fw-semibold">{{ $transaction['type'] }}</span>
                                        <span class="text-{{ $color }} text-end">
                                            {{ date('d M,Y', strtotime($transaction['createdAt'])) }}</span>
                                    </div>
                                    <div class="d-flex align-items-start justify-content-between fs-12">
                                        <span class="text-muted">{{ $transaction['status'] }}</span>
                                        <span
                                            class=" text-muted text-end">{{ $transaction['amount'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                            @if ($index >= 4)
                            @break
                            @endif
                            @endforeach
                            @else
                            <div class="alert alert-light text-center fst-italic text-secondary" role="alert">
                                <strong>No Transactions found!</strong>
                            </div>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xxl-6 col-xl-6">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Monthly Transaction For {{ $monthlySpend['monthOf'] }}
                        </div>

                    </div>
                    <div class="card-body p-0">
                        <div class="d-flex flex-wrap px-3 py-4 border-bottom">
                            <div>
                                <h4 class="mb-1 text-xl">
                                    ${{ $monthlySpend ? number_format(floatval($monthlySpend['allAmt']), 2) : 0 }}</h4>

                            </div>
                            <div class="ms-sm-auto">
                                <div class="mt-2">
                                    <span id="sparkline8"></span>
                                </div>
                            </div>
                        </div>
                        <ul class="mb-0 mt-1 monthly-profit p-3">
                            @forelse ($monthlyData as $data)
                            <li>
                                <div class="d-flex align-items-center">
                                    <div class="me-3">
                                        <span class="avatar avatar-md br-5 bg-warning-transparent text-warning"><i
                                                class="fe fe-box"></i></span>
                                    </div>
                                    <div class="flex-fill">
                                        <div class="d-flex justify-content-between">
                                            <h6 class="fw-semibold">
                                                {{ $data->type }}
                                            </h6>
                                            <div>
                                                <p class="mb-0 fs-13 text-muted">
                                                    <i class="fe fe-arrow-up-right me-1 text-success brround"></i>{{
                                                    $data->percentage }}%
                                                </p>
                                            </div>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                                                style="width: {{ $data->percentage }}%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @empty
                            {{-- <div></div> --}}
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection