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

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

{% block content %}
<style>
    /* Offline status indicators */
    .offline-banner {
        background: #ffc107;
        color: #000;
        padding: 10px 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: none;
        align-items: center;
        gap: 10px;
    }
    .online-banner {
        background: #28a745;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: none;
        align-items: center;
        gap: 10px;
    }
    .sync-banner {
        background: #17a2b8;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: none;
        align-items: center;
        gap: 10px;
    }
    .product-search {
        position: relative;
    }
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        max-height: 300px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .search-result-item {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .search-result-item:hover {
        background-color: #f8f9fa;
    }
    .stock-low {
        color: #dc3545;
        font-weight: bold;
    }
    .stock-ok {
        color: #28a745;
    }
    .offline-badge {
        background: #6c757d;
        color: white;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 12px;
        margin-left: 10px;
    }
</style>

<div class="container-fluid py-4">
    <!-- STATUS BANNERS -->
    <div id="offlineBanner" class="offline-banner">
        <i class="fas fa-wifi-slash fa-2x"></i>
        <div>
            <strong>🔴 OFFLINE MODE</strong><br>
            <span id="offlineMessage">You are selling from locally saved stock. Sales will be saved and synced when internet returns.</span>
        </div>
        <span class="offline-badge" id="stockDateBadge"></span>
    </div>
    
    <div id="onlineBanner" class="online-banner">
        <i class="fas fa-wifi fa-2x"></i>
        <div>
            <strong>🟢 ONLINE MODE</strong><br>
            <span id="onlineMessage">Connected to server. Stock is live.</span>
        </div>
    </div>
    
    <div id="syncBanner" class="sync-banner">
        <i class="fas fa-sync fa-spin fa-2x"></i>
        <div>
            <strong>🔄 SYNC IN PROGRESS</strong><br>
            <span id="syncMessage">Downloading latest stock and transfers...</span>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col">
            <h1 class="h3 mb-0">Create New Sale</h1>
            <p class="text-muted" id="modeDescription">Loading...</p>
        </div>
        <div class="col-auto">
            <button onclick="forceSync()" class="btn btn-info" id="syncButton">
                <i class="fas fa-sync"></i> Sync Now
            </button>
            <a href="{% url 'pos_dashboard' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <form method="post" id="saleForm">
        {% csrf_token %}
        
        <div class="row">
            <!-- Left Column: Sale Details -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">Sale Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Shop *</label>
                                <select name="shop" class="form-select" required id="shopSelect">
                                    <option value="">Select Shop</option>
                                    {% for shop in shops %}
                                    <option value="{{ shop.id }}" 
                                            data-code="{{ shop.code }}"
                                            data-name="{{ shop.name }}">
                                        {{ shop.name }} ({{ shop.shop_type|title }})
                                    </option>
                                    {% endfor %}
                                </select>
                                <small class="text-muted" id="shopStockInfo"></small>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Customer</label>
                                <select name="customer" class="form-select" id="customerSelect">
                                    <option value="">Walk-in Customer</option>
                                    {% for customer in customers %}
                                    <option value="{{ customer.id }}">{{ customer.name }} ({{ customer.phone }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">Payment Method</label>
                                <select name="payment_method" class="form-select">
                                    <option value="cash">Cash</option>
                                    <option value="mobile_money">Mobile Money</option>
                                    <option value="card">Card</option>
                                    <option value="credit">Credit</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                </select>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">Discount %</label>
                                <input type="number" name="discount_percentage" class="form-control" 
                                       step="0.01" min="0" max="100" value="0" id="discountPercent">
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">Discount Amount (GH₵)</label>
                                <input type="number" name="discount_amount" class="form-control" 
                                       step="0.01" min="0" value="0" id="discountAmount">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Product Search -->
                <div class="card mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-search"></i> Add Products
                            <span id="stockMode" class="badge bg-light text-dark ms-2"></span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="product-search mb-3">
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" id="productSearch" 
                                       placeholder="Search by name, SKU or barcode..." autocomplete="off">
                                <button class="btn btn-outline-secondary" type="button" onclick="scanBarcode()">
                                    <i class="fas fa-barcode"></i>
                                </button>
                            </div>
                            <div class="search-results" id="searchResults"></div>
                        </div>
                        
                        <div class="sale-items-table">
                            <table class="table table-hover" id="saleItemsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>Product</th>
                                        <th>Quantity</th>
                                        <th>Unit Price (GH₵)</th>
                                        <th>Discount (GH₵)</th>
                                        <th>Total (GH₵)</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="saleItemsBody"></tbody>
                            </table>
                        </div>
                        
                        <div class="text-center" id="emptyCartMessage">
                            <p class="text-muted">No products added yet. Search and add products above.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Summary & Actions -->
            <div class="col-md-4">
                <div class="sticky-top" style="top: 20px;">
                    <div class="card mb-4">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">Order Summary</h5>
                        </div>
                        <div class="card-body">
                            <div class="total-display mb-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Subtotal:</span>
                                    <span id="subtotalDisplay">GH₵ 0.00</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Discount:</span>
                                    <span id="discountDisplay">- GH₵ 0.00</span>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between fs-5">
                                    <strong>Total:</strong>
                                    <strong id="totalDisplay">GH₵ 0.00</strong>
                                </div>
                                <div class="mt-2 text-muted small" id="modeIndicator"></div>
                            </div>
                            
                            <input type="hidden" name="items" id="itemsInput" value="[]">
                            <input type="hidden" name="offline_sale" id="offlineSaleInput" value="false">
                            <input type="hidden" name="offline_id" id="offlineIdInput" value="">
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg" id="createSaleBtn">
                                    <i class="fas fa-cart-check"></i> <span id="submitBtnText">Create Sale & Print Receipt</span>
                                </button>
                                <button type="button" class="btn btn-outline-danger" onclick="clearCart()">
                                    <i class="fas fa-trash"></i> Clear All Items
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
// ============================================
// OFFLINE POS SYSTEM - COMPLETE SOLUTION
// ============================================

// Global variables
let saleItems = [];
let selectedShopId = null;
let localInventory = {};
let localProducts = {};
let localCustomers = {};
let isOfflineMode = false;
let syncInProgress = false;

// ============ INITIALIZATION ============
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 POS System Starting...');
    
    // Check internet status
    isOfflineMode = !navigator.onLine;
    
    // Setup event listeners
    setupEventListeners();
    
    // Load saved data from localStorage
    loadLocalData();
    
    // Update UI based on online/offline status
    updateUIForConnectionStatus();
    
    // If online, sync immediately
    if (navigator.onLine) {
        syncAllData();
    }
});

function setupEventListeners() {
    // Shop selection
    document.getElementById('shopSelect').addEventListener('change', function(e) {
        selectedShopId = this.value;
        if (selectedShopId) {
            localStorage.setItem('selected_shop_id', selectedShopId);
            localStorage.setItem('selected_shop_name', this.options[this.selectedIndex].text);
            enableProductSearch();
            updateShopStockInfo();
        } else {
            disableProductSearch();
        }
    });
    
    // Product search
    document.getElementById('productSearch').addEventListener('input', function(e) {
        clearTimeout(window.searchTimeout);
        window.searchTimeout = setTimeout(() => {
            searchProducts(e.target.value);
        }, 300);
    });
    
    // Enter key in search
    document.getElementById('productSearch').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            if (this.value.trim() && selectedShopId) {
                searchProducts(this.value);
            }
        }
    });
    
    // Discount changes
    document.getElementById('discountPercent').addEventListener('input', updateCartDisplay);
    document.getElementById('discountAmount').addEventListener('input', updateCartDisplay);
    
    // Online/Offline events
    window.addEventListener('online', function() {
        console.log('🟢 Device is ONLINE');
        isOfflineMode = false;
        updateUIForConnectionStatus();
        syncAllData();
    });
    
    window.addEventListener('offline', function() {
        console.log('🔴 Device is OFFLINE');
        isOfflineMode = true;
        updateUIForConnectionStatus();
    });
}

