{% extends 'base.html.twig' %}
{% block title %}Bills{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Bills</h1>
        <p class="page-sub">{{ month }}/{{ year }} — £{{ total|number_format(2) }} total</p>
    </div>
    <a href="{{ path('app_bills_new') }}" class="btn btn-primary">+ Add Bill</a>
</div>

<div class="stats-grid stats-grid--2">
    <div class="stat-card stat-card--expense">
        <div class="stat-label">Total Bills</div>
        <div class="stat-value">£{{ (expenseBillsTotal)|number_format(2) }}</div>
        <div class="stat-meta">{{ expenseBillsPaid|length }} paid · {{ expenseBillsUpcoming|length }} upcoming</div>
    </div>
    <div class="stat-card stat-card--positive">
        <div class="stat-label">Paid this period</div>
        <div class="stat-value">£{{ expenseBillsPaidTotal|number_format(2) }}</div>
        <div class="stat-meta">£{{ expenseBillsUpcomingTotal|number_format(2) }} still to pay</div>
    </div>
</div>

{% if bills|length > 0 %}
<div class="card">
    <ul class="item-list">
        {% for bill in bills %}
        <li class="item-row {% if bill.isPaid %}item-row--muted{% endif %}">
            <div class="item-left">
                <form method="post" action="{{ path('app_bills_toggle_paid', {id: bill.id}) }}" style="margin:0">
                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_bill_' ~ bill.id) }}">
                    <button type="submit" class="check-circle {% if bill.isPaid %}check-circle--done{% endif %}" title="{{ bill.isPaid ? 'Mark unpaid' : 'Mark paid' }}">
                        {{ bill.isPaid ? '✓' : '' }}
                    </button>
                </form>
                <div>
                    <span class="item-name {{ bill.isPaid ? 'line-through' : '' }}">{{ bill.name }}</span>
                    <div class="item-tags">
                        <span class="tag tag--category">{{ bill.category|capitalize }}</span>
                        {% if bill.isRecurring %}<span class="tag tag--recurring">↻ Recurring</span>{% endif %}
                        {% if bill.dueDay %}<span class="tag">Due {{ bill.dueDay }}th</span>{% endif %}
                    </div>
                </div>
            </div>
            <div class="item-right">
                <span class="item-amount">£{{ bill.amount|number_format(2) }}</span>
                <form method="post" action="{{ path('app_bills_delete', {id: bill.id}) }}" style="display:inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_bill_' ~ bill.id) }}">
                    <button type="submit" class="btn-icon btn-icon--danger" onclick="return confirm('Delete this bill?')">×</button>
                </form>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% else %}
<div class="empty-card">
    <p>No bills added for this month yet.</p>
    <a href="{{ path('app_bills_new') }}" class="btn btn-primary">Add a bill</a>
</div>
{% endif %}

{% if expenseBills|length > 0 %}
<div style="margin-top:2rem">
    <div class="section-header">
        <h2 class="section-title">Essential Expenses <span class="section-badge">{{ expenseBills|length }}</span></h2>
        <span class="section-total">£{{ expenseBillsTotal|number_format(2) }}</span>
    </div>

    {# Paid / occurred #}
    {% if expenseBillsPaid|length > 0 %}
    <div class="section-header" style="margin-top:1rem;margin-bottom:.4rem">
        <span style="font-size:.8rem;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.04em">✓ Paid this period</span>
        <span style="font-size:.85rem;font-weight:600;color:var(--green)">£{{ expenseBillsPaidTotal|number_format(2) }}</span>
    </div>
    <div class="card" style="margin-bottom:1rem">
        <ul class="item-list">
            {% for exp in expenseBillsPaid %}
            <li class="item-row item-row--bill" style="opacity:.75">
                <div class="item-left">
                    <span class="item-dot" style="background: {{ exp.user.color ?? '#4f6ef7' }}"></span>
                    <div>
                        <span class="item-name" style="text-decoration:line-through;color:var(--text-2)">{{ exp.description ?? exp.category|capitalize }}</span>
                        <div class="item-tags">
                            <span class="tag tag--category">{{ exp.category|capitalize }}</span>
                            {% if exp.isRecurring %}<span class="tag tag--recurring">🔁 Recurring</span>{% endif %}
                            {% if exp.isJoint %}<span class="tag tag--joint">👥 Joint</span>{% endif %}
                            <span class="item-meta" style="margin-left:.25rem">{{ exp.date|date('d M') }}</span>
                        </div>
                    </div>
                </div>
                <div class="item-right">
                    <span class="item-amount" style="color:var(--text-2)">£{{ exp.amount|number_format(2) }}</span>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {# Upcoming / not yet occurred #}
    {% if expenseBillsUpcoming|length > 0 %}
    <div class="section-header" style="margin-bottom:.4rem">
        <span style="font-size:.8rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em">⏳ Still to pay</span>
        <span style="font-size:.85rem;font-weight:600;color:var(--accent)">£{{ expenseBillsUpcomingTotal|number_format(2) }}</span>
    </div>
    <div class="card">
        <ul class="item-list">
            {% for exp in expenseBillsUpcoming %}
            <li class="item-row item-row--bill">
                <div class="item-left">
                    <span class="item-dot" style="background: {{ exp.user.color ?? '#4f6ef7' }}"></span>
                    <div>
                        <span class="item-name">{{ exp.description ?? exp.category|capitalize }}</span>
                        <div class="item-tags">
                            <span class="tag tag--category">{{ exp.category|capitalize }}</span>
                            {% if exp.isRecurring %}<span class="tag tag--recurring">🔁 Recurring</span>{% endif %}
                            {% if exp.isJoint %}<span class="tag tag--joint">👥 Joint</span>{% endif %}
                            <span class="item-meta" style="margin-left:.25rem">Due {{ exp.date|date('d M') }}</span>
                        </div>
                    </div>
                </div>
                <div class="item-right">
                    <span class="item-amount">£{{ exp.amount|number_format(2) }}</span>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endif %}

{% endblock %}