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

{% block title %}New Inventory Movement - POS{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2>
                        <i class="fas fa-exchange-alt me-2"></i>
                        New Inventory Movement
                    </h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:dashboard' %}">POS</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:inventory_dashboard' %}">Inventory</a></li>
                            <li class="breadcrumb-item"><a href="{% url 'pos:inventory_movement_list' %}">Movements</a></li>
                            <li class="breadcrumb-item active">New</li>
                        </ol>
                    </nav>
                </div>
                <div>
                    <a href="{% url 'pos:inventory_movement_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="row">
        <div class="col-lg-8 col-xl-6">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Error Messages -->
                        {% if form.errors %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>Please correct the errors below:</h6>
                            <ul class="mb-0">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        {% endif %}

                        <!-- Movement Information -->
                        <div class="card mb-3">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Movement Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.product.id_for_label }}" class="form-label">
                                        Product <span class="text-danger">*</span>
                                    </label>
                                    {{ form.product }}
                                    <small class="form-text text-muted">Select the product for this inventory movement</small>
                                </div>

                                <div id="currentStockInfo" class="alert alert-info" style="display: none;">
                                    <i class="fas fa-box me-2"></i>
                                    <strong>Current Stock:</strong> <span id="currentStockValue">-</span>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.movement_type.id_for_label }}" class="form-label">
                                            Movement Type <span class="text-danger">*</span>
                                        </label>
                                        {{ form.movement_type }}
                                        <small class="form-text text-muted">
                                            <div class="mt-1">
                                                <strong>IN:</strong> Stock received<br>
                                                <strong>OUT:</strong> Stock sold/used<br>
                                                <strong>ADJUSTMENT:</strong> Correction
                                            </div>
                                        </small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="{{ form.quantity.id_for_label }}" class="form-label">
                                            Quantity <span class="text-danger">*</span>
                                        </label>
                                        {{ form.quantity }}
                                        <small class="form-text text-muted">Enter positive number</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reference & Notes -->
                        <div class="card mb-3">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Reference & Notes</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="{{ form.reference_number.id_for_label }}" class="form-label">
                                        Reference Number
                                    </label>
                                    {{ form.reference_number }}
                                    <small class="form-text text-muted">
                                        Optional: Purchase order, sale number, etc.
                                    </small>
                                </div>

                                <div class="mb-3">
                                    <label for="{{ form.notes.id_for_label }}" class="form-label">Notes</label>
                                    {{ form.notes }}
                                    <small class="form-text text-muted">
                                        Additional information about this movement
                                    </small>
                                </div>
                            </div>
                        </div>

                        <!-- Preview Result -->
                        <div id="movementPreview" class="card mb-3" style="display: none;">
                            <div class="card-header bg-warning">
                                <h5 class="mb-0"><i class="fas fa-eye me-2"></i>Preview Result</h5>
                            </div>
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-4">
                                        <div class="border rounded p-3 bg-light">
                                            <small class="text-muted d-block">Before</small>
                                            <h4 class="mb-0" id="previewBefore">-</h4>
                                        </div>
                                    </div>
                                    <div class="col-4 d-flex align-items-center justify-content-center">
                                        <div>
                                            <i class="fas fa-arrow-right fa-2x text-primary"></i>
                                            <div class="mt-2">
                                                <span class="badge bg-primary" id="previewChange">-</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="border rounded p-3 bg-light">
                                            <small class="text-muted d-block">After</small>
                                            <h4 class="mb-0" id="previewAfter">-</h4>
                                        </div>
                                    </div>
                                </div>

                                <div id="lowStockWarning" class="alert alert-warning mt-3" style="display: none;">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Warning:</strong> Stock will be below reorder level after this movement!
                                </div>

                                <div id="negativeStockWarning" class="alert alert-danger mt-3" style="display: none;">
                                    <i class="fas fa-times-circle me-2"></i>
                                    <strong>Error:</strong> This movement will result in negative stock! Please adjust the quantity.
                                </div>
                            </div>
                        </div>

                        <!-- Help Text -->
                        <div class="alert alert-light border">
                            <h6><i class="fas fa-question-circle me-2"></i>Movement Types Explained:</h6>
                            <ul class="mb-0 small">
                                <li><strong>Stock IN:</strong> Use when receiving new stock from suppliers</li>
                                <li><strong>Stock OUT:</strong> Use when stock is sold or consumed</li>
                                <li><strong>Adjustment IN:</strong> Use to correct stock counts (increase)</li>
                                <li><strong>Adjustment OUT:</strong> Use to correct stock counts (decrease)</li>
                                <li><strong>Return:</strong> Use when customers return products</li>
                            </ul>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'pos:inventory_movement_list' %}" class="btn btn-secondary">
                                <i class="fas fa-times me-1"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-save me-1"></i> Record Movement
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productSelect = document.getElementById('{{ form.product.id_for_label }}');
    const movementTypeSelect = document.getElementById('{{ form.movement_type.id_for_label }}');
    const quantityInput = document.getElementById('{{ form.quantity.id_for_label }}');
    const submitBtn = document.getElementById('submitBtn');
    
    // Product data (you may want to pass this from the view as JSON)
    const productData = {};
    
    // Function to update preview
    function updatePreview() {
        const productId = productSelect.value;
        const movementType = movementTypeSelect.value;
        const quantity = parseFloat(quantityInput.value) || 0;
        
        if (!productId || !movementType || quantity <= 0) {
            document.getElementById('movementPreview').style.display = 'none';
            return;
        }
        
        // Get product option
        const selectedOption = productSelect.options[productSelect.selectedIndex];
        const currentStock = parseFloat(selectedOption.dataset.stock || 0);
        const reorderLevel = parseFloat(selectedOption.dataset.reorder || 0);
        const unit = selectedOption.dataset.unit || 'units';
        
        // Show current stock info
        const currentStockInfo = document.getElementById('currentStockInfo');
        const currentStockValue = document.getElementById('currentStockValue');
        currentStockValue.textContent = currentStock.toFixed(2) + ' ' + unit;
        currentStockInfo.style.display = 'block';
        
        // Calculate new stock
        let newStock = currentStock;
        let changePrefix = '';
        
        if (movementType === 'IN' || movementType === 'ADJUSTMENT_IN' || movementType === 'RETURN') {
            newStock = currentStock + quantity;
            changePrefix = '+';
        } else if (movementType === 'OUT' || movementType === 'ADJUSTMENT_OUT') {
            newStock = currentStock - quantity;
            changePrefix = '-';
        }
        
        // Update preview
        document.getElementById('previewBefore').textContent = currentStock.toFixed(2);
        document.getElementById('previewAfter').textContent = newStock.toFixed(2);
        document.getElementById('previewChange').textContent = changePrefix + quantity.toFixed(2);
        document.getElementById('movementPreview').style.display = 'block';
        
        // Check for warnings
        const lowStockWarning = document.getElementById('lowStockWarning');
        const negativeStockWarning = document.getElementById('negativeStockWarning');
        
        if (newStock < 0) {
            negativeStockWarning.style.display = 'block';
            lowStockWarning.style.display = 'none';
            submitBtn.disabled = true;
            submitBtn.classList.add('btn-danger');
            submitBtn.classList.remove('btn-primary');
        } else {
            negativeStockWarning.style.display = 'none';
            submitBtn.disabled = false;
            submitBtn.classList.remove('btn-danger');
            submitBtn.classList.add('btn-primary');
            
            if (newStock < reorderLevel && reorderLevel > 0) {
                lowStockWarning.style.display = 'block';
            } else {
                lowStockWarning.style.display = 'none';
            }
        }
    }
    
    // Attach event listeners
    productSelect.addEventListener('change', updatePreview);
    movementTypeSelect.addEventListener('change', updatePreview);
    quantityInput.addEventListener('input', updatePreview);
    
    // Initial update
    updatePreview();
    
    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const quantity = parseFloat(quantityInput.value) || 0;
        
        if (quantity <= 0) {
            e.preventDefault();
            alert('Please enter a valid quantity greater than 0');
            return false;
        }
        
        if (submitBtn.disabled) {
            e.preventDefault();
            alert('Cannot submit: This movement would result in negative stock.');
            return false;
        }
        
        // Confirm submission
        const productName = productSelect.options[productSelect.selectedIndex].text;
        const movementType = movementTypeSelect.options[movementTypeSelect.selectedIndex].text;
        const message = `Record ${movementType} of ${quantity} units for ${productName}?`;
        
        if (!confirm(message)) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
{% endblock %}