// ============ LOCAL STORAGE MANAGEMENT ============
function loadLocalData() {
    console.log('📂 Loading local data...');
    
    // Load inventory
    const savedInventory = localStorage.getItem('shop_inventory');
    if (savedInventory) {
        try {
            localInventory = JSON.parse(savedInventory);
            console.log('✅ Loaded inventory:', Object.keys(localInventory).length, 'products');
        } catch (e) {
            console.error('Failed to parse inventory:', e);
            localInventory = {};
        }
    }
    
    // Load products
    const savedProducts = localStorage.getItem('products');
    if (savedProducts) {
        try {
            localProducts = JSON.parse(savedProducts);
            console.log('✅ Loaded products:', Object.keys(localProducts).length, 'products');
        } catch (e) {
            console.error('Failed to parse products:', e);
            localProducts = {};
        }
    }
    
    // Load customers
    const savedCustomers = localStorage.getItem('customers');
    if (savedCustomers) {
        try {
            localCustomers = JSON.parse(savedCustomers);
            console.log('✅ Loaded customers:', Object.keys(localCustomers).length, 'customers');
        } catch (e) {
            console.error('Failed to parse customers:', e);
            localCustomers = {};
        }
    }
    
    // Load selected shop
    selectedShopId = localStorage.getItem('selected_shop_id');
    if (selectedShopId) {
        const shopSelect = document.getElementById('shopSelect');
        if (shopSelect) {
            shopSelect.value = selectedShopId;
            enableProductSearch();
            updateShopStockInfo();
        }
    }
}

