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

{% block title %}Create Sale - Ghana Wholesale{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-cart-plus"></i> Create New Sale</h2>
    <div>
        <a href="{% url 'pos_dashboard' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Dashboard
        </a>
        <a href="{% url 'quick_sale' %}" class="btn btn-success">
            <i class="fas fa-bolt"></i> Quick Sale
        </a>
    </div>
</div>

<div class="row">
    <!-- Sale Form -->
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-shopping-cart"></i> Sale Details</h5>
            </div>
            <div class="card-body">
                <form method="post" id="saleForm">
                    {% csrf_token %}
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Shop *</label>
                            <select class="form-select" name="shop" id="shopSelect" required>
                                <option value="">Select Shop</option>
                                {% for shop in shops %}
                                <option value="{{ shop.id }}">{{ shop.name }} ({{ shop.code }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Customer (Optional)</label>
                            <select class="form-select" name="customer" id="customerSelect">
                                <option value="">Select Customer</option>
                                {% for customer in customers %}
                                <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.phone }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Discount %</label>
                            <input type="number" class="form-control" name="discount_percentage" 
                                   value="0" min="0" max="100" step="0.01">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Discount Amount (GH₵)</label>
                            <input type="number" class="form-control" name="discount_amount" 
                                   value="0" min="0" step="0.01">
                        </div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" name="vat_invoice" id="vatInvoice">
                        <label class="form-check-label" for="vatInvoice">VAT Invoice</label>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Notes (Optional)</label>
                        <textarea class="form-control" name="notes" rows="2"></textarea>
                    </div>
                    
                    <input type="hidden" name="items" id="itemsData" value="[]">
                </form>
            </div>
        </div>
        
        <!-- Add Products -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-plus-circle"></i> Add Products</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="productSearch" 
                               placeholder="Search product by name, SKU or barcode">
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-primary w-100" onclick="searchProducts()">
                            <i class="fas fa-search"></i> Search
                        </button>
                    </div>
                </div>
                
                <div id="searchResults" class="mb-3">
                    <div class="text-center text-muted">
                        <i class="fas fa-search fa-2x"></i>
                        <p>Search for products to add</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Sale Items -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-list"></i> Sale Items</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="itemsTable">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Quantity</th>
                                <th>Unit Price</th>
                                <th>Discount</th>
                                <th>Total</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="itemsTableBody">
                            <!-- Items will be added here -->
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="text-end"><strong>Subtotal:</strong></td>
                                <td><strong id="subtotal">GH₵ 0.00</strong></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end"><strong>VAT (15%):</strong></td>
                                <td><strong id="vatAmount">GH₵ 0.00</strong></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end"><strong>Total:</strong></td>
                                <td><strong id="totalAmount" class="text-success">GH₵ 0.00</strong></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <div class="text-center mt-3">
                    <button type="submit" form="saleForm" class="btn btn-success btn-lg">
                        <i class="fas fa-check-circle"></i> Create Sale & Process Payment
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Quick Search -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0"><i class="fas fa-barcode"></i> Quick Add</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Barcode/SKU</label>
                    <input type="text" class="form-control" id="quickBarcode" 
                           placeholder="Scan barcode">
                </div>
                <div class="mb-3">
                    <label class="form-label">Quantity</label>
                    <input type="number" class="form-control" id="quickQuantity" value="1" min="0.01" step="0.01">
                </div>
                <button class="btn btn-primary w-100" onclick="quickAddProduct()">
                    <i class="fas fa-plus"></i> Add Product
                </button>
            </div>
        </div>
        
        <!-- Sale Summary -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-calculator"></i> Sale Summary</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span>Items:</span>
                    <strong id="summaryItems">0</strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Subtotal:</span>
                    <strong id="summarySubtotal">GH₵ 0.00</strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Discount:</span>
                    <strong class="text-danger" id="summaryDiscount">GH₵ 0.00</strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>VAT (15%):</span>
                    <strong id="summaryVAT">GH₵ 0.00</strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Total:</span>
                    <strong class="text-success" id="summaryTotal">GH₵ 0.00</strong>
                </div>
                
                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle"></i>
                    After creating sale, you will proceed to payment processing.
                </div>
            </div>
        </div>
        
        <!-- Help -->
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-question-circle"></i> Help</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li><i class="fas fa-check text-success"></i> Select shop first</li>
                    <li><i class="fas fa-check text-success"></i> Search/add products</li>
                    <li><i class="fas fa-check text-success"></i> Adjust quantities</li>
                    <li><i class="fas fa-check text-success"></i> Apply discounts if needed</li>
                    <li><i class="fas fa-check text-success"></i> Create sale & process payment</li>
                </ul>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
let saleItems = [];
let currentShop = null;

document.addEventListener('DOMContentLoaded', function() {
    // Watch for shop changes
    document.getElementById('shopSelect').addEventListener('change', function() {
        currentShop = this.value;
        if (saleItems.length > 0 && !confirm('Changing shop will clear all items. Continue?')) {
            this.value = currentShop;
        } else {
            saleItems = [];
            updateItemsTable();
        }
    });
    
    // Handle form submission
    document.getElementById('saleForm').addEventListener('submit', function(e) {
        if (saleItems.length === 0) {
            e.preventDefault();
            alert('Please add at least one product to the sale.');
            return;
        }
        
        // Update items data
        document.getElementById('itemsData').value = JSON.stringify(saleItems);
    });
    
    // Handle quick barcode search
    document.getElementById('quickBarcode').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            quickAddProduct();
        }
    });
});

