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

{% block title %}New Sale{% endblock %}

{% block header_title %}New Sale{% endblock %}

{% block extra_css %}
<style>
    .cart-container {
        max-height: 400px;
        overflow-y: auto;
    }
    .product-search {
        margin-bottom: 20px;
    }
    .product-search input {
        font-size: 18px;
        padding: 12px;
    }
    .payment-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    .payment-method-row {
        margin-bottom: 15px;
    }
    .cart-item {
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .cart-item-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cart-item-name {
        font-weight: bold;
    }
    .cart-item-price {
        font-weight: bold;
    }
    .cart-item-quantity {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }
    .cart-item-quantity button {
        width: 30px;
        height: 30px;
        padding: 0;
        text-align: center;
        line-height: 30px;
    }
    .quantity-input {
        width: 60px;
        text-align: center;
        margin: 0 5px;
    }
    .product-thumbnail {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .cursor-pointer:hover {
        background-color: rgba(92, 107, 192, 0.1);
    }
    .totals-section {
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 15px;
        margin-top: 20px;
    }
    .totals-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .total-amount {
        font-size: 20px;
        font-weight: bold;
    }
    .mpesa-fields {
        display: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <!-- Product search and cart -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Shopping Cart</h5>
                </div>
                <div class="card-body">
                    <div class="product-search">
                        <input type="text" id="product-search" class="form-control" placeholder="Search products by name, SKU, or barcode...">
                    </div>
                    
                    <div id="search-results" class="mb-3"></div>
                    
                    <div class="cart-container">
                        <div id="cart-items">
                            <!-- Cart items will be added here dynamically -->
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                                <p>No items in cart. Search for products above.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- Customer selection and payment summary -->
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Customer</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="customer-select" class="form-label">Select Customer</label>
                        <select id="customer-select" class="form-control">
                            <option value="">Walk-in Customer</option>
                            <!-- We'll populate this with AJAX -->
                        </select>
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#add-customer-modal">
                        <i class="fas fa-plus"></i> Add New Customer
                    </button>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Payment</h5>
                </div>
                <div class="card-body">
                    <div class="totals-section">
                        <div class="totals-row">
                            <span>Subtotal:</span>
                            <span id="subtotal">{{ company_settings.currency_symbol }}0.00</span>
                        </div>
                        <div class="totals-row">
                            <span>Tax ({{ company_settings.tax_rate }}%):</span>
                            <span id="tax">{{ company_settings.currency_symbol }}0.00</span>
                        </div>
                        <div class="totals-row">
                            <span>Discount:</span>
                            <div class="input-group" style="width: 150px;">
                                <span class="input-group-text">{{ company_settings.currency_symbol }}</span>
                                <input type="number" id="discount-amount" class="form-control" value="0.00" min="0" step="0.01" style="text-align: right;">
                            </div>
                        </div>
                        <div class="totals-row total-amount">
                            <span>Total:</span>
                            <span id="total">{{ company_settings.currency_symbol }}0.00</span>
                        </div>
                    </div>
                    
                    <div class="payment-section">
                        <div class="mb-3">
                            <label for="created-at" class="form-label">Transaction Date & Time (Kenya time)</label>
                            <input type="datetime-local" id="created-at" class="form-control" name="created_at">
                            <small class="form-text text-muted">Leave blank to use the current date and time.</small>
                        </div>
                        <div class="payment-method-row">
                            <label for="payment-method" class="form-label">Payment Method</label>
                            <select id="payment-method" class="form-control">
                                <option value="cash">Cash</option>
                                <option value="mpesa">M-Pesa</option>
                                <option value="card">Credit/Debit Card</option>
                                <option value="transfer">Bank Transfer</option>
                            </select>
                        </div>
                        
                        <div id="mpesa-fields" class="mpesa-fields">
                            <div class="mb-3">
                                <label for="mpesa-phone" class="form-label">M-Pesa Phone Number</label>
                                <input type="text" id="mpesa-phone" class="form-control" placeholder="e.g. 07XXXXXXXX">
                            </div>
                            <div class="mb-3">
                                <label for="mpesa-code" class="form-label">M-Pesa Transaction Code</label>
                                <input type="text" id="mpesa-code" class="form-control" placeholder="e.g. PXL5GHDTYR">
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="payment-amount" class="form-label">Amount Paid</label>
                            <input type="number" id="payment-amount" class="form-control" min="0" step="0.01" value="0">
                        </div>
                        
                        <button id="complete-sale-btn" class="btn btn-success btn-lg w-100">
                            <i class="fas fa-check-circle"></i> Complete Sale
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="add-customer-modal" tabindex="-1" aria-labelledby="add-customer-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-customer-modal-label">Add New Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="add-customer-form">
                    {% csrf_token %}
                    {{ customer_form.as_p }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="save-customer-btn" class="btn btn-primary">Save Customer</button>
            </div>
        </div>
    </div>
</div>

<!-- Receipt Modal -->
<div class="modal fade" id="receipt-modal" tabindex="-1" aria-labelledby="receipt-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="receipt-modal-label">Sale Complete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <i class="fas fa-check-circle text-success fa-4x mb-3"></i>
                <h4>Sale Completed Successfully!</h4>
                <p>Invoice #: <span id="invoice-number"></span></p>
                <p>Total Amount: <span id="receipt-total"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="#" id="view-receipt-btn" class="btn btn-primary" target="_blank">View Receipt</a>
                <a href="#" id="new-sale-btn" class="btn btn-success">New Sale</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Global variables
    const cart = [];
    const taxRate = {{ company_settings.tax_rate|default:0 }};
    const currencySymbol = "{{ company_settings.currency_symbol|default:'$' }}";
    
    // DOM elements
    const productSearch = document.getElementById('product-search');
    const searchResults = document.getElementById('search-results');
    const cartItemsContainer = document.getElementById('cart-items');
    const subtotalEl = document.getElementById('subtotal');
    const taxEl = document.getElementById('tax');
    const discountAmountInput = document.getElementById('discount-amount');
    const totalEl = document.getElementById('total');
    const paymentMethodSelect = document.getElementById('payment-method');
    const mpesaFields = document.getElementById('mpesa-fields');
    const mpesaPhone = document.getElementById('mpesa-phone');
    const mpesaCode = document.getElementById('mpesa-code');
    const paymentAmount = document.getElementById('payment-amount');
    const completeSaleBtn = document.getElementById('complete-sale-btn');
    const customerSelect = document.getElementById('customer-select');
    const saveCustomerBtn = document.getElementById('save-customer-btn');
    
    // Initialize page
    document.addEventListener('DOMContentLoaded', function() {
        initSearch();
        initCustomerSelect();
        updateTotals();
        
        // Event listeners
        paymentMethodSelect.addEventListener('change', toggleMpesaFields);
        completeSaleBtn.addEventListener('click', completeSale);
        saveCustomerBtn.addEventListener('click', saveCustomer);
        discountAmountInput.addEventListener('change', updateTotals);
        discountAmountInput.addEventListener('input', updateTotals);
        
        // New sale button in receipt modal
        document.getElementById('new-sale-btn').addEventListener('click', function() {
            location.reload();
        });
        
        // Load all products initially
        loadAllProducts();
    });
    
    // Load all products for easy selection
    function loadAllProducts() {
        searchResults.innerHTML = '<p class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading products...</p>';
        
        fetch('/products/api/search/?all=true', {
            headers: {
                'X-CSRFToken': getCsrfToken(),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.products && data.products.length > 0) {
                displaySearchResults(data.products);
            } else {
                searchResults.innerHTML = '<p class="text-center text-muted">No products available. Add products to start selling.</p>';
            }
        })
        .catch(error => {
            console.error('Error loading products:', error);
            searchResults.innerHTML = '<p class="text-center text-danger">Error loading products</p>';
        });
    }
    
    // Initialize product search
    function initSearch() {
        productSearch.addEventListener('input', debounce(searchProducts, 300));
    }
    
    // Search for products
    function searchProducts() {
        const query = productSearch.value.trim();
        if (query.length < 2) {
            // If search box is empty, just load all products again
            loadAllProducts();
            return;
        }
        
        // Show loading state
        searchResults.innerHTML = '<p class="text-center"><i class="fas fa-spinner fa-spin"></i> Searching...</p>';
        
        // Fetch products matching query
        fetch(`/products/api/search/?q=${encodeURIComponent(query)}`, {
            headers: {
                'X-CSRFToken': getCsrfToken(),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.products && data.products.length > 0) {
                    displaySearchResults(data.products);
                } else {
                    searchResults.innerHTML = '<p class="text-center text-muted">No products found</p>';
                }
            })
            .catch(error => {
                console.error('Error searching products:', error);
                searchResults.innerHTML = '<p class="text-center text-danger">Error searching products</p>';
            });
    }
    
    // Display search results
    function displaySearchResults(products) {
        searchResults.innerHTML = '';
        
        const resultsTable = document.createElement('table');
        resultsTable.className = 'table table-hover table-sm';
        
        const tableBody = document.createElement('tbody');
        
        products.forEach(product => {
            const row = document.createElement('tr');
            row.className = 'cursor-pointer';
            // Parse price to make sure it's a number before using toFixed
            const price = parseFloat(product.price);
            
            // Create image cell with product image or placeholder
            const imageHtml = product.image_url 
                ? `<img src="${product.image_url}" alt="${product.name}" class="product-thumbnail me-2" width="40" height="40">` 
                : `<div class="bg-light d-flex align-items-center justify-content-center me-2" style="width:40px;height:40px;"><i class="fas fa-box text-muted"></i></div>`;
            
            row.innerHTML = `
                <td class="d-flex align-items-center">
                    ${imageHtml}
                    <span>${product.name}</span>
                </td>
                <td>${currencySymbol}${price.toFixed(2)}</td>
                <td>Stock: ${product.quantity}</td>
            `;
            
            row.addEventListener('click', () => {
                addToCart(product);
                // Don't clear products list - keep them visible for easier shopping
            });
            
            tableBody.appendChild(row);
        });
        
        resultsTable.appendChild(tableBody);
        searchResults.appendChild(resultsTable);
    }
    
    // Add product to cart
    function addToCart(product) {
        // Parse price to make sure it's a number
        const price = parseFloat(product.price);
        
        // Check if product is already in cart
        const existingItem = cart.find(item => item.product_id === product.id);
        
        if (existingItem) {
            // Increment quantity
            existingItem.quantity++;
            existingItem.total = existingItem.quantity * existingItem.price;
        } else {
            // Add new item
            cart.push({
                product_id: product.id,
                name: product.name,
                price: price,
                quantity: 1,
                total: price,
                stock: product.quantity,
                image_url: product.image_url
            });
        }
        
        // Update UI
        renderCart();
        updateTotals();
    }
    
    // Remove item from cart
    function removeFromCart(index) {
        cart.splice(index, 1);
        renderCart();
        updateTotals();
    }
    
    // Update item quantity
    function updateQuantity(index, newQuantity) {
        const item = cart[index];
        
        // Ensure quantity is within valid range
        newQuantity = Math.max(1, Math.min(newQuantity, item.stock));
        
        item.quantity = newQuantity;
        item.total = item.quantity * item.price;
        
        renderCart();
        updateTotals();
    }
    
    // Render cart items
    function renderCart() {
        if (cart.length === 0) {
            cartItemsContainer.innerHTML = `
                <div class="text-center text-muted py-4">
                    <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                    <p>No items in cart. Search for products above.</p>
                </div>
            `;
            return;
        }
        
        cartItemsContainer.innerHTML = '';
        
        cart.forEach((item, index) => {
            const cartItem = document.createElement('div');
            cartItem.className = 'cart-item';
            cartItem.innerHTML = `
                <div class="cart-item-details">
                    <div class="d-flex align-items-center">
                        ${item.image_url ? 
                          `<img src="${item.image_url}" alt="${item.name}" class="product-thumbnail me-2" width="40" height="40">` : 
                          `<div class="bg-light d-flex align-items-center justify-content-center me-2" style="width:40px;height:40px;"><i class="fas fa-box text-muted"></i></div>`
                        }
                        <div class="cart-item-name">${item.name}</div>
                    </div>
                    <div class="cart-item-price">${currencySymbol}${item.total.toFixed(2)}</div>
                </div>
                <div class="cart-item-quantity">
                    <button type="button" class="btn btn-sm btn-outline-secondary decrease-btn">-</button>
                    <input type="number" class="form-control form-control-sm quantity-input" value="${item.quantity}" min="1" max="${item.stock}">
                    <button type="button" class="btn btn-sm btn-outline-secondary increase-btn">+</button>
                    <button type="button" class="btn btn-sm btn-outline-danger ms-auto remove-btn">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <div class="text-muted small">Price: ${currencySymbol}${item.price.toFixed(2)} each | Available: ${item.stock}</div>
            `;
            
            // Add event listeners
            const decreaseBtn = cartItem.querySelector('.decrease-btn');
            const increaseBtn = cartItem.querySelector('.increase-btn');
            const quantityInput = cartItem.querySelector('.quantity-input');
            const removeBtn = cartItem.querySelector('.remove-btn');
            
            decreaseBtn.addEventListener('click', () => {
                updateQuantity(index, item.quantity - 1);
            });
            
            increaseBtn.addEventListener('click', () => {
                updateQuantity(index, item.quantity + 1);
            });
            
            quantityInput.addEventListener('change', (e) => {
                updateQuantity(index, parseInt(e.target.value));
            });
            
            removeBtn.addEventListener('click', () => {
                removeFromCart(index);
            });
            
            cartItemsContainer.appendChild(cartItem);
        });
    }
    
    // Update cart totals
    function updateTotals() {
        let subtotal = 0;
        cart.forEach(item => {
            subtotal += item.price * item.quantity;
        });
        
        const tax = subtotal * (taxRate / 100);
        const discountAmount = parseFloat(discountAmountInput.value) || 0;
        const total = subtotal + tax - discountAmount;
        
        document.getElementById('subtotal').textContent = `${currencySymbol}${subtotal.toFixed(2)}`;
        document.getElementById('tax').textContent = `${currencySymbol}${tax.toFixed(2)}`;
        document.getElementById('total').textContent = `${currencySymbol}${total.toFixed(2)}`;
        
        // Set payment amount to total by default
        paymentAmount.value = total.toFixed(2);
    }
    
    // Toggle M-Pesa fields based on payment method
    function toggleMpesaFields() {
        if (paymentMethodSelect.value === 'mpesa') {
            mpesaFields.style.display = 'block';
        } else {
            mpesaFields.style.display = 'none';
        }
    }
    
    // Initialize customer select
    function initCustomerSelect() {
        fetch('/customers/api/list/', {
            headers: {
                'X-CSRFToken': getCsrfToken(),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                customerSelect.innerHTML = '<option value="">Walk-in Customer</option>';
                
                data.customers.forEach(customer => {
                    const option = document.createElement('option');
                    option.value = customer.id;
                    option.textContent = `${customer.first_name} ${customer.last_name}`;
                    customerSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error loading customers:', error);
            });
    }
    
    // Save a new customer
    function saveCustomer() {
        const form = document.getElementById('add-customer-form');
        const formData = new FormData(form);
        
        fetch('/customers/api/create/', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Add customer to select and select it
                    const option = document.createElement('option');
                    option.value = data.customer.id;
                    option.textContent = `${data.customer.first_name} ${data.customer.last_name}`;
                    customerSelect.appendChild(option);
                    customerSelect.value = data.customer.id;
                    
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('add-customer-modal'));
                    modal.hide();
                    
                    // Reset form
                    form.reset();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error saving customer:', error);
                alert('An error occurred while saving the customer');
            });
    }
    
    // Complete the sale
    function completeSale() {
        if (cart.length === 0) {
            alert('Please add at least one product to the cart');
            return;
        }
        
        // Validate payment method specific fields
        if (paymentMethodSelect.value === 'mpesa') {
            if (!mpesaPhone.value) {
                alert('Please enter the M-Pesa phone number');
                mpesaPhone.focus();
                return;
            }
            
            if (!mpesaCode.value) {
                alert('Please enter the M-Pesa transaction code');
                mpesaCode.focus();
                return;
            }
        }
        
        // Get payment amount
        const paymentAmountValue = parseFloat(paymentAmount.value);
        if (isNaN(paymentAmountValue) || paymentAmountValue < 0) {
            alert('Please enter a valid payment amount');
            paymentAmount.focus();
            return;
        }
        
        // Prepare sale data
        const saleData = {
            customer_id: customerSelect.value || null,
            items: cart.map(item => ({
                product_id: item.product_id,
                quantity: item.quantity,
                price: item.price
            })),
            discount_amount: parseFloat(discountAmountInput.value) || 0,
            payment_amount: paymentAmountValue,
            payment_method: paymentMethodSelect.value
        };
        
        // Add M-Pesa specific data if applicable
        if (paymentMethodSelect.value === 'mpesa') {
            saleData.mpesa_phone = mpesaPhone.value;
            saleData.mpesa_code = mpesaCode.value;
        }
        
        // Disable button to prevent double-submission
        completeSaleBtn.disabled = true;
        completeSaleBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        
        // Submit sale
        fetch('/sales/api/save/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            body: JSON.stringify(saleData)
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // Show receipt modal
                    document.getElementById('invoice-number').textContent = data.invoice_number;
                    document.getElementById('receipt-total').textContent = `${currencySymbol}${data.total_amount.toFixed(2)}`;
                    document.getElementById('view-receipt-btn').href = data.receipt_url;
                    
                    const receiptModal = new bootstrap.Modal(document.getElementById('receipt-modal'));
                    receiptModal.show();
                } else {
                    alert('Error: ' + data.message);
                    completeSaleBtn.disabled = false;
                    completeSaleBtn.innerHTML = '<i class="fas fa-check-circle"></i> Complete Sale';
                }
            })
            .catch(error => {
                console.error('Error completing sale:', error);
                alert('An error occurred while processing the sale');
                completeSaleBtn.disabled = false;
                completeSaleBtn.innerHTML = '<i class="fas fa-check-circle"></i> Complete Sale';
            });
    }
    
    // Helper function to get CSRF token
    function getCsrfToken() {
        return document.querySelector('[name=csrfmiddlewaretoken]').value;
    }
    
    // Debounce function to limit API calls during typing
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }
</script>
{% endblock %}