{% extends "base.html" %}

{% block title %}{% if invoice %}Edit Invoice{% else %}New Invoice{% endif %} - Vera Medical CMS{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-2">
        {% if invoice %}Edit Invoice{% else %}New Invoice{% endif %}
    </h1>
    <p class="text-gray-600">
        {% if appointment %}Creating invoice from appointment{% else %}Manage billing and payment information{% endif %}
    </p>
</div>

<!-- Auto-populated from Appointment Notice -->
{% if appointment %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fas fa-info-circle text-blue-400"></i>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">Auto-populated from Appointment</h3>
            <div class="mt-2 text-sm text-blue-700">
                <p><strong>Case:</strong> #{{ appointment['file_case_id'] }} - {{ appointment['claimant_first_name'] }} {{ appointment['claimant_last_name'] }}</p>
                <p><strong>Appointment:</strong> {{ appointment['appointment_date'] }} at {{ appointment['appointment_time'] }}</p>
                <p><strong>Doctor:</strong> {{ appointment['doctor_full_name'] }}</p>
                <p><strong>Service Code:</strong> {{ appointment['service_code'] }}</p>
            </div>
        </div>
    </div>
</div>
{% endif %}

<form method="POST" class="bg-white rounded-lg shadow-md p-6">
    <!-- Hidden fields for appointment-based invoice -->
    {% if appointment %}
    <input type="hidden" name="appointment_id" value="{{ appointment['id'] }}">
    <input type="hidden" name="case_id" value="{{ appointment['case_id'] }}">
    <input type="hidden" name="specialist_id" value="{{ appointment['doctor_id'] or '' }}">
    {% endif %}
    
    <!-- Reference Number Banner (Invoice Number) -->
    <div class="sticky top-0 z-50 bg-white pt-1 pb-4 mb-6 -mx-6 px-6">
        <div class="bg-gray-50 border-2 border-gray-300 rounded-lg p-4 shadow-md">
            <label for="invoiceNumberDisplay" class="block text-sm font-medium text-gray-700 mb-2">
                <i class="fas fa-hashtag mr-1"></i>Invoice Number
            </label>
            <div class="w-full px-4 py-3 bg-blue-50 border-2 border-blue-400 rounded-lg text-lg font-bold tracking-wider text-blue-900 min-h-[3rem] flex items-center" id="invoiceNumberDisplay">
                <span id="invoiceNumberText">{% if invoice %}{{ invoice['invoice_number'] }}{% else %}Will be auto-generated on save...{% endif %}</span>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <!-- Invoice Date -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Date *</label>
            <input type="date" 
                   name="invoice_date" 
                   value="{% if invoice %}{{ invoice['invoice_date'] }}{% else %}{{ today }}{% endif %}" 
                   required
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>

        <!-- Service Date -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Service Date *</label>
            <input type="date" 
                   name="service_date" 
                   value="{% if invoice %}{{ invoice['service_date'] }}{% elif appointment %}{{ appointment['appointment_date'] }}{% endif %}" 
                   required
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
    </div>

    <!-- Service Code and Description -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Service Code *</label>
            <select name="service_code" 
                    id="serviceCode" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                    onchange="updateServiceDescription()">
                <option value="">Select a service code...</option>
                {% for code in service_codes %}
                <option value="{{ code['code'] }}" 
                        data-description="{{ code['description'] }}"
                        {% if (invoice and invoice['service_code'] == code['code']) or (appointment and appointment['service_code'] == code['code']) %}selected{% endif %}>
                    {{ code['code'] }} - {{ code['description'][:50] }}...
                </option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Service Description</label>
            <input type="text" 
                   name="service_description" 
                   id="serviceDescription"
                   value="{% if invoice %}{{ invoice['service_description'] }}{% elif appointment and appointment['description'] %}{{ appointment['description'] }}{% endif %}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
    </div>

    <!-- Phase 4: Client & Specialist -->
    <div class="bg-gray-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Client & Specialist</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Client Name</label>
                <input type="text" 
                       name="client_name" 
                       value="{% if invoice %}{{ invoice.get('client_name', '') }}{% elif appointment %}{{ appointment.get('client_contact_name', '') }}{% endif %}"
                       placeholder="Client contact name"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Specialist</label>
                <input type="hidden" name="specialist_id" id="specialist_id" value="{% if invoice %}{{ invoice.get('specialist_id', '') }}{% elif appointment %}{{ appointment.get('doctor_id', '') }}{% endif %}">
                <input type="text" 
                       id="specialist_name"
                       placeholder="Search specialist..."
                       value="{% if invoice and invoice.get('specialist_name') %}{{ invoice['specialist_name'] }}{% elif appointment and appointment.get('doctor_full_name') %}{{ appointment['doctor_full_name'] }}{% endif %}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <div id="specialist_autocomplete" class="hidden absolute z-50 w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-1 max-h-60 overflow-y-auto"></div>
            </div>
        </div>
    </div>

    <!-- Fee and Tax -->
    <div class="bg-blue-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Financial Details</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Fee Amount * (CAD $)</label>
                <input type="number" 
                       name="fee" 
                       id="fee"
                       value="{% if invoice %}{{ "%.2f"|format(invoice['fee']) }}{% else %}0.00{% endif %}" 
                       step="0.01" 
                       min="0" 
                       required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                       onchange="calculateTotal()">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Tax Rate (%)</label>
                <input type="number" 
                       name="tax_rate" 
                       id="taxRate"
                       value="{% if invoice %}{{ "%.2f"|format(invoice['tax_rate']) }}{% else %}5.00{% endif %}" 
                       step="0.01" 
                       min="0" 
                       max="100"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                       onchange="calculateTotal()">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Total Amount (CAD)</label>
                <div id="totalAmount" class="text-2xl font-bold text-blue-600 py-2">
                    $<span id="totalAmountValue">{% if invoice %}{{ "%.2f"|format(invoice['total_amount']) }}{% else %}0.00{% endif %}</span> CAD
                </div>
            </div>
        </div>
    </div>

    <!-- Phase 4: Provider Fees & Markup -->
    <div class="bg-green-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Provider Fees & Markup</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Provider Fee (CAD $)</label>
                <input type="number" 
                       id="provider_fee_display"
                       readonly
                       value="{% if invoice and invoice.get('provider_fee') %}{{ "%.2f"|format(invoice['provider_fee']) }}{% endif %}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 cursor-not-allowed">
                <p class="text-xs text-gray-500 mt-1">Auto-filled from doctor</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Markup Percentage (%)</label>
                <input type="number" 
                       name="markup_percentage" 
                       id="markup_percentage"
                       value="{% if invoice and invoice.get('markup_percentage') %}{{ "%.2f"|format(invoice['markup_percentage']) }}{% endif %}"
                       step="0.01" 
                       min="0"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                       onchange="calculateMarkup()">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Markup Amount (CAD $)</label>
                <input type="number" 
                       id="markup_amount_display"
                       readonly
                       value="{% if invoice and invoice.get('markup_amount') %}{{ "%.2f"|format(invoice['markup_amount']) }}{% endif %}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 cursor-not-allowed">
            </div>
        </div>
    </div>

    <!-- Phase 4: Quantity & Hourly Rate (for trials) -->
    <div class="bg-yellow-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Trial Details (if applicable)</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Quantity (Hours)</label>
                <input type="number" 
                       name="quantity" 
                       value="{% if invoice and invoice.get('quantity') %}{{ "%.2f"|format(invoice['quantity']) }}{% endif %}"
                       step="0.01" 
                       min="0"
                       placeholder="e.g., 3.0"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Hourly Rate (CAD $)</label>
                <input type="number" 
                       name="hourly_rate" 
                       id="hourly_rate"
                       value="{% if invoice and invoice.get('hourly_rate') %}{{ "%.2f"|format(invoice['hourly_rate']) }}{% endif %}"
                       step="0.01" 
                       min="0"
                       placeholder="Hourly rate from trial fee template"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
        </div>
    </div>

    <!-- Phase 4: Due Date -->
    <div class="bg-purple-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Due Date</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Due Date Option</label>
                <select name="due_date_option" 
                        id="due_date_option"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                        onchange="updateDueDate()">
                    <option value="">Select option...</option>
                    <option value="upon_receipt" {% if invoice and invoice.get('due_date_option') == 'upon_receipt' %}selected{% endif %}>Upon Receipt</option>
                    <option value="30_days" {% if invoice and invoice.get('due_date_option') == '30_days' %}selected{% endif %}>30 Days</option>
                    <option value="custom" {% if invoice and invoice.get('due_date_option') == 'custom' %}selected{% endif %}>Custom Date</option>
                </select>
            </div>
            <div id="custom_due_date_container" class="{% if not invoice or invoice.get('due_date_option') != 'custom' %}hidden{% endif %}">
                <label class="block text-sm font-medium text-gray-700 mb-2">Custom Due Date</label>
                <input type="date" 
                       name="due_date" 
                       id="due_date"
                       value="{% if invoice and invoice.get('due_date') %}{{ invoice['due_date'] }}{% endif %}"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            <div id="calculated_due_date_display" class="{% if not invoice or invoice.get('due_date_option') == 'custom' %}hidden{% endif %}">
                <label class="block text-sm font-medium text-gray-700 mb-2">Calculated Due Date</label>
                <div class="px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg">
                    <span id="calculated_due_date_text">{% if invoice and invoice.get('due_date') %}{{ invoice['due_date'] }}{% else %}Will be calculated...{% endif %}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Phase 4: Delivery & Report Tracking -->
    <div class="bg-indigo-50 rounded-lg p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Delivery & Report Tracking</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Sent Via</label>
                <select name="delivery_method" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="">Select method...</option>
                    <option value="email" {% if invoice and invoice.get('delivery_method') == 'email' %}selected{% endif %}>Email</option>
                    <option value="postage" {% if invoice and invoice.get('delivery_method') == 'postage' %}selected{% endif %}>Postage</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Report Sent</label>
                <div class="flex items-center mt-2">
                    <input type="checkbox" 
                           name="report_sent" 
                           id="report_sent"
                           value="1"
                           {% if invoice and invoice.get('report_sent') == 1 %}checked{% endif %}
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="report_sent" class="ml-2 text-sm text-gray-700">Report was sent out</label>
                </div>
                {% if invoice and invoice.get('report_deadline_date') %}
                <p class="text-xs text-gray-500 mt-1">Report Deadline: {{ invoice['report_deadline_date'] }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Phase 4: Line Items Section -->
    {% if invoice %}
    <div class="bg-orange-50 rounded-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-800">Line Items</h3>
            <a href="{{ url_for('invoice_line_items', invoice_id=invoice['id']) }}" 
               class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-list mr-2"></i>Manage Line Items
            </a>
        </div>
        {% if line_items %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Description</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Qty</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Price</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Total</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in line_items %}
                    <tr>
                        <td class="px-4 py-2 text-sm">{{ item['service_description'] or item['service_code'] or '-' }}</td>
                        <td class="px-4 py-2 text-sm">{{ "%.2f"|format(item['quantity']) if item['quantity'] else '-' }}</td>
                        <td class="px-4 py-2 text-sm">${{ "%.2f"|format(item['unit_price']) if item['unit_price'] else '0.00' }} CAD</td>
                        <td class="px-4 py-2 text-sm font-semibold">${{ "%.2f"|format(item['line_total']) }} CAD</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-sm text-gray-600">No line items. Click "Manage Line Items" to add services or expenses.</p>
        {% endif %}
    </div>
    {% endif %}

    <!-- Status and Payment -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
            <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <option value="draft" {% if not invoice or invoice['status'] == 'draft' %}selected{% endif %}>Draft</option>
                <option value="sent" {% if invoice and invoice['status'] == 'sent' %}selected{% endif %}>Sent</option>
                <option value="paid" {% if invoice and invoice['status'] == 'paid' %}selected{% endif %}>Paid</option>
                <option value="overdue" {% if invoice and invoice['status'] == 'overdue' %}selected{% endif %}>Overdue</option>
                <option value="cancelled" {% if invoice and invoice['status'] == 'cancelled' %}selected{% endif %}>Cancelled</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Date</label>
            <input type="date" 
                   name="payment_date" 
                   value="{% if invoice %}{{ invoice['payment_date'] }}{% endif %}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
    </div>

    <!-- Payment Method and Reference -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Method</label>
            <select name="payment_method" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <option value="">Select payment method...</option>
                <option value="Cheque" {% if invoice and invoice['payment_method'] == 'Cheque' %}selected{% endif %}>Cheque</option>
                <option value="EFT" {% if invoice and invoice['payment_method'] == 'EFT' %}selected{% endif %}>EFT (Electronic Funds Transfer)</option>
                <option value="Credit Card" {% if invoice and invoice['payment_method'] == 'Credit Card' %}selected{% endif %}>Credit Card</option>
                <option value="Wire Transfer" {% if invoice and invoice['payment_method'] == 'Wire Transfer' %}selected{% endif %}>Wire Transfer</option>
                <option value="Cash" {% if invoice and invoice['payment_method'] == 'Cash' %}selected{% endif %}>Cash</option>
            </select>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Payment Reference</label>
            <input type="text" 
                   name="payment_reference" 
                   value="{% if invoice %}{{ invoice['payment_reference'] }}{% endif %}"
                   placeholder="Cheque #, Transaction ID, etc."
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
        </div>
    </div>

    <!-- Notes -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Invoice Notes</label>
            <textarea name="notes" 
                      rows="4" 
                      placeholder="Notes visible to client on invoice..."
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{% if invoice %}{{ invoice['notes'] }}{% endif %}</textarea>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Internal Notes</label>
            <textarea name="internal_notes" 
                      rows="4" 
                      placeholder="Internal notes (not visible to client)..."
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{% if invoice %}{{ invoice['internal_notes'] }}{% endif %}</textarea>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="flex justify-end gap-4">
        <a href="{% if invoice %}{{ url_for('invoice_view', invoice_id=invoice['id']) }}{% else %}{{ url_for('invoices_list') }}{% endif %}" 
           class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-3 rounded-lg font-semibold transition">
            Cancel
        </a>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
            <i class="fas fa-save mr-2"></i>{% if invoice %}Update Invoice{% else %}Create Invoice{% endif %}
        </button>
    </div>
</form>

<script>
// Auto-populate service description from selected code
function updateServiceDescription() {
    const select = document.getElementById('serviceCode');
    const descInput = document.getElementById('serviceDescription');
    const selectedOption = select.options[select.selectedIndex];
    
    if (selectedOption && selectedOption.dataset.description) {
        descInput.value = selectedOption.dataset.description;
    }
}

// Calculate tax and total
function calculateTotal() {
    const fee = parseFloat(document.getElementById('fee').value) || 0;
    const taxRate = parseFloat(document.getElementById('taxRate').value) || 0;
    
    const taxAmount = fee * (taxRate / 100);
    const total = fee + taxAmount;
    
    const totalAmountElement = document.getElementById('totalAmount');
    const totalAmountValue = document.getElementById('totalAmountValue');
    if (totalAmountValue) {
        totalAmountValue.textContent = total.toFixed(2);
    } else if (totalAmountElement) {
        totalAmountElement.innerHTML = '$' + total.toFixed(2) + ' CAD';
    }
}

// Phase 4: Calculate markup
function calculateMarkup() {
    const markupPercentage = parseFloat(document.getElementById('markup_percentage').value) || 0;
    const providerFee = parseFloat(document.getElementById('provider_fee_display').value) || 0;
    const fee = parseFloat(document.getElementById('fee').value) || 0;
    
    let markupAmount = 0;
    if (providerFee > 0) {
        markupAmount = providerFee * (markupPercentage / 100);
    } else if (fee > 0) {
        markupAmount = fee * (markupPercentage / 100);
    }
    
    const markupAmountDisplay = document.getElementById('markup_amount_display');
    if (markupAmountDisplay) {
        markupAmountDisplay.value = markupAmount.toFixed(2);
    }
}

// Phase 4: Update due date based on option
function updateDueDate() {
    const option = document.getElementById('due_date_option').value;
    const customContainer = document.getElementById('custom_due_date_container');
    const calculatedDisplay = document.getElementById('calculated_due_date_display');
    const calculatedText = document.getElementById('calculated_due_date_text');
    const invoiceDateInput = document.querySelector('input[name="invoice_date"]');
    
    if (option === 'custom') {
        customContainer.classList.remove('hidden');
        calculatedDisplay.classList.add('hidden');
    } else if (option === 'upon_receipt' || option === '30_days') {
        customContainer.classList.add('hidden');
        calculatedDisplay.classList.remove('hidden');
        
        if (invoiceDateInput && invoiceDateInput.value) {
            const invoiceDate = new Date(invoiceDateInput.value);
            if (option === 'upon_receipt') {
                calculatedText.textContent = invoiceDateInput.value;
            } else if (option === '30_days') {
                invoiceDate.setDate(invoiceDate.getDate() + 30);
                const dueDateStr = invoiceDate.toISOString().split('T')[0];
                calculatedText.textContent = dueDateStr;
            }
        } else {
            calculatedText.textContent = 'Will be calculated when invoice date is set...';
        }
    } else {
        customContainer.classList.add('hidden');
        calculatedDisplay.classList.add('hidden');
    }
}

// Phase 4: Specialist autocomplete
function setupSpecialistAutocomplete() {
    const specialistInput = document.getElementById('specialist_name');
    const specialistIdInput = document.getElementById('specialist_id');
    const autocompleteDiv = document.getElementById('specialist_autocomplete');
    const providerFeeDisplay = document.getElementById('provider_fee_display');
    
    if (!specialistInput || !autocompleteDiv) return;
    
    // Make parent relative for absolute positioning
    specialistInput.parentElement.style.position = 'relative';
    
    let currentResults = [];
    
    specialistInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (query.length < 2) {
            autocompleteDiv.classList.add('hidden');
            return;
        }
        
        fetch(`/api/search/doctors?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                currentResults = data;
                renderSpecialistDropdown(data);
            })
            .catch(error => {
                console.error('Specialist autocomplete error:', error);
                autocompleteDiv.classList.add('hidden');
            });
    });
    
    function renderSpecialistDropdown(results) {
        if (results.length === 0) {
            autocompleteDiv.classList.add('hidden');
            return;
        }
        
        autocompleteDiv.innerHTML = results.map(doctor => {
            const displayName = `${doctor.name || ''} ${doctor.specialty ? '(' + doctor.specialty + ')' : ''}`.trim();
            return `<div class="px-4 py-2 hover:bg-gray-100 cursor-pointer" data-doctor-id="${doctor.id}" data-doctor-name="${doctor.name || ''}" data-provider-fee="${doctor.provider_fee || 0}">${displayName}</div>`;
        }).join('');
        
        autocompleteDiv.classList.remove('hidden');
    }
    
    autocompleteDiv.addEventListener('click', function(e) {
        const item = e.target.closest('[data-doctor-id]');
        if (item) {
            const doctorId = item.getAttribute('data-doctor-id');
            const doctorName = item.getAttribute('data-doctor-name');
            const providerFee = parseFloat(item.getAttribute('data-provider-fee')) || 0;
            
            specialistInput.value = doctorName;
            if (specialistIdInput) {
                specialistIdInput.value = doctorId;
            }
            if (providerFeeDisplay) {
                providerFeeDisplay.value = providerFee.toFixed(2);
            }
            
            autocompleteDiv.classList.add('hidden');
            
            // Recalculate markup if percentage is set
            if (document.getElementById('markup_percentage').value) {
                calculateMarkup();
            }
        }
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!specialistInput.parentElement.contains(e.target)) {
            autocompleteDiv.classList.add('hidden');
        }
    });
}

// Calculate on page load
document.addEventListener('DOMContentLoaded', function() {
    calculateTotal();
    setupSpecialistAutocomplete();
    
    // Listen for invoice date changes to update due date
    const invoiceDateInput = document.querySelector('input[name="invoice_date"]');
    if (invoiceDateInput) {
        invoiceDateInput.addEventListener('change', updateDueDate);
    }
    
    // Auto-generate Invoice Number for new invoices
    {% if not invoice %}
    async function generateInvoiceNumber() {
        const invoiceNumberText = document.getElementById('invoiceNumberText');
        if (!invoiceNumberText || invoiceNumberText.textContent.includes('Will be auto-generated')) {
            try {
                const res = await fetch('/api/invoices/next_number');
                const data = await res.json();
                if (data.invoice_number && invoiceNumberText) {
                    invoiceNumberText.textContent = data.invoice_number;
                }
            } catch (e) {
                console.error('Failed to fetch next invoice number', e);
            }
        }
    }
    generateInvoiceNumber();
    {% endif %}
});
</script>
{% endblock %}