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

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

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{% if form.instance.pk %}Edit{% else %}Create{% endif %} Purchase Order</h3>
                </div>
                <div class="card-body">
                    <form method="post" id="purchase-order-form">
                        {% csrf_token %}
                        
                        <!-- Main Form -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.supplier.label_tag }}
                                    {{ form.supplier }}
                                    {% if form.supplier.errors %}
                                        <div class="text-danger">{{ form.supplier.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    {{ form.order_date.label_tag }}
                                    {{ form.order_date }}
                                    {% if form.order_date.errors %}
                                        <div class="text-danger">{{ form.order_date.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    {{ form.expected_delivery_date.label_tag }}
                                    {{ form.expected_delivery_date }}
                                    {% if form.expected_delivery_date.errors %}
                                        <div class="text-danger">{{ form.expected_delivery_date.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Items Formset -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <h5>Order Items</h5>
                                {{ formset.management_form }}
                                <div id="items-formset">
                                    {% for form in formset %}
                                        <div class="form-row mb-2 item-row">
                                            <div class="col-md-4">
                                                {{ form.product }}
                                                {% if form.product.errors %}
                                                    <div class="text-danger">{{ form.product.errors }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-2">
                                                {{ form.quantity }}
                                                {% if form.quantity.errors %}
                                                    <div class="text-danger">{{ form.quantity.errors }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-2">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">$</span>
                                                    </div>
                                                    {{ form.unit_price }}
                                                </div>
                                                {% if form.unit_price.errors %}
                                                    <div class="text-danger">{{ form.unit_price.errors }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-2">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">$</span>
                                                    </div>
                                                    <input type="text" class="form-control total-price" readonly>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                {% if form.DELETE %}
                                                    <div class="form-check mt-2">
                                                        {{ form.DELETE }}
                                                        <label class="form-check-label" for="{{ form.DELETE.id_for_label }}">
                                                            Delete
                                                        </label>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-item">
                                    <i class="fas fa-plus"></i> Add Item
                                </button>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    {{ form.notes.label_tag }}
                                    {{ form.notes }}
                                    {% if form.notes.errors %}
                                        <div class="text-danger">{{ form.notes.errors }}</div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Save
                                </button>
                                <a href="{% url 'purchases:list' %}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include jQuery Formset -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.formset/1.2.2/jquery.formset.min.js"></script>
<!-- Custom JS -->
<script src="{% static 'purchases/js/purchase_order.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize formset
    $('.item-row').formset({
        prefix: '{{ formset.prefix }}',
        addText: 'Add Item',
        deleteText: 'Remove',
        addCssClass: 'btn btn-sm btn-outline-primary',
        deleteCssClass: 'btn btn-sm btn-outline-danger',
        formCssClass: 'dynamic-form',
        added: function(row) {
            // Initialize select2 for the new row
            $(row).find('select').addClass('form-control');
            // Trigger formset:added event for our custom JS
            const event = new CustomEvent('formset:added', { detail: { row: row } });
            document.dispatchEvent(event);
        }
    });

    // Calculate total price when quantity or unit price changes
    $(document).on('change', '.quantity, .price', function() {
        const row = $(this).closest('.form-row, .row');
        const quantity = parseFloat(row.find('.quantity').val()) || 0;
        const price = parseFloat(row.find('.price').val()) || 0;
        const total = (quantity * price).toFixed(2);
        row.find('.total-price').val(isNaN(total) ? '0.00' : total);
    });

    // Initialize total price calculation on page load
    $('.quantity, .price').trigger('change');
});
</script>
{% endblock %}