{% extends "base.html" %}

{% block title %}{{ _('common.edit') }} {{ subscription.name }} - FINA{% endblock %}

{% block content %}
<div class="form-container">
    <div class="glass-card form-card">
        <h1>✏️ {{ _('common.edit') }} {{ _('subscription.title') }}</h1>
        
        <form method="POST" class="form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="form-group">
                <label for="name">{{ _('subscription.name') }}</label>
                <input type="text" id="name" name="name" value="{{ subscription.name }}" required>
            </div>
            
            <div class="form-group">
                <label for="amount">{{ _('expense.amount') }}</label>
                <input type="number" id="amount" name="amount" step="0.01" min="0" value="{{ subscription.amount }}" required>
            </div>
            
            <div class="form-group">
                <label for="frequency">{{ _('subscription.frequency') }}</label>
                <select id="frequency" name="frequency" required onchange="toggleCustomInterval()">
                    <option value="weekly" {% if subscription.frequency == 'weekly' %}selected{% endif %}>{{ _('subscription.freq_weekly') }}</option>
                    <option value="biweekly" {% if subscription.frequency == 'biweekly' %}selected{% endif %}>{{ _('subscription.freq_biweekly') }}</option>
                    <option value="monthly" {% if subscription.frequency == 'monthly' %}selected{% endif %}>{{ _('subscription.freq_monthly') }}</option>
                    <option value="quarterly" {% if subscription.frequency == 'quarterly' %}selected{% endif %}>{{ _('subscription.freq_quarterly') }}</option>
                    <option value="yearly" {% if subscription.frequency == 'yearly' %}selected{% endif %}>{{ _('subscription.freq_yearly') }}</option>
                    <option value="custom" {% if subscription.frequency == 'custom' %}selected{% endif %}>{{ _('subscription.freq_custom') }}</option>
                </select>
            </div>
            
            <div class="form-group" id="custom-interval-group" style="display: {% if subscription.frequency == 'custom' %}block{% else %}none{% endif %};">
                <label for="custom_interval_days">{{ _('subscription.custom_interval') }}</label>
                <input type="number" id="custom_interval_days" name="custom_interval_days" min="1" value="{{ subscription.custom_interval_days or '' }}">
            </div>
            
            <div class="form-group">
                <label for="category_id">{{ _('category.name') }}</label>
                <select id="category_id" name="category_id" required>
                    {% for category in categories %}
                    <option value="{{ category.id }}" {% if subscription.category_id == category.id %}selected{% endif %}>{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="formend_date">{{ _('subscription.end_date') }} ({{ _('common.optional') }})</label>
                <input type="date" id="end_date" name="end_date" value="{{ subscription.end_date.strftime('%Y-%m-%d') if subscription.end_date else '' }}">
            </div>
            
            <div class="form-group">
                <label for="total_occurrences">{{ _('subscription.total_occurrences') }} ({{ _('common.optional') }})</label>
                <input type="number" id="total_occurrences" name="total_occurrences" min="1" value="{{ subscription.total_occurrences or '' }}">
                <small style="color: var(--text-secondary);">{{ _('subscription.occurrences_remaining') }}: {{ (subscription.total_occurrences - subscription.occurrences_count) if subscription.total_occurrences else '∞' }}</small>
            </div>
            
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="checkbox" id="auto_create_expense" name="auto_create_expense" {% if subscription.auto_create_expense %}checked{% endif %} style="width: auto;">
                    <span>{{ _('subscription.auto_create') }}</span>
                </label>
                <small style="color: var(--text-secondary);">{{ _('subscription.auto_create_desc') }}</small>
            </div>

<script>
function toggleCustomInterval() {
    const frequency = document.getElementById('frequency').value;
    const customGroup = document.getElementById('custom-interval-group');
    const customInput = document.getElementById('custom_interval_days');
    
    if (frequency === 'custom') {
        customGroup.style.display = 'block';
        customInput.required = true;
    } else {
        customGroup.style.display = 'none';
        customInput.required = false;
    }
}
</script>
            
            <div class="form-group">
                <label for="-group">
                <label for="next_due_date">{{ _('subscription.next_payment') }}</label>
                <input type="date" id="next_due_date" name="next_due_date" value="{{ subscription.next_due_date.strftime('%Y-%m-%d') if subscription.next_due_date else '' }}">
            </div>
            
            <div class="form-group">
                <label for="notes">{{ _('subscription.notes') }}</label>
                <textarea id="notes" name="notes" rows="3">{{ subscription.notes or '' }}</textarea>
            </div>
            
            <div class="form-actions">
                <a href="{{ url_for('subscriptions.index') }}" class="btn btn-secondary">{{ _('common.cancel') }}</a>
                <button type="submit" class="btn btn-primary">{{ _('common.save') }}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}