Update templates/menu.html

templates/menu.html

@@ -242,10 +242,9 @@
             color: #343a40;
         }
         .addon-section .form-check {
-            display: flex;
+            display: inline-flex;
             align-items: center;
             margin-left: 10px;
-            margin-bottom: 8px;
             color: #343a40;
         }
         .addon-section .form-check-input {
@@ -275,6 +274,7 @@
         .addon-section .form-check-label {
             font-size: 16px;
             margin-left: 5px;
+            margin-right: 15px;
             cursor: pointer;
             display: inline-block;
             vertical-align: middle;
@@ -323,6 +323,11 @@
             color: #6c757d;
             margin-bottom: 10px;
         }
+        .modal-body .nutritional-info {
+            font-size: 12px;
+            color: #6c757d;
+            margin-bottom: 10px;
+        }
         .modal-body #modal-addons h6,
         .modal-body #first-row h6 {
             font-size: 14px;
@@ -547,6 +552,10 @@
                 font-size: 12px;
                 margin-bottom: 5px;
             }
+            .modal-body .nutritional-info {
+                font-size: 10px;
+                margin-bottom: 5px;
+            }
             .modal-body #modal-addons h6,
             .modal-body #first-row h6 {
                 font-size: 12px;
@@ -605,22 +614,6 @@
                 height: 18px;
                 font-size: 9px;
             }
-            .addon-section {
-                padding: 8px;
-                margin-bottom: 5px;
-            }
-            .addon-section .form-check {
-                margin-left: 0;
-                margin-bottom: 5px;
-            }
-            .addon-section .form-check-input {
-                width: 16px;
-                height: 16px;
-                margin-right: 8px;
-            }
-            .addon-section .form-check-label {
-                font-size: 12px;
-            }
         }
     </style>
 </head>
@@ -754,6 +747,7 @@
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
+                    <p class="nutritional-info" id="modal-nutritional-info"></p>
 
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
@@ -766,25 +760,8 @@
                             <div id="type-options"></div>
                         </div>
                         <div class="addon-section">
-                            <h6>Select Spice Level</h6>
-                            <div id="spice-level-options">
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-mild" value="Mild" data-name="Mild" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-mild">Mild</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-medium" value="Medium" data-name="Medium" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-medium">Medium</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-spicy" value="Spicy" data-name="Spicy" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-spicy">Spicy</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input spice-level-option" id="spice-extra-spicy" value="Extra Spicy" data-name="Extra Spicy" data-group="Spice Level">
-                                    <label class="form-check-label" for="spice-extra-spicy">Extra Spicy</label>
-                                </div>
-                            </div>
+                            <h6>Spice Level</h6>
+                            <div id="spice-level-options"></div>
                         </div>
                     </div>
 
