<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ __('kylin-payment::payment.statistics.payment_dashboard') }}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .dashboard-card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .dashboard-card .card-header {
            background-color: #007bff;
            color: white;
            border-radius: 8px 8px 0 0;
        }
        .stats-card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        .stats-card h3 {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .stats-card p {
            color: #6c757d;
            margin: 0;
        }
        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 20px;
        }
        .table-container {
            max-height: 400px;
            overflow-y: auto;
        }
        .nav-link {
            cursor: pointer;
        }
        .nav-link.active {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="mt-4 mb-4">{{ __('kylin-payment::payment.statistics.payment_dashboard') }}</h1>
                
                <!-- 基础统计卡片 -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="stats-card bg-primary text-white">
                            <h3>{{ $basicStats['total_payments'] ?? 0 }}</h3>
                            <p>{{ __('kylin-payment::payment.statistics.total_payments') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card bg-success text-white">
                            <h3>{{ number_format($basicStats['total_amount'] ?? 0, 2) }} ¥</h3>
                            <p>{{ __('kylin-payment::payment.statistics.total_amount') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card bg-warning text-white">
                            <h3>{{ number_format($basicStats['success_rate'] ?? 0, 2) }}%</h3>
                            <p>{{ __('kylin-payment::payment.statistics.success_rate') }}</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stats-card bg-danger text-white">
                            <h3>{{ number_format($refundRate, 2) }}%</h3>
                            <p>{{ __('kylin-payment::payment.statistics.refund_rate') }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="row">
                    <!-- 支付方式分布 -->
                    <div class="col-md-6">
                        <div class="dashboard-card">
                            <div class="card-header">
                                {{ __('kylin-payment::payment.statistics.payment_by_method') }}
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="gatewayChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 支付状态分布 -->
                    <div class="col-md-6">
                        <div class="dashboard-card">
                            <div class="card-header">
                                {{ __('kylin-payment::payment.statistics.payment_by_status') }}
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="statusChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 支付趋势 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="dashboard-card">
                            <div class="card-header">
                                {{ __('kylin-payment::payment.statistics.payment_by_date') }}
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="dateChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Top 10 支付记录 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="dashboard-card">
                            <div class="card-header">
                                {{ __('kylin-payment::payment.statistics.top_payments') }}
                            </div>
                            <div class="card-body">
                                <div class="table-container">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>{{ __('kylin-payment::payment.payment_types.order_no') }}</th>
                                                <th>{{ __('kylin-payment::payment.payment_types.gateway') }}</th>
                                                <th>{{ __('kylin-payment::payment.statistics.amount') }}</th>
                                                <th>{{ __('kylin-payment::payment.payment_statuses.status') }}</th>
                                                <th>{{ __('kylin-payment::payment.statistics.created_at') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($topPayments as $payment)
                                                <tr>
                                                    <td>{{ $payment['out_trade_no'] ?? '' }}</td>
                                                    <td>{{ $payment['gateway'] ?? '' }}</td>
                                                    <td>{{ number_format($payment['amount'] ?? 0, 2) }} ¥</td>
                                                    <td>
                                                        @if($payment['status'] == 'success')
                                                            <span class="badge badge-success">{{ __('kylin-payment::payment.payment_statuses.success') }}</span>
                                                        @elseif($payment['status'] == 'failed')
                                                            <span class="badge badge-danger">{{ __('kylin-payment::payment.payment_statuses.failed') }}</span>
                                                        @elseif($payment['status'] == 'pending')
                                                            <span class="badge badge-warning">{{ __('kylin-payment::payment.payment_statuses.pending') }}</span>
                                                        @else
                                                            <span class="badge badge-secondary">{{ $payment['status'] ?? '' }}</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $payment['created_at'] ?? '' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 导航链接 -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="nav nav-tabs">
                                    <a class="nav-link active" data-toggle="tab" href="#dashboard">{{ __('kylin-payment::payment.statistics.dashboard') }}</a>
                                    <a class="nav-link" href="{{ route('kylin-payment.dashboard.payments') }}">{{ __('kylin-payment::payment.statistics.payment_records') }}</a>
                                    <a class="nav-link" href="{{ route('kylin-payment.dashboard.callbacks') }}">{{ __('kylin-payment::payment.statistics.callback_logs') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Chart.js 配置 -->
    <script>
        // 支付方式分布图表
        var gatewayCtx = document.getElementById('gatewayChart').getContext('2d');
        var gatewayLabels = @json(array_keys($statsByGateway ?? []));
        var gatewayData = @json(array_values($statsByGateway ?? []));
        
        var gatewayChart = new Chart(gatewayCtx, {
            type: 'pie',
            data: {
                labels: gatewayLabels,
                datasets: [{
                    data: gatewayData,
                    backgroundColor: [
                        '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                        '#FF9F40', '#8AC440', '#FF5722', '#00BCD4', '#9C27B0'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 支付状态分布图表
        var statusCtx = document.getElementById('statusChart').getContext('2d');
        var statusLabels = @json(array_keys($statsByStatus ?? []));
        var statusData = @json(array_values($statsByStatus ?? []));
        
        var statusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: statusLabels,
                datasets: [{
                    data: statusData,
                    backgroundColor: [
                        '#4BC0C0', '#FF6384', '#FFCE56', '#9966FF', '#FF9F40'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
        
        // 支付趋势图表
        var dateCtx = document.getElementById('dateChart').getContext('2d');
        var dateLabels = @json(array_keys($statsByDate ?? []));
        var dateData = @json(array_values($statsByDate ?? []));
        
        var dateChart = new Chart(dateCtx, {
            type: 'line',
            data: {
                labels: dateLabels,
                datasets: [{
                    label: '{{ __('kylin-payment::payment.statistics.amount') }}',
                    data: dateData,
                    borderColor: '#36A2EB',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    tension: 0.1,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>
