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

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

{% block content %}
{% set breadcrumbs = [
    {'text': 'Quotes', 'url': url_for('quotes.list_quotes')},
    {'text': 'Create Quote'}
] %}

{{ page_header(
    icon_class='fas fa-file-contract',
    title_text='Create Quote',
    subtitle_text='Create a new quote for a client',
    breadcrumbs=breadcrumbs,
    actions_html='<a href="' + url_for("quotes.list_quotes") + '" 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.create_quote') }}" 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">
                <div>
                    <label for="client_id" class="form-label">{{ _('Client') }} <span class="text-red-500">*</span></label>
                    {{ client_select('client_id', clients, required=True, only_one_client=only_one_client|default(false), single_client=single_client) }}
                </div>
                <div>
                    <label for="title" class="form-label">{{ _('Title') }} <span class="text-red-500">*</span></label>
                    <input type="text" id="title" name="title" required value="{{ request.form.get('title','') }}" placeholder="{{ _('Quote title') }}" class="form-input">
                </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">{{ request.form.get('description','') }}</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">{{ _('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"></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>

        <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"></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>

        <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"></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">
                <div>
                    <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="{{ request.form.get('tax_rate','0') }}" class="form-input" data-calc-trigger>
                </div>
                <div>
                    <label for="currency_code" class="form-label">{{ _('Currency') }}</label>
                    <select id="currency_code" name="currency_code" class="form-input">
                        <option value="EUR" {% if request.form.get('currency_code','EUR') == 'EUR' %}selected{% endif %}>EUR</option>
                        <option value="USD" {% if request.form.get('currency_code') == 'USD' %}selected{% endif %}>USD</option>
                        <option value="GBP" {% if request.form.get('currency_code') == 'GBP' %}selected{% endif %}>GBP</option>
                    </select>
                </div>
                <div>
                    <label for="valid_until" class="form-label">{{ _('Valid Until') }}</label>
                    <input type="date" id="valid_until" name="valid_until" value="{{ request.form.get('valid_until','') }}" 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 request.form.get('payment_terms') == 'Due on Receipt' %}selected{% endif %}>{{ _('Due on Receipt') }}</option>
                    <option value="Net 15" {% if request.form.get('payment_terms') == 'Net 15' %}selected{% endif %}>Net 15</option>
                    <option value="Net 30" {% if request.form.get('payment_terms') == 'Net 30' %}selected{% endif %}>Net 30</option>
                    <option value="Net 45" {% if request.form.get('payment_terms') == 'Net 45' %}selected{% endif %}>Net 45</option>
                    <option value="Net 60" {% if request.form.get('payment_terms') == 'Net 60' %}selected{% endif %}>Net 60</option>
                    <option value="Net 90" {% if request.form.get('payment_terms') == 'Net 90' %}selected{% endif %}>Net 90</option>
                    <option value="2/10 Net 30" {% if request.form.get('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="{{ request.form.get('payment_terms','') }}" placeholder="{{ _('Or enter custom payment terms') }}" class="form-input mt-2" style="display: none;">
                <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">
                <div>
                    <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 request.form.get('discount_type') == 'percentage' %}selected{% endif %}>{{ _('Percentage (%)') }}</option>
                        <option value="fixed" {% if request.form.get('discount_type') == 'fixed' %}selected{% endif %}>{{ _('Fixed Amount') }}</option>
                    </select>
                </div>
                <div>
                    <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="{{ request.form.get('discount_amount','') }}" placeholder="{{ _('0.00') }}" class="form-input">
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="coupon_code" class="form-label">{{ _('Coupon Code') }}</label>
                    <input type="text" id="coupon_code" name="coupon_code" value="{{ request.form.get('coupon_code','') }}" placeholder="{{ _('Optional coupon code') }}" class="form-input" style="text-transform: uppercase;">
                </div>
                <div>
                    <label for="discount_reason" class="form-label">{{ _('Discount Reason') }}</label>
                    <input type="text" id="discount_reason" name="discount_reason" value="{{ request.form.get('discount_reason','') }}" placeholder="{{ _('Reason for discount') }}" class="form-input">
                </div>
            </div>
        </div>

        <!-- Approval Workflow Section -->
        <div class="mb-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fas fa-check-circle mr-2 text-primary"></i>{{ _('Approval Workflow') }}
            </h2>
            <div class="mb-4">
                <label class="flex items-center">
                    <input type="checkbox" id="requires_approval" name="requires_approval" value="true" {% if request.form.get('requires_approval') == 'true' %}checked{% endif %} class="mr-2 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('Requires approval before sending') }}</span>
                </label>
            </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">{{ request.form.get('notes','') }}</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">{{ request.form.get('terms','') }}</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.list_quotes') }}" 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>{{ _('Create Quote') }}
            </button>
        </div>
    </form>
</div>

{% endblock %}

{% block scripts_extra %}
{% include 'quotes/_edit_quote_form_scripts.html' %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var qi = document.getElementById('quote-items');
    if (qi && qi.children.length === 0) {
        document.getElementById('add-item')?.click();
    }
});
</script>
{% endblock %}
