{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Recurring Invoices', 'url': url_for('recurring_invoices.list_recurring_invoices')},
    {'text': recurring.name, 'url': url_for('recurring_invoices.view_recurring_invoice', recurring_id=recurring.id)},
    {'text': 'Edit'}
] %}

{{ page_header(
    icon_class='fas fa-sync-alt',
    title_text='Edit Recurring Invoice',
    subtitle_text=recurring.name,
    breadcrumbs=breadcrumbs
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <form method="POST" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template Name *</label>
                <input type="text" id="name" name="name" value="{{ recurring.name }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
            
            <div>
                <label for="frequency" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frequency *</label>
                <select id="frequency" name="frequency" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
                    <option value="daily" {% if recurring.frequency == 'daily' %}selected{% endif %}>Daily</option>
                    <option value="weekly" {% if recurring.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
                    <option value="monthly" {% if recurring.frequency == 'monthly' %}selected{% endif %}>Monthly</option>
                    <option value="yearly" {% if recurring.frequency == 'yearly' %}selected{% endif %}>Yearly</option>
                </select>
            </div>
            
            <div>
                <label for="interval" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Interval</label>
                <input type="number" id="interval" name="interval" value="{{ recurring.interval }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
            
            <div>
                <label for="next_run_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Next Run Date *</label>
                <input type="date" id="next_run_date" name="next_run_date" value="{{ recurring.next_run_date.strftime('%Y-%m-%d') if recurring.next_run_date else '' }}" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
            
            <div>
                <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date (Optional)</label>
                <input type="date" id="end_date" name="end_date" value="{{ recurring.end_date.strftime('%Y-%m-%d') if recurring.end_date else '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
            
            <div>
                <label for="due_date_days" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Due Date (Days from Issue)</label>
                <input type="number" id="due_date_days" name="due_date_days" value="{{ recurring.due_date_days }}" min="1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
            
            <div>
                <label for="tax_rate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tax Rate (%)</label>
                <input type="number" id="tax_rate" name="tax_rate" value="{{ recurring.tax_rate }}" step="0.01" min="0" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
            </div>
        </div>
        
        <div>
            <label for="client_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Name</label>
            <input type="text" id="client_name" name="client_name" value="{{ recurring.client_name }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
        </div>
        
        <div>
            <label for="client_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Email</label>
            <input type="email" id="client_email" name="client_email" value="{{ recurring.client_email or '' }}" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
        </div>
        
        <div>
            <label for="client_address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Client Address</label>
            <textarea id="client_address" name="client_address" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.client_address or '' }}</textarea>
        </div>
        
        <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
            <textarea id="notes" name="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.notes or '' }}</textarea>
        </div>
        
        <div>
            <label for="terms" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Terms</label>
            <textarea id="terms" name="terms" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">{{ recurring.terms or '' }}</textarea>
        </div>
        
        <div class="flex items-center space-x-4">
            <label class="flex items-center">
                <input type="checkbox" name="auto_send" {% if recurring.auto_send %}checked{% endif %} class="mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">Automatically send invoices via email when generated</span>
            </label>
        </div>
        
        <div class="flex items-center space-x-4">
            <label class="flex items-center">
                <input type="checkbox" name="auto_include_time_entries" {% if recurring.auto_include_time_entries %}checked{% endif %} class="mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">Automatically include unbilled time entries</span>
            </label>
        </div>
        
        <div class="flex items-center space-x-4">
            <label class="flex items-center">
                <input type="checkbox" name="is_active" {% if recurring.is_active %}checked{% endif %} class="mr-2">
                <span class="text-sm text-gray-700 dark:text-gray-300">Active</span>
            </label>
        </div>
        
        <div class="flex justify-end space-x-4">
            <a href="{{ url_for('recurring_invoices.view_recurring_invoice', recurring_id=recurring.id) }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">Cancel</a>
            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90">{{ _('Update Recurring Invoice') }}</button>
        </div>
    </form>
</div>
{% endblock %}