{% extends "base.html" %}

{% block content %}
<style>
    /* Hide number input spinner arrows */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="text-gradient">
        <i class="fas fa-chart-line me-2"></i> Sales Records
    </h2>
    <div>
        <button class="btn btn-danger me-2" id="bulkDeleteSalesBtn" style="display: none;">
            <i class="fas fa-trash me-1"></i> Delete Selected
        </button>
        <button class="btn btn-primary glow" data-bs-toggle="modal" data-bs-target="#addSaleModal">
            <i class="fas fa-plus me-1"></i> Record New Sale
        </button>
    </div>
</div>

<!-- Search and Filter Section -->
<div class="search-controls mb-4">
    <div class="row">
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" id="salesSearch" class="form-control" 
                       placeholder="🔍 Search by Buyer Name, Phone Number, or Product Name...">
                <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="col-md-2">
            <select id="salesMonthFilter" class="form-select">
                <option value="">All Months</option>
                <option value="01">January</option>
                <option value="02">February</option>
                <option value="03">March</option>
                <option value="04">April</option>
                <option value="05">May</option>
                <option value="06">June</option>
                <option value="07">July</option>
                <option value="08">August</option>
                <option value="09">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
        </div>
        <div class="col-md-2">
            <select id="salesYearFilter" class="form-select">
                <option value="">All Years</option>
                <option value="2025">2025</option>
                <option value="2024">2024</option>
                <option value="2023">2023</option>
            </select>
        </div>
        <div class="col-md-2">
            <input type="date" id="salesDateFrom" class="form-control" placeholder="From Date">
        </div>
        <div class="col-md-3">
            <input type="date" id="salesDateTo" class="form-control" placeholder="To Date">
        </div>
    </div>
</div>

<div class="garments-card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="salesTable">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="form-check-input" id="selectAllSales" title="Select All"></th>
                        <th>📋 Sale #</th>
                        <th>👤 Buyer Name</th>
                        <th>📱 Phone</th>
                        <th>🛒 Products</th>
                        <th>📦 Items</th>
                        <th>💵 Total Amount</th>
                        <th>💳 Payment</th>
                        <th>📅 Date</th>
                        <th>⚡ Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sale in sales %}
                    <tr data-sale-date="{{ sale.sale_date }}">
                        <td>
                            <input type="checkbox" class="form-check-input sale-checkbox"
                                   data-buyer="{{ sale.buyer_name }}"
                                   data-date="{{ sale.sale_date }}">
                        </td>
                        <td><strong>{{ sale.sale_number }}</strong></td>
                        <td>{{ sale.buyer_name }}</td>
                        <td>{{ sale.phone_number or '-' }}</td>
                        <td>
                            <small class="text-muted">{{ sale.product_names or 'No products' }}</small>
                        </td>
                        <td>
                            <span class="badge bg-info">{{ sale.item_count }} items</span>
                        </td>
                        <td><strong>AED {{ "{:,.2f}".format(sale.total_amount) }}</strong></td>
                        <td>
                            <span class="badge" style="background: linear-gradient(135deg, #A86CFF 0%, #6A4CFF 100%); color: white !important;">{{ sale.payment_method or 'cash' }}</span>
                        </td>
                        <td>{{ sale.sale_date }}</td>
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-info view-sale-details" 
                                        data-buyer="{{ sale.buyer_name }}"
                                        data-date="{{ sale.sale_date }}"
                                        title="View Details">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-primary print-single-receipt" 
                                        data-buyer="{{ sale.buyer_name }}"
                                        data-date="{{ sale.sale_date }}"
                                        title="Print Receipt">
                                    <i class="fas fa-print"></i>
                                </button>
                                
                                <!-- Updated Delete Button -->
                                <button type="button" class="btn btn-sm btn-outline-danger delete-sale-btn" 
                                        data-buyer="{{ sale.buyer_name }}"
                                        data-date="{{ sale.sale_date }}"
                                        data-sale-number="{{ sale.sale_number }}"
                                        title="Delete Sale">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="salesPagination"></div>
    </div>
</div>

<!-- VAT Summary Section -->
<div class="garments-card mt-4">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">
                <i class="fas fa-percentage me-2"></i> VAT Summary
            </h5>
            <small class="text-muted">View VAT collected from sales receipts</small>
        </div>
        
        <!-- Date Range Selector -->
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" id="vatDateFrom" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" id="vatDateTo" class="form-control">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-primary w-100" id="calculateVatBtn">
                    <i class="fas fa-calculator me-1"></i> Calculate VAT
                </button>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-outline-secondary w-100" id="resetVatBtn">
                    <i class="fas fa-redo me-1"></i> Reset
                </button>
            </div>
        </div>

        <!-- VAT Summary Display -->
        <div id="vatSummaryResults" style="display: none;">
            <div class="row">
                <div class="col-md-3">
                    <div class="card bg-light border-0 mb-3">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Total Sales</h6>
                            <h4 class="mb-0" id="vatTotalSales">AED 0.00</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-light border-0 mb-3">
                        <div class="card-body text-center">
                            <h6 class="text-muted mb-2">Subtotal (Before VAT)</h6>
                            <h4 class="mb-0" id="vatSubtotal">AED 0.00</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white border-0 mb-3">
                        <div class="card-body text-center">
                            <h6 class="mb-2">Total VAT Collected</h6>
                            <h4 class="mb-0" id="vatCollected">AED 0.00</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white border-0 mb-3">
                        <div class="card-body text-center">
                            <h6 class="mb-2">Number of Sales</h6>
                            <h4 class="mb-0" id="vatSalesCount">0</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Period:</strong> <span id="vatPeriodDisplay"></span>
            </div>
        </div>
    </div>
</div>

