Update templates/combined_summary.html

templates/combined_summary.html

@@ -6,8 +6,9 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>Order Summary and Invoice</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <style>
-        /* Existing styles remain unchanged */
+        /* Existing styles */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -462,7 +463,7 @@
             border-radius: 8px;
             display: inline-block;
         }
-        /* New Invoice Section Styles */
+        /* Invoice Section Styles */
         .invoice-section {
             background: #FFFFFF;
             border-radius: 12px;
@@ -472,6 +473,14 @@
             max-width: 800px;
             margin-left: auto;
             margin-right: auto;
+            transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
+        }
+        .invoice-section.hidden {
+            max-height: 0;
+            opacity: 0;
+            overflow: hidden;
+            padding: 0;
+            margin: 0;
         }
         .invoice-header {
             text-align: center;
@@ -531,6 +540,20 @@
         .invoice-footer p {
             margin: 4px 0;
         }
+        .invoice-toggle-btn, .invoice-download-btn {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #FFB347;
+            color: #FFFFFF;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            margin: 10px;
+            transition: background-color 0.3s ease;
+        }
+        .invoice-toggle-btn:hover, .invoice-download-btn:hover {
+            background-color: #FF9E2C;
+        }
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .custom-class {
@@ -571,6 +594,10 @@
             .invoice-section {
                 padding: 16px;
             }
+            .invoice-toggle-btn, .invoice-download-btn {
+                padding: 8px 16px;
+                font-size: 0.875rem;
+            }
         }
         @media (max-width: 360px) {
             .custom-class {
@@ -816,7 +843,7 @@
                 />
                 <h3 class="order-item-name" id="order-name-{{ loop.index }}">{{ item.name | escape }}</h3>
             </div>
-            <p id="order-price-{{ loop.index }}" class="text-gray-600 mb-2 price-badge">${{ "%.2f"|format(item.price | default(0)) }}</p>
+            <p id="order-price-{{ loop.index }}" class="text-gray-600 mb-2 price-badge">₹{{ "%.2f"|format(item.price | default(0)) }}</p>
 
             {% if item.category != 'Soft Drink' %}
             <button
@@ -909,8 +936,14 @@
         <div class="no-data">No previous orders found.</div>
         {% endif %}
 
+        <!-- Invoice Toggle and Download Buttons -->
+        <div class="text-center mb-6">
+            <button id="toggleInvoiceBtn" class="invoice-toggle-btn" onclick="toggleInvoice()">View Invoice</button>
+            <button id="downloadInvoiceBtn" class="invoice-download-btn" onclick="downloadInvoice()">Download Invoice as PDF</button>
+        </div>
+
         <!-- Invoice Section -->
-        <div class="invoice-section">
+        <div id="invoiceSection" class="invoice-section hidden">
             <div class="invoice-header">
                 <h1>Tax Invoice</h1>
                 <p>ORIGINAL FOR RECIPIENT</p>
@@ -926,7 +959,9 @@
                 <div>
                     <p><span>Invoice No:</span> {{ order.id | default('247JD92F00043965') }}</p>
                     <p><span>Invoice Date:</span> {{ order.created_date | default('2024-12-12') }}</p>
-                    <p><span>Customer Name:</span> {{ order.customer_name | default('SATHVIK GANTA') }}</p>
+                    <p><span>Customer Name:</span> {{ customer.name | default('SATHVIK GANTA') }}</p>
+                    <p><span>Customer Email:</span> {{ customer.email | default('[email protected]') }}</p>
+                    <p><span>Customer Phone:</span> {{ customer.phone | default('9876543210') }}</p>
                     <p><span>Delivery Address:</span> {{ order.delivery_address | default('Plot no -80, Road no-4, Sharadha Nagar, Vanasthalipuram, 500070') }}</p>
                     <p><span>Place of Supply:</span> {{ order.place_of_supply | default('Telangana(36)') }}</p>
                 </div>
@@ -949,26 +984,26 @@
                     {% for item in order_items %}
                     <tr>
                         <td>{{ item.name | escape }}</td>
-                        <td>{{ "%.2f"|format(item.price | default(0)) }}</td>
-                        <td>{{ "%.2f"|format(item.discount | default(0)) }}</td>
-                        <td>{{ "%.2f"|format((item.price | default(0)) - (item.discount | default(0))) }}</td>
+                        <td>₹{{ "%.2f"|format(item.price | default(0)) }}</td>
+                        <td>₹{{ "%.2f"|format(item.discount | default(0)) }}</td>
+                        <td>₹{{ "%.2f"|format((item.price | default(0)) - (item.discount | default(0))) }}</td>
                         <td>{{ order.cgst_rate | default('2.5%') }}</td>
-                        <td>{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.cgst_rate_float | default(0.025))) }}</td>
+                        <td>₹{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.cgst_rate_float | default(0.025))) }}</td>
                         <td>{{ order.sgst_rate | default('2.5%') }}</td>
