@extends('layouts.state')

@section('title', 'Payment Analytics')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">Payment Analytics</h2>
        <p class="text-body-tertiary lh-sm">Financial metrics and payment trends for the state</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <div class="btn-group" role="group">
            <a href="{{ route('state.analytics.index') }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Back to Analytics
            </a>
            <a href="{{ route('state.payments.index') }}" class="btn btn-phoenix-primary">
                <span class="fas fa-credit-card me-2"></span>All Payments
            </a>
        </div>
    </div>
</div>

<!-- Payment Overview Cards -->
<div class="row g-3 mb-4">
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card overflow-hidden">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-1 text-body">Total Revenue</h6>
                        <h4 class="mb-0 text-body-emphasis">${{ number_format($paymentStats['totalRevenue'] ?? 0, 2) }}</h4>
                        <div class="d-flex align-items-center">
                            <span class="text-success me-1">
                                <span class="fas fa-arrow-up"></span>
                            </span>
                            <span class="text-body-tertiary fs-9">All Time</span>
                        </div>
                    </div>
                    <div class="avatar-xl">
                        <div class="avatar-name rounded-circle bg-success-subtle text-success">
                            <span class="fas fa-dollar-sign fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card overflow-hidden">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-1 text-body">This Month</h6>
                        <h4 class="mb-0 text-body-emphasis">${{ number_format($paymentStats['thisMonth'] ?? 0, 2) }}</h4>
                        <div class="d-flex align-items-center">
                            <span class="text-primary me-1">
                                <span class="fas fa-calendar"></span>
                            </span>
                            <span class="text-body-tertiary fs-9">Current Month</span>
                        </div>
                    </div>
                    <div class="avatar-xl">
                        <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                            <span class="fas fa-chart-line fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card overflow-hidden">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-1 text-body">Successful Payments</h6>
                        <h4 class="mb-0 text-body-emphasis">{{ $paymentStats['successful'] ?? '0' }}</h4>
                        <div class="d-flex align-items-center">
                            <span class="text-success me-1">
                                <span class="fas fa-check-circle"></span>
                            </span>
                            <span class="text-body-tertiary fs-9">Completed</span>
                        </div>
                    </div>
                    <div class="avatar-xl">
                        <div class="avatar-name rounded-circle bg-success-subtle text-success">
                            <span class="fas fa-check-circle fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-sm-6 col-lg-3">
        <div class="card overflow-hidden">
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div class="flex-1">
                        <h6 class="mb-1 text-body">Pending Payments</h6>
                        <h4 class="mb-0 text-body-emphasis">{{ $paymentStats['pending'] ?? '0' }}</h4>
                        <div class="d-flex align-items-center">
                            <span class="text-warning me-1">
                                <span class="fas fa-clock"></span>
                            </span>
                            <span class="text-body-tertiary fs-9">Processing</span>
                        </div>
                    </div>
                    <div class="avatar-xl">
                        <div class="avatar-name rounded-circle bg-warning-subtle text-warning">
                            <span class="fas fa-clock fs-4"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">Revenue Trends</h6>
                    </div>
                    <div class="col-auto">
                        <select class="form-select form-select-sm" id="revenueTimeRange">
                            <option value="7">Last 7 days</option>
                            <option value="30">Last 30 days</option>
                            <option value="90">Last 90 days</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Payment Status</h6>
            </div>
            <div class="card-body">
                <canvas id="paymentStatusChart" width="300" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Payment Methods & Transaction Types -->
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Payment Methods</h6>
            </div>
            <div class="card-body">
                <canvas id="paymentMethodChart" width="300" height="200"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Transaction Types</h6>
            </div>
            <div class="card-body">
                <canvas id="transactionTypeChart" width="300" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Monthly Revenue Overview -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">Monthly Revenue Overview</h6>
                    </div>
                    <div class="col-auto">
                        <select class="form-select form-select-sm">
                            <option>2024</option>
                            <option>2023</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <canvas id="monthlyRevenueChart" width="800" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">Recent High-Value Transactions</h6>
                    </div>
                    <div class="col-auto">
                        <a href="{{ route('state.payments.index') }}" class="btn btn-link btn-sm">View All Payments</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>Transaction ID</th>
                                <th>User</th>
                                <th>Amount</th>
                                <th>Type</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($recentPayments) && count($recentPayments) > 0)
                                @foreach($recentPayments as $payment)
                                <tr>
                                    <td>
                                        <code class="fs-9">#{{ $payment->transaction_id ?? 'TXN-' . $payment->id }}</code>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar-sm me-2">
                                                <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                                                    {{ substr($payment->user->first_name ?? 'U', 0, 1) }}{{ substr($payment->user->last_name ?? 'N', 0, 1) }}
                                                </div>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $payment->user->first_name ?? 'Unknown' }} {{ $payment->user->last_name ?? 'User' }}</h6>
                                                <small class="text-body-tertiary">{{ $payment->user->email ?? 'N/A' }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <strong class="text-success">${{ number_format($payment->amount ?? 0, 2) }}</strong>
                                    </td>
                                    <td>
                                        <span class="badge bg-info-subtle text-info">
                                            {{ ucfirst($payment->type ?? 'Payment') }}
                                        </span>
                                    </td>
                                    <td>{{ $payment->created_at ? $payment->created_at->format('M d, Y H:i') : 'N/A' }}</td>
                                    <td>
                                        @if(($payment->status ?? 'pending') == 'completed')
                                            <span class="badge bg-success-subtle text-success">Completed</span>
                                        @elseif(($payment->status ?? 'pending') == 'pending')
                                            <span class="badge bg-warning-subtle text-warning">Pending</span>
                                        @elseif(($payment->status ?? 'pending') == 'failed')
                                            <span class="badge bg-danger-subtle text-danger">Failed</span>
                                        @else
                                            <span class="badge bg-secondary-subtle text-secondary">Unknown</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="text-center text-body-tertiary">No payment data available</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
            label: 'Daily Revenue',
            data: [450, 680, 320, 750, 890, 420, 650],
            borderColor: '#28a745',
            backgroundColor: 'rgba(40, 167, 69, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

// Payment Status Chart
const paymentStatusCtx = document.getElementById('paymentStatusChart').getContext('2d');
const paymentStatusChart = new Chart(paymentStatusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Completed', 'Pending', 'Failed'],
        datasets: [{
            data: [{{ $paymentStats['successful'] ?? 0 }}, {{ $paymentStats['pending'] ?? 0 }}, {{ $paymentStats['failed'] ?? 0 }}],
            backgroundColor: ['#28a745', '#ffc107', '#dc3545'],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Payment Method Chart
const paymentMethodCtx = document.getElementById('paymentMethodChart').getContext('2d');
const paymentMethodChart = new Chart(paymentMethodCtx, {
    type: 'bar',
    data: {
        labels: ['Credit Card', 'PayPal', 'Bank Transfer', 'Cash'],
        datasets: [{
            label: 'Number of Transactions',
            data: [120, 80, 45, 25],
            backgroundColor: ['#3366ff', '#17a2b8', '#28a745', '#ffc107'],
            borderColor: '#dee2e6',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Transaction Type Chart
const transactionTypeCtx = document.getElementById('transactionTypeChart').getContext('2d');
const transactionTypeChart = new Chart(transactionTypeCtx, {
    type: 'pie',
    data: {
        labels: ['Event Registration', 'Belt Test', 'Membership', 'Other'],
        datasets: [{
            data: [45, 25, 20, 10],
            backgroundColor: ['#3366ff', '#28a745', '#ffc107', '#dc3545'],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Monthly Revenue Chart
const monthlyRevenueCtx = document.getElementById('monthlyRevenueChart').getContext('2d');
const monthlyRevenueChart = new Chart(monthlyRevenueCtx, {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            label: 'Revenue',
            data: [2500, 3200, 2800, 3500, 4100, 3800, 4500, 4200, 3900, 4800, 4300, 5000],
            backgroundColor: 'rgba(40, 167, 69, 0.8)',
            borderColor: '#28a745',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});
</script>
@endpush