function searchProducts() {
    const query = document.getElementById('productSearch').value;
    if (!query) {
        alert('Please enter search term');
        return;
    }
    
    if (!currentShop) {
        alert('Please select a shop first');
        return;
    }
    
    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>Searching...</p>
        </div>
    `;
    
    fetch(`/sales/api/shop/${currentShop}/products/?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            if (data.results.length === 0) {
                resultsDiv.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        No products found
                    </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">
                                    ${product.sku} | ${product.barcode} | 
                                    Available: ${product.available} ${product.unit}
                                </small>
                                <br>
                                <small>Cost: GH₵${product.cost_price} | Price: GH₵${product.selling_price}</small>
                            </div>
                            <button class="btn btn-sm btn-primary" 
                                    onclick="addProductToSale(${product.id}, '${product.name.replace(/'/g, "\\'")}', 
                                    '${product.sku}', ${product.available}, ${product.selling_price}, ${product.shop_inventory_id})">
                                <i class="fas fa-plus"></i> Add
                            </button>
                        </div>
                    </div>
                `;
            });
            html += '</div>';
            resultsDiv.innerHTML = html;
        })
        .catch(error => {
            resultsDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    Error searching products
                </div>
            `;
        });
}

function quickAddProduct() {
    const barcode = document.getElementById('quickBarcode').value.trim();
    const quantity = parseFloat(document.getElementById('quickQuantity').value) || 1;
    
    if (!barcode) {
        alert('Please enter barcode/SKU');
        return;
    }
    
    if (!currentShop) {
        alert('Please select a shop first');
        return;
    }
    
    fetch(`/sales/api/shop/${currentShop}/products/?barcode=${encodeURIComponent(barcode)}`)
        .then(response => response.json())
        .then(data => {
            if (data.results.length > 0) {
                const product = data.results[0];
                addProductToSale(
                    product.id,
                    product.name,
                    product.sku,
                    product.available,
                    product.selling_price,
                    product.shop_inventory_id
                );
                document.getElementById('quickBarcode').value = '';
                document.getElementById('quickQuantity').value = 1;
            } else {
                alert('Product not found');
            }
        })
        .catch(error => {
            alert('Error searching product');
        });
}

function addProductToSale(productId, productName, sku, available, unitPrice, shopInventoryId) {
    const existingItem = saleItems.find(item => item.product_id === productId);
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        saleItems.push({
            product_id: productId,
            name: productName,
            sku: sku,
            available: available,
            shop_inventory_id: shopInventoryId,
            quantity: 1,
            unit_price: parseFloat(unitPrice),
            discount: 0
        });
    }
    
    updateItemsTable();
    document.getElementById('productSearch').value = '';
    document.getElementById('searchResults').innerHTML = '';
}

