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

<div class="page-header">
    <div>
        <h1 class="page-title">Income</h1>
        <p class="page-sub">
            <a href="{{ path('app_income_index', {month: prevMonth, year: prevYear}) }}" class="month-nav">‹</a>
            {{ ['January','February','March','April','May','June','July','August','September','October','November','December'][month - 1] }} {{ year }}
            <span class="period-range">{{ periodStart|date('d M') }} – {{ periodEnd|date('d M Y') }}</span>
            {% if not isCurrentMonth %}
            <a href="{{ path('app_income_index', {month: nextMonth, year: nextYear}) }}" class="month-nav">›</a>
            {% endif %}
        </p>
    </div>
    <a href="{{ path('app_income_new') }}" class="btn btn-primary">+ Add Income</a>
</div>

{% if isCurrentMonth %}
<div class="payday-strip">
    {% for key, pd in paydays %}
    <div class="payday-card {% if pd.daysUntil == 0 %}payday-card--today{% endif %}">
        <span class="payday-label">{{ pd.label }}</span>
        <span class="payday-date">{{ pd.date|date('l, d M') }}</span>
        {% if pd.daysUntil == 0 %}
            <span class="payday-badge payday-badge--today">Today! 🎉</span>
        {% elseif pd.daysUntil == 1 %}
            <span class="payday-badge">Tomorrow</span>
        {% else %}
            <span class="payday-badge">In {{ pd.daysUntil }} days</span>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

{# ── Income tabs ──────────────────────────────────────────── #}
<div class="income-view-tabs" id="incomeViewTabs" style="display:flex;gap:.75rem;margin-bottom:1.25rem">
    <button class="income-vtab income-vtab--active" data-view="all" onclick="switchIncomeView('all')">
        <span class="income-vtab__label">All Income</span>
        <span class="income-vtab__amount" id="totalAll">£{{ total|number_format(2) }}</span>
        <span class="income-vtab__sub">incl. savings transfers</span>
    </button>
    <button class="income-vtab" data-view="regular" onclick="switchIncomeView('regular')">
        <span class="income-vtab__label">Regular Income</span>
        <span class="income-vtab__amount" id="totalRegular">£{{ totalExcludingSavings|number_format(2) }}</span>
        <span class="income-vtab__sub">excl. savings transfers</span>
    </button>
</div>

{% if incomes|length > 0 %}
<div class="card" id="incomeList">
    <ul class="item-list">
        {% for income in incomes %}
        <li class="item-row {% if income.isSavingsTransfer %}item-row--savings-transfer js-savings-row{% endif %}">
            <div class="item-left">
                <span class="item-dot" style="background: {{ income.user.color ?? '#4f6ef7' }}"></span>
                <div>
                    <span class="item-name">{{ income.source|capitalize }}</span>
                    <span class="item-meta">{{ income.ownerLabel ?? income.user.name }}{% if income.note %} · {{ income.note }}{% endif %}</span>
                </div>
                {% if income.isSavingsTransfer %}
                <span class="tag tag--savings">savings transfer</span>
                {% endif %}
            </div>
            <div class="item-right">
                <span class="item-amount {% if income.isSavingsTransfer %}item-amount--muted{% endif %}">£{{ income.amount|number_format(2) }}</span>
                <form method="post" action="{{ path('app_income_toggle_savings', {id: income.id}) }}" style="display:inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_savings_income_' ~ income.id) }}">
                    <input type="hidden" name="month" value="{{ month }}">
                    <input type="hidden" name="year" value="{{ year }}">
                    <button type="submit" class="btn-icon {{ income.isSavingsTransfer ? 'btn-icon--savings-on' : 'btn-icon--savings-off' }}"
                            title="{{ income.isSavingsTransfer ? 'Mark as regular income' : 'Mark as savings transfer' }}">💰</button>
                </form>
                <form method="post" action="{{ path('app_income_delete', {id: income.id}) }}" style="display:inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_income_' ~ income.id) }}">
                    <button type="submit" class="btn-icon btn-icon--danger" onclick="return confirm('Delete this income?')">×</button>
                </form>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% else %}
<div class="empty-card">
    <p>No income added for this month yet.</p>
    <a href="{{ path('app_income_new') }}" class="btn btn-primary">Add your salary</a>
</div>
{% endif %}

<style>
.income-vtab {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .9rem 1.1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.income-vtab--active {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.income-vtab__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-2);
}
.income-vtab--active .income-vtab__label { color: var(--green); }
.income-vtab__amount {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.1;
}
.income-vtab__sub {
    font-size: .72rem;
    color: var(--text-2);
}
@media (max-width: 480px) {
    .income-view-tabs { flex-direction: column; }
}
</style>

<script>
function switchIncomeView(view) {
    document.querySelectorAll('.income-vtab').forEach(function(btn) {
        btn.classList.toggle('income-vtab--active', btn.dataset.view === view);
    });
    document.querySelectorAll('.js-savings-row').forEach(function(row) {
        row.style.display = view === 'all' ? '' : 'none';
    });
}
</script>

{% endblock %}