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

<div class="page-header">
    <div>
        <h1 class="page-title">Add Bill</h1>
        <p class="page-sub">Monthly fixed cost</p>
    </div>
    <a href="{{ path('app_bills_index') }}" class="btn btn-ghost">← Back</a>
</div>

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

        <div class="form-group">
            <label class="form-label">Bill name</label>
            <input type="text" name="name" class="form-input" placeholder="e.g. Rent, Netflix, Gym..." required autofocus>
        </div>

        <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>
        </div>

        <div class="form-group">
            <label class="form-label">Category</label>
            <div class="pill-select">
                {% set cats = ['housing','utilities','transport','food','entertainment','insurance','health','subscriptions','other'] %}
                {% for cat in cats %}
                <input type="radio" id="cat-{{ cat }}" name="category" value="{{ cat }}" class="pill-radio" {% if cat == 'utilities' %}checked{% endif %}>
                <label for="cat-{{ cat }}" class="pill">{{ cat|capitalize }}</label>
                {% endfor %}
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Due day <span class="form-optional">(optional)</span></label>
                <input type="number" name="due_day" min="1" max="31" class="form-input" placeholder="1–31">
            </div>
            <div class="form-group form-toggle">
                <label class="toggle-label">
                    <input type="checkbox" name="is_recurring" value="1" class="toggle-input">
                    <span class="toggle-switch"></span>
                    <span>Recurring monthly</span>
                </label>
            </div>
        </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 Bill</button>
    </form>
</div>

{% endblock %}