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

{% 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="alert alert-info mb-4">
                    <h5><i class="fas fa-info-circle"></i> How to receive goods:</h5>
                    <ol class="mb-0">
                        <li>Enter the quantity received in the <strong>This Delivery</strong> column for each item</li>
                        <li>Add batch/lot numbers and expiry dates if applicable</li>
                        <li>Click "Verify Quantities" to review your entries</li>
                        <li>Confirm verification to enable the "Confirm Receipt" button</li>
                    </ol>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-success">
                            <tr>
                                <th>Product Details</th>
                                <th class="text-center" style="width: 100px;">Ordered</th>
                                <th class="text-center" style="width: 130px;">Prev Received</th>
                                <th class="text-center" style="width: 150px;">This Delivery</th>
                                <th class="text-center" style="width: 100px;">Remaining</th>
                                <th class="text-center" style="width: 150px;">Batch/Lot</th>
                                <th class="text-center" style="width: 150px;">Expiry Date</th>
                                <th class="text-center" style="width: 100px;">Verified</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ formset.management_form }}
                            {% for form in formset %}
                            <tr class="item-row">
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                                <td>
                                    <strong>{{ form.instance.purchase_order_item.product.name }}</strong>
                                    <div class="small text-muted">
                                        SKU: {{ form.instance.purchase_order_item.product.sku|default:'N/A' }}
                                    </div>
                                    {{ form.purchase_order_item.as_hidden }}
                                </td>
                                <td class="text-center align-middle">
                                    {{ form.instance.purchase_order_item.quantity|floatformat:2 }}
                                </td>
                                <td class="text-center align-middle">
                                    {{ form.instance.purchase_order_item.received_quantity|floatformat:2 }}
                                </td>
                                <td class="align-middle">
                                    <div class="input-group">
                                        {% render_field form.quantity_received class+="form-control quantity-received" data-submit-on-enter="true" %}
                                    </div>
                                    {% if form.quantity_received.errors %}
                                        <div class="text-danger small">{{ form.quantity_received.errors.0 }}</div>
                                    {% endif %}
                                </td>
                                <td class="text-center align-middle">
                                    <span class="d-inline-block px-2 py-1 rounded {% if form.instance.purchase_order_item.remaining_quantity < 0 %}bg-danger text-white{% endif %}">
                                        {{ form.instance.purchase_order_item.remaining_quantity|floatformat:2 }}
                                    </span>
                                </td>
                                <td class="align-middle">
                                    {% render_field form.batch_number class+="form-control" data-submit-on-enter="true" %}
                                </td>
                                <td class="align-middle">
                                    {% render_field form.expiry_date class+="form-control dateinput" type="date" data-submit-on-change="true" %}
                                </td>
                                <td class="text-center align-middle">
                                    <div class="form-check d-flex justify-content-center">
                                        <input type="checkbox" class="form-check-input verify-check" data-item-id="{{ form.instance.id|default:forloop.counter }}" title="Check to verify this item">
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="row mt-3">
                    <div class="col-12">
                        {{ form.notes|as_crispy_field }}
                    </div>
                </div>
                
                <!-- Verification Summary -->
                <div class="card mt-4 mb-4 border-left-primary">
                    <div class="card-body py-2">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="verify-all-items">
                                    <label class="form-check-label font-weight-bold" for="verify-all-items">
                                        I have verified all quantities against the physical items received
                                    </label>
                                </div>
                                <div class="small text-muted mt-1">
                                    <i class="fas fa-info-circle"></i> Please ensure all quantities match the physical items before submitting.
                                </div>
                            </div>
                            <div class="col-md-4 text-right">
                                <div class="verification-status badge badge-pill badge-secondary">
                                    <i class="fas fa-check-circle"></i> <span id="verified-count">0</span> of {{ formset|length }} items verified
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12 text-right">
                        <button type="button" id="verify-quantities-btn" class="btn btn-info">
                            <i class="fas fa-clipboard-check"></i> Verify Quantities
                        </button>
                        <button type="submit" name="save" class="btn btn-primary" id="save-btn" disabled>
                            <i class="fas fa-save"></i> Confirm 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>
                
                <!-- Verification Modal -->
                <div class="modal fade" id="verificationModal" tabindex="-1" role="dialog" aria-labelledby="verificationModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title" id="verificationModalLabel">Quantity Verification Summary</h5>
                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Product</th>
                                                <th class="text-center">Ordered</th>
                                                <th class="text-center">This Delivery</th>
                                                <th class="text-center">Total Received</th>
                                                <th class="text-center">Variance</th>
                                            </tr>
                                        </thead>
                                        <tbody id="verification-summary">
                                            <!-- Will be populated by JavaScript -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="alert alert-warning mt-3" id="variance-warning" style="display: none;">
                                    <i class="fas fa-exclamation-triangle"></i> Some quantities don't match. Please verify before proceeding.
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" id="confirm-verification">
                                    <i class="fas fa-check-circle"></i> Confirm Verification
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Handle form submission on Enter key press or date change
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('goods-receipt-form');
        
        // Handle Enter key press
        form.addEventListener('keydown', function(e) {
            if (e.target.matches('[data-submit-on-enter]') && e.key === 'Enter') {
                e.preventDefault();
                form.submit();
            }
        });
        
        // Handle date change
        form.addEventListener('change', function(e) {
            if (e.target.matches('[data-submit-on-change]')) {
                form.submit();
            }
        });
    });