function saveInventoryToLocalStorage(inventoryData) {
    // Convert array to object with product_id as key
    const inventoryObj = {};
    inventoryData.forEach(item => {
        const key = `${item.product_id}`;
        inventoryObj[key] = {
            product_id: item.product_id,
            product_name: item.product_name,
            product_sku: item.product_sku,
            barcode: item.barcode,
            available: item.available,
            quantity: item.quantity,
            selling_price: item.selling_price,
            unit: item.unit || 'unit'
        };
    });
    
    localInventory = inventoryObj;
    localStorage.setItem('shop_inventory', JSON.stringify(inventoryObj));
    localStorage.setItem('inventory_last_updated', new Date().toISOString());
    console.log('💾 Saved inventory to localStorage');
}

function saveProductsToLocalStorage(products) {
    const productsObj = {};
    products.forEach(product => {
        productsObj[product.id] = product;
    });
    
    localProducts = productsObj;
    localStorage.setItem('products', JSON.stringify(productsObj));
    console.log('💾 Saved products to localStorage');
}

function saveCustomersToLocalStorage(customers) {
    const customersObj = {};
    customers.forEach(customer => {
        customersObj[customer.id] = customer;
    });
    
    localCustomers = customersObj;
    localStorage.setItem('customers', JSON.stringify(customersObj));
    console.log('💾 Saved customers to localStorage');
}

// ============ SYNC DATA (WHEN ONLINE) ============
async function syncAllData() {
    if (!navigator.onLine) {
        alert('Cannot sync: You are offline');
        return;
    }
    
    if (!selectedShopId) {
        alert('Please select a shop first');
        return;
    }
    
    if (syncInProgress) {
        console.log('Sync already in progress');
        return;
    }
    
    syncInProgress = true;
    document.getElementById('syncBanner').style.display = 'flex';
    document.getElementById('syncButton').innerHTML = '<i class="fas fa-sync fa-spin"></i> Syncing...';
    
    try {
        // STEP 1: Sync Products
        await syncProducts();
        
        // STEP 2: Sync Customers
        await syncCustomers();
        
        // STEP 3: Sync Inventory (Current Stock)
        await syncInventory();
        
        // STEP 4: Check for Pending Transfers (New Stock from Warehouse)
        await checkPendingTransfers();
        
        // STEP 5: Upload Offline Sales
        await uploadOfflineSales();
        
        // Show success
        showNotification('✅ Sync complete! Stock is up to date.', 'success');
        
        // Update last sync time
        localStorage.setItem('last_sync_time', new Date().toISOString());
        localStorage.setItem(`shop_${selectedShopId}_last_sync`, new Date().toISOString());
        
        // Update UI
        updateShopStockInfo();
        
    } catch (error) {
        console.error('Sync failed:', error);
        showNotification('❌ Sync failed: ' + error.message, 'danger');
    } finally {
        syncInProgress = false;
        document.getElementById('syncBanner').style.display = 'none';
        document.getElementById('syncButton').innerHTML = '<i class="fas fa-sync"></i> Sync Now';
    }
}

async function syncProducts() {
    console.log('📦 Syncing products...');
    const response = await fetch('/shops/api/all-products/');
    const data = await response.json();
    
    if (data.success) {
        saveProductsToLocalStorage(data.products);
        return data.products;
    } else {
        throw new Error('Failed to sync products');
    }
}

