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

{% block title %}{% if form.instance.pk %}Edit{% else %}New{% endif %} Purchase Order{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            {% if form.instance.pk %}
                Edit Purchase Order: {{ form.instance.po_number }}
            {% else %}
                New Purchase Order
            {% endif %}
        </h1>
        <a href="{% url 'purchases:purchase_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Purchase Order Details</h6>
        </div>
        <div class="card-body">
            <form method="post" id="purchase-order-form">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-md-6">
                        {{ form.supplier|as_crispy_field }}
                    </div>
                    <div class="col-md-3">
                        {{ form.order_date|as_crispy_field }}
                    </div>
                    <div class="col-md-3">
                        {{ form.expected_delivery_date|as_crispy_field }}
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12">
                        {{ form.notes|as_crispy_field }}
                    </div>
                </div>
                
                <h5 class="mt-4 mb-3">Order Items</h5>
                
                <div id="formset-container">
                    {{ formset.management_form }}
                    {% for form in formset %}
                    <div class="formset-form row mb-3 border-bottom pb-3">
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                        <div class="col-md-5">
                            {{ form.product|as_crispy_field }}
                        </div>
                        <div class="col-md-2">
                            {{ form.quantity|as_crispy_field }}
                        </div>
                        <div class="col-md-2">
                            {{ form.unit_price|as_crispy_field }}
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Total</label>
                            <input type="text" class="form-control item-total" readonly>
                        </div>
                        <div class="col-md-1 d-flex align-items-end">
                            {% if form.instance.pk %}
                                {{ form.DELETE|as_crispy_field }}
                            {% else %}
                                <button type="button" class="btn btn-danger btn-sm remove-form">
                                    <i class="fas fa-times"></i>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                
                <div class="row mt-2">
                    <div class="col-12">
                        <button type="button" id="add-item" class="btn btn-sm btn-secondary">
                            <i class="fas fa-plus"></i> Add Item
                        </button>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Additional Notes</label>
                            <textarea class="form-control" name="additional_notes" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-right">
                            <div class="mb-2">
                                <strong>Subtotal:</strong>
                                <span id="subtotal" class="ml-2">$0.00</span>
                            </div>
                            <div class="mb-2">
                                <strong>Tax (0%):</strong>
                                <span id="tax" class="ml-2">$0.00</span>
                            </div>
                            <div class="mb-2">
                                <strong>Total:</strong>
                                <span id="total" class="ml-2 font-weight-bold">$0.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-12 text-right">
                        <button type="submit" name="save" class="btn btn-primary">
                            <i class="fas fa-save"></i> Save
                        </button>
                        <button type="submit" name="save_and_continue" class="btn btn-info">
                            <i class="fas fa-save"></i> Save & Continue
                        </button>
                        <a href="{% url 'purchases:purchase_list' %}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Empty form template for adding new items -->
<template id="empty-form-template">
    <div class="formset-form row mb-3 border-bottom pb-3">
        {{ formset.empty_form.id }}
        <div class="col-md-5">
            {{ formset.empty_form.product|as_crispy_field }}
        </div>
        <div class="col-md-2">
            {{ formset.empty_form.quantity|as_crispy_field }}
        </div>
        <div class="col-md-2">
            {{ formset.empty_form.unit_price|as_crispy_field }}
        </div>
        <div class="col-md-2">
            <label class="form-label">Total</label>
            <input type="text" class="form-control item-total" readonly>
        </div>
        <div class="col-md-1 d-flex align-items-end">
            <button type="button" class="btn btn-danger btn-sm remove-form">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
</template>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Add new form
    $('#add-item').click(function() {
        const formIdx = $('#id_form-TOTAL_FORMS').val();
        const template = $('#empty-form-template').html()
            .replace(/__prefix__/g, formIdx)
            .replace(/form-\d+/g, `form-${formIdx}`);
        
        $('#formset-container').append(template);
        $('#id_form-TOTAL_FORMS').val(parseInt(formIdx) + 1);
        
        // Initialize select2 for the new form
        $(`#id_form-${formIdx}-product`).select2({
            theme: 'bootstrap4',
            placeholder: 'Select a product',
            allowClear: true
        });
    });
    
    // Remove form
    $(document).on('click', '.remove-form', function() {
        $(this).closest('.formset-form').remove();
        updateFormIndices();
        calculateTotals();
    });
    
    // Calculate row total when quantity or price changes
    $(document).on('input', '.quantity, .price', function() {
        const row = $(this).closest('.formset-form');
        const quantity = parseFloat(row.find('.quantity').val()) || 0;
        const price = parseFloat(row.find('.price').val()) || 0;
        const total = (quantity * price).toFixed(2);
        row.find('.item-total').val('$' + total);
        
        calculateTotals();
    });
    
    // Update form indices after removal
    function updateFormIndices() {
        $('.formset-form').each(function(i) {
            $(this).find('input, select, textarea').each(function() {
                const name = $(this).attr('name');
                if (name) {
                    $(this).attr('name', name.replace(/form-\d+/, `form-${i}`));
                }
                
                const id = $(this).attr('id');
                if (id) {
                    $(this).attr('id', id.replace(/form-\d+/, `form-${i}`));
                }
                
                const forAttr = $(this).attr('for');
                if (forAttr) {
                    $(this).attr('for', forAttr.replace(/form-\d+/, `form-${i}`));
                }
            });
            
            // Update the form index in the form's ID
            const formId = $(this).find('input[id$="-id"]').attr('id');
            if (formId) {
                $(this).find('input[id$="-id"]').attr('id', `form-${i}-id`);
            }
        });
        
        // Update the TOTAL_FORMS count
        $('#id_form-TOTAL_FORMS').val($('.formset-form').length);
    }
    
    // Calculate subtotal, tax, and total
    function calculateTotals() {
        let subtotal = 0;
        
        $('.formset-form').each(function() {
            const quantity = parseFloat($(this).find('.quantity').val()) || 0;
            const price = parseFloat($(this).find('.price').val()) || 0;
            subtotal += quantity * price;
        });
        
        const tax = subtotal * 0.00; // Assuming 0% tax for now
        const total = subtotal + tax;
        
        $('#subtotal').text('$' + subtotal.toFixed(2));
        $('#tax').text('$' + tax.toFixed(2));
        $('#total').text('$' + total.toFixed(2));
    }
    
    // Initialize select2 for existing product fields
    $('.product-select').select2({
        theme: 'bootstrap4',
        placeholder: 'Select a product',
        allowClear: true
    });
    
    // Initialize date pickers
    $('.dateinput').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
    
    // Calculate initial totals
    calculateTotals();
});
</script>
{% endblock %}