$(document).ready(function() {
    // Initialize date picker
    $('.dateinput').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });
    
    // Format number inputs
    $('input[type="number"]').on('input', function() {
        let value = $(this).val();
        if (value && !isNaN(value) && value.includes('.')) {
            const parts = value.split('.');
            if (parts[1].length > 2) {
                parts[1] = parts[1].substring(0, 2);
                $(this).val(parts.join('.'));
            }
        }
    });

    // Calculate remaining quantity when received quantity changes
    function updateRemainingQty(input) {
        const row = $(input).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($(input).val()) || 0;
        
        const remainingQty = orderedQty - (prevReceivedQty + thisDeliveryQty);
        const remainingCell = row.find('.remaining-quantity span');
        
        remainingCell.text(remainingQty.toFixed(2));
        
        // Update styling based on remaining quantity
        if (remainingQty < 0) {
            remainingCell.removeClass('bg-success').addClass('bg-danger text-white');
        } else if (remainingQty === 0) {
            remainingCell.removeClass('bg-danger').addClass('bg-success text-white');
        } else {
            remainingCell.removeClass('bg-danger bg-success text-white');
        }
        
        // Update verification status
        updateVerificationStatus();
    }
    
    // Update verification status
    function updateVerificationStatus() {
        let verifiedCount = 0;
        let allVerified = true;
        
        $('.item-row').each(function() {
            const qty = parseFloat($(this).find('.quantity-received').val()) || 0;
            const verified = $(this).find('.verify-check').is(':checked');
            
            if (qty > 0 && verified) {
                verifiedCount++;
            }
            
            if (qty > 0 && !verified) {
                allVerified = false;
            }
        });
        
        // Update verified count display
        $('#verified-count').text(verifiedCount);
        
        // Enable/disable save button
        $('#save-btn').prop('disabled', !allVerified);
        
        // Update verification status badge
        const statusBadge = $('.verification-status');
        if (allVerified && verifiedCount > 0) {
            statusBadge.removeClass('badge-secondary').addClass('badge-success');
        } else {
            statusBadge.removeClass('badge-success').addClass('badge-secondary');
        }
    }
    
    // Handle quantity received input
    $(document).on('input', '.quantity-received', function() {
        updateRemainingQty(this);
    });
    
    // Handle verification checkbox
    $(document).on('change', '.verify-check', function() {
        updateVerificationStatus();
    });
    
    // Verify all items
    $('#verify-all-items').on('change', function() {
        const isChecked = $(this).is(':checked');
        $('.verify-check').prop('checked', isChecked).trigger('change');
    });
    
    // Show verification summary
    $('#verify-quantities-btn').on('click', function() {
        // First update all remaining quantities
        $('.quantity-received').each(function() {
            updateRemainingQty(this);
        });
        
        const modal = $('#verificationModal');
        const summaryBody = $('#verification-summary');
        let hasVariance = false;
        
        summaryBody.empty();
        
        $('.item-row').each(function() {
            const productName = $(this).find('td:first').text().trim();
            const orderedQty = parseFloat($(this).find('td:eq(1)').text().trim()) || 0;
            const thisDeliveryQty = parseFloat($(this).find('.quantity-received').val()) || 0;
            const prevReceivedQty = parseFloat($(this).find('td:eq(2)').text().trim()) || 0;
            const totalReceived = prevReceivedQty + thisDeliveryQty;
            const variance = orderedQty - totalReceived;
            
            if (variance !== 0) {
                hasVariance = true;
            }
            
            const row = `
                <tr class="${variance !== 0 ? 'table-warning' : ''}">
                    <td>${productName}</td>
                    <td class="text-center">${orderedQty.toFixed(2)}</td>
                    <td class="text-center">${thisDeliveryQty.toFixed(2)}</td>
                    <td class="text-center">${totalReceived.toFixed(2)}</td>
                    <td class="text-center ${variance !== 0 ? 'text-danger font-weight-bold' : ''}">
                        ${variance.toFixed(2)}
                    </td>
                </tr>
            `;
            
            summaryBody.append(row);
        });
        
        // Show/hide variance warning
        if (hasVariance) {
            $('#variance-warning').show();
        } else {
            $('#variance-warning').hide();
        }
        
        // Show the modal after updating content
        modal.modal('show');
    });
    
    // Confirm verification
    $('#confirm-verification').on('click', function() {
        $('.verify-check').prop('checked', true).trigger('change');
        $('#verify-all-items').prop('checked', true);
        $('#verificationModal').modal('hide');
        
        // Enable save button if all items with quantities are verified
        updateVerificationStatus();
    });
    
    // 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 span').text().trim());
            if (remainingQty < 0) {
                hasError = true;
            }
        });
        
        if (!hasItems) {
            e.preventDefault();
            Swal.fire({
                icon: 'warning',
                title: 'No Items',
                text: 'Please enter quantities for at least one item.'
            });
            return false;
        }
        
        if (hasError) {
            e.preventDefault();
            Swal.fire({
                title: 'Quantity Mismatch',
                text: 'Some quantities exceed the ordered amount. Are you sure you want to continue?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, Continue',
                cancelButtonText: 'No, Review',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#goods-receipt-form').off('submit').submit();
                }
            });
            return false;
        }
    });
    
    // Initialize verification status
    updateVerificationStatus();
});
</script>
{% endblock %}