async function syncCustomers() {
    console.log('👥 Syncing customers...');
    const response = await fetch('/shops/api/all-customers/');
    const data = await response.json();
    
    if (data.success) {
        saveCustomersToLocalStorage(data.customers);
        
        // Update customer dropdown
        const customerSelect = document.getElementById('customerSelect');
        if (customerSelect) {
            let html = '<option value="">Walk-in Customer</option>';
            data.customers.forEach(customer => {
                html += `<option value="${customer.id}">${customer.name} (${customer.phone})</option>`;
            });
            customerSelect.innerHTML = html;
        }
        
        return data.customers;
    } else {
        throw new Error('Failed to sync customers');
    }
}

async function syncInventory() {
    console.log('📊 Syncing current inventory...');
    const response = await fetch(`/shops/api/shop-inventory/${selectedShopId}/`);
    const data = await response.json();
    
    if (data.success) {
        saveInventoryToLocalStorage(data.inventory);
        return data.inventory;
    } else {
        throw new Error('Failed to sync inventory');
    }
}

async function checkPendingTransfers() {
    console.log('🚚 Checking for pending warehouse transfers...');
    const response = await fetch(`/shops/api/pending-transfers/${selectedShopId}/`);
    const data = await response.json();
    
    if (data.success && data.pending_transfers && data.pending_transfers.length > 0) {
        console.log(`📦 Found ${data.total_transfers} new transfers with ${data.total_new_stock} units`);
        
        // Update local inventory with new stock
        const updatedInventory = {...localInventory};
        
        data.pending_transfers.forEach(transfer => {
            const key = `${transfer.product_id}`;
            if (updatedInventory[key]) {
                updatedInventory[key].available += transfer.quantity;
                updatedInventory[key].quantity += transfer.quantity;
            } else {
                // New product in shop
                updatedInventory[key] = {
                    product_id: transfer.product_id,
                    product_name: transfer.product_name,
                    product_sku: transfer.product_sku,
                    available: transfer.quantity,
                    quantity: transfer.quantity,
                    selling_price: 0, // Will be updated on next full sync
                    unit: 'unit'
                };
            }
        });
        
        // Save updated inventory
        localInventory = updatedInventory;
        localStorage.setItem('shop_inventory', JSON.stringify(updatedInventory));
        
        // Show notification
        showNotification(`📦 Received ${data.total_new_stock} new items from warehouse!`, 'success');
    } else {
        console.log('No pending transfers');
    }
}

