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

<div class="page-header">
    <div>
        <h1 class="page-title">Add Income</h1>
        <p class="page-sub">Record your salary or other income</p>
    </div>
    <a href="{{ path('app_income_index') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ path('app_income_new') }}" class="notion-form">

        <div class="form-group">
            <label class="form-label">Amount (£)</label>
            <input type="number" name="amount" step="0.01" min="0" class="form-input form-input--lg"
                   placeholder="0.00" required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Whose income?</label>
            <div class="pill-select">
                {% for u in allUsers %}
                <input type="radio" name="owner_id" id="owner-{{ u.id }}" value="{{ u.id }}"
                       class="pill-radio" {% if u.id == currentUser.id %}checked{% endif %}>
                <label for="owner-{{ u.id }}" class="pill">{{ u.name }}</label>
                {% endfor %}
                <input type="radio" name="owner_id" id="owner-joint" value="joint" class="pill-radio">
                <label for="owner-joint" class="pill">🤝 Joint</label>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Source</label>
            <div class="pill-select" data-name="source">
                <input type="radio" name="source" id="src-salary" value="salary" checked class="pill-radio">
                <label for="src-salary" class="pill">💼 Salary</label>
                <input type="radio" name="source" id="src-bonus" value="bonus" class="pill-radio">
                <label for="src-bonus" class="pill">🎁 Bonus</label>
                <input type="radio" name="source" id="src-freelance" value="freelance" class="pill-radio">
                <label for="src-freelance" class="pill">💻 Freelance</label>
                <input type="radio" name="source" id="src-other" value="other" class="pill-radio">
                <label for="src-other" class="pill">📦 Other</label>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Note <span class="form-optional">(optional)</span></label>
            <input type="text" name="note" class="form-input" placeholder="e.g. March salary from Acme Inc.">
        </div>

        <div class="form-group">
            <label class="form-label" style="display:flex;align-items:center;gap:.75rem;cursor:pointer">
                <input type="hidden" name="is_savings_transfer" value="0">
                <input type="checkbox" name="is_savings_transfer" value="1" id="savings-toggle" style="width:1.1rem;height:1.1rem;accent-color:var(--accent)">
                <span>
                    Savings transfer
                    <span class="form-optional" style="display:block;font-weight:400;font-size:.8rem;margin-top:.1rem">Exclude from total income (e.g. Chloe's savings account payment)</span>
                </span>
            </label>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Month</label>
                <select name="month" class="form-input">
                    {% for m in 1..12 %}
                    <option value="{{ m }}" {% if m == month %}selected{% endif %}>
                        {{ ("2000-" ~ m ~ "-01")|date("F") }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Year</label>
                <input type="number" name="year" class="form-input" value="{{ year }}" min="2020" max="2099">
            </div>
        </div>

        <button type="submit" class="btn btn-primary btn-full">Save Income</button>
    </form>
</div>

{% endblock %}