script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize current date and time
    const now = new Date();
    document.getElementById('transactionDate').valueAsDate = now;
    document.getElementById('transactionTime').value = now.toTimeString().substring(0, 5);
    
    // Update preview when inputs change
    const inputs = document.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
        input.addEventListener('input', updateReceiptPreview);
    });
    
    // Payment method change handler
    document.querySelectorAll('input[name="paymentMethod"]').forEach(radio => {
        radio.addEventListener('change', function() {
            updateReceiptPreview();
            if (this.value === 'Credit Card' || this.value === 'Debit Card') {
                document.getElementById('cardReferenceContainer').classList.remove('hidden');
            } else {
                document.getElementById('cardReferenceContainer').classList.add('hidden');
            }
        });
    });
    
    // Predefined services handlers
    document.getElementById('xfinityRefill').addEventListener('change', updateReceiptPreview);
    document.getElementById('boostBillPay').addEventListener('change', function() {
        document.getElementById('boostBillPayAmount').classList.toggle('hidden', !this.checked);
        updateReceiptPreview();
    });
    document.getElementById('boostBillPayAmount').addEventListener('input', updateReceiptPreview);
    
    // Add custom item button
    document.getElementById('addCustomItem').addEventListener('click', addCustomItem);
    
    // Print and PDF buttons
    document.getElementById('printReceipt').addEventListener('click', printReceipt);
    document.getElementById('downloadPdf').addEventListener('click', downloadPdf);
    
    // Logo upload handler
    document.getElementById('logoUpload').addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(event) {
                document.getElementById('logoPreview').src = event.target.result;
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });
    
    // Initial update
    updateReceiptPreview();
    
    function addCustomItem() {
        const container = document.getElementById('customItemsContainer');
        const itemId = Date.now();
        
        const itemDiv = document.createElement('div');
        itemDiv.className = 'item-row';
        itemDiv.innerHTML = `
            <input type="text" placeholder="Item name" class="item-name px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <input type="number" placeholder="Price" min="0" step="0.01" class="item-price px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <button class="remove-item bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded-md">
                <i data-feather="trash-2" class="w-4 h-4"></i>
            </button>
        `;
        
        container.appendChild(itemDiv);
        feather.replace();
        
        // Add event listeners to new inputs
        itemDiv.querySelector('.item-name').addEventListener('input', updateReceiptPreview);
        itemDiv.querySelector('.item-price').addEventListener('input', updateReceiptPreview);
        itemDiv.querySelector('.remove-item').addEventListener('click', function() {
            container.removeChild(itemDiv);
            updateReceiptPreview();
        });
    }
    
    function updateReceiptPreview() {
        // Update header info
        document.getElementById('addressPreview').innerHTML = document.getElementById('storeAddress').value.replace(/\n/g, '<br>');
        document.getElementById('repNamePreview').textContent = document.getElementById('repName').value;
        document.getElementById('transactionIdPreview').textContent = document.getElementById('transactionId').value;
        
        // Format date and time
        const date = document.getElementById('transactionDate').value;
        const time = document.getElementById('transactionTime').value;
        if (date && time) {
            const formattedDate = new Date(`${date}T${time}`).toLocaleString('en-US', {
                month: '2-digit',
                day: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                hour12: true
            });
            document.getElementById('dateTimePreview').textContent = `Date: ${formattedDate}`;
        }
        
        // Update payment method
        const paymentMethod = document.querySelector('input[name="paymentMethod"]:checked').value;
        document.getElementById('paymentMethodPreview').textContent = `Payment Method: ${paymentMethod}`;
        
        // Update thank you and policy
        document.getElementById('thankYouPreview').textContent = document.getElementById('thankYouMessage').value;
        document.getElementById('policyPreview').textContent = document.getElementById('storePolicy').value;
        
        // Calculate items and totals
        let subtotal = 0;
        const itemsContainer = document.getElementById('itemsPreview');
        itemsContainer.innerHTML = '';
        
        // Add predefined services
        if (document.getElementById('xfinityRefill').checked) {
            subtotal += 45;
            addItemToPreview('Xfinity Prepaid Refill', 45, false);
        }
        
        if (document.getElementById('boostBillPay').checked) {
            const amount = parseFloat(document.getElementById('boostBillPayAmount').value) || 0;
            if (amount >= 5 && amount <= 250) {
                subtotal += amount;
                addItemToPreview('Boost RTR Bill Pay', amount, false);
            }
        }
        
        // Add custom items
        document.querySelectorAll('.item-row').forEach(row => {
            const name = row.querySelector('.item-name').value;
            const price = parseFloat(row.querySelector('.item-price').value) || 0;
            
            if (name && price > 0) {
                subtotal += price;
                addItemToPreview(name, price, true);
            }
        });
        
        // Calculate tax (8.25% on taxable items)
        const tax = subtotal * 0.0825;
        const total = subtotal + tax;
        
        // Update totals
        document.getElementById('subtotalPreview').textContent = `$${subtotal.toFixed(2)}`;
        document.getElementById('taxPreview').textContent = `$${tax.toFixed(2)}`;
        document.getElementById('totalPreview').textContent = `$${total.toFixed(2)}`;
        
        // Add animation
        itemsContainer.classList.add('receipt-update');
        setTimeout(() => {
            itemsContainer.classList.remove('receipt-update');
        }, 300);
        
        function addItemToPreview(name, price, taxable) {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'flex justify-between py-1';
            
            const nameSpan = document.createElement('span');
            nameSpan.textContent = name;
            
            const priceSpan = document.createElement('span');
            priceSpan.textContent = `$${price.toFixed(2)}`;
            if (taxable) {
                priceSpan.innerHTML += ' <span class="text-xs text-gray-500">*T</span>';
            }
            
            itemDiv.appendChild(nameSpan);
            itemDiv.appendChild(priceSpan);
            itemsContainer.appendChild(itemDiv);
        }
    }
    
    function printReceipt() {
        const receiptElement = document.getElementById('receiptPreview');
        const originalDisplay = receiptElement.style.display;
        
        // Show only the receipt for printing
        document.querySelectorAll('body > *:not(#receiptPreview)').forEach(el => {
            el.style.display = 'none';
        });
        receiptElement.style.display = 'block';
        receiptElement.style.margin = '0 auto';
        receiptElement.style.boxShadow = 'none';
        receiptElement.style.border = 'none';
        
        window.print();
        
        // Restore original display
        document.querySelectorAll('body > *').forEach(el => {
            el.style.display = '';
        });
        receiptElement.style.display = originalDisplay;
        receiptElement.style.boxShadow = '';
        receiptElement.style.border = '';
    }
    
    function downloadPdf() {
        const { jsPDF } = window.jspdf;
        const receiptElement = document.getElementById('receiptPreview');
        
        html2canvas(receiptElement).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const pdf = new jsPDF({
                orientation: 'portrait',
                unit: 'mm'
            });
            
            // Calculate PDF dimensions to fit content
            const imgWidth = 80; // mm
            const imgHeight = (canvas.height * imgWidth) / canvas.width;
            
            pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
            pdf.save('boost_receipt.pdf');
        });
    }
});