{% extends 'base.html' %}
{% block title %}Analytics & Reports - Astron Hosts LTD{% endblock %}
{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-lg rounded-4 border-0 mb-4">
                <div class="card-body text-center">
                    <h2 class="fw-bold mb-3 display-5">Analytics & Reports</h2>
                    <p class="text-muted mb-4">Visualize your income and expense trends with interactive charts and reports.</p>
                    <div class="row justify-content-center">
                        <div class="col-md-6 mb-4">
                            <div class="card border-0 shadow-sm rounded-4">
                                <div class="card-body">
                                    <h5 class="fw-semibold mb-3"><i class="bi bi-graph-up-arrow me-2"></i>Income Trend</h5>
                                    <canvas id="incomeChart" height="180"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="card border-0 shadow-sm rounded-4">
                                <div class="card-body">
                                    <h5 class="fw-semibold mb-3"><i class="bi bi-graph-down-arrow me-2"></i>Expense Trend</h5>
                                    <canvas id="expenseChart" height="180"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-info mt-4 mb-0" role="alert">
                        <i class="bi bi-info-circle me-2"></i>
                        Analytics and charts (income/expense trends) coming soon!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Placeholder chart code (to be replaced with real data)
const ctxIncome = document.getElementById('incomeChart').getContext('2d');
const ctxExpense = document.getElementById('expenseChart').getContext('2d');
const incomeChart = new Chart(ctxIncome, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Income',
            data: [0, 0, 0, 0, 0, 0],
            borderColor: '#1976d2',
            backgroundColor: 'rgba(25, 118, 210, 0.1)',
            tension: 0.4
        }]
    },
    options: {responsive: true, plugins: {legend: {display: false}}}
});
const expenseChart = new Chart(ctxExpense, {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Expense',
            data: [0, 0, 0, 0, 0, 0],
            borderColor: '#d32f2f',
            backgroundColor: 'rgba(211, 47, 47, 0.1)',
            tension: 0.4
        }]
    },
    options: {responsive: true, plugins: {legend: {display: false}}}
});
</script>
{% endblock %} 