{% extends "base.html" %}

{% block title %}{{ _('subscription.add') }} - FINA{% endblock %}

{% block content %}
<div class="form-container">
    <div class="glass-card form-card">
        <h1>➕ {{ _('subscription.add') }}</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" required placeholder="Netflix, Spotify, etc.">
            </div>
            
            <div class="form-group">
                <label for="amount">{{ _('expense.amount') }}</label>
                <input type="number" id="amount" name="amount" step="0.01" min="0" required>
            </div>
            
            <div class="form-group">
                <label for="frequency">{{ _('subscription.frequency') }}</label>
                <select id="frequency" name="frequency" required onchange="toggleCustomInterval()">
                    <option value="weekly">{{ _('subscription.freq_weekly') }}</option>
                    <option value="biweekly">{{ _('subscription.freq_biweekly') }}</option>
                    <option value="monthly" selected>{{ _('subscription.freq_monthly') }}</option>
                    <option value="quarterly">{{ _('subscription.freq_quarterly') }}</option>
                    <option value="yearly">{{ _('subscription.freq_yearly') }}</option>
                    <option value="custom">{{ _('subscription.freq_custom') }}</option>
                </select>
            </div>
            
            <div class="form-group" id="custom-interval-group" style="display: none;">
                <label for="custom_interval_days">{{ _('subscription.custom_interval') }}</label>
                <input type="number" id="custom_interval_days" name="custom_interval_days" min="1" placeholder="e.g., 45 days">
                <small style="color: var(--text-secondary);">{{ _('subscription.custom_interval_desc') }}</small>
            </div>
            
            <div class="form-group">
                <label for="category_id">{{ _('category.name') }}</label>
                <select id="category_id" name="category_id" required>
                    <option value="">{{ _('common.select') }}</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.icon }} {{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="start_date">{{ _('subscription.start_date') }}</label>
                <input type="date" id="start_date" name="start_date" value="{{ today }}" required>
                <small style="color: var(--text-secondary);">{{ _('subscription.start_date_desc') }}</small>
            </div>
            
            <div class="form-group">
                <label for="end_date">{{ _('subscription.end_date') }} ({{ _('common.optional') }})</label>
                <input type="date" id="end_date" name="end_date">
                <small style="color: var(--text-secondary);">{{ _('subscription.end_date_desc') }}</small>
            </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" placeholder="e.g., 12">
                <small style="color: var(--text-secondary);">{{ _('subscription.total_occurrences_desc') }}</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" style="width: auto;">
                    <span>{{ _('subscription.auto_create') }}</span>
                </label>
                <small style="color: var(--text-secondary);">{{ _('subscription.auto_create_desc') }}</small>
            </div>
            
            <div class="form-group">
                <label for="notes">{{ _('subscription.notes') }}</label>
                <textarea id="notes" name="notes" rows="3" placeholder="{{ _('subscription.notes_placeholder') }}"></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>

<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>
{% endblock %}