Update templates/combined_summary.html

templates/combined_summary.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Order Summary</title>
+    <title>Order Summary and Invoice</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Custom animations */
+        /* Existing styles remain unchanged */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -35,7 +35,6 @@
         .progress-bar {
             transition: width 0.6s ease-in-out, background 0.3s ease-in-out;
         }
-        /* Progress bar color ranges */
         .progress-bar.range-0-100 {
             background: linear-gradient(90deg, #2DD4BF, #5EEAD4);
         }
@@ -66,7 +65,6 @@
             background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
             animation: shine 3s infinite;
         }
-        /* Custom class for order items */
         .custom-class {
             text-align: center;
             border-radius: 12px;
@@ -86,13 +84,11 @@
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-        /* Order image wrapper for positioning text */
         .order-image-wrapper {
             position: relative;
             display: block;
             margin-bottom: 16px;
         }
-        /* Order image styles */
         .order-image {
             max-width: 100%;
             max-height: 330px;
@@ -113,12 +109,10 @@
             transform: scale(1.04);
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         }
-        /* Fallback for placeholder images */
         .order-image[src$="placeholder.jpg"] {
             background: linear-gradient(135deg, #F9FAFB, #E5E7EB);
             object-fit: contain;
         }
-        /* Item name below image */
         .order-item-name {
             display: block;
             text-align: center;
@@ -150,7 +144,6 @@
             border-radius: 8px;
             margin-bottom: 1rem;
         }
-        /* Scrollable sector images */
         .sector-images-container {
             position: relative;
             display: flex;
@@ -217,7 +210,6 @@
             max-width: 150px;
             color: #1F2937;
         }
-        /* Scroll buttons */
         .scroll-button {
             position: absolute;
             top: 50%;
@@ -250,7 +242,6 @@
         .scroll-button.right {
             right: 0;
         }
-        /* Full-width gradient header */
         .back-to-menu {
             position: fixed;
             top: 0;
@@ -272,13 +263,11 @@
             background: linear-gradient(45deg, #FF8C61, #FF9E2C);
             transform: translateY(-1px);
         }
-        /* Content spacing */
         .container {
             margin-top: 90px;
             max-width: 100%;
             padding: 20px;
         }
-        /* Sector popup */
         #sector-popup {
             display: none;
             position: fixed;
@@ -350,7 +339,6 @@
             position: relative;
             z-index: 1;
         }
-        /* Ingredient modal */
         .ingredient-modal-container {
             display: none;
             position: fixed;
@@ -380,7 +368,6 @@
             background: #F9FAFB;
             border-radius: 6px;
         }
-        /* Ingredient images */
         .ingredient-image {
             max-width: 100%;
             max-height: 100px;
@@ -392,16 +379,13 @@
             border: 1px solid #D1D5DB;
             transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
         }
-        /* Hover effect for ingredient buttons */
         .ingredient-button:hover .ingredient-image {
             transform: scale(1.1);
             border-color: #10B981;
         }
-        /* Green border when section is visible */
         .ingredients-section:not(.hidden) .ingredient-image {
             border: 2px solid #10B981;
         }
-        /* Ensure ingredient section is smooth */
         .ingredients-section {
             transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
             max-height: 0;
@@ -412,11 +396,9 @@
             max-height: 1000px;
             opacity: 1;
         }
-        /* Prevent body scroll when modal is open */
         body.modal-open {
             overflow: hidden;
         }
-        /* Fallback messages */
         .no-data {
             text-align: center;
             color: #6B7280;
@@ -426,7 +408,6 @@
             border-radius: 8px;
             margin-bottom: 20px;
         }
-        /* Order confirmed section */
         .order-confirmed {
             background: linear-gradient(135deg, #FFF7ED 0%, #FFE4D6 100%);
             position: relative;
@@ -450,7 +431,6 @@
         .order-confirmed.hidden {
             display: none;
         }
-        /* Tier details animation */
         .tier-details {
             overflow: hidden;
             transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
@@ -462,7 +442,6 @@
             opacity: 1;
             animation: slideDown 0.5s ease-in-out;
         }
-        /* Price badge */
         .price-badge {
             display: inline-block;
             background: #FFE4D6;
@@ -471,12 +450,10 @@
             font-weight: 600;
             color: #C2410C;
         }
-        /* Show Ingredients button focus style */
         .ingredients-toggle-button:focus {
             outline: none;
             transform: scale(1.05);
         }
-        /* Timer styles */
         .countdown-timer {
             font-weight: 600;
             color: #C2410C;
@@ -485,6 +462,75 @@
             border-radius: 8px;
             display: inline-block;
         }
+        /* New Invoice Section Styles */
+        .invoice-section {
+            background: #FFFFFF;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            padding: 24px;
+            margin-bottom: 24px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .invoice-header {
+            text-align: center;
+            margin-bottom: 24px;
+        }
+        .invoice-header h1 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            color: #1F2937;
+        }
+        .invoice-header p {
+            color: #6B7280;
+            font-size: 0.875rem;
+        }
+        .invoice-details {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+            margin-bottom: 24px;
+        }
+        .invoice-details p {
+            font-size: 0.875rem;
+            color: #1F2937;
+        }
+        .invoice-details p span {
+            font-weight: 600;
+        }
+        .invoice-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 24px;
+        }
+        .invoice-table th, .invoice-table td {
+            border: 1px solid #E5E7EB;
+            padding: 8px;
+            text-align: left;
+            font-size: 0.875rem;
+        }
+        .invoice-table th {
+            background: #F9FAFB;
+            font-weight: 600;
+            color: #1F2937;
+        }
+        .invoice-table td {
+            color: #1F2937;
+        }
+        .invoice-table .total-row {
+            font-weight: 600;
+            background: #FFF7ED;
+        }
+        .invoice-footer {
+            text-align: center;
+            color: #6B7280;
+            font-size: 0.875rem;
+            margin-top: 16px;
+        }
+        .invoice-footer p {
+            margin: 4px 0;
+        }
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .custom-class {
@@ -504,6 +550,13 @@
             .countdown-timer {
                 font-size: 0.875rem;
             }
+            .invoice-details {
+                grid-template-columns: 1fr;
+            }
+            .invoice-table th, .invoice-table td {
+                font-size: 0.75rem;
+                padding: 6px;
+            }
         }
         @media (max-width: 480px) {
             .custom-class {
@@ -515,6 +568,9 @@
             .order-item-name {
                 font-size: 1.125rem;
             }
+            .invoice-section {
+                padding: 16px;
+            }
         }
         @media (max-width: 360px) {
             .custom-class {
@@ -605,7 +661,6 @@
 
     <div class="container mx-auto p-6 pt-2">
         <!-- Order Confirmation -->
-        <!-- Hidden inputs for order ID and order count -->
         <input type="hidden" id="currentOrderId" value="{{ order_id | default('') }}">
         <input type="hidden" id="orderCount" value="{{ order_items | length }}">
 
@@ -634,14 +689,12 @@
                 </svg>
             </div>
 
-            <!-- Collapsible Content Section -->
             <div id="tierDetails" class="tier-details hidden">
                 <div class="text-center mb-6">
                     <p class="text-gray-600">Valid through December {{ validity_year }}</p>
                     <p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p>
                 </div>
 
-                <!-- Progress Bar -->
                 <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
                     <div id="progressBar" class="absolute left-0 top-0 h-full progress-bar" style="width: {{ progress_percentage }}%"></div>
                 </div>
@@ -657,7 +710,6 @@
                     <span class="font-semibold text-orange-500" id="nextTier">{{ next_tier }}</span>
                 </p>
 
-                <!-- Tier Benefits -->
                 <div class="mt-6 bg-gray-50 rounded-xl p-4">
                     <h3 class="text-lg font-semibold mb-4 text-gray-800" id="benefitsTitle">
                         Benefits of Reaching {{ next_tier }} Tier
@@ -856,10 +908,84 @@
         {% else %}
         <div class="no-data">No previous orders found.</div>
         {% endif %}
+
+        <!-- Invoice Section -->
+        <div class="invoice-section">
+            <div class="invoice-header">
+                <h1>Tax Invoice</h1>
+                <p>ORIGINAL FOR RECIPIENT</p>
+            </div>
+            <div class="invoice-details">
+                <div>
+                    <p><span>Legal Entity Name:</span> {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}</p>
+                    <p><span>Restaurant Name:</span> {{ restaurant.name | default('Pista House') }}</p>
+                    <p><span>Restaurant Address:</span> {{ 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') }}</p>
+                    <p><span>GSTIN:</span> {{ restaurant.gstin | default('36AATFD1209K1Z9') }}</p>
+                    <p><span>FSSAI:</span> {{ restaurant.fssai | default('13622012000022') }}</p>
+                </div>
+                <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>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>
+            </div>
+            <table class="invoice-table">
+                <thead>
+                    <tr>
+                        <th>Particulars</th>
+                        <th>Gross Value</th>
+                        <th>Discount</th>
+                        <th>Net Value</th>
+                        <th>CGST (Rate)</th>
+                        <th>CGST (INR)</th>
+                        <th>SGST (Rate)</th>
+                        <th>SGST (INR)</th>
+                        <th>Total</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% 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>{{ 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>{{ 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>
+                    </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></td>
+                        <td>{{ "%.3f"|format(total_cgst) }}</td>
+                        <td></td>
+                        <td>{{ "%.3f"|format(total_sgst) }}</td>
+                        <td>{{ "%.2f"|format(total_amount) }}</td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="invoice-footer">
+                <p>Amount (in words): {{ total_amount_in_words | default('Three Hundred Eighty Seven Rupees And Forty Five Paisa Only') }}</p>
+                <p>Payment Mode: {{ order.payment_mode | default('Digital') }}</p>
+                <p>Order ID: {{ order.id | default('6428970359') }}</p>
+                <p>Order Date: {{ order.created_date | default('2024-12-12') }}</p>
+                <p>Supply attracts reverse charge: {{ order.reverse_charge | default('No') }}</p>
+                <p>For {{ restaurant.legal_name | default('ZOMATO LIMITED') }}</p>
+                <p>Authorized Signatory</p>
+            </div>
+        </div>
     </div>
 
     <script>
-        // Debounce function for performance
+        // Existing JavaScript remains unchanged
         function debounce(func, wait) {
             let timeout;
             return function executedFunction(...args) {
@@ -872,7 +998,6 @@
             };
         }
 
-        // Scroll container function
         function scrollContainer(direction) {
             try {
                 const container = document.querySelector('.sector-images-container');
@@ -887,7 +1012,6 @@
             }
         }
 
-        // Show sector description popup
         function showSectorDescription(description) {
             try {
                 document.getElementById('sector-description').innerText = description || 'No description available.';
@@ -898,7 +1022,6 @@
             }
         }
 
-        // Close sector popup
         function closePopup() {
             try {
                 document.getElementById('sector-popup').style.display = 'none';
@@ -908,7 +1031,6 @@
             }
         }
 
-        // Toggle tier details with animation
         function toggleTierDetails() {
             try {
                 const tierDetails = document.getElementById('tierDetails');
@@ -923,7 +1045,6 @@
             }
         }
 
-        // Toggle ingredients section
         function toggleIngredients(index) {
             try {
                 const section = document.getElementById(`ingredientsSection${index}`);
@@ -936,7 +1057,6 @@
 
                 const isHidden = section.classList.contains('hidden');
 
-                // Close all other ingredient sections
                 document.querySelectorAll('.ingredients-section').forEach(s => {
                     s.classList.add('hidden');
                     s.setAttribute('aria-hidden', 'true');
@@ -946,7 +1066,6 @@
                     b.setAttribute('aria-expanded', 'false');
                 });
 
-                // Toggle the current section
                 if (isHidden) {
                     section.classList.remove('hidden');
                     section.setAttribute('aria-hidden', 'false');
@@ -963,7 +1082,6 @@
             }
         }
 
-        // Show ingredient details modal
         function showIngredientDetails(button) {
             try {
                 const data = JSON.parse(button.getAttribute('data-ingredient'));
@@ -989,7 +1107,7 @@
                     ? healthBenefitsList.map(item => `<li>${item.trim()}</li>`).join('')
                     : '<li>No health benefits available.</li>';
                 funFactsUl.innerHTML = funFactsList.length
-                    ? funfactsList.map(item => `<li>${item.trim()}</li>`).join('')
+                    ? funFactsList.map(item => `<li>${item.trim()}</li>`).join('')
                     : '<li>No fun facts available.</li>';
 
                 modal.style.display = 'flex';
@@ -999,7 +1117,6 @@
             }
         }
 
-        // Close ingredient modal
         function closeModal(index) {
             try {
                 const modal = document.getElementById(`ingredientModal${index}`);
@@ -1012,78 +1129,63 @@
             }
         }
 
-        // Timer logic
         function initTimer() {
             const orderId = document.getElementById('currentOrderId').value;
             const orderCount = parseInt(document.getElementById('orderCount').value, 10) || 0;
             const orderConfirmationSection = document.getElementById('orderConfirmationSection');
             const countdownTimerSpan = document.getElementById('countdownTimer');
 
-            // Determine timer duration based on order count
-            const timerDurationSeconds = orderCount >= 3 ? 45 * 60 : 15 * 60; // 45 min for 3+ orders, 15 min otherwise
+            const timerDurationSeconds = orderCount >= 3 ? 45 * 60 : 15 * 60;
 
-            // Check if order is new and has a valid order ID
             if (!orderId) {
-                // No valid order ID: hide confirmation section
                 orderConfirmationSection.classList.add('hidden');
                 return;
             }
 
-            // Check if order is already delivered
             const deliveredOrders = JSON.parse(localStorage.getItem('deliveredOrders') || '[]');
             if (deliveredOrders.includes(orderId)) {
-                // Order is delivered: show "Delivered!" message
                 orderConfirmationSection.classList.remove('hidden');
                 countdownTimerSpan.textContent = 'Delivered!';
                 return;
             }
 
-            // Check for existing timer in localStorage
             let timerData = JSON.parse(localStorage.getItem('orderTimerData') || '{}');
             let endTime = timerData[orderId] ? parseInt(timerData[orderId], 10) : null;
 
-            // If no timer exists for this order, start a new one
             if (!endTime) {
                 endTime = Date.now() + timerDurationSeconds * 1000;
                 timerData[orderId] = endTime;
                 localStorage.setItem('orderTimerData', JSON.stringify(timerData));
             }
 
-            // Update timer display
             function updateTimer() {
                 const now = Date.now();
                 const timeLeftSeconds = Math.max(0, Math.floor((endTime - now) / 1000));
 
                 if (timeLeftSeconds <= 0) {
-                    // Timer expired: mark order as delivered and refresh page
                     deliveredOrders.push(orderId);
                     localStorage.setItem('deliveredOrders', JSON.stringify(deliveredOrders));
                     delete timerData[orderId];
                     localStorage.setItem('orderTimerData', JSON.stringify(timerData));
                     orderConfirmationSection.classList.remove('hidden');
                     countdownTimerSpan.textContent = 'Delivered!';
-                    window.location.reload(); // Refresh page on timer expiry
+                    window.location.reload();
                     return;
                 }
 
-                // Format time as MM:SS
                 const minutes = Math.floor(timeLeftSeconds / 60);
                 const seconds = timeLeftSeconds % 60;
                 const paddedSeconds = seconds < 10 ? '0' + seconds : seconds;
                 countdownTimerSpan.textContent = `${minutes}m ${paddedSeconds}s`;
 
-                // Show confirmation section
                 orderConfirmationSection.classList.remove('hidden');
 
-                // Schedule next update
                 setTimeout(updateTimer, 1000);
             }
 
-            // Start timer
             updateTimer();
         }
 
-        // Set progress bar color based on points and initialize timer
         document.addEventListener('DOMContentLoaded', () => {
             try {
                 const progressBar = document.getElementById('progressBar');
@@ -1098,13 +1200,11 @@
                     progressBar.classList.add('range-200-plus');
                 }
 
-                // Initialize the timer
                 initTimer();
             } catch (e) {
                 console.error('Error during DOMContentLoaded:', e);
             }
 
-            // Lazy load images with IntersectionObserver
             const images = document.querySelectorAll('img.lazyload');
             if ('IntersectionObserver' in window) {
                 const observer = new IntersectionObserver((entries, observer) => {
@@ -1126,7 +1226,6 @@
             }
         });
 
-        // Close modals on outside click
         document.addEventListener('click', (e) => {
             try {
                 if (e.target.id === 'sector-popup') {
@@ -1143,7 +1242,6 @@
             }
         });
 
-        // Keyboard navigation for scroll buttons
         document.querySelectorAll('.scroll-button').forEach(button => {
             button.addEventListener('keydown', function(e) {
                 if (e.key === 'Enter' || e.key === ' ') {
@@ -1153,7 +1251,6 @@
             });
         });
 
-        // Keyboard navigation for toggle buttons
         document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => {
             button.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {