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

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

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="summary-grid">
            <div class="summary-card"><span>Gross Profit</span><strong>{{ currency_symbol }}{{ "%.2f"|format(gross_profit or 0) }}</strong></div>
            <div class="summary-card"><span>Total Expenses</span><strong>{{ currency_symbol }}{{ "%.2f"|format(total_expenses or 0) }}</strong></div>
            <div class="summary-card"><span>Net After Expenses</span><strong>{{ currency_symbol }}{{ "%.2f"|format(net_profit or 0) }}</strong></div>
        </div>

        <h3>Add Expense</h3>
        <form class="expense-form" method="POST" action="/add-expense">
            <div>
                <label for="reason">Expense reason</label>
                <input id="reason" name="reason" placeholder="Rent, transport, supplies, internet..." required>
            </div>
            <div>
                <label for="amount">Amount</label>
                <input id="amount" name="amount" type="number" min="0.01" step="0.01" required>
            </div>
            <div>
                <label for="date">Date</label>
                <input id="date" name="date" type="date" value="{{ today }}" required>
            </div>
            <div>
                <label for="fund_source">Fund source</label>
                <select id="fund_source" name="fund_source" required>
                    <option value="business">Business funds</option>
                    <option value="personal">Owner personal funds</option>
                    <option value="loans">Loan funds</option>
                </select>
            </div>
            <button type="submit">Add Expense</button>
        </form>

        <h3>Expenses by Fund</h3>
        <div class="summary-grid">
            {% for row in expenses_by_fund %}
                <div class="summary-card"><span>{{ row.fund_source|title }}</span><strong>{{ currency_symbol }}{{ "%.2f"|format(row.total or 0) }}</strong></div>
            {% else %}
                <div class="summary-card"><span>No expenses</span><strong>{{ currency_symbol }}0.00</strong></div>
            {% endfor %}
        </div>

        <h3>Expense Ledger</h3>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr><th>Date</th><th>Reason</th><th>Fund</th><th class="num">Amount</th><th>Action</th></tr>
                </thead>
                <tbody>
                {% for expense in 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>
                        <td>
                            <form method="POST" action="/expenses/{{ expense.id }}/delete" onsubmit="return confirm('Remove this expense from finance totals?');">
                                <button class="danger" type="submit">Remove</button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="5">No expenses recorded yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}