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

<div class="page-header">
    <div>
        <h1 class="page-title">Edit Goal</h1>
        <p class="page-sub">{{ goal.name }}</p>
    </div>
    <a href="{{ path('app_savings_index') }}" class="btn btn-ghost">← Back</a>
</div>

<div class="form-card">
    <form method="post" action="{{ path('app_savings_edit', {id: goal.id}) }}" class="notion-form">

        <div class="form-group">
            <label class="form-label">Goal name</label>
            <input type="text" name="name" class="form-input" value="{{ goal.name }}" required autofocus>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Target amount (£)</label>
                <input type="number" name="target_amount" step="0.01" min="1" class="form-input form-input--lg" value="{{ goal.targetAmount }}" required>
            </div>
            <div class="form-group">
                <label class="form-label">Current amount (£)</label>
                <input type="number" name="current_amount" step="0.01" min="0" class="form-input form-input--lg" value="{{ goal.currentAmount }}">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Where is it based? <span class="form-optional">(optional)</span></label>
                <input type="text" name="institution" class="form-input" value="{{ goal.institution }}" placeholder="e.g. Marcus, Monzo, Barclays...">
            </div>
            <div class="form-group">
                <label class="form-label">Monthly contribution (£) <span class="form-optional">(optional)</span></label>
                <input type="number" name="monthly_contribution" step="0.01" min="0" class="form-input" value="{{ goal.monthlyContribution }}" placeholder="0.00">
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Description <span class="form-optional">(optional)</span></label>
            <textarea name="description" class="form-input form-textarea" placeholder="Why are you saving for this?">{{ goal.description }}</textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Target date <span class="form-optional">(optional)</span></label>
                <input type="date" name="deadline" class="form-input" value="{{ goal.deadline ? goal.deadline|date('Y-m-d') : '' }}">
            </div>
            <div class="form-group">
                <label class="form-label">Colour</label>
                <div class="color-swatches">
                    {% set colors = ['#22c55e', '#4f6ef7', '#f97316', '#a855f7', '#ec4899', '#14b8a6', '#f59e0b'] %}
                    {% for c in colors %}
                    <label class="color-swatch" style="background: {{ c }}">
                        <input type="radio" name="color" value="{{ c }}" class="sr-only" {% if goal.color == c %}checked{% endif %}>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% if recurringExpenses is not empty %}
        <div class="form-group">
            <label class="form-label">Link to recurring transaction <span class="form-optional">(auto-deposits on Monzo sync)</span></label>
            <select name="linked_expense_description" class="form-input" id="savingsLinkSelect" onchange="updateSavingsLinkAmount(this)">
                <option value="">— None —</option>
                {% for exp in recurringExpenses %}
                <option value="{{ exp.description }}"
                        data-amount="{{ exp.amount }}"
                        {{ goal.linkedExpenseDescription == exp.description ? 'selected' : '' }}>
                    {{ exp.description }} (£{{ exp.amount }})
                </option>
                {% endfor %}
            </select>
            <input type="hidden" name="linked_expense_amount" id="savingsLinkAmount" value="{{ goal.linkedExpenseAmount }}">
        </div>
        {% endif %}

        <div class="form-group form-toggle">
            <label class="toggle-label">
                <input type="checkbox" name="is_personal" value="1" class="toggle-input" {{ goal.isPersonal ? 'checked' : '' }}>
                <span class="toggle-switch"></span>
                <span>🔒 Personal savings (visible only to me, counts towards personal net worth)</span>
            </label>
        </div>

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

<script>
function updateSavingsLinkAmount(sel) {
    const opt = sel.options[sel.selectedIndex];
    document.getElementById('savingsLinkAmount').value = opt.dataset.amount || '';
}
</script>

{% endblock %}