@extends('admin.layouts.app')

@section('title', 'Analytics')

@section('content')
<div class="container-fluid">
    <h2 class="mb-4">Analytics Dashboard</h2>

    <div class="row">
        <!-- Daily Transactions Chart -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Daily Transactions</h5>
                </div>
                <div class="card-body">
                    <canvas id="dailyTransactionsChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Plan Distribution -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Plan Distribution</h5>
                </div>
                <div class="card-body">
                    <canvas id="planDistributionChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- Transaction Types -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Transaction Types</h5>
                </div>
                <div class="card-body">
                    <canvas id="transactionTypesChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Withdrawal Status -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Withdrawal Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="withdrawalStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Daily Transactions Chart
const dailyTransactionsCtx = document.getElementById('dailyTransactionsChart').getContext('2d');
new Chart(dailyTransactionsCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($dailyTransactions->pluck('date')) !!},
        datasets: [{
            label: 'Daily Transactions',
            data: {!! json_encode($dailyTransactions->pluck('total')) !!},
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Plan Distribution Chart
const planDistributionCtx = document.getElementById('planDistributionChart').getContext('2d');
new Chart(planDistributionCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($planDistribution->pluck('plan_id')) !!},
        datasets: [{
            data: {!! json_encode($planDistribution->pluck('total')) !!},
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
            ]
        }]
    },
    options: {
        responsive: true
    }
});

// Transaction Types Chart
const transactionTypesCtx = document.getElementById('transactionTypesChart').getContext('2d');
new Chart(transactionTypesCtx, {
    type: 'bar',
    data: {
        labels: ['Deposits', 'Withdrawals', 'Commissions', 'Bonuses'],
        datasets: [{
            label: 'Transaction Types',
            data: {!! json_encode([
                \App\Models\Transaction::where('type', 'deposit')->count(),
                \App\Models\Transaction::where('type', 'withdrawal')->count(),
                \App\Models\Transaction::where('type', 'commission')->count(),
                \App\Models\Transaction::where('type', 'bonus')->count()
            ]) !!},
            backgroundColor: [
                'rgb(75, 192, 192)',
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
            ]
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Withdrawal Status Chart
const withdrawalStatusCtx = document.getElementById('withdrawalStatusChart').getContext('2d');
new Chart(withdrawalStatusCtx, {
    type: 'pie',
    data: {
        labels: ['Pending', 'Approved', 'Rejected'],
        datasets: [{
            data: {!! json_encode([
                \App\Models\Withdrawal::where('status', 'pending')->count(),
                \App\Models\Withdrawal::where('status', 'approved')->count(),
                \App\Models\Withdrawal::where('status', 'rejected')->count()
            ]) !!},
            backgroundColor: [
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(255, 99, 132)'
            ]
        }]
    },
    options: {
        responsive: true
    }
});
</script>
@endpush
@endsection