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

{% block title %}{{ _('Edit Quote') }} - {{ app_name }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Quotes', 'url': url_for('quotes.list_quotes')},
    {'text': quote.quote_number, 'url': url_for('quotes.view_quote', quote_id=quote.id)},
    {'text': 'Edit'}
] %}

{{ page_header(
    icon_class='fas fa-file-contract',
    title_text='Edit Quote',
    subtitle_text=quote.quote_number,
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("quotes.view_quote", quote_id=quote.id) + '" class="bg-gray-200 dark:bg-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-arrow-left mr-2"></i>Back</a>'
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    <form method="POST" action="{{ url_for('quotes.edit_quote', quote_id=quote.id) }}" novalidate id="quote-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <!-- Basic Information Section -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-border-light dark:border-border-dark flex items-center">
                <i class="fas fa-info-circle mr-2 text-primary"></i>{{ _('Basic Information') }}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0">
                <div class="min-w-0">
                    <label for="title" class="form-label">{{ _('Title') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="title" name="title" required value="{{ quote.title }}" placeholder="{{ _('Quote title') }}" class="form-input">
                </div>
                <div class="min-w-0">
                    <label for="client_id" class="form-label">{{ _('Client') }}</label>
                    <select id="client_id" name="client_id" class="form-input" disabled>
                        <option value="{{ quote.client_id }}" selected>{{ quote.client.name }}</option>
                    </select>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-1">
                        <i class="fas fa-info-circle mr-1"></i>{{ _('Client cannot be changed') }}
                    </p>
                </div>
            </div>
            <div class="mt-4">
                <label for="description" class="form-label">{{ _('Description') }}</label>
                <textarea id="description" name="description" rows="4" placeholder="{{ _('Quote description') }}" class="form-input">{{ quote.description or '' }}</textarea>
            </div>
        </div>

        <!-- Line items (manual or from stock — issue #585) -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4 pb-2 border-b border-border-light dark:border-border-dark">
                <div>
                    <h2 class="text-xl font-semibold flex items-center">
                        <i class="fas fa-list mr-2 text-blue-600"></i>{{ _('Quote line items') }}
                        <span id="items-count" class="ml-2 px-2 py-0.5 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full">0</span>
                    </h2>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Services, labor, and catalog lines') }}</p>
                </div>
                <button type="button" id="add-item" class="btn btn-primary shadow-sm">
                    <i class="fas fa-plus mr-2"></i>{{ _('Add line') }}
                </button>
            </div>
            <div class="hidden md:grid md:grid-cols-12 gap-3 mb-2 px-3 text-xs font-semibold text-text-muted-light dark:text-text-muted-dark uppercase">
                <div class="md:col-span-1 text-center">{{ _('Order') }}</div>
                <div class="md:col-span-2">{{ _('Line type') }}</div>
                <div class="md:col-span-3 item-stock-header">{{ _('Stock') }} / {{ _('Warehouse') }}</div>
                <div class="md:col-span-2">{{ _('Description') }}</div>
                <div class="md:col-span-1">{{ _('Qty') }}</div>
                <div class="md:col-span-1">{{ _('Unit') }}</div>
                <div class="md:col-span-1">{{ _('Price') }}</div>
                <div class="md:col-span-1">{{ _('Total') }}</div>
            </div>
            <div id="quote-items" class="space-y-2">
                {% for item in quote.items if (item.line_kind or 'item') == 'item' %}
                <div class="grid grid-cols-1 md:grid-cols-12 gap-3 p-3 rounded-lg bg-blue-50/50 dark:bg-blue-950/20 border border-blue-200/50 dark:border-blue-800/50 quote-item-row min-w-0 hover:shadow-sm transition">
                    <input type="hidden" name="item_id[]" value="{{ item.id }}">
                    <input type="hidden" name="item_stock_item_id[]" value="{{ item.stock_item_id if item.stock_item_id else '' }}">
                    <input type="hidden" name="item_warehouse_id[]" value="{{ item.warehouse_id if item.warehouse_id else '' }}">
                    <div class="quote-line-reorder md:col-span-1 flex flex-row md:flex-col gap-1 items-center justify-center min-w-0 self-center">
                        <button type="button" class="quote-line-move-up p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}"><i class="fas fa-chevron-up text-xs"></i></button>
                        <button type="button" class="quote-line-move-down p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}"><i class="fas fa-chevron-down text-xs"></i></button>
                    </div>
                    <div class="md:col-span-2 min-w-0">
                        <select name="item_line_source[]" class="form-input item-line-source text-sm" title="{{ _('Line type') }}">
                            <option value="manual" {% if not item.stock_item_id %}selected{% endif %}>{{ _('Manual entry') }}</option>
                            <option value="stock" {% if item.stock_item_id %}selected{% endif %}>{{ _('From stock') }}</option>
                        </select>
                    </div>
                    <div class="item-stock-cols md:col-span-3 min-w-0 grid grid-cols-1 md:grid-cols-2 gap-3 {% if not item.stock_item_id %}hidden{% endif %}">
                        <select class="form-input item-stock-select text-sm" title="{{ _('Select Stock Item') }}">
                            <option value="">{{ _('None') }}</option>
                            {% for stock_item in stock_items %}
                            <option value="{{ stock_item.id }}" data-price="{{ stock_item.default_price or 0 }}" data-unit="{{ stock_item.unit or '' }}" data-description="{{ stock_item.name }}" {% if item.stock_item_id == stock_item.id %}selected{% endif %}>{{ stock_item.sku }} - {{ stock_item.name }}</option>
                            {% endfor %}
                        </select>
                        <select class="form-input item-warehouse-select text-sm" title="{{ _('Select Warehouse') }}">
                            <option value="">{{ _('None') }}</option>
                            {% for warehouse in warehouses %}
                            <option value="{{ warehouse.id }}" {% if item.warehouse_id == warehouse.id %}selected{% endif %}>{{ warehouse.code }} - {{ warehouse.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="item-desc-wrap min-w-0 {% if item.stock_item_id %}md:col-span-2{% else %}md:col-span-5{% endif %}">
                        <input type="text" name="item_description[]" placeholder="{{ _('Item description') }}" value="{{ item.description }}" class="w-full form-input item-description" data-calc-trigger>
                    </div>
                    <input type="number" name="item_quantity[]" placeholder="{{ _('Qty') }}" value="{{ item.quantity }}" step="0.01" min="0" class="md:col-span-1 min-w-0 form-input item-quantity" data-calc-trigger>
                    <input type="text" name="item_unit[]" placeholder="{{ _('Unit') }}" value="{{ item.unit or '' }}" class="md:col-span-1 min-w-0 form-input item-unit">
                    <input type="number" name="item_price[]" placeholder="{{ _('Price') }}" value="{{ item.unit_price }}" step="0.01" min="0" class="md:col-span-1 min-w-0 form-input item-price" data-calc-trigger>
                    <div class="md:col-span-1 min-w-0 flex items-center justify-between gap-2">
                        <span class="font-medium item-total">{{ "%.2f"|format(item.total_amount) }}</span>
                        <button type="button" class="remove-item shrink-0 bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 px-3 py-2 rounded hover:bg-rose-200 dark:hover:bg-rose-900/50 transition" title="{{ _('Remove item') }}"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="mt-3 p-3 bg-blue-50/30 dark:bg-blue-950/10 rounded-lg border border-blue-200/30 dark:border-blue-800/30">
                <div class="flex justify-between items-center text-sm font-medium">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Line items subtotal') }}:</span>
                    <span class="text-lg font-bold text-blue-700 dark:text-blue-400"><span id="quote-items-section-total">0.00</span></span>
                </div>
            </div>
        </div>

        <!-- Costs / expenses (quote) -->
        <div class="mb-8 mt-8 border-t border-border-light dark:border-border-dark pt-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h2 class="text-xl font-semibold flex items-center">
                        <i class="fas fa-receipt mr-2 text-amber-600"></i>{{ _('Costs') }}
                        <span id="quote-expenses-count" class="ml-2 px-2 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full">0</span>
                    </h2>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('One-off costs (e.g. travel, materials)') }}</p>
                </div>
                <button type="button" id="add-quote-expense" class="btn bg-amber-600 text-white hover:bg-amber-700 shadow-sm">
                    <i class="fas fa-plus mr-2"></i>{{ _('Add cost') }}
                </button>
            </div>
            <div class="hidden md:grid md:grid-cols-12 gap-3 mb-2 px-3 text-xs font-semibold text-text-muted-light dark:text-text-muted-dark uppercase">
                <div class="md:col-span-1 text-center">{{ _('Order') }}</div>
                <div class="md:col-span-2">{{ _('Title') }}</div>
                <div class="md:col-span-2">{{ _('Description') }}</div>
                <div class="md:col-span-2">{{ _('Category') }}</div>
                <div class="md:col-span-2">{{ _('Amount') }}</div>
                <div class="md:col-span-2">{{ _('Date') }}</div>
                <div class="md:col-span-1 text-center">{{ _('Action') }}</div>
            </div>
            <div id="quote-expenses" class="space-y-2">
                {% for item in quote.items if (item.line_kind or 'item') == 'expense' %}
                <div class="grid grid-cols-1 md:grid-cols-12 gap-3 p-3 rounded-lg bg-amber-50/50 dark:bg-amber-950/20 border border-amber-200/50 dark:border-amber-800/50 quote-expense-row min-w-0 hover:shadow-sm transition">
                    <input type="hidden" name="qe_id[]" value="{{ item.id }}">
                    <div class="quote-line-reorder md:col-span-1 flex flex-row md:flex-col gap-1 items-center justify-center min-w-0 self-center">
                        <button type="button" class="quote-line-move-up p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}"><i class="fas fa-chevron-up text-xs"></i></button>
                        <button type="button" class="quote-line-move-down p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}"><i class="fas fa-chevron-down text-xs"></i></button>
                    </div>
                    <div class="md:col-span-2 min-w-0"><input type="text" name="qe_title[]" class="form-input" placeholder="{{ _('Title') }}" value="{{ item.display_name or '' }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0"><input type="text" name="qe_description[]" class="form-input" placeholder="{{ _('Description') }}" value="{{ item.description }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0">
                        <select name="qe_category[]" class="form-input">
                            <option value="travel" {% if item.category == 'travel' %}selected{% endif %}>{{ _('Travel') }}</option>
                            <option value="meals" {% if item.category == 'meals' %}selected{% endif %}>{{ _('Meals') }}</option>
                            <option value="supplies" {% if item.category == 'supplies' %}selected{% endif %}>{{ _('Supplies') }}</option>
                            <option value="services" {% if item.category == 'services' %}selected{% endif %}>{{ _('Services') }}</option>
                            <option value="equipment" {% if item.category == 'equipment' %}selected{% endif %}>{{ _('Equipment') }}</option>
                            <option value="other" {% if (item.category or 'other') == 'other' %}selected{% endif %}>{{ _('Other') }}</option>
                        </select>
                    </div>
                    <div class="md:col-span-2 min-w-0"><input type="number" name="qe_amount[]" class="form-input qe-amount" step="0.01" min="0" value="{{ item.unit_price }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0"><input type="date" name="qe_date[]" class="form-input user-date-input text-sm" value="{{ item.line_date.strftime('%Y-%m-%d') if item.line_date else '' }}"></div>
                    <div class="md:col-span-1 min-w-0 flex items-center justify-center"><button type="button" class="remove-quote-expense bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 px-3 py-2 rounded hover:bg-rose-200 dark:hover:bg-rose-900/50 transition" title="{{ _('Remove') }}"><i class="fas fa-trash"></i></button></div>
                </div>
                {% endfor %}
            </div>
            <div class="mt-3 p-3 bg-amber-50/30 dark:bg-amber-950/10 rounded-lg border border-amber-200/30 dark:border-amber-800/30">
                <div class="flex justify-between items-center text-sm font-medium">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Costs subtotal') }}:</span>
                    <span class="text-lg font-bold text-amber-700 dark:text-amber-400"><span id="quote-expenses-section-total">0.00</span></span>
                </div>
            </div>
        </div>

        <!-- Extra goods -->
        <div class="mb-8 mt-8 border-t border-border-light dark:border-border-dark pt-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h2 class="text-xl font-semibold flex items-center">
                        <i class="fas fa-box mr-2 text-emerald-600"></i>{{ _('Extra goods') }}
                        <span id="quote-goods-count" class="ml-2 px-2 py-0.5 text-xs bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded-full">0</span>
                    </h2>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Products, licenses, hardware') }}</p>
                </div>
                <button type="button" id="add-quote-good" class="btn bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm">
                    <i class="fas fa-plus mr-2"></i>{{ _('Add good') }}
                </button>
            </div>
            <div class="hidden md:grid md:grid-cols-12 gap-3 mb-2 px-3 text-xs font-semibold text-text-muted-light dark:text-text-muted-dark uppercase">
                <div class="md:col-span-1 text-center">{{ _('Order') }}</div>
                <div class="md:col-span-1">{{ _('Name') }}</div>
                <div class="md:col-span-2">{{ _('Description') }}</div>
                <div class="md:col-span-2">{{ _('Category') }}</div>
                <div class="md:col-span-2">{{ _('Qty') }}</div>
                <div class="md:col-span-2">{{ _('Price') }}</div>
                <div class="md:col-span-1">{{ _('SKU') }}</div>
                <div class="md:col-span-1 text-center">{{ _('Action') }}</div>
            </div>
            <div id="quote-goods" class="space-y-2">
                {% for item in quote.items if (item.line_kind or 'item') == 'good' %}
                <div class="grid grid-cols-1 md:grid-cols-12 gap-3 p-3 rounded-lg bg-emerald-50/50 dark:bg-emerald-950/20 border border-emerald-200/50 dark:border-emerald-800/50 quote-good-row min-w-0 hover:shadow-sm transition">
                    <input type="hidden" name="qg_id[]" value="{{ item.id }}">
                    <div class="quote-line-reorder md:col-span-1 flex flex-row md:flex-col gap-1 items-center justify-center min-w-0 self-center">
                        <button type="button" class="quote-line-move-up p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move up') }}" aria-label="{{ _('Move up') }}"><i class="fas fa-chevron-up text-xs"></i></button>
                        <button type="button" class="quote-line-move-down p-1.5 rounded border border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark hover:bg-gray-100 dark:hover:bg-gray-700 text-text-muted-light dark:text-text-muted-dark disabled:opacity-40 disabled:pointer-events-none" title="{{ _('Move down') }}" aria-label="{{ _('Move down') }}"><i class="fas fa-chevron-down text-xs"></i></button>
                    </div>
                    <div class="md:col-span-1 min-w-0"><input type="text" name="qg_name[]" class="form-input" placeholder="{{ _('Name') }}" value="{{ item.display_name or '' }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0"><input type="text" name="qg_description[]" class="form-input" placeholder="{{ _('Description') }}" value="{{ item.description }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0">
                        <select name="qg_category[]" class="form-input">
                            <option value="product" {% if item.category == 'product' %}selected{% endif %}>{{ _('Product') }}</option>
                            <option value="service" {% if item.category == 'service' %}selected{% endif %}>{{ _('Service') }}</option>
                            <option value="material" {% if item.category == 'material' %}selected{% endif %}>{{ _('Material') }}</option>
                            <option value="license" {% if item.category == 'license' %}selected{% endif %}>{{ _('License') }}</option>
                            <option value="other" {% if (item.category or 'other') == 'other' %}selected{% endif %}>{{ _('Other') }}</option>
                        </select>
                    </div>
                    <div class="md:col-span-2 min-w-0"><input type="number" name="qg_quantity[]" class="form-input qg-quantity" step="0.01" min="0" value="{{ item.quantity }}" data-calc-trigger></div>
                    <div class="md:col-span-2 min-w-0"><input type="number" name="qg_unit_price[]" class="form-input qg-price" step="0.01" min="0" value="{{ item.unit_price }}" data-calc-trigger></div>
                    <div class="md:col-span-1 min-w-0"><input type="text" name="qg_sku[]" class="form-input text-xs" placeholder="{{ _('SKU') }}" value="{{ item.sku or '' }}"></div>
                    <div class="md:col-span-1 min-w-0 flex items-center justify-center"><button type="button" class="remove-quote-good bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 px-3 py-2 rounded hover:bg-rose-200 dark:hover:bg-rose-900/50 transition" title="{{ _('Remove') }}"><i class="fas fa-trash"></i></button></div>
                </div>
                {% endfor %}
            </div>
            <div class="mt-3 p-3 bg-emerald-50/30 dark:bg-emerald-950/10 rounded-lg border border-emerald-200/30 dark:border-emerald-800/30">
                <div class="flex justify-between items-center text-sm font-medium">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Goods subtotal') }}:</span>
                    <span class="text-lg font-bold text-emerald-700 dark:text-emerald-400"><span id="quote-goods-section-total">0.00</span></span>
                </div>
            </div>
        </div>

        <div class="mb-8 p-4 rounded-xl border border-border-light dark:border-border-dark bg-gray-50 dark:bg-gray-900/40">
            <div class="flex justify-between items-center text-sm font-medium">
                <span>{{ _('Subtotal (all quote lines)') }}</span>
                <span class="text-xl font-bold text-primary"><span id="quote-all-lines-subtotal">0.00</span></span>
            </div>
        </div>

        <!-- Financial Details Section -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-border-light dark:border-border-dark flex items-center">
                <i class="fas fa-dollar-sign mr-2 text-primary"></i>{{ _('Financial Details') }}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 min-w-0">
                <div class="min-w-0">
                    <label for="tax_rate" class="form-label">{{ _('Tax Rate (%)') }}</label>
                    <input type="number" step="0.01" min="0" max="100" id="tax_rate" name="tax_rate" value="{{ quote.tax_rate or 0 }}" class="form-input" data-calc-trigger>
                </div>
                <div class="min-w-0">
                    <label for="currency_code" class="form-label">{{ _('Currency') }}</label>
                    <select id="currency_code" name="currency_code" class="form-input">
                        <option value="EUR" {% if quote.currency_code == 'EUR' %}selected{% endif %}>EUR</option>
                        <option value="USD" {% if quote.currency_code == 'USD' %}selected{% endif %}>USD</option>
                        <option value="GBP" {% if quote.currency_code == 'GBP' %}selected{% endif %}>GBP</option>
                    </select>
                </div>
                <div class="min-w-0">
                    <label for="valid_until" class="form-label">{{ _('Valid Until') }}</label>
                    <input type="date" id="valid_until" name="valid_until" value="{{ quote.valid_until.strftime('%Y-%m-%d') if quote.valid_until else '' }}" class="form-input">
                </div>
            </div>
        </div>

        <!-- Payment Terms Section -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-border-light dark:border-border-dark flex items-center">
                <i class="fas fa-calendar-alt mr-2 text-primary"></i>{{ _('Payment Terms') }}
            </h2>
            <div>
                <label for="payment_terms" class="form-label">{{ _('Payment Terms') }}</label>
                <select id="payment_terms" name="payment_terms" class="form-input">
                    <option value="">{{ _('Select payment terms') }}</option>
                    <option value="Due on Receipt" {% if quote.payment_terms == 'Due on Receipt' %}selected{% endif %}>{{ _('Due on Receipt') }}</option>
                    <option value="Net 15" {% if quote.payment_terms == 'Net 15' %}selected{% endif %}>Net 15</option>
                    <option value="Net 30" {% if quote.payment_terms == 'Net 30' %}selected{% endif %}>Net 30</option>
                    <option value="Net 45" {% if quote.payment_terms == 'Net 45' %}selected{% endif %}>Net 45</option>
                    <option value="Net 60" {% if quote.payment_terms == 'Net 60' %}selected{% endif %}>Net 60</option>
                    <option value="Net 90" {% if quote.payment_terms == 'Net 90' %}selected{% endif %}>Net 90</option>
                    <option value="2/10 Net 30" {% if quote.payment_terms == '2/10 Net 30' %}selected{% endif %}>2/10 Net 30</option>
                </select>
                <input type="text" id="payment_terms_custom" name="payment_terms" value="{{ quote.payment_terms or '' }}" placeholder="{{ _('Or enter custom payment terms') }}" class="form-input mt-2" {% if quote.payment_terms and quote.payment_terms not in ['Due on Receipt', 'Net 15', 'Net 30', 'Net 45', 'Net 60', 'Net 90', '2/10 Net 30'] %}style="display: block;"{% else %}style="display: none;"{% endif %}>
                <button type="button" onclick="document.getElementById('payment_terms').style.display='none'; document.getElementById('payment_terms_custom').style.display='block';" class="text-sm text-primary mt-1 hover:underline">
                    <i class="fas fa-edit mr-1"></i>{{ _('Use custom terms') }}
                </button>
            </div>
        </div>

        <!-- Discount Section -->
        <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fas fa-tag mr-2 text-primary"></i>{{ _('Discount') }}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4 min-w-0">
                <div class="min-w-0">
                    <label for="discount_type" class="form-label">{{ _('Discount Type') }}</label>
                    <select id="discount_type" name="discount_type" class="form-input">
                        <option value="">{{ _('No Discount') }}</option>
                        <option value="percentage" {% if quote.discount_type == 'percentage' %}selected{% endif %}>{{ _('Percentage (%)') }}</option>
                        <option value="fixed" {% if quote.discount_type == 'fixed' %}selected{% endif %}>{{ _('Fixed Amount') }}</option>
                    </select>
                </div>
                <div class="min-w-0">
                    <label for="discount_amount" class="form-label">{{ _('Discount Amount') }}</label>
                    <input type="number" step="0.01" min="0" id="discount_amount" name="discount_amount" value="{{ quote.discount_amount or '' }}" placeholder="{{ _('0.00') }}" class="form-input">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 min-w-0">
                <div class="min-w-0">
                    <label for="coupon_code" class="form-label">{{ _('Coupon Code') }}</label>
                    <input type="text" id="coupon_code" name="coupon_code" value="{{ quote.coupon_code or '' }}" placeholder="{{ _('Optional coupon code') }}" class="form-input" style="text-transform: uppercase;">
                </div>
                <div class="min-w-0">
                    <label for="discount_reason" class="form-label">{{ _('Discount Reason') }}</label>
                    <input type="text" id="discount_reason" name="discount_reason" value="{{ quote.discount_reason or '' }}" placeholder="{{ _('Reason for discount') }}" class="form-input">
                </div>
            </div>
        </div>

        <!-- Additional Information Section -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-border-light dark:border-border-dark flex items-center">
                <i class="fas fa-file-alt mr-2 text-primary"></i>{{ _('Additional Information') }}
            </h2>
            <div class="mb-4">
                <label for="notes" class="form-label">{{ _('Internal Notes') }}</label>
                <textarea id="notes" name="notes" rows="3" placeholder="{{ _('Internal notes (not visible to client)') }}" class="form-input">{{ quote.notes or '' }}</textarea>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('These notes are only visible to your team') }}</p>
            </div>
            <div>
                <label for="terms" class="form-label">{{ _('Terms and Conditions') }}</label>
                <textarea id="terms" name="terms" rows="4" placeholder="{{ _('Terms and conditions') }}" class="form-input">{{ quote.terms or '' }}</textarea>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('These terms will be visible to the client') }}</p>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="mt-8 pt-6 border-t border-border-light dark:border-border-dark flex justify-end gap-3">
            <a href="{{ url_for('quotes.view_quote', quote_id=quote.id) }}" class="bg-gray-200 dark:bg-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                {{ _('Cancel') }}
            </a>
            <button type="submit" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                <i class="fas fa-save mr-2"></i>{{ _('Update Quote') }}
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts_extra %}
{% include 'quotes/_edit_quote_form_scripts.html' %}
{% endblock %}