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

{% block title %}Receive Goods - PO-{{ purchase_order.po_number }}{% 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">
            Receive Goods - PO-{{ purchase_order.po_number }}
        </h1>
        <a href="{% url 'purchases:purchase_detail' purchase_order.pk %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Purchase Order
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Goods Receipt Details</h6>
        </div>
        <div class="card-body">
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Please verify the received quantities against the purchase order.
            </div>
            
            <form method="post" id="goods-receipt-form">
                {% csrf_token %}
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Purchase Order</label>
                            <input type="text" class="form-control" value="PO-{{ purchase_order.po_number }}" readonly>
                        </div>
                    </div>
                    <div class="col-md-3">
                        {{ form.received_date|as_crispy_field }}
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Received By</label>
                            <input type="text" class="form-control" value="{{ request.user.get_full_name|default:request.user.email }}" readonly>
                        </div>
                    </div>
                </div>
                
                <h5 class="mb-3">Received Items</h5>
                
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-light">
                            <tr>
                                <th>Product</th>
                                <th class="text-center" style="width: 150px;">Ordered</th>
                                <th class="text-center" style="width: 150px;">Previously Received</th>
                                <th class="text-center" style="width: 150px;">This Delivery</th>
                                <th class="text-center" style="width: 100px;">Remaining</th>
                                <th style="width: 200px;">Batch/Lot</th>
                                <th style="width: 120px;">Expiry Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ formset.management_form }}
                            {% for form in formset %}
                            <tr class="item-row">
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                                <td>
                                    {{ form.purchase_order_item.value|default:'' }}
                                    {{ form.purchase_order_item.as_hidden }}
                                    {{ form.instance.purchase_order_item.product.name }}
                                </td>
                                <td class="text-center">
                                    {{ form.instance.purchase_order_item.quantity }}
                                </td>
                                <td class="text-center">
                                    {{ form.instance.purchase_order_item.received_quantity }}
                                </td>
                                <td>
                                    {{ form.quantity_received|as_crispy_field }}
                                </td>
                                <td class="text-center remaining-quantity">
                                    {{ form.instance.purchase_order_item.remaining_quantity }}
                                </td>
                                <td>
                                    {{ form.batch_number|as_crispy_field }}
                                </td>
                                <td>
                                    {{ form.expiry_date|as_crispy_field }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="row mt-3">
                    <div class="col-12">
                        {{ form.notes|as_crispy_field }}
                    </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 Receipt
                        </button>
                        <a href="{% url 'purchases:purchase_detail' purchase_order.pk %}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Initialize date picker
    $('.dateinput').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
    
    // Calculate remaining quantity when received quantity changes
    $(document).on('input', '.quantity-received', function() {
        const row = $(this).closest('tr');
        const orderedQty = parseFloat(row.find('td:eq(1)').text().trim()) || 0;
        const prevReceivedQty = parseFloat(row.find('td:eq(2)').text().trim()) || 0;
        const thisDeliveryQty = parseFloat($(this).val()) || 0;
        
        const remainingQty = orderedQty - (prevReceivedQty + thisDeliveryQty);
        row.find('.remaining-quantity').text(remainingQty.toFixed(2));
        
        // Highlight if over-received
        if (remainingQty < 0) {
            row.find('.remaining-quantity').addClass('text-danger font-weight-bold');
        } else {
            row.find('.remaining-quantity').removeClass('text-danger font-weight-bold');
        }
    });
    
    // Form validation
    $('#goods-receipt-form').on('submit', function(e) {
        let hasItems = false;
        let hasError = false;
        
        $('.item-row').each(function() {
            const qty = parseFloat($(this).find('.quantity-received').val()) || 0;
            if (qty > 0) {
                hasItems = true;
            }
            
            const remainingQty = parseFloat($(this).find('.remaining-quantity').text().trim());
            if (remainingQty < 0) {
                hasError = true;
                $(this).find('.remaining-quantity').addClass('text-danger font-weight-bold');
            }
        });
        
        if (!hasItems) {
            e.preventDefault();
            alert('Please enter quantities for at least one item.');
            return false;
        }
        
        if (hasError) {
            if (!confirm('Some quantities exceed the ordered amount. Are you sure you want to continue?')) {
                e.preventDefault();
                return false;
            }
        }
    });
});
</script>
{% endblock %}