{% extends "admin_base.html" %}

{% block title %}Billing Overview{% endblock %}
{% block page_title %}Billing Overview{% endblock %}
{% block page_description %}Monitor revenue and payment analytics{% endblock %}

{% block content %}
<!-- Billing Statistics -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stats-card success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">KES {{ billing_stats.total_revenue|floatformat:0 }}</h3>
                    <p class="mb-0">Total Revenue</p>
                </div>
                <div>
                    <i class="fas fa-money-bill-wave fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">KES {{ billing_stats.monthly_revenue|floatformat:0 }}</h3>
                    <p class="mb-0">This Month</p>
                </div>
                <div>
                    <i class="fas fa-calendar-alt fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ billing_stats.pending_payments }}</h3>
                    <p class="mb-0">Pending Payments</p>
                </div>
                <div>
                    <i class="fas fa-clock fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6">
        <div class="stats-card danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ billing_stats.failed_payments }}</h3>
                    <p class="mb-0">Failed Payments</p>
                </div>
                <div>
                    <i class="fas fa-exclamation-triangle fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Revenue Chart -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="admin-card">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-line me-2"></i>Revenue Trend
                </h5>
            </div>
            <div class="card-body">
                <canvas id="revenueChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="admin-card">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chart-pie me-2"></i>Payment Methods
                </h5>
            </div>
            <div class="card-body">
                <canvas id="paymentMethodsChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="admin-card">
    <div class="card-header bg-white">
        <h5 class="card-title mb-0">
            <i class="fas fa-tools me-2"></i>Quick Actions
        </h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <a href="{% url 'tenants_admin:subscription_list' %}?status=pending" class="btn btn-outline-warning w-100">
                    <i class="fas fa-clock mb-2"></i><br>
                    View Pending Payments
                </a>
            </div>
            <div class="col-md-3">
                <a href="{% url 'tenants_admin:subscription_list' %}?status=failed" class="btn btn-outline-danger w-100">
                    <i class="fas fa-times mb-2"></i><br>
                    Failed Payments
                </a>
            </div>
            <div class="col-md-3">
                <button class="btn btn-outline-info w-100" onclick="generateReport()">
                    <i class="fas fa-file-export mb-2"></i><br>
                    Export Report
                </button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-outline-success w-100" onclick="sendReminders()">
                    <i class="fas fa-envelope mb-2"></i><br>
                    Send Reminders
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Revenue (KES)',
                data: [45000, 52000, 48000, 61000, 58000, 67000],
                borderColor: 'rgb(39, 174, 96)',
                backgroundColor: 'rgba(39, 174, 96, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'KES ' + value.toLocaleString();
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'Revenue: KES ' + context.parsed.y.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Payment Methods Chart
    const paymentCtx = document.getElementById('paymentMethodsChart').getContext('2d');
    new Chart(paymentCtx, {
        type: 'doughnut',
        data: {
            labels: ['M-Pesa', 'Bank Transfer', 'Cash', 'Card'],
            datasets: [{
                data: [65, 20, 10, 5],
                backgroundColor: [
                    '#27ae60',
                    '#3498db',
                    '#f39c12',
                    '#9b59b6'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});

function generateReport() {
    alert('Generate billing report functionality would be implemented here.');
}

function sendReminders() {
    if (confirm('Send payment reminders to all pending customers?')) {
        alert('Reminders sent successfully!');
    }
}
</script>
{% endblock %}