@extends('admin.layouts.app')

@section('panel')
    <div class="row gy-4">
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--primary has-link overflow-hidden box--shadow2">
                <a href="{{ route('admin.users.all') }}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-4">
                            <i class="las la-users f-size--56"></i>
                        </div>
                        <div class="col-8 text-end">
                            <span class="text-white text--small">@lang('Total Users')</span>
                            <h2 class="text-white">{{ $widget['total_users'] }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--success has-link box--shadow2">
                <a href="{{ route('admin.users.full.active') }}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-4">
                            <i class="las la-user-check f-size--56"></i>
                        </div>
                        <div class="col-8 text-end">
                            <span class="text-white text--small">@lang('Full Active Users')</span>
                            <h2 class="text-white">{{ $widget['full_active_users'] }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--danger has-link box--shadow2">
                <a href="{{ route('admin.users.plan.purchased') }}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-4">
                            <i class="las la-user-tie f-size--56"></i>
                        </div>
                        <div class="col-8 text-end">
                            <span class="text-white text--small">@lang('Total Partially Active')</span>
                            <h2 class="text-white">{{ $widget['plan_purchased'] }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--red has-link box--shadow2">
                <a href="{{ route('admin.users.network.pending') }}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-4">
                            <i class="las  la-user-times f-size--56"></i>
                        </div>
                        <div class="col-8 text-end">
                            <span class="text-white text--small">@lang('Plan not Purchased Users')</span>
                            <h2 class="text-white">{{ $widget['network_pending'] }}</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
    </div><!-- row end-->

    <div class="row gy-4 mt-2">
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-ban overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 bg--danger">
                    <i class="fas fa-ban"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_reward_given'],2) }}</h3>
                    <p>@lang('Total Reward Given')</p>
                </div>
                <a href="{{ route('admin.report.transaction', ['remark' => Status::CommissionReward]) }}"
                    class="widget-two__btn border border--danger btn-outline--danger">@lang('View All')</a>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-spinner overlay-icon text--warning"></i>
                <div class="widget-two__icon b-radius--5 bg--warning">
                    <i class="fas fa-spinner"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_plan_purchased'], 2) }}</h3>
                    <p>@lang('Total Plan Purchased')</p>
                </div>
                <a href="{{ route('admin.report.transaction', ['remark' => Status::PlanPurchased]) }}"
                    class="widget-two__btn border border--warning btn-outline--warning">@lang('View All')</a>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-hand-holding-usd overlay-icon text--success"></i>
                <div class="widget-two__icon b-radius--5 bg--success">
                    <i class="fas fa-hand-holding-usd"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_donation_given']) }}</h3>
                    <p>@lang('Total Donations Given')</p>
                </div>
                <a href="{{ route('admin.donation.donationlist', ['remark' => Status::DonationMade]) }}"
                    class="widget-two__btn border border--success btn-outline--success">@lang('View All')</a>
            </div>
        </div><!-- dashboard-w1 end -->


        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-percentage overlay-icon text--primary"></i>
                <div class="widget-two__icon b-radius--5 bg--primary">
                    <i class="fas fa-percentage"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_donation_received']) }}</h3>
                    <p>@lang('Total Donation Received')</p>
                </div>
                <a href="{{ route('admin.donation.donationlist', ['remark' => Status::DonationReceived]) }}"
                    class="widget-two__btn border border--primary btn-outline--primary">@lang('View All')</a>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="lar la-credit-card overlay-icon text--info"></i>
                <div class="widget-two__icon b-radius--5 bg--info">
                    <i class="lar la-credit-card"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_donation_pending']) }}</h3>
                    <p>@lang('Total Pending Donations')</p>
                </div>
                <a href="{{ route('admin.donation.donationlist', ['remark' => Status::DonationMade, 'status' => Status::Pending]) }}"
                    class="widget-two__btn border border--info btn-outline--info">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="las la-times-circle overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 bg--warning">
                    <i class="las la-sync"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $deposit['total_app_downloaded'] }}</h3>
                    <p>@lang('Total App Downloaded')</p>
                </div>
                <a href="{{ route('admin.users.download.user.list') }}"
                    class="widget-two__btn border border--danger btn-outline--danger">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fa fa-user overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 bg--warning">
                    <i class="fa fa-user"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $deposit['total_person_with_debt_value'] }}</h3>
                    <p>@lang('Total Users with Debt')</p>
                </div>
                <a href="{{ route('admin.users.debtNotFree') }}"
                    class="widget-two__btn border border--primary btn-outline--primary">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-rupee-sign overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 bg--secondary">
                    <i class="fas fa-rupee-sign"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ showAmount($deposit['total_debt_value'], 2) }}</h3>
                    <p>@lang('Total Debt Value')</p>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="fas fa-plus overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 bg--dark">
                    <i class="fas fa-dove"></i>
                </div>
                <div class="widget-two__content">
                    <h3>{{ $general->cur_sym }}{{ $deposit['total_person_with_debt_cleared_at'] }}</h3>
                    <p>@lang('Total Users Who Cleared Their Debt')</p>
                </div>
                <a href="{{ route('admin.users.debtFree') }}"
                    class="widget-two__btn border border--secondary btn-outline--dark">@lang('View All')</a>
            </div>
        </div>
    </div><!-- row end-->

    <div class="row gy-4 mt-2 mb-30">
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-body">
                    <div class="card b-radius--10 ">
                        <div class="card-body p-0">
                            <h4 class="mb-2">Level Wise Achievers</h4>
                            <div class="table-responsive--sm table-responsive">

                                <table class="table table--light style--two">
                                    <thead>
                                        <tr>
                                            <th>@lang('Level #')</th>
                                            <th>@lang('Title')</th>
                                            <th>@lang('Users')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($levels as $level)
                                            <tr>
                                                <td><span class="fw-bold">{{ $level->level }}</span></td>
                                                <td>{{ $level->title }}</td>
                                                <td>{{ $level->users_count }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@lang('Login By OS') (@lang('Last 30 days'))</h5>
                    <canvas id="userOsChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@lang('Login By Country') (@lang('Last 30 days'))</h5>
                    <canvas id="userCountryChart"></canvas>
                </div>
            </div>
        </div>

        {{--
    <div class="row gy-4 mt-2">
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="lar la-credit-card overlay-icon text--success"></i>
                <div class="widget-two__icon b-radius--5 border border--success text--success">
                <i class="lar la-credit-card"></i>
                </div>
                <div class="widget-two__content">
                <h3>{{ $general->cur_sym }}{{showAmount($withdrawals['total_withdraw_amount'])}}</h3>
                <p>@lang('Total Withdrawan')</p>
                </div>
                <a href="{{route('admin.withdraw.log')}}" class="widget-two__btn border border--success btn-outline--success">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="las la-sync overlay-icon text--warning"></i>
                <div class="widget-two__icon b-radius--5 border border--warning text--warning">
                <i class="las la-sync"></i>
                </div>
                <div class="widget-two__content">
                <h3>{{$withdrawals['total_withdraw_pending']}}</h3>
                <p>@lang('Pending Withdrawals')</p>
                </div>
                <a href="{{route('admin.withdraw.pending')}}" class="widget-two__btn border border--warning btn-outline--warning">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="las la-times-circle overlay-icon text--danger"></i>
                <div class="widget-two__icon b-radius--5 border border--danger text--danger">
                <i class="las la-times-circle"></i>
                </div>
                <div class="widget-two__content">
                <h3>{{$withdrawals['total_withdraw_rejected']}}</h3>
                <p>@lang('Rejected Withdrawals')</p>
                </div>
                <a href="{{route('admin.withdraw.rejected')}}" class="widget-two__btn border border--danger btn-outline--danger">@lang('View All')</a>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="widget-two box--shadow2 b-radius--5 bg--white">
                <i class="las la-percent overlay-icon text--primary"></i>
                <div class="widget-two__icon b-radius--5 border border--primary text--primary">
                <i class="las la-percent"></i>
                </div>
                <div class="widget-two__content">
                <h3>{{ $general->cur_sym }}{{showAmount($withdrawals['total_withdraw_charge'])}}</h3>
                <p>@lang('Withdrawal Charge')</p>
                </div>
                <a href="{{route('admin.withdraw.log')}}" class="widget-two__btn border border--primary btn-outline--primary">@lang('View All')</a>
            </div>
        </div>
    </div><!-- row end--> --}}

        {{-- <div class="row gy-4 mt-2">
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--primary has-link overflow-hidden box--shadow2">
                <a href="{{route('admin.plan.index')}}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                    <div class="col-4">
                        <i class="las la-paper-plane f-size--56"></i>
                    </div>
                    <div class="col-8 text-end">
                        <span class="text-white text--small">@lang('Total Plans')</span>
                        <h2 class="text-white">{{$widget['total_plans']}}</h2>
                    </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--warning has-link box--shadow2">
                <a href="{{route('admin.pin.index')}}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                    <div class="col-4">
                        <i class="las la-key f-size--56"></i>
                    </div>
                    <div class="col-8 text-end">
                        <span class="text-white text--small">@lang('All Pins')</span>
                        <h2 class="text-white">{{$widget['total_pins']}}</h2>
                    </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--info has-link box--shadow2">
                <a href="{{route('admin.report.commissions')}}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                    <div class="col-4">
                        <i class="las la-lock-open f-size--56"></i>
                    </div>
                    <div class="col-8 text-end">
                        <span class="text-white text--small">@lang('Total Commissions')</span>
                        <h2 class="text-white">{{ $general->cur_sym }}{{ showAmount($widget['total_commissions']) }}</h2>
                    </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
        <div class="col-xxl-3 col-sm-6">
            <div class="card bg--success has-link box--shadow2">
                <a href="{{route('admin.pin.used')}}" class="item-link"></a>
                <div class="card-body">
                    <div class="row align-items-center">
                    <div class="col-4">
                        <i class="lab la-key f-size--56"></i>
                    </div>
                    <div class="col-8 text-end">
                        <span class="text-white text--small">@lang('Used Pins')</span>
                        <h2 class="text-white">{{$widget['total_used_pins']}}</h2>
                    </div>
                    </div>
                </div>
            </div>
        </div><!-- dashboard-w1 end -->
    </div><!-- row end--> --}}

        {{-- <div class="row mb-none-30 mt-30">
        <div class="col-xl-6 mb-30">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@lang('Monthly Deposit & Withdraw Report') (@lang('Last 12 Month'))</h5>
                    <div id="apex-bar-chart"> </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 mb-30">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">@lang('Transactions Report') (@lang('Last 30 Days'))</h5>
                    <div id="apex-line"></div>
                </div>
            </div>
        </div>
    </div> --}}

        <div class="row mb-none-30 mt-5">
            {{-- <div class="col-xl-4 col-lg-6 mb-30">
            <div class="card overflow-hidden">
                <div class="card-body">
                    <h5 class="card-title">@lang('Login By Browser') (@lang('Last 30 days'))</h5>
                    <canvas id="userBrowserChart"></canvas>
                </div>
            </div>
        </div> --}}

        </div>
    @endsection

    @push('script')
        <script src="{{ asset('assets/admin/js/vendor/apexcharts.min.js') }}"></script>
        <script src="{{ asset('assets/admin/js/vendor/chart.js.2.8.0.js') }}"></script>

        <script>
            "use strict";

            var ctx = document.getElementById('userOsChart');
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: @json($chart['user_os_counter']->keys()),
                    datasets: [{
                        data: {{ $chart['user_os_counter']->flatten() }},
                        backgroundColor: [
                            '#ff7675',
                            '#6c5ce7',
                            '#ffa62b',
                            '#ffeaa7',
                            '#D980FA',
                            '#fccbcb',
                            '#45aaf2',
                            '#05dfd7',
                            '#FF00F6',
                            '#1e90ff',
                            '#2ed573',
                            '#eccc68',
                            '#ff5200',
                            '#cd84f1',
                            '#7efff5',
                            '#7158e2',
                            '#fff200',
                            '#ff9ff3',
                            '#08ffc8',
                            '#3742fa',
                            '#1089ff',
                            '#70FF61',
                            '#bf9fee',
                            '#574b90'
                        ],
                        borderColor: [
                            'rgba(0, 0, 0, 0.05)'
                        ],
                        borderWidth: 0,

                    }]
                },
                options: {
                    aspectRatio: 1,
                    responsive: true,
                    elements: {
                        line: {
                            tension: 0 // disables bezier curves
                        }
                    },
                    scales: {
                        xAxes: [{
                            display: false
                        }],
                        yAxes: [{
                            display: false
                        }]
                    },
                    legend: {
                        display: false,
                    }
                },
            });


            // Donut chart
            var ctx = document.getElementById('userCountryChart');
            var myChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: @json($chart['user_country_counter']->keys()),
                    datasets: [{
                        data: {{ $chart['user_country_counter']->flatten() }},
                        backgroundColor: [
                            '#ff7675',
                            '#6c5ce7',
                            '#ffa62b',
                            '#ffeaa7',
                            '#D980FA',
                            '#fccbcb',
                            '#45aaf2',
                            '#05dfd7',
                            '#FF00F6',
                            '#1e90ff',
                            '#2ed573',
                            '#eccc68',
                            '#ff5200',
                            '#cd84f1',
                            '#7efff5',
                            '#7158e2',
                            '#fff200',
                            '#ff9ff3',
                            '#08ffc8',
                            '#3742fa',
                            '#1089ff',
                            '#70FF61',
                            '#bf9fee',
                            '#574b90'
                        ],
                        borderColor: [
                            'rgba(231, 80, 90, 0.75)'
                        ],
                        borderWidth: 0,

                    }]
                },
                options: {
                    aspectRatio: 1,
                    responsive: true,
                    elements: {
                        line: {
                            tension: 0 // disables bezier curves
                        }
                    },
                    scales: {
                        xAxes: [{
                            display: false
                        }],
                        yAxes: [{
                            display: false
                        }]
                    },
                    legend: {
                        display: false,
                    }
                }
            });
        </script>
    @endpush
