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

{% block title %}Profit And Loss{% 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/profit_loss.css">
{% endblock %}
{% block content %}
<main class="page">
    <section class="panel">
        <h1>Profit And Loss</h1>
        <p class="muted">Revenue, cost, profit, and margin across key operating periods.</p>
        <p><a href="/analytics">Back to Analytics</a></p>
        <div class="chart-frame"><canvas id="profitLossChart"></canvas></div>
        <table>
            <thead>
                <tr><th>Period</th><th>Revenue</th><th>Cost</th><th>Profit</th><th>Margin</th></tr>
            </thead>
            <tbody>
            {% for period, data in profit_analysis.items() %}
                <tr>
                    <td>{{ period }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(data.revenue or 0) }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(data.cost or 0) }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(data.profit or 0) }}</td>
                    <td>{{ "%.1f"|format(data.profit_margin or 0) }}%</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>
</main>
<script>
const profitChartData = {{ profit_chart_data|safe }};
const currencySymbol = {{ currency_symbol|tojson }};
const palette = {
    blue: "#2563eb",
    amber: "#d97706",
    emerald: "#059669",
    violet: "#7c3aed",
    grid: "rgba(100, 116, 139, 0.18)",
    text: "#334155"
};
Chart.defaults.font.family = "'Inter', 'Segoe UI', Arial, sans-serif";
Chart.defaults.color = palette.text;
function money(value) {
    return currencySymbol + Number(value || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}
new Chart(document.getElementById("profitLossChart"), {
    type: "bar",
    data: {
        labels: profitChartData.periods || [],
        datasets: [{
            label: "Revenue",
            data: profitChartData.revenue || [],
            backgroundColor: palette.blue,
            borderRadius: 6
        }, {
            label: "Cost",
            data: profitChartData.cost || [],
            backgroundColor: palette.amber,
            borderRadius: 6
        }, {
            label: "Profit",
            data: profitChartData.profit || [],
            backgroundColor: palette.emerald,
            borderRadius: 6
        }, {
            type: "line",
            label: "Margin %",
            data: profitChartData.margin || [],
            borderColor: palette.violet,
            backgroundColor: "rgba(124, 58, 237, 0.12)",
            borderWidth: 3,
            yAxisID: "y1",
            tension: 0.35
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {position: "bottom", labels: {usePointStyle: true, boxWidth: 8}},
            tooltip: {
                backgroundColor: "#0f172a",
                callbacks: {
                    label(ctx) {
                        return ctx.dataset.yAxisID === "y1"
                            ? ctx.dataset.label + ": " + Number(ctx.raw || 0).toFixed(1) + "%"
                            : ctx.dataset.label + ": " + money(ctx.raw);
                    }
                }
            }
        },
        scales: {
            x: {grid: {display: false}},
            y: {beginAtZero: true, grid: {color: palette.grid}, ticks: {callback: value => money(value)}},
            y1: {position: "right", grid: {drawOnChartArea: false}, ticks: {callback: value => value + "%"}}
        }
    }
});
</script>
{% endblock %}