@extends('kylin-payment::layouts.app')

@section('title', __('kylin-payment::payment.statistics.payment_records'))

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('kylin-payment::payment.statistics.dashboard') }}</h3>
            </div>
            <div class="card-body">
                <form id="report-form">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="start_date">{{ __('kylin-payment::payment.statistics.date') }} ({{ __('kylin-payment::payment.statistics.start') }})</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" value="{{ $startDate }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="end_date">{{ __('kylin-payment::payment.statistics.date') }} ({{ __('kylin-payment::payment.statistics.end') }})</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ $endDate }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="gateway">{{ __('kylin-payment::payment.statistics.payment_by_method') }}</label>
                                <select class="form-control" id="gateway" name="gateway">
                                    <option value="">{{ __('kylin-payment::payment.messages.all') }}</option>
                                    @foreach($gateways as $key => $name)
                                        <option value="{{ $key }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="status">{{ __('kylin-payment::payment.statistics.payment_by_status') }}</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">{{ __('kylin-payment::payment.messages.all') }}</option>
                                    @foreach($statuses as $key => $name)
                                        <option value="{{ $key }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-primary mr-2" id="generate-btn">{{ __('kylin-payment::payment.messages.search') }}</button>
                            <a href="{{ route('kylin-payment.report.export-excel') }}" class="btn btn-success mr-2" id="export-excel-btn">
                                <i class="fas fa-file-excel"></i> {{ __('kylin-payment::payment.messages.export') }} Excel
                            </a>
                            <a href="{{ route('kylin-payment.report.export-pdf') }}" class="btn btn-danger mr-2" id="export-pdf-btn">
                                <i class="fas fa-file-pdf"></i> {{ __('kylin-payment::payment.messages.export') }} PDF
                            </a>
                            <a href="{{ route('kylin-payment.report.export-csv') }}" class="btn btn-info" id="export-csv-btn">
                                <i class="fas fa-file-csv"></i> {{ __('kylin-payment::payment.messages.export') }} CSV
                            </a>
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{ __('kylin-payment::payment.statistics.payment_records') }}</h3>
                            </div>
                            <div class="card-body">
                                <div id="report-loading" style="display: none; text-align: center; padding: 20px;">
                                    <i class="fas fa-spinner fa-spin"></i> {{ __('kylin-payment::payment.messages.loading') }}
                                </div>
                                <div id="report-data">
                                    <!-- 报表数据将通过AJAX加载 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // 生成报表
            $('#generate-btn').click(function() {
                generateReport();
            });

            // 初始加载报表
            generateReport();

            // 导出按钮点击事件
            $('#export-excel-btn, #export-pdf-btn, #export-csv-btn').click(function(e) {
                e.preventDefault();
                let url = $(this).attr('href');
                let params = $('#report-form').serialize();
                window.location.href = url + '?' + params;
            });

            // 生成报表函数
            function generateReport() {
                $('#report-loading').show();
                $('#report-data').hide();

                $.ajax({
                    url: '{{ route('kylin-payment.report.generate') }}',
                    type: 'GET',
                    data: $('#report-form').serialize(),
                    success: function(response) {
                        if (response.success) {
                            renderReport(response.data);
                        } else {
                            $('#report-data').html('<div class="alert alert-danger">' + response.message + '</div>');
                        }
                    },
                    error: function() {
                        $('#report-data').html('<div class="alert alert-danger">{{ __('kylin-payment::payment.errors.operation_failed') }}</div>');
                    },
                    complete: function() {
                        $('#report-loading').hide();
                        $('#report-data').show();
                    }
                });
            }

            // 渲染报表函数
            function renderReport(data) {
                let html = '';

                // 渲染统计信息
                html += '<div class="row mb-4">';
                html += '<div class="col-md-3">';
                html += '<div class="info-box">';
                html += '<span class="info-box-icon bg-info elevation-1"><i class="fas fa-shopping-cart"></i></span>';
                html += '<div class="info-box-content">';
                html += '<span class="info-box-text">{{ __('kylin-payment::payment.statistics.total_count') }}</span>';
                html += '<span class="info-box-number">' + data.stats.total_count + '</span>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="col-md-3">';
                html += '<div class="info-box">';
                html += '<span class="info-box-icon bg-success elevation-1"><i class="fas fa-check-circle"></i></span>';
                html += '<div class="info-box-content">';
                html += '<span class="info-box-text">{{ __('kylin-payment::payment.statistics.success_count') }}</span>';
                html += '<span class="info-box-number">' + data.stats.success_count + '</span>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="col-md-3">';
                html += '<div class="info-box">';
                html += '<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-exclamation-circle"></i></span>';
                html += '<div class="info-box-content">';
                html += '<span class="info-box-text">{{ __('kylin-payment::payment.statistics.failed_count') }}</span>';
                html += '<span class="info-box-number">' + data.stats.failed_count + '</span>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="col-md-3">';
                html += '<div class="info-box">';
                html += '<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-undo-alt"></i></span>';
                html += '<div class="info-box-content">';
                html += '<span class="info-box-text">{{ __('kylin-payment::payment.statistics.refunded_count') }}</span>';
                html += '<span class="info-box-number">' + data.stats.refunded_count + '</span>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';

                // 渲染支付记录表格
                html += '<div class="table-responsive">';
                html += '<table class="table table-bordered table-striped">';
                html += '<thead>';
                html += '<tr>';
                html += '<th>{{ __('kylin-payment::payment.statistics.date') }}</th>';
                html += '<th>{{ __('kylin-payment::payment.payment_types.order_no') }}</th>';
                html += '<th>{{ __('kylin-payment::payment.payment_types.gateway') }}</th>';
                html += '<th>{{ __('kylin-payment::payment.statistics.amount') }}</th>';
                html += '<th>{{ __('kylin-payment::payment.payment_statuses.status') }}</th>';
                html += '<th>{{ __('kylin-payment::payment.payment_types.gateway_trade_no') }}</th>';
                html += '</tr>';
                html += '</thead>';
                html += '<tbody>';

                if (data.records.length > 0) {
                    data.records.forEach(function(record) {
                        html += '<tr>';
                        html += '<td>' + record.created_at + '</td>';
                        html += '<td>' + record.out_trade_no + '</td>';
                        html += '<td>' + record.gateway + '</td>';
                        html += '<td>' + record.amount + '</td>';
                        html += '<td>' + record.status + '</td>';
                        html += '<td>' + (record.gateway_trade_no || '') + '</td>';
                        html += '</tr>';
                    });
                } else {
                    html += '<tr>';
                    html += '<td colspan="6" class="text-center">{{ __('kylin-payment::payment.errors.payment_record_not_found') }}</td>';
                    html += '</tr>';
                }

                html += '</tbody>';
                html += '</table>';
                html += '</div>';

                $('#report-data').html(html);
            }
        });
    </script>
@endsection
