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

{% 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-lg shadow">
    <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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('Client') }} <span class="text-red-500">*</span></label>
                    <select id="client_id" name="client_id" required class="form-input">
                        <option value="">{{ _('Select a client') }}</option>
                        {% for client in clients %}
                        <option value="{{ client.id }}">{{ client.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('Description') }}</label>
                <textarea id="description" name="description" rows="4" placeholder="{{ _('Quote description') }}" class="form-input">{{ request.form.get('description','') }}</textarea>
            </div>
        </div>

        <!-- Quote Items Section -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4 pb-2 border-b border-border-light dark:border-border-dark">
                <h2 class="text-xl font-semibold flex items-center">
                    <i class="fas fa-list mr-2 text-primary"></i>{{ _('Quote Items') }}
                    <span id="items-count" class="ml-2 px-2 py-0.5 text-xs bg-primary/10 text-primary rounded-full">0</span>
                </h2>
                <button type="button" id="add-item" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition shadow-sm">
                    <i class="fas fa-plus mr-2"></i>{{ _('Add Item') }}
                </button>
            </div>
            
            <!-- Items header (desktop) -->
            <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-2">{{ _('Stock Item') }}</div>
                <div class="md:col-span-2">{{ _('Warehouse') }}</div>
                <div class="md:col-span-2">{{ _('Description') }}</div>
                <div class="md:col-span-1">{{ _('Quantity') }}</div>
                <div class="md:col-span-1">{{ _('Unit') }}</div>
                <div class="md:col-span-2">{{ _('Unit Price') }}</div>
                <div class="md:col-span-1">{{ _('Total') }}</div>
                <div class="md:col-span-1 text-center">{{ _('Action') }}</div>
            </div>
            
            <div id="quote-items" class="space-y-2">
                <!-- Items will be added here dynamically -->
            </div>
            
            <div id="items-subtotal" class="mt-3 p-3 bg-primary/5 rounded-lg border border-primary/20">
                <div class="flex justify-between items-center text-sm font-medium">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Subtotal') }}:</span>
                    <span class="text-lg font-bold text-primary"><span id="items-subtotal-amount">0.00</span></span>
                </div>
            </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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('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 %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const itemsContainer = document.getElementById('quote-items');
    const addItemBtn = document.getElementById('add-item');
    let itemIndex = 0;
    
    // Stock items and warehouses data
    const stockItems = {{ stock_items_json | safe if stock_items_json else '[]' }};
    const warehouses = {{ warehouses_json | safe if warehouses_json else '[]' }};
    
    // Handle stock item selection
    function setupStockItemHandlers() {
        document.querySelectorAll('.item-stock-select').forEach(select => {
            select.addEventListener('change', function() {
                const row = this.closest('.quote-item-row');
                const stockItemId = this.value;
                const selectedOption = this.options[this.selectedIndex];
                const hiddenStockInput = row.querySelector('input[name="item_stock_item_id[]"]');
                
                hiddenStockInput.value = stockItemId || '';
                
                if (stockItemId && selectedOption) {
                    const price = parseFloat(selectedOption.dataset.price || 0);
                    const description = selectedOption.dataset.description || '';
                    const unit = selectedOption.dataset.unit || '';
                    
                    // Auto-populate fields
                    if (description && !row.querySelector('.item-description').value) {
                        row.querySelector('.item-description').value = description;
                    }
                    if (price > 0 && !row.querySelector('.item-price').value) {
                        row.querySelector('.item-price').value = price.toFixed(2);
                    }
                    if (unit && !row.querySelector('.item-unit').value) {
                        row.querySelector('.item-unit').value = unit;
                    }
                    calculateTotals();
                }
            });
        });
    }
    
    // Add new item row
    function addItemRow(item = null) {
        const row = document.createElement('div');
        row.className = 'grid grid-cols-1 md:grid-cols-12 gap-3 p-3 rounded-lg bg-primary/5 border border-primary/20 quote-item-row hover:shadow-sm transition';
        
        // Build stock items dropdown
        let stockItemsHtml = '<option value="">{{ _("None") }}</option>';
        if (stockItems && Array.isArray(stockItems)) {
            stockItems.forEach(stockItem => {
                const price = stockItem.default_price || 0;
                const unit = stockItem.unit || '';
                const desc = stockItem.description || stockItem.name || '';
                stockItemsHtml += '<option value="' + stockItem.id + '" data-price="' + price + '" data-unit="' + unit + '" data-description="' + desc.replace(/"/g, '&quot;') + '">' + stockItem.sku + ' - ' + stockItem.name + '</option>';
            });
        }
        
        // Build warehouses dropdown
        let warehousesHtml = '<option value="">{{ _("None") }}</option>';
        if (warehouses && Array.isArray(warehouses)) {
            warehouses.forEach(wh => {
                warehousesHtml += '<option value="' + wh.id + '">' + wh.code + ' - ' + wh.name + '</option>';
            });
        }
        
        // Translated strings
        const placeholderDesc = '{{ _("Item description") }}';
        const placeholderQty = '{{ _("Qty") }}';
        const placeholderUnit = '{{ _("Unit") }}';
        const placeholderPrice = '{{ _("Price") }}';
        const removeTitle = '{{ _("Remove item") }}';
        
        row.innerHTML = 
            '<input type="hidden" name="item_id[]" value="' + (item ? item.id : '') + '">' +
            '<input type="hidden" name="item_stock_item_id[]" value="">' +
            '<input type="hidden" name="item_warehouse_id[]" value="">' +
            '<select class="md:col-span-2 form-input item-stock-select text-sm">' + stockItemsHtml + '</select>' +
            '<select class="md:col-span-2 form-input item-warehouse-select text-sm">' + warehousesHtml + '</select>' +
            '<input type="text" name="item_description[]" placeholder="' + placeholderDesc + '" value="' + (item ? (item.description || '').replace(/"/g, '&quot;') : '') + '" class="md:col-span-2 form-input item-description" data-calc-trigger>' +
            '<input type="number" name="item_quantity[]" placeholder="' + placeholderQty + '" value="' + (item ? item.quantity : '1') + '" step="0.01" min="0" class="md:col-span-1 form-input item-quantity" data-calc-trigger>' +
            '<input type="text" name="item_unit[]" placeholder="' + placeholderUnit + '" value="' + (item ? (item.unit || '') : '') + '" class="md:col-span-1 form-input item-unit" placeholder="hrs, pcs, etc.">' +
            '<input type="number" name="item_price[]" placeholder="' + placeholderPrice + '" value="' + (item ? item.unit_price : '') + '" step="0.01" min="0" class="md:col-span-2 form-input item-price" data-calc-trigger>' +
            '<div class="md:col-span-1 flex items-center font-medium item-total">0.00</div>' +
            '<button type="button" class="remove-item md:col-span-1 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="' + removeTitle + '">' +
                '<i class="fas fa-trash"></i>' +
            '</button>';
        itemsContainer.appendChild(row);
        
        // Setup handlers for new row
        const stockSelect = row.querySelector('.item-stock-select');
        stockSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const hiddenStockInput = row.querySelector('input[name="item_stock_item_id[]"]');
            hiddenStockInput.value = this.value || '';
            
            if (this.value && selectedOption) {
                const price = parseFloat(selectedOption.dataset.price || 0);
                const description = selectedOption.dataset.description || '';
                const unit = selectedOption.dataset.unit || '';
                if (description) row.querySelector('.item-description').value = description;
                if (price > 0) row.querySelector('.item-price').value = price.toFixed(2);
                if (unit) row.querySelector('.item-unit').value = unit;
                calculateTotals();
            }
        });
        
        const warehouseSelect = row.querySelector('.item-warehouse-select');
        warehouseSelect.addEventListener('change', function() {
            const hiddenWarehouseInput = row.querySelector('input[name="item_warehouse_id[]"]');
            hiddenWarehouseInput.value = this.value || '';
        });
        
        // Add event listeners
        row.querySelector('.remove-item').addEventListener('click', function() {
            row.remove();
            calculateTotals();
        });
        
        // Add calculation triggers
        row.querySelectorAll('[data-calc-trigger]').forEach(input => {
            input.addEventListener('input', calculateTotals);
        });
        
        setupStockItemHandlers();
        itemIndex++;
        calculateTotals();
    }
    
    // Calculate totals
    function calculateTotals() {
        let itemsTotal = 0;
        let itemsCount = 0;
        
        document.querySelectorAll('.quote-item-row').forEach(row => {
            const qty = parseFloat(row.querySelector('.item-quantity')?.value || 0);
            const price = parseFloat(row.querySelector('.item-price')?.value || 0);
            const total = qty * price;
            
            if (qty > 0 && price > 0) {
                itemsTotal += total;
                itemsCount++;
            }
            
            // Update row total
            const totalEl = row.querySelector('.item-total');
            if (totalEl) {
                totalEl.textContent = total.toFixed(2);
            }
        });
        
        // Update subtotal
        document.getElementById('items-subtotal-amount').textContent = itemsTotal.toFixed(2);
        document.getElementById('items-count').textContent = itemsCount;
    }
    
    // Add item button
    addItemBtn.addEventListener('click', function() {
        addItemRow();
    });
    
    // Initialize stock item handlers
    setupStockItemHandlers();
    
    // Add initial empty row
    addItemRow();
    
    // Calculate on tax rate change
    document.getElementById('tax_rate')?.addEventListener('input', calculateTotals);
});
</script>
{% endblock %}