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

{% block title %}POS Terminal{% endblock %}

{% block extra_css %}
<style>
    /* Natural scrolling layout - like sale_form.html */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .product-card {
        border: 2px solid #dee2e6;
        border-radius: 6px;
        padding: 10px;
        background: white;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
    }
    
    .product-card:hover {
        border-color: #0d6efd;
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    
    .product-card.low-stock {
        border-color: #ffc107;
        background: #fff3cd;
    }
    
    .product-card.out-of-stock {
        border-color: #dc3545;
        background: #f8d7da;
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .product-name {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 5px;
        min-height: 35px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-price {
        color: #0d6efd;
        font-size: 1.1rem;
        font-weight: bold;
        margin: 5px 0;
    }
    
    .product-stock {
        font-size: 0.75rem;
        color: #6c757d;
    }
    
    .cart-item {
        background: #f8f9fa;
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 6px;
        border: 1px solid #dee2e6;
    }
    
    .cart-item-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 8px;
    }
    
    .cart-item-name {
        font-weight: 600;
        flex: 1;
    }
    
    .cart-item-remove {
        color: #dc3545;
        cursor: pointer;
        font-size: 1.3rem;
        padding: 0 5px;
        line-height: 1;
    }
    
    .cart-item-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        font-size: 0.9rem;
    }
    
    .cart-item-qty {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .qty-btn {
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 1rem;
        line-height: 1;
    }
    
    .qty-input {
        width: 55px;
        text-align: center;
        padding: 4px;
    }
    
    .total-summary {
        background: #e7f3ff;
        border: 2px solid #0d6efd;
        padding: 20px;
        border-radius: 8px;
        position: sticky;
        top: 20px;
    }
    
    .total-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        font-size: 1rem;
    }
    
    .total-row.final {
        font-size: 1.3rem;
        font-weight: bold;
        color: #0d6efd;
        border-top: 2px solid #0d6efd;
        margin-top: 10px;
        padding-top: 10px;
    }
    
    .empty-cart {
        text-align: center;
        padding: 40px 20px;
        color: #6c757d;
    }
    
    .empty-cart i {
        font-size: 4rem;
        margin-bottom: 15px;
        opacity: 0.3;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-3">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2><i class="fas fa-cash-register me-2"></i>POS Terminal</h2>
                    <p class="text-muted mb-0">Today's Sales: RM {{ today_sales_amount }} ({{ today_sales_count }} transactions)</p>
                </div>
                <div>
                    <a href="{% url 'pos:dashboard' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- LEFT: Product Catalog -->
        <div class="col-lg-8">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-box me-2"></i>Product Catalog</h5>
                        <span class="badge bg-light text-dark">{{ products.count }} Products</span>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Category Filter -->
                    <div class="btn-group w-100 mb-3" role="group">
                        <button type="button" class="btn btn-outline-primary active" data-category="all">All</button>
                        {% for category in categories %}
                        <button type="button" class="btn btn-outline-primary" data-category="{{ category.id }}">{{ category.name }}</button>
                        {% endfor %}
                    </div>
                    
                    <!-- Search -->
                    <input type="text" id="product-search" class="form-control mb-3" placeholder="🔍 Search products by name, SKU, or barcode...">
                    
                    <!-- Product Grid -->
                    <div class="product-grid" id="product-grid">
                        {% for product in products %}
                        <div class="product-card {% if product.track_inventory %}{% if product.current_stock == 0 %}out-of-stock{% elif product.current_stock <= product.reorder_level %}low-stock{% endif %}{% endif %}" 
                             data-category="{{ product.category.id|default:'none' }}"
                             data-product-id="{{ product.id }}"
                             data-product-name="{{ product.name }}"
                             data-product-price="{{ product.selling_price }}"
                             data-product-sst="{% if product.include_sst %}{{ product.sst_percentage }}{% else %}0{% endif %}"
                             data-product-stock="{{ product.current_stock }}"
                             data-track-inventory="{{ product.track_inventory|yesno:'true,false' }}"
                             {% if product.track_inventory and product.current_stock == 0 %}style="pointer-events: none;"{% endif %}>
                            <div class="product-name">{{ product.name }}</div>
                            <div class="product-price">RM {{ product.selling_price }}</div>
                            {% if product.track_inventory %}
                            <div class="product-stock">
                                {% if product.current_stock == 0 %}
                                    <span class="text-danger">Out of Stock</span>
                                {% elif product.current_stock <= product.reorder_level %}
                                    <span class="text-warning">Low: {{ product.current_stock }}</span>
                                {% else %}
                                    <span class="text-success">{{ product.current_stock }} {{ product.unit_of_measure }}</span>
                                {% endif %}
                            </div>
                            {% else %}
                            <div class="product-stock">
                                <span class="text-muted">Service</span>
                            </div>
                            {% endif %}
                        </div>
                        {% empty %}
                        <div class="col-12 text-center py-5">
                            <p class="text-muted">No products available</p>
                            <a href="{% url 'pos:product_create' %}" class="btn btn-primary">Add Products</a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- RIGHT: Cart & Checkout -->
        <div class="col-lg-4">
            <!-- Cart Items -->
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>Cart</h5>
                    <button type="button" class="btn btn-sm btn-light" id="clear-cart">Clear All</button>
                </div>
                <div class="card-body" id="cart-items">
                    <div class="empty-cart">
                        <i class="bi bi-cart-x"></i>
                        <h5>Cart is Empty</h5>
                        <p>Click on products to add to cart</p>
                    </div>
                </div>
            </div>
            
            <!-- Summary & Payment -->
            <div class="card shadow-sm total-summary">
                <div class="card-body">
                    <h4 class="mb-4"><i class="fas fa-calculator me-2"></i>Sale Summary</h4>
                    
                    <div class="total-row">
                        <span>Subtotal:</span>
                        <strong id="cart-subtotal">RM 0.00</strong>
                    </div>
                    <div class="total-row">
                        <span>SST:</span>
                        <strong id="cart-sst">RM 0.00</strong>
                    </div>
                    <div class="total-row final">
                        <span>TOTAL:</span>
                        <strong id="cart-total">RM 0.00</strong>
                    </div>
                    
                    <hr class="my-3">
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Payment Method</label>
                        <select class="form-select" id="payment-method">
                            <option value="CASH">💵 Cash (Tunai)</option>
                            <option value="BANK_TRANSFER">🏦 Bank Transfer</option>
                            <option value="E_WALLET">📱 E-Wallet (TnG, GrabPay)</option>
                            <option value="CREDIT_CARD">💳 Credit Card</option>
                            <option value="CHEQUE">📝 Cheque</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            <span id="bank-label-text">Bank Account</span>
                            <span class="text-danger" id="bank-required">*</span>
                        </label>
                        <select class="form-select" id="bank-account">
                            <option value="">-- Select Bank Account --</option>
                            {% for bank in bank_accounts %}
                            <option value="{{ bank.id }}" data-name="{{ bank.name|lower }}">
                                {{ bank.name }} {% if bank.account_number %}({{ bank.account_number }}){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted" id="bank-help-text"></small>
                    </div>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-success btn-lg" id="complete-sale" disabled>
                            <i class="fas fa-check-circle me-2"></i>Complete Sale
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% csrf_token %}
{% endblock %}

{% block extra_js %}
<script>
let cart = [];

// Add to cart
document.querySelectorAll('.product-card').forEach(card => {
    if (!card.classList.contains('out-of-stock')) {
        card.addEventListener('click', function() {
            const productId = parseInt(this.dataset.productId);
            const productName = this.dataset.productName;
            const productPrice = parseFloat(this.dataset.productPrice);
            const productSst = parseFloat(this.dataset.productSst);
            const productStock = parseFloat(this.dataset.productStock);
            const trackInventory = this.dataset.trackInventory === 'true';
            
            const existingItem = cart.find(item => item.product_id === productId);
            if (existingItem) {
                if (trackInventory && existingItem.quantity >= productStock) {
                    alert('Cannot add more. Maximum stock: ' + productStock);
                    return;
                }
                existingItem.quantity += 1;
            } else {
                cart.push({
                    product_id: productId,
                    name: productName,
                    unit_price: productPrice,
                    quantity: 1,
                    sst_percentage: productSst,
                    max_stock: productStock,
                    track_inventory: trackInventory
                });
            }
            updateCartDisplay();
        });
    }
});

function updateCartDisplay() {
    const cartItems = document.getElementById('cart-items');
    const completeSaleBtn = document.getElementById('complete-sale');
    
    if (cart.length === 0) {
        cartItems.innerHTML = `
            <div class="empty-cart">
                <i class="bi bi-cart-x"></i>
                <h5>Cart is Empty</h5>
                <p>Click on products to add to cart</p>
            </div>
        `;
        completeSaleBtn.disabled = true;
    } else {
        let html = '';
        cart.forEach((item, index) => {
            const itemSubtotal = item.quantity * item.unit_price;
            const itemSst = itemSubtotal * (item.sst_percentage / 100);
            const itemTotal = itemSubtotal + itemSst;
            
            html += `
                <div class="cart-item">
                    <div class="cart-item-header">
                        <div class="cart-item-name">${item.name}</div>
                        <span class="cart-item-remove" onclick="removeFromCart(${index})">×</span>
                    </div>
                    <div class="cart-item-details">
                        <div>
                            <small class="text-muted">Price</small><br>
                            <strong>RM ${item.unit_price.toFixed(2)}</strong>
                        </div>
                        <div>
                            <small class="text-muted">Quantity</small>
                            <div class="cart-item-qty">
                                <button class="btn btn-sm btn-outline-secondary qty-btn" onclick="updateQuantity(${index}, -1)">-</button>
                                <input type="number" class="form-control form-control-sm qty-input" 
                                       value="${item.quantity}" min="1" 
                                       ${item.track_inventory ? 'max="' + item.max_stock + '"' : ''}
                                       onchange="setQuantity(${index}, this.value)">
                                <button class="btn btn-sm btn-outline-secondary qty-btn" onclick="updateQuantity(${index}, 1)">+</button>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Subtotal</small><br>
                            <strong>RM ${itemSubtotal.toFixed(2)}</strong>
                        </div>
                        <div>
                            <small class="text-muted">SST (${item.sst_percentage}%)</small><br>
                            <strong>RM ${itemSst.toFixed(2)}</strong>
                        </div>
                    </div>
                    <div class="mt-2 text-end">
                        <strong>Total: RM ${itemTotal.toFixed(2)}</strong>
                    </div>
                </div>
            `;
        });
        cartItems.innerHTML = html;
        completeSaleBtn.disabled = false;
    }
    updateTotals();
}

function updateQuantity(index, change) {
    const item = cart[index];
    const newQty = item.quantity + change;
    
    if (newQty < 1) {
        if (confirm('Remove this item from cart?')) {
            cart.splice(index, 1);
        }
    } else {
        if (item.track_inventory && newQty > item.max_stock) {
            alert('Cannot exceed stock: ' + item.max_stock);
            return;
        }
        item.quantity = newQty;
    }
    updateCartDisplay();
}

function setQuantity(index, value) {
    const qty = parseInt(value);
    if (isNaN(qty) || qty < 1) {
        updateCartDisplay();
        return;
    }
    const item = cart[index];
    if (item.track_inventory && qty > item.max_stock) {
        alert('Cannot exceed stock: ' + item.max_stock);
        updateCartDisplay();
        return;
    }
    item.quantity = qty;
    updateCartDisplay();
}

function removeFromCart(index) {
    cart.splice(index, 1);
    updateCartDisplay();
}

document.getElementById('clear-cart').addEventListener('click', function() {
    if (cart.length > 0 && confirm('Clear all items from cart?')) {
        cart = [];
        updateCartDisplay();
    }
});

function updateTotals() {
    let subtotal = 0, totalSst = 0;
    cart.forEach(item => {
        const itemSubtotal = item.quantity * item.unit_price;
        subtotal += itemSubtotal;
        totalSst += itemSubtotal * (item.sst_percentage / 100);
    });
    const total = subtotal + totalSst;
    
    document.getElementById('cart-subtotal').textContent = 'RM ' + subtotal.toFixed(2);
    document.getElementById('cart-sst').textContent = 'RM ' + totalSst.toFixed(2);
    document.getElementById('cart-total').textContent = 'RM ' + total.toFixed(2);
}

// Payment method change
document.getElementById('payment-method').addEventListener('change', function() {
    const paymentMethod = this.value;
    const bankAccountSelect = document.getElementById('bank-account');
    const bankRequired = document.getElementById('bank-required');
    const bankLabelText = document.getElementById('bank-label-text');
    const bankHelpText = document.getElementById('bank-help-text');
    
    bankAccountSelect.value = '';
    
    if (paymentMethod === 'CASH') {
        bankAccountSelect.required = true;
        bankRequired.style.display = 'inline';
        bankLabelText.textContent = 'Deposit Cash To';
        bankHelpText.textContent = 'Select which bank account will receive this cash';
    } else {
        bankAccountSelect.required = false;
        bankRequired.style.display = 'none';
        
        let keywords = [];
        if (paymentMethod === 'BANK_TRANSFER') {
            keywords = ['maybank', 'cimb', 'rhb', 'public', 'bank'];
            bankLabelText.textContent = 'Bank Account';
            bankHelpText.textContent = 'Auto-matched to bank account';
        } else if (paymentMethod === 'E_WALLET') {
            keywords = ['tng', 'touch n go', 'grabpay', 'grab', 'boost', 'wallet'];
            bankLabelText.textContent = 'E-Wallet Account';
            bankHelpText.textContent = 'Auto-matched to e-wallet';
        } else if (paymentMethod === 'CREDIT_CARD') {
            keywords = ['credit', 'card', 'visa', 'mastercard'];
            bankLabelText.textContent = 'Payment Gateway';
            bankHelpText.textContent = 'Auto-matched to gateway';
        } else {
            keywords = ['maybank', 'cimb', 'bank'];
            bankLabelText.textContent = 'Bank Account';
            bankHelpText.textContent = 'For cheque deposit';
        }
        
        const options = bankAccountSelect.options;
        for (let i = 1; i < options.length; i++) {
            const bankName = options[i].dataset.name || '';
            if (keywords.some(k => bankName.includes(k))) {
                bankAccountSelect.value = options[i].value;
                break;
            }
        }
    }
});

document.getElementById('payment-method').dispatchEvent(new Event('change'));

// Complete sale
document.getElementById('complete-sale').addEventListener('click', async function() {
    if (cart.length === 0) {
        alert('Cart is empty!');
        return;
    }
    
    const paymentMethod = document.getElementById('payment-method').value;
    const bankAccountId = document.getElementById('bank-account').value;
    
    if (paymentMethod === 'CASH' && !bankAccountId) {
        alert('Please select where to deposit the cash');
        document.getElementById('bank-account').focus();
        return;
    }
    
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
    
    try {
        const response = await fetch('{% url "pos:terminal_complete_sale" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify({
                items: cart,
                payment_method: paymentMethod,
                bank_account_id: bankAccountId || null,
                notes: ''
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            window.open(data.receipt_url, '_blank');
            cart = [];
            updateCartDisplay();
            document.getElementById('payment-method').value = 'CASH';
            document.getElementById('payment-method').dispatchEvent(new Event('change'));
            alert('✅ Sale completed successfully!\nSale #: ' + data.sale_number + '\nTotal: RM ' + data.total_amount.toFixed(2));
            setTimeout(() => location.reload(), 1500);
        } else {
            alert('❌ Error: ' + data.error);
        }
    } catch (error) {
        alert('❌ Error completing sale: ' + error);
    } finally {
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-check-circle me-2"></i>Complete Sale';
    }
});

// Category filter
document.querySelectorAll('[data-category]').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('[data-category]').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        const categoryId = this.dataset.category;
        document.querySelectorAll('.product-card').forEach(product => {
            product.style.display = (categoryId === 'all' || product.dataset.category === categoryId) ? 'block' : 'none';
        });
    });
});

// Product search
document.getElementById('product-search').addEventListener('input', function() {
    const search = this.value.toLowerCase();
    document.querySelectorAll('.product-card').forEach(product => {
        const visible = product.dataset.productName.toLowerCase().includes(search);
        product.style.display = visible ? 'block' : 'none';
    });
});
</script>
{% endblock %}