@@ -817,74 +794,92 @@
         const menuItemDetails = {
             "Veg Manchurian": {
                 ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
+                nutritionalInfo: { calories: 250, protein: 5, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
                 allergens: "Soy, Gluten"
             },
             "Veg Biryani": {
                 ingredients: "Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee",
+                nutritionalInfo: { calories: 300, protein: 6, carbs: 50, fats: 12, fiber: 5, sugar: 3 },
                 allergens: "Dairy"
             },
             "Sukka Gosht (Goat)": {
                 ingredients: "Goat Meat, Ginger-Garlic Paste, Green Chilies, Onion, Tomatoes, Garam Masala, Coriander Powder, Cumin Powder, Fresh Coriander",
+                nutritionalInfo: { calories: 450, protein: 35, carbs: 10, fats: 30, fiber: 2, sugar: 1 },
                 allergens: "None"
             },
             "Samosa": {
                 ingredients: "Potatoes, Peas, Onion, Ginger, Cumin Seeds, Garam Masala, Wheat Flour (for dough), Oil (for frying)",
+                nutritionalInfo: { calories: 150, protein: 3, carbs: 25, fats: 7, fiber: 2, sugar: 1 },
                 allergens: "Gluten"
             },
             "Roti": {
                 ingredients: "Whole Wheat Flour, Water, Salt",
+                nutritionalInfo: { calories: 150, protein: 4, carbs: 30, fats: 1, fiber: 3, sugar: 0 },
                 allergens: "Gluten"
             },
             "Prawn Fry": {
                 ingredients: "Prawns, Garlic, Ginger, Chili Powder, Coriander Powder, Cumin Powder, Lemon Juice, Oil",
+                nutritionalInfo: { calories: 350, protein: 25, carbs: 10, fats: 20, fiber: 1, sugar: 1 },
                 allergens: "Shellfish"
             },
             "Paneer Butter Masala": {
                 ingredients: "Paneer, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala",
+                nutritionalInfo: { calories: 400, protein: 15, carbs: 20, fats: 25, fiber: 2, sugar: 3 },
                 allergens: "Dairy"
             },
             "Paneer Biryani": {
                 ingredients: "Paneer, Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato), Onion, Tomatoes, Biryani Masala, Mint Leaves, Curd",
+                nutritionalInfo: { calories: 350, protein: 12, carbs: 55, fats: 15, fiber: 4, sugar: 3 },
                 allergens: "Dairy"
             },
             "Onion Pakoda": {
                 ingredients: "Onion, Chickpea Flour (Besan), Rice Flour, Green Chilies, Cumin Seeds, Ginger, Turmeric Powder, Oil (for frying)",
+                nutritionalInfo: { calories: 200, protein: 5, carbs: 30, fats: 8, fiber: 3, sugar: 2 },
                 allergens: "Gluten (if cross-contamination)"
             },
             "Mutton Biryani": {
                 ingredients: "Mutton, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Yogurt, Ghee",
+                nutritionalInfo: { calories: 500, protein: 30, carbs: 50, fats: 25, fiber: 4, sugar: 3 },
                 allergens: "Dairy"
             },
             "Fish Curry": {
                 ingredients: "Fish (any firm fish like Salmon or King Fish), Onion, Tomato, Ginger-Garlic Paste, Curry Leaves, Coconut Milk, Tamarind, Mustard Seeds",
+                nutritionalInfo: { calories: 300, protein: 25, carbs: 10, fats: 20, fiber: 2, sugar: 1 },
                 allergens: "Fish"
             },
             "Fiery Mango Glaze Chicken": {
                 ingredients: "Chicken, Mango Puree, Chili Sauce, Soy Sauce, Honey, Garlic, Ginger, Lemon Juice",
+                nutritionalInfo: { calories: 350, protein: 30, carbs: 15, fats: 18, fiber: 1, sugar: 5 },
                 allergens: "Soy"
             },
             "Chilli Gobi": {
                 ingredients: "Cauliflower, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger, Cumin Powder",
+                nutritionalInfo: { calories: 250, protein: 6, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
                 allergens: "Soy, Gluten"
             },
             "Chilli Chicken": {
                 ingredients: "Chicken, Bell Pepper, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger",
+                nutritionalInfo: { calories: 400, protein: 35, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
                 allergens: "Soy, Gluten"
             },
             "Chicken Manchurian": {
                 ingredients: "Chicken, Onion, Garlic, Ginger, Soy Sauce, Cornflour, Green Chilies, Capsicum",
+                nutritionalInfo: { calories: 350, protein: 25, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
                 allergens: "Soy, Gluten"
             },
             "Chicken Curry": {
                 ingredients: "Chicken, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coconut Milk, Coriander Leaves",
+                nutritionalInfo: { calories: 350, protein: 28, carbs: 15, fats: 12, fiber: 4, sugar: 2 },
                 allergens: "None"
             },
             "Chicken Biryani": {
                 ingredients: "Chicken, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Curd",
+                nutritionalInfo: { calories: 500, protein: 35, carbs: 60, fats: 20, fiber: 5, sugar: 3 },
                 allergens: "Dairy"
             },
             "Channa Masala": {
                 ingredients: "Chickpeas, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coriander Powder, Cumin Seeds, Lemon Juice",
+                nutritionalInfo: { calories: 250, protein: 10, carbs: 45, fats: 5, fiber: 6, sugar: 2 },
                 allergens: "None"
             }
         };
@@ -962,6 +957,13 @@
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
                         <p>${detailsData.ingredients}</p>
+                        <h6>Nutritional Info</h6>
+                        <div class="nutritional-info">
+                            <span>Calories: ${detailsData.nutritionalInfo.calories} kcal</span>
+                            <span>Carbs: ${detailsData.nutritionalInfo.carbs}g</span>
+                            <span>Protein: ${detailsData.nutritionalInfo.protein}g</span>
+                            <span>Fats: ${detailsData.nutritionalInfo.fats}g</span>
+                        </div>
                         <h6>Allergens</h6>
                         <p>${detailsData.allergens}</p>
                     `;
@@ -1052,6 +1054,16 @@
             }
             document.getElementById('modal-description').innerText = description || 'No description available.';
 
+            // Populate nutritional info
+            const nutritionalInfoEl = document.getElementById('modal-nutritional-info');
+            const itemDetails = menuItemDetails[name];
+            if (itemDetails && itemDetails.nutritionalInfo) {
+                const { calories, protein, carbs, fats, fiber, sugar } = itemDetails.nutritionalInfo;
+                nutritionalInfoEl.innerText = `[Energy: ${calories} kcal, Protein: ${protein}g, Carbohydrates: ${carbs}g, Fiber: ${fiber}g, Fat: ${fats}g, Sugar: ${sugar}g]`;
+            } else {
+                nutritionalInfoEl.innerText = '[No nutritional info available.]';
+            }
+
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
 
@@ -1163,6 +1175,20 @@
                                     typeOptions.innerHTML += optionHTML;
                                 });
                             }
+                            if (addon.name.toLowerCase() === "spice level") {
+                                addon.options.forEach(option => {
+                                    const optionId = `addon-spice-level-${option}`;
+                                    const optionHTML = `
+                                        <div class="form-check">
+                                            <input type="checkbox" class="form-check-input spice-level-option" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
+                                            <label class="form-check-label" for="${optionId}">
+                                                ${option}
+                                            </label>
+                                        </div>
+                                    `;
+                                    spiceLevelOptions.innerHTML += optionHTML;
+                                });
+                            }
                         });
                     }
 
@@ -1684,4 +1710,4 @@
         });
     </script>
 </body>
-</html>
+</html>