-                        <td>{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.sgst_rate_float | default(0.025))) }}</td>
-                        <td>{{ "%.2f"|format(((item.price | default(0)) - (item.discount | default(0))) * (1 + (order.cgst_rate_float | default(0.025)) + (order.sgst_rate_float | default(0.025)))) }}</td>
+                        <td>₹{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.sgst_rate_float | default(0.025))) }}</td>
+                        <td>₹{{ "%.2f"|format(((item.price | default(0)) - (item.discount | default(0))) * (1 + (order.cgst_rate_float | default(0.025)) + (order.sgst_rate_float | default(0.025)))) }}</td>
                     </tr>
                     {% endfor %}
                     <tr class="total-row">
                         <td>Total</td>
-                        <td>{{ "%.2f"|format(total_gross_value) }}</td>
-                        <td>{{ "%.2f"|format(total_discount) }}</td>
-                        <td>{{ "%.2f"|format(total_net_value) }}</td>
+                        <td>₹{{ "%.2f"|format(total_gross_value) }}</td>
+                        <td>₹{{ "%.2f"|format(total_discount) }}</td>
+                        <td>₹{{ "%.2f"|format(total_net_value) }}</td>
                         <td></td>
-                        <td>{{ "%.3f"|format(total_cgst) }}</td>
+                        <td>₹{{ "%.3f"|format(total_cgst) }}</td>
                         <td></td>
-                        <td>{{ "%.3f"|format(total_sgst) }}</td>
-                        <td>{{ "%.2f"|format(total_amount) }}</td>
+                        <td>₹{{ "%.3f"|format(total_sgst) }}</td>
+                        <td>₹{{ "%.2f"|format(total_amount) }}</td>
                     </tr>
                 </tbody>
             </table>
@@ -985,7 +1020,7 @@
     </div>
 
     <script>