async function uploadOfflineSales() {
    // Get all unsynced offline sales
    const offlineSales = JSON.parse(localStorage.getItem('offline_sales') || '[]');
    const unsyncedSales = offlineSales.filter(sale => !sale.synced);
    
    if (unsyncedSales.length === 0) {
        console.log('No offline sales to upload');
        return;
    }
    
    console.log(`📤 Uploading ${unsyncedSales.length} offline sales...`);
    
    try {
        const response = await fetch('/shops/api/sync-offline-sales/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCSRFToken()
            },
            body: JSON.stringify({
                shop_id: selectedShopId,
                sales: unsyncedSales
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Mark sales as synced
            const syncedIds = data.synced_sales.map(s => s.offline_id);
            const remainingSales = offlineSales.filter(sale => !syncedIds.includes(sale.offline_id));
            localStorage.setItem('offline_sales', JSON.stringify(remainingSales));
            
            console.log(`✅ Uploaded ${data.total_synced} sales`);
            showNotification(`✅ Synced ${data.total_synced} offline sales`, 'success');
        }
    } catch (error) {
        console.error('Failed to upload offline sales:', error);
    }
}

// ============ OFFLINE PRODUCT SEARCH ============
function searchProducts(query) {
    if (!query.trim() || !selectedShopId) {
        document.getElementById('searchResults').style.display = 'none';
        return;
    }
    
    const resultsDiv = document.getElementById('searchResults');
    query = query.toLowerCase();
    
    let results = [];
    
    if (isOfflineMode) {
        // OFFLINE MODE: Search in localStorage
        results = searchLocalProducts(query);
    } else {
        // ONLINE MODE: Search via API
        searchProductsAPI(query);
        return;
    }
    
    // Display results
    if (results.length > 0) {
        let html = '';
        results.forEach(product => {
            const stock = getProductStock(product.id);
            const stockClass = stock <= 5 ? 'stock-low' : 'stock-ok';
            html += `
                <div class="search-result-item" onclick='addProductToCart(${JSON.stringify(product)})'>
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>${product.name}</strong><br>
                            <small class="text-muted">
                                SKU: ${product.sku} | 
                                Stock: <span class="${stockClass}">${stock.toFixed(0)}</span>
                                ${isOfflineMode ? '<span class="badge bg-secondary ms-2">OFFLINE</span>' : ''}
                            </small>
                        </div>
                        <div class="text-end">
                            <span class="text-success fw-bold">GH₵${parseFloat(product.selling_price).toFixed(2)}</span><br>
                            <small class="text-muted">per ${product.unit || 'unit'}</small>
                        </div>
                    </div>
                </div>
            `;
        });
        resultsDiv.innerHTML = html;
        resultsDiv.style.display = 'block';
    } else {
        resultsDiv.innerHTML = '<div class="search-result-item text-muted">No products found in local stock</div>';
        resultsDiv.style.display = 'block';
    }
}

function searchLocalProducts(query) {
    const results = [];
    
    // Search by name, sku, barcode
    Object.values(localProducts).forEach(product => {
        const nameMatch = product.name && product.name.toLowerCase().includes(query);
        const skuMatch = product.sku && product.sku.toLowerCase().includes(query);
        const barcodeMatch = product.barcode && product.barcode.toLowerCase().includes(query);
        
        if (nameMatch || skuMatch || barcodeMatch) {
            // Check if this product has stock in current shop
            const stock = getProductStock(product.id);
            if (stock > 0) {
                results.push(product);
            }
        }
    });
    
    // Limit results
    return results.slice(0, 20);
}

async function searchProductsAPI(query) {
    const resultsDiv = document.getElementById('searchResults');
    
    try {
        const response = await fetch(`/sales/api/shop/${selectedShopId}/products/?q=${encodeURIComponent(query)}`);
        const data = await response.json();
        
        if (data.results && data.results.length > 0) {
            let html = '';
            data.results.forEach(product => {
                html += `
                    <div class="search-result-item" onclick='addProductToCart(${JSON.stringify(product)})'>
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>${product.name}</strong><br>
                                <small class="text-muted">
                                    SKU: ${product.sku} | 
                                    Stock: ${parseFloat(product.available).toFixed(0)}
                                </small>
                            </div>
                            <div class="text-end">
                                <span class="text-success fw-bold">GH₵${parseFloat(product.selling_price).toFixed(2)}</span><br>
                                <small class="text-muted">per ${product.unit || 'unit'}</small>
                            </div>
                        </div>
                    </div>
                `;
            });
            resultsDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
        } else {
            resultsDiv.innerHTML = '<div class="search-result-item text-muted">No products found</div>';
            resultsDiv.style.display = 'block';
        }
    } catch (error) {
        console.error('API search failed:', error);
        // Fallback to offline search
        searchProducts(query);
    }
}

function getProductStock(productId) {
    const key = `${productId}`;
    return localInventory[key]?.available || 0;
}

function getProductPrice(productId) {
    const key = `${productId}`;
    return localInventory[key]?.selling_price || 
           localProducts[productId]?.selling_price || 0;
}

// ============ CART MANAGEMENT ============
function addProductToCart(product) {
    // Check stock
    const availableStock = isOfflineMode ? 
        getProductStock(product.id) : 
        (product.available || 0);
    
    if (availableStock <= 0) {
        alert('This product is out of stock');
        return;
    }
    
    // Check if already in cart
    const existingItem = saleItems.find(item => item.product_id === product.id);
    
    if (existingItem) {
        const newQty = existingItem.quantity + 1;
        if (newQty <= availableStock) {
            existingItem.quantity = newQty;
            updateCartItemRow(existingItem);
        } else {
            alert(`Cannot add more than available stock (${availableStock})`);
        }
    } else {
        // Add new item
        const newItem = {
            product_id: product.id,
            name: product.name || product.product_name,
            sku: product.sku || product.product_sku,
            available: availableStock,
            quantity: 1,
            unit_price: parseFloat(product.selling_price || product.unit_price || getProductPrice(product.id)),
            discount: 0,
            barcode: product.barcode
        };
        
        saleItems.push(newItem);
        addCartItemRow(newItem);
    }
    
    updateCartDisplay();
    
    // Clear search
    document.getElementById('productSearch').value = '';
    document.getElementById('searchResults').style.display = 'none';
}

function addCartItemRow(item) {
    const tableBody = document.getElementById('saleItemsBody');
    const emptyMsg = document.getElementById('emptyCartMessage');
    
    emptyMsg.style.display = 'none';
    
    const row = document.createElement('tr');
    row.id = `item-${item.product_id}`;
    row.innerHTML = `
        <td>
            <strong>${item.name}</strong><br>
            <small class="text-muted">
                SKU: ${item.sku} | 
                Available: ${item.available.toFixed(0)}
                ${isOfflineMode ? '<span class="badge bg-secondary ms-1">OFFLINE</span>' : ''}
            </small>
        </td>
        <td>
            <div class="input-group input-group-sm" style="width: 120px;">
                <button class="btn btn-outline-secondary" type="button" onclick="changeQuantity(${item.product_id}, -1)">-</button>
                <input type="number" class="form-control text-center" 
                       value="${item.quantity}" min="0.01" step="0.01" max="${item.available}"
                       onchange="updateItemQuantity(${item.product_id}, this.value)">
                <button class="btn btn-outline-secondary" type="button" onclick="changeQuantity(${item.product_id}, 1)">+</button>
            </div>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" 
                   value="${item.unit_price.toFixed(2)}" min="0" step="0.01"
                   onchange="updateItemPrice(${item.product_id}, this.value)" style="width: 100px;">
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" 
                   value="${item.discount.toFixed(2)}" min="0" step="0.01"
                   onchange="updateItemDiscount(${item.product_id}, this.value)" style="width: 100px;">
        </td>
        <td class="item-total fw-bold">GH₵ ${(item.quantity * item.unit_price - item.discount).toFixed(2)}</td>
        <td>
            <button class="btn btn-sm btn-outline-danger" onclick="removeItem(${item.product_id})">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tableBody.appendChild(row);
}

function updateCartItemRow(item) {
    const row = document.querySelector(`#item-${item.product_id}`);
    if (row) {
        const quantityInput = row.querySelector('input[type="number"].text-center');
        const priceInput = row.querySelectorAll('input[type="number"].form-control-sm')[0];
        const discountInput = row.querySelectorAll('input[type="number"].form-control-sm')[1];
        const totalCell = row.querySelector('.item-total');
        
        quantityInput.value = item.quantity;
        priceInput.value = item.unit_price.toFixed(2);
        discountInput.value = item.discount.toFixed(2);
        totalCell.textContent = `GH₵ ${(item.quantity * item.unit_price - item.discount).toFixed(2)}`;
    }
}

function changeQuantity(productId, change) {
    const item = saleItems.find(i => i.product_id === productId);
    if (item) {
        const newQuantity = parseFloat(item.quantity) + change;
        if (newQuantity >= 0.01 && newQuantity <= item.available) {
            item.quantity = newQuantity;
            updateCartItemRow(item);
            updateCartDisplay();
        }
    }
}

function updateItemQuantity(productId, value) {
    const item = saleItems.find(i => i.product_id === productId);
    if (item) {
        let quantity = parseFloat(value);
        if (isNaN(quantity) || quantity < 0.01) quantity = 0.01;
        if (quantity > item.available) {
            alert(`Cannot add more than available stock (${item.available})`);
            quantity = item.available;
        }
        item.quantity = quantity;
        updateCartItemRow(item);
        updateCartDisplay();
    }
}

function updateItemPrice(productId, price) {
    const item = saleItems.find(i => i.product_id === productId);
    if (item) {
        const newPrice = parseFloat(price);
        if (!isNaN(newPrice) && newPrice >= 0) {
            item.unit_price = newPrice;
            updateCartItemRow(item);
            updateCartDisplay();
        }
    }
}

function updateItemDiscount(productId, discount) {
    const item = saleItems.find(i => i.product_id === productId);
    if (item) {
        const newDiscount = parseFloat(discount);
        if (!isNaN(newDiscount) && newDiscount >= 0) {
            item.discount = newDiscount;
            updateCartItemRow(item);
            updateCartDisplay();
        }
    }
}

function removeItem(productId) {
    if (confirm('Remove this item from cart?')) {
        saleItems = saleItems.filter(item => item.product_id !== productId);
        const row = document.querySelector(`#item-${productId}`);
        if (row) row.remove();
        
        if (saleItems.length === 0) {
            document.getElementById('emptyCartMessage').style.display = 'block';
        }
        
        updateCartDisplay();
    }
}

function clearCart() {
    if (saleItems.length === 0) return;
    
    if (confirm('Are you sure you want to clear all items?')) {
        saleItems = [];
        document.getElementById('saleItemsBody').innerHTML = '';
        document.getElementById('emptyCartMessage').style.display = 'block';
        updateCartDisplay();
    }
}

function updateCartDisplay() {
    // Calculate subtotal
    let subtotal = 0;
    saleItems.forEach(item => {
        subtotal += (item.quantity * item.unit_price) - item.discount;
    });
    
    // Get discount values
    const discountPercent = parseFloat(document.getElementById('discountPercent').value) || 0;
    const discountAmount = parseFloat(document.getElementById('discountAmount').value) || 0;
    
    // Calculate discount
    let discount = discountAmount;
    if (discountPercent > 0) {
        discount += (subtotal * discountPercent / 100);
    }
    
    // Calculate total
    const total = subtotal - discount;
    
    // Update display
    document.getElementById('subtotalDisplay').textContent = `GH₵ ${subtotal.toFixed(2)}`;
    document.getElementById('discountDisplay').textContent = `- GH₵ ${discount.toFixed(2)}`;
    document.getElementById('totalDisplay').textContent = `GH₵ ${total.toFixed(2)}`;
    
    // Prepare items data for form submission
    const itemsData = saleItems.map(item => ({
        product_id: item.product_id,
        quantity: item.quantity,
        unit_price: item.unit_price,
        discount: item.discount
    }));
    
    document.getElementById('itemsInput').value = JSON.stringify(itemsData);
}

// ============ SALE SUBMISSION ============
document.getElementById('saleForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (saleItems.length === 0) {
        alert('Please add at least one product to the sale.');
        return;
    }
    
    if (!selectedShopId) {
        alert('Please select a shop.');
        return;
    }
    
    // Disable submit button
    const submitBtn = document.getElementById('createSaleBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
    
    try {
        if (navigator.onLine) {
            // ONLINE MODE: Submit normally
            await submitSaleOnline();
        } else {
            // OFFLINE MODE: Save to localStorage
            await submitSaleOffline();
        }
    } catch (error) {
        console.error('Sale submission failed:', error);
        alert('Failed to create sale: ' + error.message);
        
        // Re-enable button
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-cart-check"></i> Create Sale & Print Receipt';
    }
});

