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

<div class="page-header">
    <div>
        <h1 class="page-title">Track a Debt</h1>
        <p class="page-sub">Loans, credit cards, and more</p>
    </div>
    <a href="{{ path('app_debts_index') }}" class="btn btn-ghost">← Back</a>
</div>

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

        <div class="form-group">
            <label class="form-label">Debt type</label>
            <div class="type-radio-group">
                <label class="type-radio-option">
                    <input type="radio" name="type" value="loan" checked>
                    <span class="type-radio-btn">🏦 Loan</span>
                </label>
                <label class="type-radio-option">
                    <input type="radio" name="type" value="credit_card">
                    <span class="type-radio-btn">💳 Credit Card</span>
                </label>
                <label class="type-radio-option">
                    <input type="radio" name="type" value="bnpl">
                    <span class="type-radio-btn">🛍️ Buy Now Pay Later</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Label</label>
            <input type="text" name="label" class="form-input" placeholder="e.g. Car loan, Credit card..." required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Creditor <span class="form-optional">(optional)</span></label>
            <input type="text" name="creditor" class="form-input" placeholder="e.g. Barclays, HSBC...">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Total amount (£)</label>
                <input type="number" name="total_amount" step="0.01" min="0" class="form-input" placeholder="0.00" required>
            </div>
            <div class="form-group" id="remainingGroup">
                <label class="form-label">Remaining amount (£)</label>
                <input type="number" name="remaining_amount" step="0.01" min="0" class="form-input" placeholder="Same as total if new">
            </div>
        </div>

        {# Credit card only: credit limit for utilization display #}
        <div class="form-group" id="creditLimitGroup" style="display:none">
            <label class="form-label">Credit limit (£) <span class="form-optional">(shows utilization % on the debt card)</span></label>
            <input type="number" name="credit_limit" step="0.01" min="0" class="form-input" placeholder="e.g. 3000.00">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Interest rate % <span class="form-optional">(optional)</span></label>
                <input type="number" name="interest_rate" step="0.01" min="0" class="form-input" placeholder="e.g. 5.9">
            </div>
            <div class="form-group">
                <label class="form-label">Monthly payment (£) <span class="form-optional">(optional)</span></label>
                <input type="number" name="monthly_payment" step="0.01" min="0" class="form-input" placeholder="0.00">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Settlement date <span class="form-optional">(optional)</span></label>
                <input type="date" name="due_date" class="form-input">
            </div>
            <div class="form-group form-toggle">
                <label class="toggle-label">
                    <input type="checkbox" name="is_personal" value="1" class="toggle-input">
                    <span class="toggle-switch"></span>
                    <span>🔒 Personal (visible only to me)</span>
                </label>
            </div>
        </div>

        {% if recurringExpenses is not empty %}
        <div class="form-group">
            <label class="form-label">Link to recurring bill <span class="form-optional">(optional — auto-reduces balance on Monzo sync)</span></label>
            <select name="linked_expense_description" class="form-input" id="debtLinkSelect" onchange="updateDebtLinkAmount(this)">
                <option value="">— None —</option>
                {% for exp in recurringExpenses %}
                <option value="{{ exp.description }}" data-amount="{{ exp.amount }}">{{ exp.description }} (£{{ exp.amount }})</option>
                {% endfor %}
            </select>
            <input type="hidden" name="linked_expense_amount" id="debtLinkAmount">
        </div>
        {% endif %}

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

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

// Show credit limit field only for credit_card type
document.querySelectorAll('input[name="type"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const isCc = document.querySelector('input[name="type"]:checked')?.value === 'credit_card';
        document.getElementById('creditLimitGroup').style.display = isCc ? '' : 'none';
    });
});
</script>

{% endblock %}