{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Fund Analysis{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="/static/hil-pages/fund_analysis.css">
{% endblock %}
{% block content %}
<main class="page">
    <section class="content-section">
        <h1>Fund Analysis</h1>
        <p><a href="/analytics">Back to Analytics</a></p>
        <div class="chart-grid">
            <article class="chart-card">
                <h2>Fund Revenue And Profit</h2>
                <p class="muted">Compare how each fund source contributes to sales and profit.</p>
                <div class="chart-frame"><canvas id="fundRevenueChart"></canvas></div>
            </article>
            <article class="chart-card">
                <h2>Fund Balances</h2>
                <p class="muted">Current recorded balance by fund source.</p>
                <div class="chart-frame"><canvas id="fundBalanceChart"></canvas></div>
            </article>
        </div>
        <div class="grid">
            {% for fund in ['personal', 'business', 'loans'] %}
            <article class="fund-card">
                <h2>{{ fund|title }}</h2>
                <p class="muted">Cashflow and profit records are available for this fund source.</p>
            </article>
            {% endfor %}
        </div>
    </section>
</main>
<script>
const fundChartData = {{ fund_chart_data|safe }};
const currencySymbol = {{ currency_symbol|tojson }};
const palette = {
    blue: "#2563eb",
    emerald: "#059669",
    violet: "#7c3aed",
    amber: "#d97706",
    grid: "rgba(100, 116, 139, 0.18)"
};
Chart.defaults.font.family = "'Inter', 'Segoe UI', Arial, sans-serif";
function money(value) {
    return currencySymbol + Number(value || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}
const tooltip = {
    backgroundColor: "#0f172a",
    callbacks: {label: ctx => ctx.dataset.label + ": " + money(ctx.raw)}
};
new Chart(document.getElementById("fundRevenueChart"), {
    type: "bar",
    data: {
        labels: fundChartData.funds || [],
        datasets: [{
            label: "Revenue",
            data: fundChartData.revenue || [],
            backgroundColor: palette.blue,
            borderRadius: 6
        }, {
            label: "Profit",
            data: fundChartData.profit || [],
            backgroundColor: palette.emerald,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {legend: {position: "bottom", labels: {usePointStyle: true, boxWidth: 8}}, tooltip},
        scales: {
            x: {grid: {display: false}},
            y: {beginAtZero: true, grid: {color: palette.grid}, ticks: {callback: value => money(value)}}
        }
    }
});
new Chart(document.getElementById("fundBalanceChart"), {
    type: "doughnut",
    data: {
        labels: fundChartData.funds || [],
        datasets: [{
            label: "Balance",
            data: fundChartData.balances || [],
            backgroundColor: [palette.violet, palette.blue, palette.amber],
            borderColor: "#ffffff",
            borderWidth: 3,
            hoverOffset: 8
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: "58%",
        plugins: {legend: {position: "bottom", labels: {usePointStyle: true, boxWidth: 8}}, tooltip}
    }
});
</script>
{% endblock %}