{% if due_customers %}
<div class="garments-card mt-4">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">Customers with Due</h5>
            <small class="text-muted">Track pending balances and collect further payments</small>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-striped" id="dueCustomersTable">
                <thead>
                    <tr>
                        <th>Buyer</th>
                        <th>Phone</th>
                        <th>Total (with VAT)</th>
                        <th>Paid</th>
                        <th>Due</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in due_customers %}
                    <tr>
                        <td>{{ customer.buyer_name }}</td>
                        <td>{{ customer.phone_number or '-' }}</td>
                        <td>AED {{ '{:,.2f}'.format(customer.total_with_vat or 0) }}</td>
                        <td>AED {{ '{:,.2f}'.format(customer.paid_amount or 0) }}</td>
                        <td><strong class="text-danger">AED {{ '{:,.2f}'.format(customer.due_amount or 0) }}</strong></td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary edit-due-btn" data-buyer="{{ customer.buyer_name }}">
                                <i class="fas fa-pen"></i> Add Payment
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Add Sale Modal -->
<div class="modal fade" id="addSaleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-chart-line me-2"></i> Record New Sale</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_sale') }}" id="multiSaleForm">
                <div class="modal-body">
                    <!-- Buyer Information -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">👤 Buyer Name *</label>
                                <input type="text" class="form-control" name="buyer_name" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📱 Phone Number</label>
                                <input type="tel" class="form-control" name="phone_number" placeholder="+971 XX XXX XXXX">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">📅 Sale Date *</label>
                                <input type="date" class="form-control" name="sale_date" required value="{{ today }}">
                            </div>
                        </div>
                    </div>

                    <!-- Products Section -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">🛒 Products</h6>
                        </div>
                        
                        <div id="productsContainer">
                            <!-- Product rows will be added here dynamically -->
                            <div class="product-row border rounded p-3 mb-3">
                                <div class="row g-2">
                                    <div class="col-md-4">
                                        <label class="form-label small">Product *</label>
                                        <input type="text" class="form-control product-input" placeholder="Type lot number to search..." autocomplete="off">
                                        <input type="hidden" name="product_variant_id[]" class="product-id-input">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small">Quantity *</label>
                                        <input type="number" class="form-control quantity-input" name="quantity[]" required min="1" value="1">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small">Unit Price (AED) *</label>
                                        <input type="number" step="0.01" class="form-control price-input" name="unit_price[]" required>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small">Total (AED)</label>
                                        <input type="text" class="form-control total-display" readonly>
                                    </div>
                                    <div class="col-md-1">
                                        <label class="form-label small">&nbsp;</label>
                                        <button type="button" class="btn btn-sm btn-outline-danger remove-product d-none">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-12">
                                        <small class="text-muted stock-info">Available: 0</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Add Product Button - Below Last Product -->
                        <button type="button" class="btn btn-outline-primary w-100" id="addProductBtn">
                            <i class="fas fa-plus me-1"></i> Add Product
                        </button>
                    </div>

                    <!-- Sale Summary -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">💳 Payment Method</label>
                                <select class="form-select" name="payment_method">
                                    <option value="cash">Cash</option>
                                    <option value="card">Card</option>
                                    <option value="bank_transfer">Bank Transfer</option>
                                    <option value="check">Check</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📝 Notes</label>
                                <textarea class="form-control" name="notes" rows="2" placeholder="Additional notes..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- VAT Section -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">📊 VAT %</label>
                                <input type="number" step="0.01" class="form-control" id="vatPercentage" name="vat_percentage" value="5" min="0" max="100">
                            </div>
                        </div>
                    </div>

                    <!-- Totals Summary -->
                    <div class="alert alert-info mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>Subtotal (before VAT):</span>
                            <strong id="subtotalAmount">AED 0.00</strong>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span>VAT Amount (<span id="vatPercentDisplay">5</span>%):</span>
                            <strong id="vatAmount">AED 0.00</strong>
                        </div>
                    </div>
                    <div class="alert alert-success">
                        <div class="d-flex justify-content-between align-items-center">
                            <strong>💵 Grand Total (with VAT):</strong>
                            <strong id="grandTotal">AED 0.00</strong>
                        </div>
                    </div>

                    <!-- Partial Payment -->
                    <div class="mb-3">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="partialPaymentToggle" name="partial_payment">
                            <label class="form-check-label" for="partialPaymentToggle">
                                Mark as partial payment
                            </label>
                        </div>
                        <div class="row g-3 align-items-center" id="partialPaymentFields">
                            <div class="col-md-6">
                                <label class="form-label">Paid Amount (AED)</label>
                                <input type="text" inputmode="decimal" pattern="[0-9]+(\.[0-9]{1,2})?" class="form-control" id="paidAmountInput" name="paid_amount" value="0" disabled>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-warning mb-0">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>Due After Payment:</span>
                                        <strong id="dueAmountDisplay">AED 0.00</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Close
                    </button>
                    <button type="submit" class="btn btn-primary glow">
                        <i class="fas fa-check me-1"></i> Record Sale
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i> Confirm Deletion
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone!
                </div>
                <p>Are you sure you want to delete this sale?</p>
                <div class="sale-info p-3 bg-light rounded">
                    <strong>Sale #:</strong> <span id="deleteSaleNumber"></span><br>
                    <strong>Buyer:</strong> <span id="deleteBuyerName"></span><br>
                    <strong>Date:</strong> <span id="deleteSaleDate"></span>
                </div>
                <div class="alert alert-danger mt-3">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Note:</strong> Inventory will NOT be restored when deleting this sale.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Cancel
                </button>
                <form method="POST" action="{{ url_for('delete_sale_group') }}" id="deleteSaleForm">
                    <input type="hidden" name="buyer_name" id="deleteBuyerInput">
                    <input type="hidden" name="sale_date" id="deleteDateInput">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i> Delete Sale
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Receipt Modal -->
<div class="modal fade" id="receiptModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title"><i class="fas fa-receipt me-2"></i> Digital Sales Receipt</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="receiptContent">
                <!-- Receipt content will be generated here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i> Close
                </button>
                <button type="button" class="btn btn-success" id="printReceiptBtn">
                    <i class="fas fa-print me-1"></i> Print Receipt
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Sale Details Modal -->
<div class="modal fade" id="saleDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sale Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="saleDetailsContent">
                <!-- Sale details will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// Sales Search and Pagination Functionality
let allSalesRows = [];
let filteredSalesRows = [];
let currentSalesPage = 1;
const salesPerPage = 10;

function performSalesSearch() {
    const searchTerm = document.getElementById('salesSearch').value.toLowerCase().trim();
    const selectedMonth = document.getElementById('salesMonthFilter')?.value || '';
    const selectedYear = document.getElementById('salesYearFilter')?.value || '';
    const dateFrom = document.getElementById('salesDateFrom')?.value || '';
    const dateTo = document.getElementById('salesDateTo')?.value || '';
    const table = document.querySelector('#salesTable tbody');
    
    filteredSalesRows = allSalesRows.filter(row => {
        const buyerName = row.cells[2].textContent.toLowerCase(); // Buyer Name
        const phone = row.cells[3].textContent.toLowerCase(); // Phone
        const products = row.cells[4].textContent.toLowerCase(); // Products
        const saleDate = row.getAttribute('data-sale-date') || row.cells[8].textContent.trim(); // Date
        
        const matchesSearch = !searchTerm ||
                            buyerName.includes(searchTerm) ||
                            phone.includes(searchTerm) ||
                            products.includes(searchTerm);
        
        // Month/Year filter
        let matchesDate = true;
        if (selectedMonth || selectedYear) {
            const dateMatch = saleDate.match(/\d{4}-\d{2}-\d{2}/);
            if (dateMatch) {
                const date = dateMatch[0];
                const [year, month] = date.split('-');
                
                if (selectedMonth && month !== selectedMonth) {
                    matchesDate = false;
                }
                if (selectedYear && year !== selectedYear) {
                    matchesDate = false;
                }
            }
        }
        
        // Date range filter
        let matchesDateRange = true;
        if (dateFrom || dateTo) {
            const dateMatch = saleDate.match(/\d{4}-\d{2}-\d{2}/);
            if (dateMatch) {
                const rowDate = new Date(dateMatch[0]);
                if (dateFrom) {
                    const fromDate = new Date(dateFrom);
                    if (rowDate < fromDate) matchesDateRange = false;
                }
                if (dateTo) {
                    const toDate = new Date(dateTo);
                    toDate.setHours(23, 59, 59);
                    if (rowDate > toDate) matchesDateRange = false;
                }
            } else {
                matchesDateRange = false;
            }
        }
        
        return matchesSearch && matchesDate && matchesDateRange;
    });
    
    currentSalesPage = 1;
    displaySalesPage();
}

function displaySalesPage() {
    const startIndex = (currentSalesPage - 1) * salesPerPage;
    const endIndex = startIndex + salesPerPage;
    
    // Hide all rows
    allSalesRows.forEach(row => row.style.display = 'none');
    
    // Show only current page rows
    filteredSalesRows.slice(startIndex, endIndex).forEach(row => {
        row.style.display = '';
    });
    
    updateSalesPagination();
}

