@extends('themes.flaty.user.layouts.app')
@section('title', translate('Dashboard', 'dashboard'))
@section('content')
    <div class="row row-cols-1 row-cols-sm-1 row-cols-lg-2 row-cols-xxl-4 g-3">
        <div class="col">
            <div class="dashboard-counter">
                <div class="dashboard-counter-icon">
                    <i class="fa fa-download"></i>
                </div>
                <div>
                    <h5 class="dashboard-counter-title">{{ translate('Downloads', 'dashboard') }}</h5>
                    <p class="dashboard-counter-text mb-0">{{ number_format($counters['downloads']) }}</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="dashboard-counter dashboard-counter-success">
                <div class="dashboard-counter-icon">
                    <i class="fa-solid fa-dollar-sign"></i>
                </div>
                <div>
                    <h5 class="dashboard-counter-title">{{ translate('Downloads Earnings', 'dashboard') }}</h5>
                    <p class="dashboard-counter-text mb-0">{{ earnings($counters['earnings']) }}</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="dashboard-counter dashboard-counter-warning">
                <div class="dashboard-counter-icon">
                    <i class="fa-solid fa-chart-line"></i>
                </div>
                <div>
                    <h5 class="dashboard-counter-title">{{ translate('Average CPM', 'dashboard') }}</h5>
                    <p class="dashboard-counter-text mb-0">{{ earnings($counters['cpm']) }}</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="dashboard-counter dashboard-counter-danger">
                <div class="dashboard-counter-icon">
                    <i class="fa-solid fa-money-bill-trend-up"></i>
                </div>
                <div>
                    <h5 class="dashboard-counter-title">{{ translate('Referral Earnings', 'dashboard') }}</h5>
                    <p class="dashboard-counter-text mb-0"> {{ earnings($counters['referral_earnings']) }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="dashboard-card mt-3">
        <h5 class="mb-3">{{ translate('Statistics', 'dashboard') }}</h5>
        <div class="dashboard-chart">
            <canvas id="statistics-chart"></canvas>
        </div>
        <div class="dashboard-table dashboard-table-height mt-4">
            <table class="table text-center table-borderless">
                <thead>
                    <tr>
                        <th>{{ translate('Date', 'dashboard') }}</th>
                        <th>{{ translate('Downloads', 'dashboard') }}</th>
                        <th>{{ translate('Downloads Earnings', 'dashboard') }}</th>
                        <th>{{ translate('Daily CPM', 'dashboard') }}</th>
                        <th>{{ translate('Referrals Earnings', 'dashboard') }}</th>
                    </tr>
                </thead>
                <tbody class="text-muted">
                    @foreach ($tableData as $key => $data)
                        <tr>
                            <td>{{ $key }}</td>
                            <td>{{ number_format($data['downloads']) }}</td>
                            <td>{{ earnings($data['download_earnings']) }}</td>
                            <td>{{ earnings($data['cpm']) }}</td>
                            <td>{{ earnings($data['referral_earnings']) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @push('top_scripts')
        <script>
            "use strict";
            const chartConfig = {!! json_encode([
                'line' => [
                    'title' => translate('Downloads', 'dashboard'),
                    'labels' => $chart['labels'],
                    'data' => $chart['data'],
                    'max' => $chart['max'],
                ],
            ]) !!};
        </script>
    @endpush
    @push('scripts_libs')
        <script src="{{ asset('vendor/libs/chartjs/chart.min.js') }}"></script>
        <script src="{{ theme_asset('assets/js/charts.js') }}"></script>
    @endpush
@endsection