async function submitSaleOnline() {
    // Normal form submission
    document.getElementById('offlineSaleInput').value = 'false';
    document.getElementById('saleForm').submit();
}

async function submitSaleOffline() {
    console.log('💾 Saving sale offline...');
    
    // Generate offline ID and invoice number
    const offlineId = `OFF-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
    const invoiceNumber = `OFF-${new Date().getFullYear()}${(new Date().getMonth()+1).toString().padStart(2,'0')}${new Date().getDate().toString().padStart(2,'0')}-${Math.floor(Math.random() * 10000)}`;
    
    // Calculate totals
    let subtotal = 0;
    saleItems.forEach(item => {
        subtotal += (item.quantity * item.unit_price) - item.discount;
    });
    
    const discountPercent = parseFloat(document.getElementById('discountPercent').value) || 0;
    const discountAmount = parseFloat(document.getElementById('discountAmount').value) || 0;
    let discount = discountAmount;
    if (discountPercent > 0) {
        discount += (subtotal * discountPercent / 100);
    }
    
    const total = subtotal - discount;
    
    // Create sale object
    const saleData = {
        offline_id: offlineId,
        invoice_number: invoiceNumber,
        shop_id: selectedShopId,
        customer_id: document.querySelector('[name="customer"]').value || null,
        payment_method: document.querySelector('[name="payment_method"]').value,
        discount_percentage: discountPercent,
        discount_amount: discountAmount,
        subtotal: subtotal,
        total_amount: total,
        items: saleItems,
        created_at: new Date().toISOString(),
        synced: false
    };
    
    // Get existing offline sales
    const offlineSales = JSON.parse(localStorage.getItem('offline_sales') || '[]');
    offlineSales.push(saleData);
    localStorage.setItem('offline_sales', JSON.stringify(offlineSales));
    
    // Update local inventory
    saleItems.forEach(item => {
        const key = `${item.product_id}`;
        if (localInventory[key]) {
            localInventory[key].available -= item.quantity;
            localInventory[key].quantity -= item.quantity;
        }
    });
    localStorage.setItem('shop_inventory', JSON.stringify(localInventory));
    
    // Generate receipt data
    const receiptData = {
        receipt_number: `RCPT-${offlineId}`,
        sale_id: offlineId,
        printed_at: new Date().toISOString(),
        is_offline: true
    };
    
    // Save receipt
    const receipts = JSON.parse(localStorage.getItem('offline_receipts') || '[]');
    receipts.push(receiptData);
    localStorage.setItem('offline_receipts', JSON.stringify(receipts));
    
    // Show success message
    showNotification(`✅ Sale saved offline! Invoice: ${invoiceNumber}`, 'success');
    
    // Clear cart
    clearCart();
    
    // Re-enable button
    const submitBtn = document.getElementById('createSaleBtn');
    submitBtn.disabled = false;
    submitBtn.innerHTML = '<i class="fas fa-cart-check"></i> Create Sale & Print Receipt';
    
    // Redirect to receipt page
    window.location.href = `/sales/offline-receipt/${offlineId}/`;
}

// ============ UI UPDATES ============
function updateUIForConnectionStatus() {
    const offlineBanner = document.getElementById('offlineBanner');
    const onlineBanner = document.getElementById('onlineBanner');
    const modeDescription = document.getElementById('modeDescription');
    const stockMode = document.getElementById('stockMode');
    const submitBtnText = document.getElementById('submitBtnText');
    
    if (isOfflineMode) {
        // OFFLINE UI
        offlineBanner.style.display = 'flex';
        onlineBanner.style.display = 'none';
        
        const lastSync = localStorage.getItem(`shop_${selectedShopId}_last_sync`);
        if (lastSync) {
            const date = new Date(lastSync);
            document.getElementById('offlineMessage').innerHTML = 
                `You are selling from locally saved stock. Last sync: ${date.toLocaleString()}`;
            document.getElementById('stockDateBadge').textContent = 
                `Stock: ${date.toLocaleDateString()}`;
        }
        
        modeDescription.innerHTML = '🔴 OFFLINE MODE - Using local stock data. Sales will be saved and synced later.';
        stockMode.innerHTML = 'OFFLINE STOCK';
        stockMode.className = 'badge bg-warning text-dark ms-2';
        submitBtnText.innerHTML = 'Save Sale Offline';
        
    } else {
        // ONLINE UI
        offlineBanner.style.display = 'none';
        onlineBanner.style.display = 'flex';
        
        modeDescription.innerHTML = '🟢 ONLINE MODE - Connected to server. Stock is live.';
        stockMode.innerHTML = 'LIVE STOCK';
        stockMode.className = 'badge bg-success text-white ms-2';
        submitBtnText.innerHTML = 'Create Sale & Print Receipt';
    }
    
    updateShopStockInfo();
}

function updateShopStockInfo() {
    if (!selectedShopId) return;
    
    const infoEl = document.getElementById('shopStockInfo');
    
    if (isOfflineMode) {
        const totalProducts = Object.keys(localInventory).length;
        const totalStock = Object.values(localInventory).reduce((sum, item) => sum + (item.available || 0), 0);
        infoEl.innerHTML = `📦 Offline stock: ${totalStock} units (${totalProducts} products)`;
    } else {
        infoEl.innerHTML = '🟢 Live stock - connected to server';
    }
}

function enableProductSearch() {
    document.getElementById('productSearch').disabled = false;
    document.getElementById('productSearch').placeholder = isOfflineMode ? 
        "Search offline products..." : 
        "Search products by name, SKU or barcode...";
}

function disableProductSearch() {
    document.getElementById('productSearch').disabled = true;
    document.getElementById('productSearch').placeholder = "Select shop first";
}

// ============ UTILITY FUNCTIONS ============
function forceSync() {
    if (!navigator.onLine) {
        alert('You are offline. Cannot sync. Please connect to internet.');
        return;
    }
    
    if (!selectedShopId) {
        alert('Please select a shop first.');
        return;
    }
    
    syncAllData();
}

function scanBarcode() {
    // Placeholder for barcode scanner
    alert('Barcode scanner integration would go here');
}

function getCSRFToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]').value;
}

function showNotification(message, type) {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 end-0 m-3`;
    notification.style.zIndex = '9999';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(notification);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        notification.remove();
    }, 5000);
}

// Close search results when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('.product-search')) {
        document.getElementById('searchResults').style.display = 'none';
    }
});

// Restore cart if exists
function restoreCart() {
    // This would load saved cart from localStorage if needed
}

// Initialize
restoreCart();
</script>
{% endblock %}