function updateSalesPagination() {
    const totalPages = Math.ceil(filteredSalesRows.length / salesPerPage);
    let paginationHTML = '';
    
    if (totalPages > 1) {
        paginationHTML += '<nav class="mt-3"><ul class="pagination justify-content-center">';
        
        // Previous button
        paginationHTML += `<li class="page-item ${currentSalesPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${currentSalesPage - 1}">Previous</a>
        </li>`;
        
        // Page numbers
        for (let i = 1; i <= totalPages; i++) {
            if (i === 1 || i === totalPages || (i >= currentSalesPage - 2 && i <= currentSalesPage + 2)) {
                paginationHTML += `<li class="page-item ${i === currentSalesPage ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`;
            } else if (i === currentSalesPage - 3 || i === currentSalesPage + 3) {
                paginationHTML += '<li class="page-item disabled"><span class="page-link">...</span></li>';
            }
        }
        
        // Next button
        paginationHTML += `<li class="page-item ${currentSalesPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#" data-page="${currentSalesPage + 1}">Next</a>
        </li>`;
        
        paginationHTML += '</ul></nav>';
    }
    
    let paginationContainer = document.getElementById('salesPagination');
    if (!paginationContainer) {
        paginationContainer = document.createElement('div');
        paginationContainer.id = 'salesPagination';
        document.querySelector('#salesTable').parentElement.parentElement.appendChild(paginationContainer);
    }
    paginationContainer.innerHTML = paginationHTML;
    
    // Add click handlers to pagination links
    paginationContainer.querySelectorAll('.page-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = parseInt(this.getAttribute('data-page'));
            if (page > 0 && page <= totalPages) {
                currentSalesPage = page;
                displaySalesPage();
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize sales rows
    const salesTable = document.querySelector('#salesTable tbody');
    if (salesTable) {
        allSalesRows = Array.from(salesTable.querySelectorAll('tr'));
        filteredSalesRows = [...allSalesRows];
        
        // Initial display with pagination
        displaySalesPage();
    }
    
    // Initialize search functionality
    const searchInput = document.getElementById('salesSearch');
    const clearSearchBtn = document.getElementById('clearSearch');
    const monthFilter = document.getElementById('salesMonthFilter');
    const yearFilter = document.getElementById('salesYearFilter');
    const dateFrom = document.getElementById('salesDateFrom');
    const dateTo = document.getElementById('salesDateTo');
    
    if (searchInput) {
        searchInput.addEventListener('input', performSalesSearch);
    }
    
    if (monthFilter) {
        monthFilter.addEventListener('change', performSalesSearch);
    }
    
    if (yearFilter) {
        yearFilter.addEventListener('change', performSalesSearch);
    }
    
    if (dateFrom) {
        dateFrom.addEventListener('change', performSalesSearch);
    }
    
    if (dateTo) {
        dateTo.addEventListener('change', performSalesSearch);
    }
    
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', function() {
            searchInput.value = '';
            if (monthFilter) monthFilter.value = '';
            if (yearFilter) yearFilter.value = '';
            if (dateFrom) dateFrom.value = '';
            if (dateTo) dateTo.value = '';
            performSalesSearch();
            searchInput.focus();
        });
    }

    // Bulk delete for sales
    const selectAllSales = document.getElementById('selectAllSales');
    const bulkDeleteSalesBtn = document.getElementById('bulkDeleteSalesBtn');

    // Helper to get visible checkboxes only (not hidden by filters/pagination)
    function getVisibleSaleCheckboxes() {
        return document.querySelectorAll('tbody tr:not([style*="display: none"]) .sale-checkbox');
    }

    function updateBulkDeleteSalesButton() {
        const checkedCount = document.querySelectorAll('.sale-checkbox:checked').length;
        if (bulkDeleteSalesBtn) {
            bulkDeleteSalesBtn.style.display = checkedCount > 0 ? 'inline-block' : 'none';
            bulkDeleteSalesBtn.innerHTML = `<i class="fas fa-trash me-1"></i> Delete Selected (${checkedCount})`;
        }
    }

    // Select/Deselect all VISIBLE sales on current page
    if (selectAllSales) {
        selectAllSales.addEventListener('change', function() {
            const visibleCheckboxes = getVisibleSaleCheckboxes();
            visibleCheckboxes.forEach(cb => cb.checked = this.checked);
            updateBulkDeleteSalesButton();
        });
    }

    // Update button visibility when individual checkboxes change
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('sale-checkbox')) {
            updateBulkDeleteSalesButton();
            // Update select all checkbox state based on visible sales only
            const visibleCheckboxes = getVisibleSaleCheckboxes();
            const allVisibleChecked = Array.from(visibleCheckboxes).every(cb => cb.checked);
            const anyVisibleChecked = Array.from(visibleCheckboxes).some(cb => cb.checked);
            if (selectAllSales) {
                selectAllSales.checked = allVisibleChecked && visibleCheckboxes.length > 0;
                selectAllSales.indeterminate = anyVisibleChecked && !allVisibleChecked;
            }
        }
    });

    if (bulkDeleteSalesBtn) {
        bulkDeleteSalesBtn.addEventListener('click', async function() {
            const checked = Array.from(document.querySelectorAll('.sale-checkbox:checked'));
            if (checked.length === 0) return;
            const confirmMsg = `Delete ${checked.length} sale group(s)? Inventory will stay unchanged.`;
            if (!confirm(confirmMsg)) return;

            const sale_groups = checked.map(cb => ({
                buyer_name: cb.dataset.buyer,
                sale_date: cb.dataset.date
            }));

            try {
                const res = await fetch('/bulk_delete_sale_groups', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ sale_groups })
                });
                const data = await res.json();
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert(data.message || 'Failed to delete sales');
                }
            } catch (err) {
                console.error(err);
                alert('Error deleting sales');
            }
        });
    }
    
    // Multiple product sale functionality
    const productsContainer = document.getElementById('productsContainer');
    const addProductBtn = document.getElementById('addProductBtn');
    const grandTotalElement = document.getElementById('grandTotal');
    const partialPaymentToggle = document.getElementById('partialPaymentToggle');
    const paidAmountInput = document.getElementById('paidAmountInput');
    const dueAmountDisplay = document.getElementById('dueAmountDisplay');
    const multiSaleForm = document.getElementById('multiSaleForm');
    
    let productCounter = 1;

    // Add new product row
        addProductBtn.addEventListener('click', function() {
        const newRow = document.createElement('div');
        newRow.className = 'product-row border rounded p-3 mb-3';
        newRow.innerHTML = `
            <div class="row g-2">
                    <div class="col-md-4">
                    <label class="form-label small">Product *</label>
                    <input type="text" class="form-control product-input" placeholder="Type lot number to search..." autocomplete="off">
                    <input type="hidden" name="product_variant_id[]" class="product-id-input">
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Quantity *</label>
                    <input type="number" class="form-control quantity-input" name="quantity[]" required min="1" value="1">
                </div>
                <div class="col-md-3">
                    <label class="form-label small">Unit Price (AED) *</label>
                    <input type="number" step="0.01" class="form-control price-input" name="unit_price[]" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label small">Total (AED)</label>
                    <input type="text" class="form-control total-display" readonly>
                </div>
                <div class="col-md-1">
                    <label class="form-label small">&nbsp;</label>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-product">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-12">
                    <small class="text-muted stock-info">Available: 0</small>
                </div>
            </div>
        `;
        
        productsContainer.appendChild(newRow);
        productCounter++;
        
        // Show remove buttons for all rows except the first one
        updateRemoveButtons();
        
        // Add event listeners to new row
        initializeProductRow(newRow);
    });

    // Initialize product row with event listeners
    function initializeProductRow(row) {
        const productSelect = row.querySelector('.product-select');
        const productInput = row.querySelector('.product-input');
        const productIdInput = row.querySelector('.product-id-input');
        const quantityInput = row.querySelector('.quantity-input');
        const priceInput = row.querySelector('.price-input');
        const totalDisplay = row.querySelector('.total-display');
        const stockInfo = row.querySelector('.stock-info');
        const removeBtn = row.querySelector('.remove-product');
        // Populate datalist (global) -- done once below; here just hookup handlers

        // Product selection handler (datalist input). When user types/selects, show all matching products
        if (productInput) {
            let matchingProducts = [];
            let dropdownOpen = false;
            
            // Create hidden dropdown for matching products
            const dropdown = document.createElement('div');
            dropdown.className = 'product-dropdown-list position-absolute bg-white border rounded shadow-sm';
            dropdown.style.display = 'none';
            dropdown.style.zIndex = '1000';
            dropdown.style.maxHeight = '200px';
            dropdown.style.overflowY = 'auto';
            dropdown.style.minWidth = '100%';
            
            row.querySelector('.col-md-4').style.position = 'relative';
            row.querySelector('.col-md-4').appendChild(dropdown);
            
            // Show dropdown with matching products
            function showMatchingProducts(searchVal) {
                const val = (searchVal || '').toLowerCase().trim();
                
                // Normalize search value: remove spaces, hyphens, and make uppercase for comparison
                const normalizedSearch = val.replace(/[\s\-]/g, '').toUpperCase();
                
                // Filter products ONLY by lot number
                matchingProducts = masterProductOptions.filter(opt => {
                    if (!val) return false;
                    
                    const lotNumber = (opt.lot || '').toUpperCase();
                    const normalizedLot = lotNumber.replace(/[\s\-]/g, '');
                    
                    // Match if normalized lot contains normalized search
                    // This allows "lot1", "LOT01", "lot-01" to all match "LOT-01"
                    return normalizedLot.includes(normalizedSearch);
                });
                
                dropdown.innerHTML = '';
                
                if (matchingProducts.length > 0) {
                    matchingProducts.forEach((product, idx) => {
                        const item = document.createElement('div');
                        item.className = 'product-dropdown-item p-2 border-bottom cursor-pointer';
                        item.style.cursor = 'pointer';
                        item.style.backgroundColor = idx % 2 === 0 ? '#f9f9f9' : '#fff';
                        item.innerHTML = `<small><strong>${product.label}</strong></small>`;
                        
                        item.addEventListener('mouseenter', function() {
                            this.style.backgroundColor = '#e9ecef';
                        });
                        item.addEventListener('mouseleave', function() {
                            this.style.backgroundColor = (matchingProducts.indexOf(product) % 2 === 0) ? '#f9f9f9' : '#fff';
                        });
                        
                        item.addEventListener('click', function() {
                            selectProduct(product);
                            dropdown.style.display = 'none';
                            dropdownOpen = false;
                        });
                        
                        dropdown.appendChild(item);
                    });
                    
                    dropdown.style.display = 'block';
                    dropdownOpen = true;
                } else {
                    dropdown.style.display = 'none';
                    dropdownOpen = false;
                }
            }
            
            // Select product from dropdown
            function selectProduct(product) {
                productInput.value = product.label;
                productIdInput.value = product.id;
                priceInput.value = product.selling || '';
                stockInfo.textContent = 'Available: ' + (product.quantity || 0);
                quantityInput.max = product.quantity || '';
                calculateRowTotal(row);
                calculateGrandTotal();
            }
            
            productInput.addEventListener('input', function() {
                const val = this.value;
                showMatchingProducts(val);
            });
            
            // Close dropdown when clicking outside
            document.addEventListener('click', function(event) {
                if (!row.querySelector('.col-md-4').contains(event.target)) {
                    dropdown.style.display = 'none';
                    dropdownOpen = false;
                }
            });
            
            // Allow keyboard navigation (optional)
            productInput.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    dropdown.style.display = 'none';
                    dropdownOpen = false;
                }
            });
        }

        // Quantity and price change handlers
        quantityInput.addEventListener('input', function() {
            calculateRowTotal(row);
            calculateGrandTotal();
        });

        priceInput.addEventListener('input', function() {
            calculateRowTotal(row);
            calculateGrandTotal();
        });

        // Remove product row
        removeBtn.addEventListener('click', function() {
            row.remove();
            updateRemoveButtons();
            calculateGrandTotal();
        });
    }

    // Master product options built from server-side `available_products`
    let masterProductOptions = [
        {% for product in available_products %}
        { id: '{{ product.id }}', lot: '{{ product.lot_details }}', label: '{{ (product.product_name ~ (product.lot_details and (" " ~ product.lot_details) or "") ~ " - " ~ product.size ~ "/" ~ product.color ~ " (Stock: " ~ product.quantity ~ ")")|replace("'","\\'") }}', selling: '{{ product.selling_price }}', quantity: '{{ product.quantity }}' },
        {% endfor %}
    ];

    // Sort products by lot number
    masterProductOptions.sort((a, b) => {
        const lotA = (a.lot || '').toUpperCase();
        const lotB = (b.lot || '').toUpperCase();
        return lotA.localeCompare(lotB);
    });

    // Calculate row total
    function calculateRowTotal(row) {
        const quantityInput = row.querySelector('.quantity-input');
        const priceInput = row.querySelector('.price-input');
        const totalDisplay = row.querySelector('.total-display');
        
        const quantity = parseInt(quantityInput.value) || 0;
        const price = parseFloat(priceInput.value) || 0;
        const total = quantity * price;
        
        totalDisplay.value = 'AED ' + total.toFixed(2);
        return total;
    }

    // Calculate grand total with VAT
    function calculateGrandTotal() {
        let subtotal = 0;
        const productRows = document.querySelectorAll('.product-row');
        
        productRows.forEach(row => {
            const total = calculateRowTotal(row);
            subtotal += total;
        });
        
        // Get VAT percentage
        const vatPercentage = parseFloat(document.getElementById('vatPercentage').value) || 0;
        const vatAmount = subtotal * (vatPercentage / 100);
        const grandTotal = subtotal + vatAmount;
        
        // Update display elements
        document.getElementById('subtotalAmount').textContent = 'AED ' + subtotal.toFixed(2);
        document.getElementById('vatPercentDisplay').textContent = vatPercentage.toFixed(2);
        document.getElementById('vatAmount').textContent = 'AED ' + vatAmount.toFixed(2);
        grandTotalElement.textContent = 'AED ' + grandTotal.toFixed(2);

        updatePaymentSummary(grandTotal);
    }

    // Sync paid/due values based on partial payment toggle and grand total
    function updatePaymentSummary(grandTotal) {
        if (!partialPaymentToggle || !paidAmountInput || !dueAmountDisplay) return;

        const partial = partialPaymentToggle.checked;

        if (!partial) {
            // Full payment: disable input, set to grand total
            paidAmountInput.disabled = true;
            paidAmountInput.value = grandTotal.toFixed(2);
            const due = 0;
            dueAmountDisplay.textContent = 'AED ' + due.toFixed(2);
        } else {
            // Partial payment: enable input, keep existing value (don't force format until blur)
            paidAmountInput.disabled = false;
            const paid = parseFloat(paidAmountInput.value) || 0;
            const due = Math.max(grandTotal - paid, 0);
            dueAmountDisplay.textContent = 'AED ' + due.toFixed(2);
        }
    }

    // Update remove buttons visibility
    function updateRemoveButtons() {
        const productRows = document.querySelectorAll('.product-row');
        const removeButtons = document.querySelectorAll('.remove-product');
        
        if (productRows.length > 1) {
            removeButtons.forEach(btn => btn.classList.remove('d-none'));
        } else {
            removeButtons.forEach(btn => btn.classList.add('d-none'));
        }
    }

    // Form validation
    multiSaleForm.addEventListener('submit', function(e) {
        const productRows = document.querySelectorAll('.product-row');
        let hasValidProducts = false;
        
        productRows.forEach(row => {
            const productSelect = row.querySelector('.product-select');
            const quantityInput = row.querySelector('.quantity-input');
            
            if (productSelect.value && quantityInput.value) {
                hasValidProducts = true;
            }
        });
        
        if (!hasValidProducts) {
            e.preventDefault();
            alert('Please add at least one product to the sale.');
            return;
        }

        // Validate partial payment
        const grandTotal = parseFloat((grandTotalElement.textContent || '0').replace(/[^0-9.]/g, '')) || 0;
        if (partialPaymentToggle && partialPaymentToggle.checked) {
            const paidVal = parseFloat(paidAmountInput.value) || 0;
            if (paidVal > grandTotal) {
                e.preventDefault();
                alert('Paid amount cannot exceed the grand total.');
                return;
            }
        }
        
        // Validate stock availability
        let stockError = false;
        productRows.forEach(row => {
            const productSelect = row.querySelector('.product-select');
            const quantityInput = row.querySelector('.quantity-input');
            const stockInfo = row.querySelector('.stock-info');
            
            if (productSelect.value && quantityInput.value) {
                const selectedOption = productSelect.options[productSelect.selectedIndex];
                const availableQuantity = parseInt(selectedOption.getAttribute('data-quantity')) || 0;
                const requestedQuantity = parseInt(quantityInput.value);
                
                if (requestedQuantity > availableQuantity) {
                    stockError = true;
                    row.style.borderColor = 'red';
                    stockInfo.style.color = 'red';
                    stockInfo.textContent = `Insufficient stock! Available: ${availableQuantity}`;
                }
            }
        });
        
        if (stockError) {
            e.preventDefault();
            alert('Some products have insufficient stock. Please adjust quantities.');
        }
    });

    // Initialize first row
    const firstRow = document.querySelector('.product-row');
    if (firstRow) {
        initializeProductRow(firstRow);
        updateRemoveButtons();
        calculateGrandTotal();
    }

    // VAT percentage change listener
    const vatPercentageInput = document.getElementById('vatPercentage');
    if (vatPercentageInput) {
        vatPercentageInput.addEventListener('input', function() {
            calculateGrandTotal();
        });
    }

    if (partialPaymentToggle) {
        partialPaymentToggle.addEventListener('change', function() {
            const grandTotal = parseFloat((grandTotalElement.textContent || '0').replace(/[^0-9.]/g, '')) || 0;
            updatePaymentSummary(grandTotal);
        });
    }

    if (paidAmountInput) {
        paidAmountInput.addEventListener('input', function() {
            const grandTotal = parseFloat((grandTotalElement.textContent || '0').replace(/[^0-9.]/g, '')) || 0;
            const paid = parseFloat(paidAmountInput.value) || 0;
            const due = Math.max(grandTotal - paid, 0);
            dueAmountDisplay.textContent = 'AED ' + due.toFixed(2);
        });
    }

    // Delete sale functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-sale-btn')) {
            const button = e.target.closest('.delete-sale-btn');
            const buyer = button.getAttribute('data-buyer');
            const date = button.getAttribute('data-date');
            const saleNumber = button.getAttribute('data-sale-number');
            
            // Set modal content
            document.getElementById('deleteSaleNumber').textContent = saleNumber;
            document.getElementById('deleteBuyerName').textContent = buyer;
            document.getElementById('deleteSaleDate').textContent = date;
            document.getElementById('deleteBuyerInput').value = buyer;
            document.getElementById('deleteDateInput').value = date;
            
            // Show confirmation modal
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
            deleteModal.show();
        }
    });

    // Handle "Add Payment" button for due customers
    document.addEventListener('click', function(e) {
        if (e.target.closest('.edit-due-btn')) {
            const button = e.target.closest('.edit-due-btn');
            const buyer = button.dataset.buyer || '';
            
            // Show modal to record additional payment
            document.getElementById('addPaymentBuyerName').value = buyer;
            document.getElementById('addPaymentBuyerInput').value = buyer;
            document.getElementById('additionalPaymentAmount').value = '';
            
            const addPaymentModal = new bootstrap.Modal(document.getElementById('addPaymentModal'));
            addPaymentModal.show();
        }
    });

    // Form submission handler for delete confirmation
    document.getElementById('deleteSaleForm').addEventListener('submit', function(e) {
        const buyer = document.getElementById('deleteBuyerInput').value;
        const date = document.getElementById('deleteDateInput').value;
        
        if (!buyer || !date) {
            e.preventDefault();
            alert('Error: Missing sale information.');
            return false;
        }
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Deleting...';
        submitBtn.disabled = true;
        
        return true;
    });

    // View sale details functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.view-sale-details')) {
            const button = e.target.closest('.view-sale-details');
            const buyer = button.getAttribute('data-buyer');
            const date = button.getAttribute('data-date');
            
            // Show loading
            document.getElementById('saleDetailsContent').innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div><p>Loading sale details...</p></div>';
            
            const saleDetailsModal = new bootstrap.Modal(document.getElementById('saleDetailsModal'));
            saleDetailsModal.show();
            
            fetch(`/get_sale_group_details?buyer=${encodeURIComponent(buyer)}&date=${encodeURIComponent(date)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSaleDetails(data.sales, buyer, date);
                    } else {
                        document.getElementById('saleDetailsContent').innerHTML = `<div class="alert alert-danger">Error loading sale details: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    document.getElementById('saleDetailsContent').innerHTML = `<div class="alert alert-danger">Error loading sale details: ${error}</div>`;
                });
        }
    });

    function showSaleDetails(sales, buyer, date) {
        let itemsHTML = '';
        let subtotal = 0;
        let vatTotal = 0;
        let paidTotal = 0;
        let dueTotal = 0;
        
        if (sales && sales.length > 0) {
            itemsHTML = `
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Category</th>
                                <th>Product</th>
                                <th>Color</th>
                                <th>Size</th>
                                <th>Qty</th>
                                <th>Unit Price</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${sales.map(sale => {
                                subtotal += parseFloat(sale.total_price || 0);
                                vatTotal += parseFloat(sale.vat_amount || 0);
                                paidTotal += parseFloat(sale.paid_amount || 0);
                                dueTotal += parseFloat(sale.due_amount || 0);
                                return `
                                <tr>
                                    <td><span class="badge bg-secondary">${sale.category || 'N/A'}</span></td>
                                    <td>${sale.product_name}</td>
                                    <td>${sale.color}</td>
                                    <td>${sale.size}</td>
                                    <td>
                                        <span class="view-qty">${sale.quantity}</span>
                                        <input type="number" class="form-control edit-qty d-none" min="0" style="width: 100%; padding: 8px;"
                                               value="${sale.quantity}"
                                               data-sale-id="${sale.id}" data-variant-id="${sale.product_variant_id}"
                                               data-unit-price="${parseFloat(sale.unit_price || sale.selling_price || 0)}"
                                               data-vat-pct="${parseFloat(sale.vat_percentage || 0)}">
                                    </td>
                                    <td>AED ${parseFloat(sale.unit_price).toFixed(2)}</td>
                                    <td class="line-total">AED ${parseFloat(sale.total_price).toFixed(2)}</td>
                                </tr>
                            `}).join('')}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" class="text-end"><strong>Subtotal:</strong></td>
                                <td><strong id="detailsSubtotal">AED ${subtotal.toFixed(2)}</strong></td>
                            </tr>
                            <tr>
                                <td colspan="6" class="text-end"><strong>VAT:</strong></td>
                                <td><strong id="detailsVat">AED ${vatTotal.toFixed(2)}</strong></td>
                            </tr>
                            <tr class="table-success">
                                <td colspan="6" class="text-end"><strong>Total (with VAT):</strong></td>
                                <td><strong id="detailsGrand">AED ${(subtotal + vatTotal).toFixed(2)}</strong></td>
                            </tr>
                            <tr>
                                <td colspan="6" class="text-end"><strong>Paid:</strong></td>
                                <td><strong class="text-success">AED ${paidTotal.toFixed(2)}</strong></td>
                            </tr>
                            <tr>
                                <td colspan="6" class="text-end"><strong>Due:</strong></td>
                                <td><strong class="text-danger">AED ${dueTotal.toFixed(2)}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            `;
        }
        
        const detailsHTML = `
            <div class="sale-details-container">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Buyer:</strong> 
                        <span class="view-field">${buyer}</span>
                        <input type="text" class="form-control form-control-sm d-none edit-field" id="editBuyer" value="${buyer}">
                    </div>
                    <div class="col-md-6">
                        <strong>Date:</strong> 
                        <span class="view-field">${date}</span>
                        <input type="date" class="form-control form-control-sm d-none edit-field" id="editDate" value="${date}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <strong>Phone:</strong> 
                        <span class="view-field">${sales[0]?.phone_number || '-'}</span>
                        <input type="text" class="form-control form-control-sm d-none edit-field" id="editPhone" value="${sales[0]?.phone_number || ''}">
                    </div>
                    <div class="col-md-4">
                        <strong>Payment Method:</strong> 
                        <span class="view-field">${sales[0]?.payment_method || 'cash'}</span>
                        <select class="form-select form-select-sm d-none edit-field" id="editPayment">
                            <option value="cash" ${sales[0]?.payment_method === 'cash' ? 'selected' : ''}>Cash</option>
                            <option value="card" ${sales[0]?.payment_method === 'card' ? 'selected' : ''}>Card</option>
                            <option value="bank_transfer" ${sales[0]?.payment_method === 'bank_transfer' ? 'selected' : ''}>Bank Transfer</option>
                            <option value="check" ${sales[0]?.payment_method === 'check' ? 'selected' : ''}>Check</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <strong>Total Items:</strong> <span class="badge bg-info" id="detailsItemCount">${sales.length} items</span>
                    </div>
                </div>
                <div class="mb-2">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="toggleEditSales">
                        <i class="fas fa-edit me-1"></i> Edit Sales
                    </button>
                    <button type="button" class="btn btn-sm btn-success d-none" id="saveEditSales">
                        <i class="fas fa-save me-1"></i> Save Changes
                    </button>
                    <span class="text-muted ms-2" id="editHint" style="display:none;">Update quantities and save to apply.</span>
                </div>
                <div class="row mb-3">
                    <div class="col-12">
                        <strong>Notes:</strong>
                        <span class="view-field">${sales[0]?.notes || ''}</span>
                        <textarea class="form-control form-control-sm d-none edit-field" id="editNotes" rows="2">${sales[0]?.notes || ''}</textarea>
                    </div>
                </div>
                <h6>Products:</h6>
                ${itemsHTML || '<p>No products found</p>'}
            </div>
        `;
        
        document.getElementById('saleDetailsContent').innerHTML = detailsHTML;

        // Edit mode controls
        const toggleBtn = document.getElementById('toggleEditSales');
        const saveBtn = document.getElementById('saveEditSales');
        const editHint = document.getElementById('editHint');
        const editFields = document.querySelectorAll('#saleDetailsContent .edit-field');
        const viewFields = document.querySelectorAll('#saleDetailsContent .view-field');

        function recalcTotalsFromTable() {
            const rows = document.querySelectorAll('#saleDetailsContent tbody tr');
            let newSubtotal = 0;
            let newVat = 0;
            rows.forEach(r => {
                const qtyInput = r.querySelector('.edit-qty');
                const unit = parseFloat(qtyInput?.dataset?.unitPrice || 0);
                const vatPct = parseFloat(qtyInput?.dataset?.vatPct || 0);
                const q = parseInt(qtyInput?.value || '0') || 0;
                const lineTotal = q * unit;
                newSubtotal += lineTotal;
                newVat += lineTotal * (vatPct/100.0);
                const td = r.querySelector('.line-total');
                if (td) td.textContent = 'AED ' + lineTotal.toFixed(2);
            });
            const grand = newSubtotal + newVat;
            const sEl = document.getElementById('detailsSubtotal');
            const vEl = document.getElementById('detailsVat');
            const gEl = document.getElementById('detailsGrand');
            if (sEl) sEl.textContent = 'AED ' + newSubtotal.toFixed(2);
            if (vEl) vEl.textContent = 'AED ' + newVat.toFixed(2);
            if (gEl) gEl.textContent = 'AED ' + grand.toFixed(2);
        }

        toggleBtn?.addEventListener('click', () => {
            const inputs = document.querySelectorAll('#saleDetailsContent .edit-qty');
            const views = document.querySelectorAll('#saleDetailsContent .view-qty');
            inputs.forEach(i => i.classList.toggle('d-none'));
            views.forEach(v => v.classList.toggle('d-none'));
            editFields.forEach(f => f.classList.toggle('d-none'));
            viewFields.forEach(f => f.classList.toggle('d-none'));
            saveBtn.classList.toggle('d-none');
            editHint.style.display = saveBtn.classList.contains('d-none') ? 'none' : 'inline';
            inputs.forEach(i => i.addEventListener('input', recalcTotalsFromTable));
            recalcTotalsFromTable();
        });

        saveBtn?.addEventListener('click', async () => {
            const inputs = Array.from(document.querySelectorAll('#saleDetailsContent .edit-qty'));
            const items = inputs.map(i => ({
                sale_id: parseInt(i.dataset.saleId),
                product_variant_id: parseInt(i.dataset.variantId),
                old_quantity: parseInt(i.getAttribute('value')) || 0,
                new_quantity: parseInt(i.value) || 0,
                unit_price: parseFloat(i.dataset.unitPrice) || 0,
                vat_percentage: parseFloat(i.dataset.vatPct) || 0,
            }));
            // Collect group-level edits
            const buyerNew = (document.getElementById('editBuyer')?.value || '').trim();
            const dateNew = document.getElementById('editDate')?.value || '';
            const phoneNew = (document.getElementById('editPhone')?.value || '').trim();
            const payNew = document.getElementById('editPayment')?.value || '';
            const notesNew = document.getElementById('editNotes')?.value || '';
            try {
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Saving...';
                const res = await fetch('/edit_sale_group', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ 
                        buyer_name: buyer, 
                        sale_date: date, 
                        buyer_name_new: buyerNew || undefined,
                        sale_date_new: dateNew || undefined,
                        phone_number: phoneNew,
                        payment_method: payNew,
                        notes: notesNew,
                        items 
                    })
                });
                const data = await res.json();
                if (data.success) {
                    alert('Sale updated successfully.');
                    location.reload();
                } else {
                    alert(data.message || 'Failed to update sale');
                }
            } catch (err) {
                console.error(err);
                alert('Error saving changes');
            } finally {
                saveBtn.disabled = false;
                saveBtn.innerHTML = '<i class="fas fa-save me-1"></i> Save Changes';
            }
        });
    }

    // Print receipt functionality
    const printReceiptBtn = document.getElementById('printReceiptBtn');
    const receiptModal = new bootstrap.Modal(document.getElementById('receiptModal'));

    // Print single receipt
    document.addEventListener('click', function(e) {
        if (e.target.closest('.print-single-receipt')) {
            const button = e.target.closest('.print-single-receipt');
            const buyer = button.getAttribute('data-buyer');
            const date = button.getAttribute('data-date');
            
            // Show loading in receipt modal
            document.getElementById('receiptContent').innerHTML = '<div class="text-center"><div class="spinner-border" role="status"></div><p>Generating receipt...</p></div>';
            
            const receiptModal = new bootstrap.Modal(document.getElementById('receiptModal'));
            receiptModal.show();
            
            // Fetch detailed sale data for receipt
            fetch(`/get_sale_receipt_data?buyer=${encodeURIComponent(buyer)}&date=${encodeURIComponent(date)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        generateReceiptContent(data);
                    } else {
                        document.getElementById('receiptContent').innerHTML = `<div class="alert alert-danger">Error generating receipt: ${data.message}</div>`;
                    }
                })
                .catch(error => {
                    document.getElementById('receiptContent').innerHTML = `<div class="alert alert-danger">Error generating receipt: ${error}</div>`;
                });
        }
    });

    // Generate receipt content with detailed product information and contact details
    function generateReceiptContent(saleData) {
        const receiptContent = document.getElementById('receiptContent');
        
        let subtotal = 0;
        let vatTotal = 0;
        let paidTotal = 0;
        let dueTotal = 0;
        let itemsHTML = '';
        
        // Group products by category to show count per category; assume uniform price per category
        const categoryMap = {};
        if (saleData.sales && saleData.sales.length > 0) {
            saleData.sales.forEach(sale => {
                vatTotal += parseFloat(sale.vat_amount || 0);
                paidTotal += parseFloat(sale.paid_amount || 0);
                dueTotal += parseFloat(sale.due_amount || 0);
                
                const category = sale.category || 'Uncategorized';
                if (!categoryMap[category]) {
                    categoryMap[category] = {
                        count: 0,
                        unit_price: parseFloat(sale.unit_price || sale.selling_price || 0),
                    };
                }
                // Preserve first unit price per category
                if (!categoryMap[category].unit_price && (sale.unit_price || sale.selling_price)) {
                    categoryMap[category].unit_price = parseFloat(sale.unit_price || sale.selling_price || 0);
                }
                categoryMap[category].count += parseInt(sale.quantity) || 0;
            });

            // Build rows grouped by category
            for (const [category, data] of Object.entries(categoryMap)) {
                const unit = parseFloat(data.unit_price || 0);
                const total = unit * (data.count || 0);
                subtotal += total;
                itemsHTML += `
                    <tr>
                        <td><strong>${category}</strong></td>
                        <td class="text-center"><strong>${data.count}</strong></td>
                        <td class="text-center">AED ${unit.toFixed(2)}</td>
                        <td>AED ${total.toFixed(2)}</td>
                    </tr>
                `;
            }
        }

        // Add placeholder rows so totals stay low on short lists
        const minRows = 10;
        const currentRows = Object.keys(categoryMap).length;
        const fillerRows = Math.max(0, minRows - currentRows);
        for (let i = 0; i < fillerRows; i++) {
            itemsHTML += `
                <tr class="placeholder-row">
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            `;
        }

        const totalWithVat = subtotal + vatTotal;

        const receiptHTML = `
            <div class="receipt-container" id="printableReceipt">
                <!-- Compact Company Header -->
                <div class="receipt-header d-flex align-items-start gap-3 mb-3">
                    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Company Logo" class="receipt-logo" style="height: 80px; width: auto; align-self: center;">
                    <div class="flex-grow-1" style="display: flex; flex-direction: column; justify-content: center;">
                        <p class="mb-1 company-arabic">سَمْسُل حَقّ لِتِجَارَةِ الْمَلَابِسِ الْجَاهِزَةِ ذ.م.م</p>
                        <h3 class="company-name company-english mb-1">SUMSUL HAQUE READYMADE GARMENTS TRADING L.L.C</h3>
                        <p class="company-meta mb-0">+971 55 320 9940 (WhatsApp) | +971 56 901 7316 · Shop 018, New Industrial Area - 2, Ajman, U.A.E.</p>
                    </div>
                    <div class="text-end receipt-meta small">
                        <div style="margin-bottom: 8px;"><strong>Date:</strong> ${saleData.sale_date}</div>
                        <div style="margin-bottom: 8px;"><strong>Payment:</strong> ${saleData.payment_method || 'Cash/Card'}</div>
                        <div><strong>Receipt No:</strong> ${saleData.sales[0].id || new Date().getTime()}</div>
                    </div>
                </div>
                <div class="receipt-content">
                    <!-- Sale Information -->
                    <div class="receipt-sale-info mb-3 p-3 border rounded">
                        <div class="d-flex flex-wrap">
                            <div class="me-4 mb-1"><strong>Buyer:</strong> ${saleData.buyer}</div>
                            ${saleData.sales[0]?.phone_number ? `<div class="me-4 mb-1"><strong>Phone:</strong> ${saleData.sales[0].phone_number}</div>` : ''}
                            <div class="me-4 mb-1"><strong>Items:</strong> ${saleData.sales.length}</div>
                        </div>
                    </div>

                    <!-- Products Table -->
                    <div class="table-responsive mb-3">
                        <table class="table table-bordered receipt-table">
                            <thead class="table-dark">
                                <tr>
                                    <th>Category</th>
                                    <th>Count</th>
                                    <th>Unit Price (AED)</th>
                                    <th>Total (AED)</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${itemsHTML}
                            </tbody>
                            <tfoot class="summary-footer">
                                <tr>
                                    <td colspan="2" class="text-end"><strong>Subtotal</strong></td>
                                    <td colspan="2" class="text-end">AED ${subtotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-end"><strong>VAT</strong></td>
                                    <td colspan="2" class="text-end">AED ${vatTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-end"><strong>Total (with VAT)</strong></td>
                                    <td colspan="2" class="text-end">AED ${totalWithVat.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-end"><strong>Paid</strong></td>
                                    <td colspan="2" class="text-end text-success">AED ${paidTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-end"><strong>Due</strong></td>
                                    <td colspan="2" class="text-end text-danger">AED ${dueTotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Signatures Section -->
                <div class="receipt-signatures mt-3 pt-3 border-top">
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <div class="signature-box">
                                <div class="signature-line"></div>
                                <p class="mb-0 mt-2">${saleData.buyer}</p>
                                <small class="text-muted">Name & Signature</small>
                            </div>
                        </div>
                        <div class="col-md-6 text-center">
                            <div class="signature-box">                            
                                <div class="signature-line"></div>
                                <p class="mb-0 mt-2">SUMSUL HAQUE GARMENTS</p>
                                <small class="text-muted">Company Representative</small>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        `;
        
        receiptContent.innerHTML = receiptHTML;
    }

    // Print receipt functionality
    printReceiptBtn.addEventListener('click', function() {
        const printableContent = document.getElementById('printableReceipt').innerHTML;
        
        // Create print window
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Sales Receipt - SUMSUL HAQUE Garments</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                <style>
                    @page {
                        size: A4;
                        margin: 10mm;
                    }
                    body { 
                        font-family: Arial, sans-serif; 
                        margin: 10mm;
                        color: #000;
                        background: white;
                        font-size: 12px;
                        line-height: 1.35;
                    }
                    .receipt-container { 
                        max-width: 780px; 
                        margin: 0 auto;
                        padding: 16px;
                        background: white;
                        display: flex;
                        flex-direction: column;
                        min-height: 100vh;
                    }
                    @media print {
                        body { margin: 8mm; }
                        .receipt-container { 
                            padding: 12px;
                            min-height: 100vh;
                        }
                        .no-print { display: none !important; }
                        .table-dark th { 
                            background: #343a40 !important; 
                            -webkit-print-color-adjust: exact;
                        }
                        .table-success tr { 
                            background: #d1e7dd !important;
                            -webkit-print-color-adjust: exact;
                        }
                    }
                    .receipt-logo {
                        height: 60px;
                        width: auto;
                    }
                    .company-name {
                        font-size: 1.2rem;
                        font-weight: 800;
                        color: #0f172a;
                    }
                    .company-english {
                        font-size: 1.25rem;
                        font-weight: 800;
                    }
                    .company-arabic {
                        font-size: 1.1rem;
                        font-weight: 800;
                        color: #0f172a;
                        line-height: 1.35;
                    }
                    .company-subtitle {
                        color: #334155;
                        font-size: 0.95rem;
                    }
                    .company-tagline {
                        color: #1f2937;
                        font-size: 0.95rem;
                    }
                    .company-meta {
                        color: #475569;
                        font-size: 0.9rem;
                    }
                    .receipt-meta {
                        font-size: 0.9rem;
                        line-height: 1.3;
                    }
                    .receipt-sale-info {
                        background: #f8f9fa;
                        border: 1px solid #dee2e6 !important;
                        padding: 10px !important;
                    }
                    .receipt-content {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                    }
                    .receipt-content .table-responsive {
                        flex: 1;
                    }
                    .receipt-table th {
                        background: #1f2937 !important;
                        color: white !important;
                        padding: 8px 6px;
                        font-size: 12px;
                    }
                    .receipt-table td {
                        padding: 8px 6px;
                        font-size: 12px;
                    }
                    .receipt-table .placeholder-row td {
                        height: 18px;
                        background: #ffffff;
                        border: 1px solid #eef2f7;
                    }
                    .summary-footer tr {
                        background: #e2f3ff !important;
                    }
                    .summary-footer td {
                        padding: 8px 6px;
                        font-weight: 600;
                    }
                    .receipt-signatures {
                        margin-top: auto;
                    }
                    .signature-line {
                        border-bottom: 1px solid #000;
                        width: 220px;
                        height: 40px;
                        margin: 0 auto;
                    }
                    .text-center { text-align: center; }
                    .text-end { text-align: right; }
                    .text-success { color: #059669 !important; }
                    .text-danger { color: #dc2626 !important; }
                    .text-muted { color: #6c757d !important; }
                </style>
            </head>
            <body>
                ${printableContent}
                <div class="text-center mt-3 no-print">
                    <button onclick="window.print()" class="btn btn-primary me-2">
                        <i class="fas fa-print me-1"></i> Print Receipt
                    </button>
                    <button onclick="window.close()" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i> Close
                    </button>
                </div>
                <script>
                    // Auto-print option
                    setTimeout(() => {
                        window.print();
                    }, 500);
                <\/script>
            </body>
            </html>
        `);
        
        printWindow.document.close();
    });

    // ============================================
    // VAT Summary Functionality
    // ============================================
    
    const calculateVatBtn = document.getElementById('calculateVatBtn');
    const resetVatBtn = document.getElementById('resetVatBtn');
    const vatDateFrom = document.getElementById('vatDateFrom');
    const vatDateTo = document.getElementById('vatDateTo');
    const vatSummaryResults = document.getElementById('vatSummaryResults');
    
    // Calculate VAT summary
    calculateVatBtn.addEventListener('click', function() {
        const dateFrom = vatDateFrom.value;
        const dateTo = vatDateTo.value;
        
        if (!dateFrom || !dateTo) {
            alert('Please select both From Date and To Date');
            return;
        }
        
        if (new Date(dateFrom) > new Date(dateTo)) {
            alert('From Date cannot be after To Date');
            return;
        }
        
        // Show loading
        calculateVatBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Calculating...';
        calculateVatBtn.disabled = true;
        
        // Fetch VAT summary
        fetch(`/api/vat_summary?date_from=${dateFrom}&date_to=${dateTo}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Display results
                    document.getElementById('vatTotalSales').textContent = `AED ${data.grand_total.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
                    document.getElementById('vatSubtotal').textContent = `AED ${data.subtotal.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
                    document.getElementById('vatCollected').textContent = `AED ${data.total_vat.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
                    document.getElementById('vatSalesCount').textContent = data.sales_count;
                    
                    // Format date range
                    const dateFromFormatted = new Date(dateFrom).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
                    const dateToFormatted = new Date(dateTo).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
                    document.getElementById('vatPeriodDisplay').textContent = `${dateFromFormatted} to ${dateToFormatted}`;
                    
                    // Show results
                    vatSummaryResults.style.display = 'block';
                } else {
                    alert('Error calculating VAT summary: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error: ' + error);
            })
            .finally(() => {
                calculateVatBtn.innerHTML = '<i class="fas fa-calculator me-1"></i> Calculate VAT';
                calculateVatBtn.disabled = false;
            });
    });
    
    // Reset VAT summary
    resetVatBtn.addEventListener('click', function() {
        vatDateFrom.value = '';
        vatDateTo.value = '';
        vatSummaryResults.style.display = 'none';
    });
});
</script>

<!-- Add Payment Modal for Due Customers -->
<div class="modal fade" id="addPaymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus me-2"></i> Record Additional Payment</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('add_payment') }}" id="addPaymentForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Customer Name</label>
                        <input type="text" class="form-control" id="addPaymentBuyerName" disabled>
                        <input type="hidden" id="addPaymentBuyerInput" name="buyer_name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payment Amount (AED) *</label>
                        <input type="number" step="0.01" class="form-control" id="additionalPaymentAmount" name="payment_amount" required min="0.01">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payment Date *</label>
                        <input type="date" class="form-control" name="payment_date" required value="{{ today }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payment Method</label>
                        <select class="form-select" name="payment_method">
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="check">Check</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" name="payment_notes" rows="2" placeholder="Additional notes..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-1"></i> Record Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}