document.addEventListener('DOMContentLoaded', () => {
    const params = new URLSearchParams(window.location.search);
    const data = JSON.parse(decodeURIComponent(params.get('data')));
    
    const receiptDetails = document.getElementById('receiptDetails');
    const transactionId = document.getElementById('transactionId');
    
    // Format amount as currency
    const formattedAmount = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(data.amount);
    
    // Format date
    const paymentDate = new Date(data.timestamp).toLocaleString();
    
    // Build receipt rows
    receiptDetails.innerHTML = `
        <div class="receipt-row">
            <span class="label">Device ID:</span>
            <span>${data.deviceId}</span>
        </div>
        <div class="receipt-row">
            <span class="label">Payment Method:</span>
            <span>${data.paymentMethod}</span>
        </div>
        <div class="receipt-row">
            <span class="label">Amount:</span>
            <span>${formattedAmount}</span>
        </div>
        <div class="receipt-row">
            <span class="label">Date:</span>
            <span>${paymentDate}</span>
        </div>
    `;
    
    // Generate random transaction ID
    transactionId.textContent = `Transaction ID: TXN-${Math.random().toString(36).substr(2, 9).toUpperCase()}`;
});