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

{% block title %}Finance{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/finance.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Gvelo Enterprise Platform</h1>
    <div class="card">
        <h2>Finance Dashboard</h2>
        <div class="actions">
            {{ ui.button('Add / View Expenses', '/expenses') }}
            {{ ui.button('Profit & Loss', '/analytics/profit-loss') }}
            {{ ui.button('Back to Admin', '/admin') }}
        </div>

        <div class="finance-grid">
            <div class="finance-card"><strong>Total Sales</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(sales or 0) }}</div></div>
            <div class="finance-card"><strong>Cost of Goods Sold</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(cost or 0) }}</div></div>
            <div class="finance-card"><strong>Gross Profit</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(gross_profit or 0) }}</div></div>
            <div class="finance-card"><strong>Total Expenses</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(expenses or 0) }}</div></div>
            <div class="finance-card"><strong>Net Operating Profit</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(profit or 0) }}</div></div>
            <div class="finance-card"><strong>Owner Personal Balance</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(fund_balances.personal_balance or 0) }}</div></div>
            <div class="finance-card"><strong>Business Balance</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(fund_balances.business_balance or 0) }}</div></div>
            <div class="finance-card"><strong>Loan Balance</strong><div class="amount">{{ currency_symbol }}{{ "%.2f"|format(fund_balances.loans_balance or 0) }}</div></div>
        </div>

        <h3>Profit by Fund Source</h3>
        <table>
            <thead><tr><th>Fund</th><th>Revenue</th><th>Cost</th><th>Profit</th></tr></thead>
            <tbody>
                {% for row in profit_by_fund %}
                <tr>
                    <td>{{ row.fund_source|title }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(row.revenue or 0) }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(row.cost or 0) }}</td>
                    <td>{{ currency_symbol }}{{ "%.2f"|format(row.net_profit or 0) }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4">No profit by fund yet. Add products with buying price and sell them to populate this table.</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <h3>Expenses by Fund Source</h3>
        <table>
            <thead><tr><th>Fund</th><th class="num">Expense Total</th></tr></thead>
            <tbody>
                {% for row in expenses_by_fund %}
                <tr>
                    <td>{{ row.fund_source|title }}</td>
                    <td class="num">{{ currency_symbol }}{{ "%.2f"|format(row.total or 0) }}</td>
                </tr>
                {% else %}
                <tr><td colspan="2">No expenses recorded yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <h3>Recent Expenses</h3>
        <table>
            <thead><tr><th>Date</th><th>Reason</th><th>Fund</th><th class="num">Amount</th></tr></thead>
            <tbody>
                {% for expense in recent_expenses %}
                <tr>
                    <td>{{ expense.date_created }}</td>
                    <td>{{ expense.reason }}</td>
                    <td>{{ expense.fund_source|title }}</td>
                    <td class="num">{{ currency_symbol }}{{ "%.2f"|format(expense.amount or 0) }}</td>
                </tr>
                {% else %}
                <tr><td colspan="4">No recent expenses.</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <h3>Fund Cashflow</h3>
        <p>
            <a href="/finance/cashflow/personal">Personal</a> |
            <a href="/finance/cashflow/business">Business</a> |
            <a href="/finance/cashflow/loans">Loans</a>
        </p>
    </div>
</div>
{% endblock %}