Update templates/chef-bot.html

templates/chef-bot.html

@@ -241,6 +241,7 @@
             font-size: 13px;
             margin: 5px 0;
             width: 100%;
+            flex-wrap: wrap;
         }
 
         .selected-item-image {
@@ -251,13 +252,14 @@
             margin-right: 8px;
         }
 
-        .ingredient-select {
+        .ingredient-select, .ingredient-info-input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
             font-size: 13px;
             width: 150px;
             outline: none;
+            margin: 5px;
         }
 
         .submit-button {
@@ -290,7 +292,7 @@
             background-color: #c82333;
         }
 
-        .name-input {
+        .name-input, .ingredients-info-input {
             padding: 8px;
             border: 1px solid #b3d7ff;
             border-radius: 6px;
@@ -398,7 +400,7 @@
                 height: 25px;
             }
 
-            .name-input, .order-name-input {
+            .name-input, .order-name-input, .ingredients-info-input {
                 width: 120px;
                 font-size: 13px;
                 padding: 6px;
@@ -420,7 +422,7 @@
                 padding: 4px 8px;
             }
 
-            .ingredient-select {
+            .ingredient-select, .ingredient-info-input {
                 width: 120px;
                 font-size: 12px;
             }
@@ -645,6 +647,17 @@
                         });
                         contentDiv.appendChild(ingredientSelect);
 
+                        // Ingredientsinfo Input
+                        const ingredientInfoInput = document.createElement('input');
+                        ingredientInfoInput.type = 'text';
+                        ingredientInfoInput.placeholder = 'Add ingredient details...';
+                        ingredientInfoInput.className = 'ingredient-info-input';
+                        ingredientInfoInput.value = item.ingredientsInfo || '';
+                        ingredientInfoInput.addEventListener('input', (e) => {
+                            selectedItems[index].ingredientsInfo = e.target.value;
+                        });
+                        contentDiv.appendChild(ingredientInfoInput);
+
                         itemContainer.appendChild(contentDiv);
 
                         const removeButton = document.createElement('button');
@@ -679,10 +692,21 @@
                     orderNameInput.className = 'order-name-input';
                     selectionBox.appendChild(orderNameInput);
 
+                    const ingredientsInfoInput = document.createElement('input');
+                    ingredientsInfoInput.type = 'text';
+                    ingredientsInfoInput.placeholder = 'Order Ingredients Info...';
+                    ingredientsInfoInput.className = 'ingredients-info-input';
+                    ingredientsInfoInput.id = 'orderIngredientsInfo';
+                    selectionBox.appendChild(ingredientsInfoInput);
+
                     const submitButton = document.createElement('button');
                     submitButton.textContent = 'Submit';
                     submitButton.className = 'submit-button';
-                    submitButton.onclick = () => promptAndSubmit(quantityInput.value, orderNameInput.value);
+                    submitButton.onclick = () => promptAndSubmit(
+                        quantityInput.value,
+                        orderNameInput.value,
+                        ingredientsInfoInput.value
+                    );
                     selectionBox.appendChild(submitButton);
                 }
 
@@ -690,7 +714,11 @@
             }
 
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, additionalIngredients: item.additionalIngredients })));
+            console.log('Updated selection box:', selectedItems.map(item => ({
+                name: item.name,
+                additionalIngredients: item.additionalIngredients,
+                ingredientsInfo: item.ingredientsInfo
+            })));
         }
 
         function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
@@ -724,13 +752,14 @@
                 fetch('/get_sector_ingredients', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ dietary_preference: dietaryPreference })
+                    body: JSON.stringify({ dietary_preference: 'both' })
                 })
                     .then(response => response.json())
                     .then(data => {
                         if (!data.error) {
                             sectorIngredients = data.ingredients;
                             console.log('Fetched Sector_Detail__c ingredients:', sectorIngredients);
+                            updateSelectionBox();
                         }
                     })
                     .catch(error => console.error('Error fetching Sector_Detail__c ingredients:', error));
@@ -810,9 +839,10 @@
                         description: item.description || 'No description available',
                         source: item.source,
                         quantity: 1,
-                        additionalIngredients: []
+                        additionalIngredients: [],
+                        ingredientsInfo: ''
                     };
-                    if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.additionalIngredients)) {
+                    if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.additionalIngredients && !existing.ingredientsInfo)) {
                         addMessage('bot', `"${selectedItem.name}" already selected!`);
                     } else {
                         selectedItems.push(selectedItem);
@@ -830,15 +860,15 @@
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        function promptAndSubmit(quantity, orderName) {
+        function promptAndSubmit(quantity, orderName, ingredientsInfo) {
             if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity}) as "${orderName || 'Order'}"?`)) {
-                submitToSalesforce(orderName, quantity);
+                submitToSalesforce(orderName, quantity, ingredientsInfo);
             } else {
                 addMessage('bot', 'Cancelled. Add more items?');
             }
         }
 
-        function submitToSalesforce(customOrderName, quantity) {
+        function submitToSalesforce(customOrderName, quantity, ingredientsInfo) {
             if (selectedItems.length === 0) {
                 addMessage('bot', 'No items selected! Add some dishes! 😊');
                 return;
@@ -852,13 +882,18 @@
                 description: item.description || 'No description available',
                 image_url: item.image_url || '',
                 quantity: parseInt(quantity) || 1,
-                additionalIngredients: item.additionalIngredients || []
+                additionalIngredients: item.additionalIngredients || [],
+                ingredientsInfo: item.ingredientsInfo || ''
             }));
 
             fetch('/submit_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
+                body: JSON.stringify({
+                    items: itemsToSubmit,
+                    custom_order_name: customOrderName,
+                    ingredients_info: ingredientsInfo
+                })
             })
                 .then(response => response.json())
                 .then(data => {
@@ -872,7 +907,7 @@
                 })
                 .catch(error => {
                     addMessage('bot', `Submission error: ${error.message}. Retrying...`);
-                    setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
+                    setTimeout(() => submitToSalesforce(customOrderName, quantity, ingredientsInfo), 2000);
                 });
         }