Invoice/lowePrice.html at main · Mahabub2030/Invoice · GitHub

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lowest Price Supplier</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <!-- Header -->
        <header class="flex justify-between items-center bg-white shadow p-4 rounded mb-4">
            <div>
                <h1 class="text-2xl font-bold">Lowest Price Supplier</h1>
                <p class="text-gray-600">Details of the supplier with the lowest total price</p>
            </div>
            <div>
                <button class="bg-blue-500 text-white px-4 py-2 rounded"><a href="./index1.html">Back to Main Page</a></button>
            </div>
        </header>

        <!-- Supplier Details -->
        <div class="bg-white shadow rounded p-4 mb-4">
            <h2 class="text-xl font-bold mb-2" id="lowestSupplierName"></h2>
            <p>Total Price (with VAT): <span id="lowestTotalPrice"></span></p>
        </div>

        <!-- Descriptions Table -->
        <div class="bg-white shadow rounded p-4 mb-4">
            <table id="descriptionTable" class="min-w-full border-collapse w-full">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="border px-4 py-2">Sr_No</th>
                        <th class="border px-4 py-2">Service No</th>
                        <th class="border px-4 py-2">Description</th>
                        <th class="border px-4 py-2">Unit</th>
                        <th class="border px-4 py-2">Qty</th>
                        <th class="border px-4 py-2">Unit Price 1</th>
                        <th class="border px-4 py-2">Total Price 1</th>
                        <th class="border px-4 py-2">Unit Price 2</th>
                        <th class="border px-4 py-2">Total Price 2</th>
                        <th class="border px-4 py-2">Unit Price 3</th>
                        <th class="border px-4 py-2">Total Price 3</th>
                    </tr>
                </thead>
                <tbody id="descriptionBody">
                    <!-- Descriptions will be populated here -->
                </tbody>
            </table>
        </div>
    </div>
    <script>
        // Retrieve the lowest price supplier details from localStorage and display them
        window.addEventListener('load', () => {
            const lowestSupplier = localStorage.getItem('lowestSupplier');
            const lowestPrice = localStorage.getItem('lowestPrice');
            const descriptions = JSON.parse(localStorage.getItem('descriptions') || '[]');
            const descriptionBody = document.getElementById('descriptionBody');

            document.getElementById('lowestSupplierName').textContent = lowestSupplier;
            document.getElementById('lowestTotalPrice').textContent = lowestPrice;

            descriptions.forEach(description => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="border px-4 py-2">${description.Sr_No}</td>
                    <td class="border px-4 py-2">${description.serviceNo}</td>
                    <td class="border px-4 py-2">${description.description}</td>
                    <td class="border px-4 py-2">${description.unit}</td>
                    <td class="border px-4 py-2">${description.qty}</td>
                    <td class="border px-4 py-2">${description.unitPrice1}</td>
                    <td class="border px-4 py-2">${description.totalPrice1}</td>
                    <td class="border px-4 py-2">${description.unitPrice2}</td>
                    <td class="border px-4 py-2">${description.totalPrice2}</td>
                    <td class="border px-4 py-2">${description.unitPrice3}</td>
                    <td class="border px-4 py-2">${description.totalPrice3}</td>
                `;
                descriptionBody.appendChild(row);
            });
        });


    // Calculate totals, VAT, and subtotals
    function calculateTotals() {
        let subtotal1 = 0, subtotal2 = 0, subtotal3 = 0;

        document.querySelectorAll('#comparisonTable tbody tr').forEach(row => {
            const qty = parseFloat(row.cells[4].textContent) || 0;
            const unitPrice1 = parseFloat(row.cells[5].textContent) || 0;
            const totalPrice1 = qty * unitPrice1;
            row.cells[6].textContent = totalPrice1.toFixed(2);
            subtotal1 += totalPrice1;

            const unitPrice2 = parseFloat(row.cells[7].textContent) || 0;
            const totalPrice2 = qty * unitPrice2;
            row.cells[8].textContent = totalPrice2.toFixed(2);
            subtotal2 += totalPrice2;

            const unitPrice3 = parseFloat(row.cells[9].textContent) || 0;
            const totalPrice3 = qty * unitPrice3;
            row.cells[10].textContent = totalPrice3.toFixed(2);
            subtotal3 += totalPrice3;
        });

        document.getElementById('subtotal').textContent = subtotal1.toFixed(2);
        document.getElementById('subtotal2').textContent = subtotal2.toFixed(2);
        document.getElementById('subtotal3').textContent = subtotal3.toFixed(2);

        const vat1 = subtotal1 * 0.15;
        const vat2 = subtotal2 * 0.15;
        const vat3 = subtotal3 * 0.15;

        document.getElementById('vat').textContent = vat1.toFixed(2);
        document.getElementById('vat2').textContent = vat2.toFixed(2);
        document.getElementById('vat3').textContent = vat3.toFixed(2);

        document.getElementById('total').textContent = (subtotal1 + vat1).toFixed(2);
        document.getElementById('total2').textContent = (subtotal2 + vat2).toFixed(2);
        document.getElementById('total3').textContent = (subtotal3 + vat3).toFixed(2);
    }

    // Add new row to the table
    function addRow() {
        const tbody = document.querySelector('#comparisonTable tbody');
        const newRow = document.createElement('tr');

        newRow.innerHTML = `
            <td class="border px-4 py-2">${tbody.rows.length + 1}</td>
            <td contenteditable="true" class="border px-4 py-2"></td>
            <td contenteditable="true" class="border px-4 py-2"></td>
            <td contenteditable="true" class="border px-4 py-2"></td>
            <td contenteditable="true" class="border px-4 py-2" oninput="calculateTotals()"></td>
            <td contenteditable="true" class="border px-4 py-2" oninput="calculateTotals()"></td>
            <td class="border px-4 py-2">0.00</td>
            <td contenteditable="true" class="border px-4 py-2" oninput="calculateTotals()"></td>
            <td class="border px-4 py-2">0.00</td>
            <td contenteditable="true" class="border px-4 py-2" oninput="calculateTotals()"></td>
            <td class="border px-4 py-2">0.00</td>
            <td class="border px-4 py-2"><button class="bg-red-500 text-white px-2 py-1 rounded" onclick="removeRow(this)">Remove</button></td>
        `;

        tbody.appendChild(newRow);
        calculateTotals();
    }

    // Remove a specific row from the table
    function removeRow(button) {
        const row = button.closest('tr');
        row.remove();
        calculateTotals();
    }

    // Remove all rows from the table
    function removeAllRows() {
        const tbody = document.querySelector('#comparisonTable tbody');
        tbody.innerHTML = '';
        calculateTotals();
    }

    // Save suppliers' names to localStorage
    function saveSuppliers() {
        const supplier1 = document.getElementById('supplier1').textContent;
        const supplier2 = document.getElementById('supplier2').textContent;
        const supplier3 = document.getElementById('supplier3').textContent;

        localStorage.setItem('supplier1', supplier1);
        localStorage.setItem('supplier2', supplier2);
        localStorage.setItem('supplier3', supplier3);

        findLowestPriceSupplier();
    }

    // Find the lowest price supplier and navigate to the lower price page
    function findLowestPriceSupplier() {
        const total1 = parseFloat(document.getElementById('total').textContent);
        const total2 = parseFloat(document.getElementById('total2').textContent);
        const total3 = parseFloat(document.getElementById('total3').textContent);

        let lowestSupplier = '';
        let lowestPrice = 0;
        const descriptions = [];

        if (total1 < total2 && total1 < total3) {
            lowestSupplier = localStorage.getItem('supplier1');
            lowestPrice = total1;
        } else if (total2 < total1 && total2 < total3) {
            lowestSupplier = localStorage.getItem('supplier2');
            lowestPrice = total2;
        } else if (total3 < total1 && total3 < total2) {
            lowestSupplier = localStorage.getItem('supplier3');
            lowestPrice = total3;
        }

        document.querySelectorAll('#comparisonTable tbody tr').forEach(row => {
            const description = {
                Sr_No: row.cells[0].textContent,
                serviceNo: row.cells[1].textContent,
                description: row.cells[2].textContent,
                unit: row.cells[3].textContent,
                qty: row.cells[4].textContent,
                unitPrice1: row.cells[5].textContent,
                totalPrice1: row.cells[6].textContent,
                unitPrice2: row.cells[7].textContent,cancelAnimationFrame,
                totalPrice2: row.cells[8].textContent,
                unitPrice3: row.cells[9].textContent,
                totalPrice3: row.cells[10].textContent
            };
            descriptions.push(description);
        });

        localStorage.setItem('lowestSupplier', lowestSupplier);
        localStorage.setItem('lowestPrice', lowestPrice);
        localStorage.setItem('descriptions', JSON.stringify(descriptions));

        window.location.href = 'lowePrice.html';
    }


    </script>
</body>

</html>