{% extends 'base.html' %}

{% block title %}Create Transfer Order - Ghana Wholesale{% endblock %}

{% block page_icon %}bi-truck{% endblock %}
{% block page_title %}Create Transfer Order{% endblock %}
{% block page_subtitle %}Transfer stock between shops{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header card-header-ghana">
                <h5 class="mb-0"><i class="bi bi-clipboard-plus me-2"></i>Transfer Details</h5>
            </div>
            <div class="card-body">
                <form method="post" id="transferForm">
                    {% csrf_token %}
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="id_from_shop" class="form-label">From Shop</label>
                            {{ form.from_shop }}
                            {% if form.from_shop.errors %}
                            <div class="text-danger small">{{ form.from_shop.errors }}</div>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <label for="id_to_shop" class="form-label">To Shop</label>
                            {{ form.to_shop }}
                            {% if form.to_shop.errors %}
                            <div class="text-danger small">{{ form.to_shop.errors }}</div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="id_priority" class="form-label">Priority</label>
                            {{ form.priority }}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="id_notes" class="form-label">Notes (Optional)</label>
                        {{ form.notes }}
                    </div>
                    
                    <input type="hidden" name="items" id="itemsData" value="[]">
                    
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        Add items using the product search below. First select a source shop, then search for products.
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Items Table -->
        <div class="card mt-4">
            <div class="card-header card-header-ghana">
                <h5 class="mb-0"><i class="bi bi-list-check me-2"></i>Transfer Items</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="itemsTable">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>SKU</th>
                                <th>Available</th>
                                <th>Quantity</th>
                                <th>Unit Cost</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="itemsTableBody">
                            <!-- Items will be added here via JavaScript -->
                            <tr id="emptyRow">
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="bi bi-inbox display-6"></i>
                                    <p class="mt-2">No items added yet. Select a source shop and search for products.</p>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="text-end fw-bold">Total:</td>
                                <td class="fw-bold" id="totalValue">GH₵ 0.00</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <div class="text-center mt-3">
                    <button class="btn btn-outline-primary" onclick="openProductSearch()" id="addProductBtn" disabled>
                        <i class="bi bi-plus-circle me-1"></i>Add Product
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Product Search -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-search me-2"></i>Add Products</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Search Products</label>
                    <div class="input-group">
                        <input type="text" class="form-control" 
                               id="productSearch" placeholder="Enter product name, SKU or barcode" 
                               onkeypress="handleProductSearch(event)">
                        <button class="btn btn-primary" type="button" onclick="searchProduct()" id="searchBtn" disabled>
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                    <small class="text-muted">First select a source shop above</small>
                </div>
                
                <div id="searchResults" class="mt-3">
                    <!-- Search results will appear here -->
                </div>
                
                <div class="mt-3">
                    <a href="{% url 'fast_transfer' %}" class="btn btn-success w-100">
                        <i class="bi bi-lightning me-1"></i>Use Fast Transfer
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Quick Summary -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Transfer Summary</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Total Items:</span>
                        <span class="fw-bold" id="summaryItems">0</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Total Quantity:</span>
                        <span class="fw-bold" id="summaryQuantity">0</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Total Value:</span>
                        <span class="fw-bold ghana-currency" id="summaryValue">GH₵ 0.00</span>
                    </li>
                </ul>
                
                <div class="mt-4">
                    <button type="submit" form="transferForm" class="btn btn-primary w-100" id="submitBtn" disabled>
                        <i class="bi bi-check-circle me-1"></i>Create Transfer Order
                    </button>
                    <a href="{% url 'transfer_list' %}" class="btn btn-outline-secondary w-100 mt-2">
                        <i class="bi bi-x-circle me-1"></i>Cancel
                    </a>
                </div>
                
                <div class="alert alert-warning mt-3 small">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    <strong>Note:</strong> Transfer will be created as "Pending" and must be approved before shipping.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product Search Modal -->
<div class="modal fade" id="productSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Search Products</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="modalSearch" 
                           placeholder="Search by name, SKU, or barcode">
                    <button class="btn btn-primary" onclick="searchProductsModal()" id="modalSearchBtn">
                        <i class="bi bi-search"></i> Search
                    </button>
                </div>
                <div id="modalSearchResults" class="mt-3">
                    <div class="text-center text-muted">
                        <i class="bi bi-search display-6"></i>
                        <p>Enter search term to find products</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    let transferItems = [];
    let currentFromShop = null;
    
    // Initialize when page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Watch for from_shop changes
        document.getElementById('id_from_shop').addEventListener('change', function() {
            currentFromShop = this.value;
            const addProductBtn = document.getElementById('addProductBtn');
            const searchBtn = document.getElementById('searchBtn');
            const modalSearchBtn = document.getElementById('modalSearchBtn');
            
            if (currentFromShop) {
                addProductBtn.disabled = false;
                searchBtn.disabled = false;
                modalSearchBtn.disabled = false;
            } else {
                addProductBtn.disabled = true;
                searchBtn.disabled = true;
                modalSearchBtn.disabled = true;
            }
            
            // Clear items if shop changes
            if (transferItems.length > 0) {
                if (confirm('Changing the source shop will clear all items. Continue?')) {
                    transferItems = [];
                    updateItemsTable();
                } else {
                    this.value = currentFromShop;
                }
            }
        });
        
        // Initialize form fields
        $('select').addClass('form-select');
        $('textarea').addClass('form-control');
    });
    
    function openProductSearch() {
        if (!currentFromShop) {
            alert('Please select a source shop first');
            return;
        }
        $('#productSearchModal').modal('show');
    }
    
    function searchProductsModal() {
        const query = document.getElementById('modalSearch').value;
        if (!query) {
            alert('Please enter a search term');
            return;
        }
        
        if (!currentFromShop) {
            alert('Please select a source shop first');
            return;
        }
        
        // Show loading
        const resultsDiv = document.getElementById('modalSearchResults');
        resultsDiv.innerHTML = `
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Searching...</p>
            </div>
        `;
        
        // Search products (use general product search, not shop-specific)
        fetch(`/inventory/api/product-search/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.results.length === 0) {
                    resultsDiv.innerHTML = `
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            No products found matching "${query}"
                        </div>
                    `;
                    return;
                }
                
                let html = '<div class="list-group">';
                data.results.forEach(product => {
                    html += `
                        <div class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">${product.name}</h6>
                                    <small class="text-muted">
                                        SKU: ${product.sku} | 
                                        Barcode: ${product.barcode || 'N/A'} |
                                        Category: ${product.category || 'N/A'}
                                    </small>
                                    <br>
                                    <small>
                                        Cost: GH₵${product.cost_price} | 
                                        Selling: GH₵${product.selling_price} |
                                        Stock: ${product.warehouse_stock}
                                    </small>
                                </div>
                                <button class="btn btn-sm btn-primary" 
                                        onclick="addProductToTransfer(${product.id}, '${product.name.replace(/'/g, "\\'")}', '${product.sku}', ${product.warehouse_stock}, ${product.cost_price})">
                                    <i class="bi bi-plus"></i> Add
                                </button>
                            </div>
                        </div>
                    `;
                });
                html += '</div>';
                resultsDiv.innerHTML = html;
            })
            .catch(error => {
                console.error('Error:', error);
                resultsDiv.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Error searching products: ${error}
                    </div>
                `;
            });
    }
    
    function addProductToTransfer(productId, productName, sku, available, costPrice) {
        // Check if product already added
        const existingItem = transferItems.find(item => item.product_id === productId);
        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            transferItems.push({
                product_id: productId,
                name: productName,
                sku: sku,
                available: available,
                quantity: 1,
                unit_cost: parseFloat(costPrice)
            });
        }
        
        updateItemsTable();
        $('#productSearchModal').modal('hide');
        document.getElementById('modalSearch').value = '';
        document.getElementById('modalSearchResults').innerHTML = '';
    }
    
    function updateItemsTable() {
        const tableBody = document.getElementById('itemsTableBody');
        let totalItems = 0;
        let totalQuantity = 0;
        let totalValue = 0;
        
        if (transferItems.length === 0) {
            tableBody.innerHTML = `
                <tr id="emptyRow">
                    <td colspan="7" class="text-center text-muted py-4">
                        <i class="bi bi-inbox display-6"></i>
                        <p class="mt-2">No items added yet. Select a source shop and search for products.</p>
                    </td>
                </tr>
            `;
        } else {
            let html = '';
            transferItems.forEach((item, index) => {
                const itemTotal = item.quantity * item.unit_cost;
                totalItems++;
                totalQuantity += item.quantity;
                totalValue += itemTotal;
                
                html += `
                    <tr id="itemRow${index}">
                        <td>${item.name}</td>
                        <td>${item.sku}</td>
                        <td>${item.available}</td>
                        <td>
                            <div class="input-group input-group-sm" style="width: 120px;">
                                <button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(${index}, -1)">-</button>
                                <input type="number" class="form-control text-center" 
                                       value="${item.quantity}" min="1" max="${item.available}"
                                       onchange="updateQuantityInput(${index}, this.value)">
                                <button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(${index}, 1)">+</button>
                            </div>
                        </td>
                        <td>GH₵ ${item.unit_cost.toFixed(2)}</td>
                        <td>GH₵ ${itemTotal.toFixed(2)}</td>
                        <td>
                            <button class="btn btn-sm btn-danger" onclick="removeItem(${index})">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
            });
            tableBody.innerHTML = html;
        }
        
        // Update totals
        document.getElementById('totalValue').textContent = `GH₵ ${totalValue.toFixed(2)}`;
        document.getElementById('summaryItems').textContent = totalItems;
        document.getElementById('summaryQuantity').textContent = totalQuantity;
        document.getElementById('summaryValue').textContent = `GH₵ ${totalValue.toFixed(2)}`;
        
        // Update hidden field for form submission
        document.getElementById('itemsData').value = JSON.stringify(transferItems);
        
        // Validate form
        validateForm();
    }
    
    function updateQuantity(index, change) {
        const item = transferItems[index];
        const newQuantity = item.quantity + change;
        
        if (newQuantity < 1) {
            removeItem(index);
            return;
        }
        
        if (newQuantity > item.available) {
            alert(`Cannot exceed available stock: ${item.available}`);
            return;
        }
        
        item.quantity = newQuantity;
        updateItemsTable();
    }
    
    function updateQuantityInput(index, value) {
        const item = transferItems[index];
        const newQuantity = parseInt(value) || 1;
        
        if (newQuantity < 1) {
            removeItem(index);
            return;
        }
        
        if (newQuantity > item.available) {
            alert(`Cannot exceed available stock: ${item.available}`);
            item.quantity = item.available;
        } else {
            item.quantity = newQuantity;
        }
        
        updateItemsTable();
    }
    
    function removeItem(index) {
        if (confirm('Remove this item from transfer?')) {
            transferItems.splice(index, 1);
            updateItemsTable();
        }
    }
    
    function validateForm() {
        const submitBtn = document.getElementById('submitBtn');
        const fromShop = document.getElementById('id_from_shop').value;
        const toShop = document.getElementById('id_to_shop').value;
        
        if (transferItems.length === 0 || !fromShop || !toShop || fromShop === toShop) {
            submitBtn.disabled = true;
            submitBtn.classList.add('disabled');
        } else {
            submitBtn.disabled = false;
            submitBtn.classList.remove('disabled');
        }
    }
    
    // Handle search in main input
    function handleProductSearch(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchProduct();
        }
    }
    
    function searchProduct() {
        const query = document.getElementById('productSearch').value;
        if (!query) {
            alert('Please enter a search term');
            return;
        }
        
        if (!currentFromShop) {
            alert('Please select a source shop first');
            return;
        }
        
        // Show loading
        const resultsDiv = document.getElementById('searchResults');
        resultsDiv.innerHTML = `
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Searching...</p>
            </div>
        `;
        
        fetch(`/inventory/api/product-search/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.results.length === 0) {
                    resultsDiv.innerHTML = `
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            No products found
                        </div>
                    `;
                    return;
                }
                
                const product = data.results[0]; // Take first result
                addProductToTransfer(
                    product.id,
                    product.name,
                    product.sku,
                    product.warehouse_stock,
                    product.cost_price
                );
                
                document.getElementById('productSearch').value = '';
                resultsDiv.innerHTML = `
                    <div class="alert alert-success">
                        <i class="bi bi-check-circle me-2"></i>
                        Added ${product.name} to transfer
                    </div>
                `;
                
                // Clear success message after 2 seconds
                setTimeout(() => {
                    resultsDiv.innerHTML = '';
                }, 2000);
            })
            .catch(error => {
                console.error('Error:', error);
                resultsDiv.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Error searching product
                    </div>
                `;
            });
    }
    
    // Validate form when shops change
    document.getElementById('id_from_shop').addEventListener('change', validateForm);
    document.getElementById('id_to_shop').addEventListener('change', validateForm);
    
    // Initialize validation
    validateForm();
</script>

<!-- Add jQuery if not already included -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% endblock %}