-        // Existing JavaScript remains unchanged
+        // Existing JavaScript
         function debounce(func, wait) {
             let timeout;
             return function executedFunction(...args) {
@@ -1186,6 +1221,132 @@
             updateTimer();
         }
 
+        // New Invoice JavaScript
+        function toggleInvoice() {
+            const invoiceSection = document.getElementById('invoiceSection');
+            const toggleBtn = document.getElementById('toggleInvoiceBtn');
+            const isHidden = invoiceSection.classList.contains('hidden');
+            invoiceSection.classList.toggle('hidden');
+            toggleBtn.textContent = isHidden ? 'Hide Invoice' : 'View Invoice';
+        }
+
+        function downloadInvoice() {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            const invoice = document.getElementById('invoiceSection');
+            let y = 20;
+
+            // Header
+            doc.setFontSize(16);
+            doc.text('Tax Invoice', 105, y, { align: 'center' });
+            y += 10;
+            doc.setFontSize(10);
+            doc.text('ORIGINAL FOR RECIPIENT', 105, y, { align: 'center' });
+            y += 20;
+
+            // Restaurant and Customer Details
+            doc.setFontSize(10);
+            doc.text('Legal Entity Name: {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}', 10, y);
+            y += 10;
+            doc.text('Restaurant Name: {{ restaurant.name | default('Pista House') }}', 10, y);
+            y += 10;
+            doc.text('Restaurant Address: {{ restaurant.address | default('52 To 57, 69 & 70, 5-5-162 & 5-5-163, 5-5-164 & 5-5-165, Plot 1, Vanasthali Hills, Saheb Nagar, LB Nagar Circle 4, Vanasthalipuram, Hyderabad') }}', 10, y, { maxWidth: 90 });
+            y += 20;
+            doc.text('GSTIN: {{ restaurant.gstin | default('36AATFD1209K1Z9') }}', 10, y);
+            y += 10;
+            doc.text('FSSAI: {{ restaurant.fssai | default('13622012000022') }}', 10, y);
+            y -= 70;
+
+            doc.text('Invoice No: {{ order.id | default('247JD92F00043965') }}', 110, y);
+            y += 10;
+            doc.text('Invoice Date: {{ order.created_date | default('2024-12-12') }}', 110, y);
+            y += 10;
+            doc.text('Customer Name: {{ customer.name | default('SATHVIK GANTA') }}', 110, y);
+            y += 10;
+            doc.text('Customer Email: {{ customer.email | default('[email protected]') }}', 110, y);
+            y += 10;
+            doc.text('Customer Phone: {{ customer.phone | default('9876543210') }}', 110, y);
+            y += 10;
+            doc.text('Delivery Address: {{ order.delivery_address | default('Plot no -80, Road no-4, Sharadha Nagar, Vanasthalipuram, 500070') }}', 110, y, { maxWidth: 90 });
+            y += 20;
+            doc.text('Place of Supply: {{ order.place_of_supply | default('Telangana(36)') }}', 110, y);
+            y += 20;
+
+            // Table Header
+            doc.setFontSize(10);
+            const headers = ['Particulars', 'Gross Value', 'Discount', 'Net Value', 'CGST (Rate)', 'CGST (INR)', 'SGST (Rate)', 'SGST (INR)', 'Total'];
+            const colWidths = [50, 20, 20, 20, 20, 20, 20, 20, 20];
+            let x = 10;
+            headers.forEach((header, i) => {
+                doc.text(header, x, y, { maxWidth: colWidths[i] });
+                x += colWidths[i];
+            });
+            y += 10;
+
+            // Table Rows
+            {% for item in order_items %}
+            x = 10;
+            doc.text('{{ item.name | escape }}', x, y, { maxWidth: colWidths[0] });
+            x += colWidths[0];
+            doc.text('₹{{ "%.2f"|format(item.price | default(0)) }}', x, y);
+            x += colWidths[1];
+            doc.text('₹{{ "%.2f"|format(item.discount | default(0)) }}', x, y);
+            x += colWidths[2];
+            doc.text('₹{{ "%.2f"|format((item.price | default(0)) - (item.discount | default(0))) }}', x, y);
+            x += colWidths[3];
+            doc.text('{{ order.cgst_rate | default('2.5%') }}', x, y);
+            x += colWidths[4];
+            doc.text('₹{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.cgst_rate_float | default(0.025))) }}', x, y);
+            x += colWidths[5];
+            doc.text('{{ order.sgst_rate | default('2.5%') }}', x, y);
+            x += colWidths[6];
+            doc.text('₹{{ "%.3f"|format(((item.price | default(0)) - (item.discount | default(0))) * (order.sgst_rate_float | default(0.025))) }}', x, y);
+            x += colWidths[7];
+            doc.text('₹{{ "%.2f"|format(((item.price | default(0)) - (item.discount | default(0))) * (1 + (order.cgst_rate_float | default(0.025)) + (order.sgst_rate_float | default(0.025)))) }}', x, y);
+            y += 10;
+            {% endfor %}
+
+            // Total Row
+            x = 10;
+            doc.setFont('helvetica', 'bold');
+            doc.text('Total', x, y, { maxWidth: colWidths[0] });
+            x += colWidths[0];
+            doc.text('₹{{ "%.2f"|format(total_gross_value) }}', x, y);
+            x += colWidths[1];
+            doc.text('₹{{ "%.2f"|format(total_discount) }}', x, y);
+            x += colWidths[2];
+            doc.text('₹{{ "%.2f"|format(total_net_value) }}', x, y);
+            x += colWidths[3];
+            x += colWidths[4];
+            doc.text('₹{{ "%.3f"|format(total_cgst) }}', x, y);
+            x += colWidths[5];
+            x += colWidths[6];
+            doc.text('₹{{ "%.3f"|format(total_sgst) }}', x, y);
+            x += colWidths[7];
+            doc.text('₹{{ "%.2f"|format(total_amount) }}', x, y);
+            doc.setFont('helvetica', 'normal');
+            y += 20;
+
+            // Footer
+            doc.setFontSize(10);
+            doc.text('Amount (in words): {{ total_amount_in_words | default('Three Hundred Eighty Seven Rupees And Forty Five Paisa Only') }}', 10, y, { maxWidth: 190 });
+            y += 10;
+            doc.text('Payment Mode: {{ order.payment_mode | default('Digital') }}', 10, y);
+            y += 10;
+            doc.text('Order ID: {{ order.id | default('6428970359') }}', 10, y);
+            y += 10;
+            doc.text('Order Date: {{ order.created_date | default('2024-12-12') }}', 10, y);
+            y += 10;
+            doc.text('Supply attracts reverse charge: {{ order.reverse_charge | default('No') }}', 10, y);
+            y += 10;
+            doc.text('For {{ restaurant.legal_name | default('ZOMATO LIMITED') }}', 10, y);
+            y += 10;
+            doc.text('Authorized Signatory', 10, y);
+
+            // Save PDF
+            doc.save('invoice_{{ order.id | default('247JD92F00043965') }}.pdf');
+        }
+
         document.addEventListener('DOMContentLoaded', () => {
             try {
                 const progressBar = document.getElementById('progressBar');