-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprint.html
131 lines (118 loc) · 4.62 KB
/
print.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retail Invoice Summary</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h2>ARBUDA PETROLEUM, SONI</h2>
<p>Mo: 94275 98784</p>
<p>Dealer: Bharat Petroleum Corporation Ltd.</p>
</div>
<div class="centered-align">
<h4>Retail Invoice</h4>
</div>
<div class="left-align">
<strong>Bill To:</strong><br>
<strong>Name:</strong> SHREEKAR CONSTRUCTION<br>
<strong>Address:</strong> LS NO 132 ANIDA, TALALA, GIR-SOMNATH, GUJARAT - 362140<br>
<strong>GSTIN No:</strong> 24AQZPP3184H1Z7
</div>
<table>
<thead>
<tr>
<th colspan="5">Statement</th>
<th colspan="3">Date</th>
</tr>
<tr>
<th>Sr. No</th>
<th>Date</th>
<th>Bill No</th>
<th>Product Name</th>
<th>Description</th>
<th>Qty (liters)</th>
<th>Rate (₹)</th>
<th>Amount (₹)</th>
</tr>
</thead>
<tbody id="invoiceBody">
<!-- Rows will be dynamically inserted here -->
</tbody>
<tfoot>
<tr>
<td colspan="5" class="left-align summary-item">
<strong>Item Summary</strong><br>
<strong>Quantity:</strong> <span id="totalQuantity">0</span> liters
</td>
<td colspan="2" class="left-align">
<strong>Total Amount</strong>
</td>
<td class="right-align">
<strong>₹ <span id="TotalAmount">0.00</span></strong>
</td>
</tr>
<tr>
<td colspan="8" class="left-align footer-note">
1) Subject to Banaskantha Jurisdiction<br>
2) Query in the Invoice should be notified to us immediately. No claim shall be entertained after 1 day from the date of bill.<br>
3) If bill is paid after due date, 24% interest will be charged.<br>
4) Rates are inclusive of VAT.
</td>
</tr>
<tr>
<td colspan="4" class="left-align">
<p><strong>GSTIN No:</strong> 24ABVPP9362J1ZT</p>
<p><strong>TIN No:</strong> 2402091616</p>
</td>
<td colspan="4" class="right-align">
<p>for, <strong>ARBUDA PETROLEUM</strong></p><br>
<em>Authorised Signatory</em>
<br>
</td>
</tr>
</tfoot>
</table>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const records = JSON.parse(localStorage.getItem('productRecords')) || [];
const invoiceBody = document.getElementById('invoiceBody');
let totalQuantity = 0;
let totalAmount = 0;
function formatDate(dateString) {
const date = new Date(dateString);
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
return `${day}-${month}-${year}`;
}
records.forEach((record, index) => {
const amount = (record.Price * record.Quantity).toFixed(2);
const row = `
<tr>
<td>${index + 1}</td>
<td>${formatDate(record.Date)}</td>
<td>${record.Number}</td>
<td>${record.ProductName}</td>
<td>${record.Description}</td>
<td>${parseFloat(record.Quantity).toFixed(2)}</td>
<td>${parseFloat(record.Price).toFixed(2)}</td>
<td class="right-align">${amount}</td>
</tr>
`;
invoiceBody.insertAdjacentHTML('beforeend', row);
totalQuantity += parseFloat(record.Quantity);
totalAmount += parseFloat(amount);
});
document.getElementById('totalQuantity').textContent = totalQuantity.toFixed(2);
document.getElementById('TotalAmount').textContent = totalAmount.toFixed(2);
const invoiceDate = formatDate(new Date().toISOString());
const statementPeriod = records.length > 0 ? `${formatDate(records[0].Date)} to ${formatDate(records[records.length - 1].Date)}` : '';
document.querySelector('th[colspan="5"]').innerHTML = `<strong>Statement:</strong><br>${statementPeriod}`;
document.querySelector('th[colspan="3"]').innerHTML = `<strong>Date:</strong><br>${invoiceDate}`;
});
</script>
</html>