function updateItemsTable() {
    const tableBody = document.getElementById('itemsTableBody');
    let subtotal = 0;
    
    if (saleItems.length === 0) {
        tableBody.innerHTML = `
            <tr id="emptyRow">
                <td colspan="6" class="text-center text-muted py-4">
                    <i class="fas fa-shopping-cart fa-2x"></i>
                    <p class="mt-2">No products added yet</p>
                </td>
            </tr>
        `;
    } else {
        let html = '';
        saleItems.forEach((item, index) => {
            const itemTotal = (item.quantity * item.unit_price) - item.discount;
            subtotal += itemTotal;
            
            html += `
                <tr id="itemRow${index}">
                    <td>
                        <strong>${item.name}</strong><br>
                        <small class="text-muted">${item.sku}</small>
                    </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="0.01" max="${item.available}"
                                   step="0.01" onchange="updateQuantityInput(${index}, this.value)">
                            <button class="btn btn-outline-secondary" type="button" onclick="updateQuantity(${index}, 1)">+</button>
                        </div>
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm" 
                               value="${item.unit_price}" min="0" step="0.01"
                               onchange="updateUnitPrice(${index}, this.value)" style="width: 100px;">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm" 
                               value="${item.discount}" min="0" step="0.01"
                               onchange="updateDiscount(${index}, this.value)" style="width: 100px;">
                    </td>
                    <td class="text-success">GH₵ ${itemTotal.toFixed(2)}</td>
                    <td>
                        <button class="btn btn-sm btn-danger" onclick="removeItem(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
        });
        tableBody.innerHTML = html;
    }
    
    // Get discount values
    const discountPercentage = parseFloat(document.querySelector('input[name="discount_percentage"]').value) || 0;
    const discountAmount = parseFloat(document.querySelector('input[name="discount_amount"]').value) || 0;
    
    // Calculate discounts
    let totalDiscount = discountAmount;
    if (discountPercentage > 0) {
        totalDiscount += (subtotal * discountPercentage) / 100;
    }
    
    const vatAmount = (subtotal - totalDiscount) * 0.15;
    const totalAmount = (subtotal - totalDiscount) + vatAmount;
    
    // Update display
    document.getElementById('subtotal').textContent = `GH₵ ${subtotal.toFixed(2)}`;
    document.getElementById('vatAmount').textContent = `GH₵ ${vatAmount.toFixed(2)}`;
    document.getElementById('totalAmount').textContent = `GH₵ ${totalAmount.toFixed(2)}`;
    
    // Update summary
    document.getElementById('summaryItems').textContent = saleItems.length;
    document.getElementById('summarySubtotal').textContent = `GH₵ ${subtotal.toFixed(2)}`;
    document.getElementById('summaryDiscount').textContent = `GH₵ ${totalDiscount.toFixed(2)}`;
    document.getElementById('summaryVAT').textContent = `GH₵ ${vatAmount.toFixed(2)}`;
    document.getElementById('summaryTotal').textContent = `GH₵ ${totalAmount.toFixed(2)}`;
    
    // Update hidden field
    document.getElementById('itemsData').value = JSON.stringify(saleItems);
}

function updateQuantity(index, change) {
    const item = saleItems[index];
    const newQuantity = parseFloat(item.quantity) + change;
    
    if (newQuantity < 0.01) {
        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 = saleItems[index];
    const newQuantity = parseFloat(value) || 0.01;
    
    if (newQuantity < 0.01) {
        removeItem(index);
        return;
    }
    
    if (newQuantity > item.available) {
        alert(`Cannot exceed available stock: ${item.available}`);
        item.quantity = item.available;
    } else {
        item.quantity = newQuantity;
    }
    
    updateItemsTable();
}

function updateUnitPrice(index, value) {
    const item = saleItems[index];
    const newPrice = parseFloat(value) || 0;
    
    if (newPrice < 0) {
        alert('Price cannot be negative');
        item.unit_price = 0;
    } else {
        item.unit_price = newPrice;
    }
    
    updateItemsTable();
}

function updateDiscount(index, value) {
    const item = saleItems[index];
    const newDiscount = parseFloat(value) || 0;
    
    if (newDiscount < 0) {
        alert('Discount cannot be negative');
        item.discount = 0;
    } else {
        item.discount = newDiscount;
    }
    
    updateItemsTable();
}

function removeItem(index) {
    if (confirm('Remove this item from sale?')) {
        saleItems.splice(index, 1);
        updateItemsTable();
    }
}
</script>
{% endblock %}