{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }} - 3ncount2026{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block page_actions %}
<a href="{% url 'core:invoice_list' %}" class="btn btn-outline-secondary">
    <i class="ti ti-arrow-left"></i> Back to Invoices
</a>
{% endblock %}

{% block extra_css %}
<style>
    .formset-row {
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        background: #f8f9fa;
        position: relative;
    }
    .delete-item-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
    .item-number {
        font-weight: bold;
        color: #666;
        margin-bottom: 0.5rem;
    }
    #empty-form-template {
        display: none !important;
    }
</style>
{% endblock %}

{% block content %}
<form method="post" id="invoice-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-3">
                <div class="card-header">
                    <h3 class="card-title">Invoice Information</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label required">Customer</label>
                            {{ form.customer }}
                            {% if form.customer.errors %}
                            <div class="invalid-feedback d-block">{{ form.customer.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Invoice Number</label>
                            {{ form.invoice_number }}
                            <small class="form-hint">Auto-generated if left empty</small>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label required">Invoice Date</label>
                            {{ form.invoice_date }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Due Date</label>
                            {{ form.due_date }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            {{ form.status }}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Line Items -->
            <div class="card mb-3">
                <div class="card-header">
                    <h3 class="card-title">Invoice Items</h3>
                </div>
                <div class="card-body">
                    {{ formset.management_form }}
                    
                    <div id="formset-container">
                        {% for form in formset %}
                        <div class="formset-row" data-formset-form>
                            {{ form.id }}
                            <div class="d-none">{{ form.DELETE }}</div>
                            
                            <div class="item-number">Item #<span class="item-index">{{ forloop.counter }}</span></div>
                            
                            <button type="button" class="btn btn-sm btn-outline-danger delete-item-btn" onclick="deleteItem(this)">
                                <i class="ti ti-trash"></i>
                            </button>
                            
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label required">Description</label>
                                    {{ form.description }}
                                    {% if form.description.errors %}
                                    <div class="invalid-feedback d-block">{{ form.description.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3 mb-2">
                                    <label class="form-label required">Quantity</label>
                                    {{ form.quantity }}
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label required">Unit Price (RM)</label>
                                    {{ form.unit_price }}
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label">Amount</label>
                                    <input type="text" class="form-control line-amount" readonly value="0.00">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label">Account</label>
                                    {{ form.account }}
                                </div>
                                <div class="d-none">
                                    {{ form.line_number }}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- Hidden template for new forms -->
                    <div id="empty-form-template" style="display: none;">
                        <div class="formset-row" data-formset-form>
                            <input type="hidden" name="items-__prefix__-id" id="id_items-__prefix__-id">
                            <div class="d-none">
                                <input type="checkbox" name="items-__prefix__-DELETE" id="id_items-__prefix__-DELETE">
                            </div>
                            
                            <div class="item-number">Item #<span class="item-index">1</span></div>
                            
                            <button type="button" class="btn btn-sm btn-outline-danger delete-item-btn" onclick="deleteItem(this)">
                                <i class="ti ti-trash"></i>
                            </button>
                            
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label required">Description</label>
                                    <input type="text" name="items-__prefix__-description" class="form-control" id="id_items-__prefix__-description">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-3 mb-2">
                                    <label class="form-label required">Quantity</label>
                                    <input type="number" name="items-__prefix__-quantity" class="form-control" step="0.01" value="1.00" id="id_items-__prefix__-quantity">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label required">Unit Price (RM)</label>
                                    <input type="number" name="items-__prefix__-unit_price" class="form-control" step="0.01" id="id_items-__prefix__-unit_price">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label">Amount</label>
                                    <input type="text" class="form-control line-amount" readonly value="0.00">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <label class="form-label">Account</label>
                                    <select name="items-__prefix__-account" class="form-select" id="id_items-__prefix__-account">
                                        <option value="">---------</option>
                                        {% for account in form.items.0.account.field.queryset %}
                                        <option value="{{ account.pk }}">{{ account.code }} - {{ account.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="d-none">
                                    <input type="number" name="items-__prefix__-line_number" id="id_items-__prefix__-line_number">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <button type="button" class="btn btn-primary" id="add-form">
                            <i class="ti ti-plus"></i> Add Item
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Notes and Terms -->
            <div class="card mb-3">
                <div class="card-header">
                    <h3 class="card-title">Additional Information</h3>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Internal Notes</label>
                        {{ form.notes }}
                        <small class="form-hint">Not visible to customer</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Terms & Conditions</label>
                        {{ form.terms }}
                        <small class="form-hint">Visible on invoice</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card sticky-top">
                <div class="card-header">
                    <h3 class="card-title">Summary</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <label class="form-label">SST Rate (%)</label>
                            {{ form.sst_rate }}
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal:</span>
                        <strong id="subtotal-display">RM 0.00</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>SST (<span id="sst-rate-display">8</span>%):</span>
                        <strong id="sst-display">RM 0.00</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pt-2 border-top">
                        <span class="h3">Total:</span>
                        <strong class="h3 text-primary" id="total-display">RM 0.00</strong>
                    </div>
                    
                    <hr>
                    
                    <div class="btn-list w-100">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="ti ti-device-floppy"></i> {% if invoice %}Update{% else %}Create{% endif %} Invoice
                        </button>
                        <a href="{% url 'core:invoice_list' %}" class="btn btn-outline-secondary w-100">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const formsetContainer = document.getElementById('formset-container');
    const addButton = document.getElementById('add-form');
    const totalFormsInput = document.querySelector('[name$=TOTAL_FORMS]');
    const emptyFormTemplate = document.getElementById('empty-form-template');
    
    // Calculate line amount
    function calculateLineAmount(row) {
        const qtyInput = row.querySelector('[name$=quantity]');
        const priceInput = row.querySelector('[name$=unit_price]');
        const amountDisplay = row.querySelector('.line-amount');
        
        if (qtyInput && priceInput && amountDisplay) {
            const qty = parseFloat(qtyInput.value) || 0;
            const price = parseFloat(priceInput.value) || 0;
            const amount = qty * price;
            amountDisplay.value = amount.toFixed(2);
        }
    }
    
    // Calculate totals
    function calculateTotals() {
        let subtotal = 0;
        const forms = formsetContainer.querySelectorAll('.formset-row');
        
        forms.forEach(form => {
            const deleteCheckbox = form.querySelector('[name$=DELETE]');
            if (deleteCheckbox && deleteCheckbox.checked) return;
            
            const qtyInput = form.querySelector('[name$=quantity]');
            const priceInput = form.querySelector('[name$=unit_price]');
            
            if (qtyInput && priceInput) {
                const qty = parseFloat(qtyInput.value) || 0;
                const price = parseFloat(priceInput.value) || 0;
                subtotal += qty * price;
            }
            
            calculateLineAmount(form);
        });
        
        const sstRate = parseFloat(document.querySelector('[name=sst_rate]').value) || 0;
        const sstAmount = subtotal * (sstRate / 100);
        const total = subtotal + sstAmount;
        
        document.getElementById('subtotal-display').textContent = 'RM ' + subtotal.toFixed(2);
        document.getElementById('sst-rate-display').textContent = sstRate.toFixed(0);
        document.getElementById('sst-display').textContent = 'RM ' + sstAmount.toFixed(2);
        document.getElementById('total-display').textContent = 'RM ' + total.toFixed(2);
    }
    
    // Update item numbers
    function updateItemNumbers() {
        const forms = formsetContainer.querySelectorAll('.formset-row');
        let visibleIndex = 1;
        forms.forEach(form => {
            const deleteCheckbox = form.querySelector('[name$=DELETE]');
            if (!deleteCheckbox || !deleteCheckbox.checked) {
                const indexSpan = form.querySelector('.item-index');
                if (indexSpan) {
                    indexSpan.textContent = visibleIndex;
                }
                visibleIndex++;
            }
        });
    }
    
    // Add event listeners to all inputs
    function attachListeners() {
        const inputs = formsetContainer.querySelectorAll('input[type=number]');
        inputs.forEach(input => {
            input.removeEventListener('input', calculateTotals);
            input.addEventListener('input', calculateTotals);
        });
        
        const sstInput = document.querySelector('[name=sst_rate]');
        if (sstInput) {
            sstInput.removeEventListener('input', calculateTotals);
            sstInput.addEventListener('input', calculateTotals);
        }
    }
    
    // Delete item function (global)
    window.deleteItem = function(button) {
        const row = button.closest('.formset-row');
        const deleteCheckbox = row.querySelector('[name$=DELETE]');
        const forms = formsetContainer.querySelectorAll('.formset-row:not([style*="display: none"])');
        
        // Don't allow deleting if only one item left
        if (forms.length <= 1) {
            alert('Invoice must have at least one item!');
            return;
        }
        
        if (deleteCheckbox) {
            deleteCheckbox.checked = true;
            row.style.display = 'none';
            
            // Disable all inputs in the deleted row to prevent validation
            row.querySelectorAll('input, select, textarea').forEach(input => {
                input.disabled = true;
            });
            
            calculateTotals();
            updateItemNumbers();
        }
    };
    
    // Add new form - clone from empty template
    addButton.addEventListener('click', function() {
        const formCount = parseInt(totalFormsInput.value);
        
        // Clone the hidden template
        const newForm = emptyFormTemplate.querySelector('.formset-row').cloneNode(true);
        
        // Replace __prefix__ with actual form number
        newForm.innerHTML = newForm.innerHTML.replace(/__prefix__/g, formCount);
        
        // Set line number
        const lineNumberInput = newForm.querySelector('[name$=line_number]');
        if (lineNumberInput) {
            lineNumberInput.value = formCount + 1;
        }
        
        // Ensure all inputs are enabled
        newForm.querySelectorAll('input, select, textarea').forEach(input => {
            input.disabled = false;
        });
        
        // Clear the DELETE checkbox
        const deleteCheckbox = newForm.querySelector('[name$=DELETE]');
        if (deleteCheckbox) {
            deleteCheckbox.checked = false;
        }
        
        // Append to container
        formsetContainer.appendChild(newForm);
        totalFormsInput.value = formCount + 1;
        
        attachListeners();
        updateItemNumbers();
        calculateTotals();
    });
    
    // Initialize
    attachListeners();
    updateItemNumbers();
    calculateTotals();
});
</script>
{% endblock %}