Update templates/index.html

templates/index.html

@@ -252,7 +252,6 @@
             padding: 3px 8px;
             border-radius: 5px;
             font-size: 11px;
-            flex-wrap: wrap;
         }
 
         .selected-item-image {
@@ -317,21 +316,6 @@
             width: 100px;
         }
 
-        .custom-ingredients-input {
-            padding: 4px;
-            border: 1px solid #0288d1;
-            border-radius: 5px;
-            font-size: 11px;
-            width: 120px;
-            margin-left: 5px;
-        }
-
-        .custom-ingredients-label {
-            font-size: 11px;
-            margin-left: 5px;
-            color: #555;
-        }
-
         @media (max-width: 480px) {
             .chat-header {
                 font-size: 14px;
@@ -424,10 +408,6 @@
                 font-size: 11px;
                 padding: 3px;
             }
-            .custom-ingredients-input {
-                width: 100px;
-                font-size: 10px;
-            }
         }
 
         @media (min-width: 481px) and (max-width: 768px) {
@@ -504,10 +484,6 @@
                 width: 50px;
                 font-size: 12px;
             }
-            .custom-ingredients-input {
-                width: 110px;
-                font-size: 11px;
-            }
         }
     </style>
 </head>
@@ -573,13 +549,16 @@
                 botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
                 displayOptions([
                     { text: 'Vegetarian', class: 'green' },
-                    { text: 'Non-Vegetarian', class: 'red' }
+                    { text: 'Non-Vegetarian', class: 'red' },
+                    { text: 'Both', class: 'gray' }
                 ]);
                 addMessage('bot', botResponse);
-            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
+            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
                 botResponse = `Fetching ${lowerInput} dishes...`;
                 addMessage('bot', botResponse);
                 fetchMenuItems(lowerInput);
+            } else if (lowerInput.startsWith('add')) {
+                handleAddItem(lowerInput);
             } else {
                 botResponse = `Looking for "${userInput}"...`;
                 addMessage('bot', botResponse);
@@ -587,6 +566,62 @@
             }
         }
 
+        function handleAddItem(input) {
+            const addMatch = input.match(/^add\s+(.+?)(?:\s+with\s+(.+))?$/i);
+            if (!addMatch) {
+                addMessage('bot', 'Please use format: "Add [dish name] [with extra ingredients]"');
+                return;
+            }
+            const dishName = addMatch[1].trim();
+            const extraIngredients = addMatch[2] ? addMatch[2].trim() : '';
+            fetch('/get_sector_item_details', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ item_name: dishName })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.error) {
+                        addMessage('bot', `No "${dishName}" found. Try another dish!`);
+                        return;
+                    }
+                    const item = data.item_details;
+                    const originalItem = {
+                        name: item.name,
+                        image_url: item.image_url || '',
+                        category: item.category || 'Not specified',
+                        description: item.description || 'No description available',
+                        source: item.source,
+                        quantity: 1
+                    };
+                    if (selectedItems.some(existing => existing.name === originalItem.name && !existing.custom)) {
+                        addMessage('bot', `"${originalItem.name}" already added!`);
+                    } else {
+                        selectedItems.push(originalItem);
+                        addMessage('bot', `Added "${originalItem.name}"!`);
+                    }
+                    if (extraIngredients) {
+                        const customItem = {
+                            ...originalItem,
+                            name: `${item.name} (Custom)`,
+                            description: `${item.description}, ${extraIngredients}`,
+                            custom: true
+                        };
+                        if (selectedItems.some(existing => existing.name === customItem.name)) {
+                            addMessage('bot', `"${customItem.name}" already added!`);
+                        } else {
+                            selectedItems.push(customItem);
+                            addMessage('bot', `Added customized "${customItem.name}" with ${extraIngredients}!`);
+                        }
+                    }
+                    updateSelectionBox();
+                })
+                .catch(error => {
+                    addMessage('bot', `Error fetching "${dishName}": ${error.message}. Retrying...`);
+                    setTimeout(() => fetchSectorItemDetails(dishName), 2000);
+                });
+        }
+
         function updateSelectionBox() {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) return;
@@ -619,8 +654,18 @@
             };
             selectionBox.appendChild(nonVegButton);
 
+            const bothButton = document.createElement('button');
+            bothButton.textContent = 'Both';
+            bothButton.className = 'dietary-button gray';
+            bothButton.onclick = () => {
+                addMessage('user', 'Both');
+                conversation.push({ role: 'user', message: 'Both' });
+                handleResponse('both');
+            };
+            selectionBox.appendChild(bothButton);
+
             const label = document.createElement('span');
-            label.textContent = 'Selected Items:';
+            label.textContent = 'Selected:';
             selectionBox.appendChild(label);
 
             selectedItems.forEach((item, index) => {
@@ -641,28 +686,6 @@
                 itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
                 contentDiv.appendChild(itemSpan);
 
-                const customLabel = document.createElement('span');
-                customLabel.className = 'custom-ingredients-label';
-                customLabel.textContent = 'Custom Ingredients:';
-                contentDiv.appendChild(customLabel);
-
-                const customInput = document.createElement('input');
-                customInput.type = 'text';
-                customInput.className = 'custom-ingredients-input';
-                customInput.placeholder = 'e.g., extra cheese';
-                customInput.value = item.custom_ingredients || '';
-                customInput.addEventListener('input', (e) => {
-                    selectedItems[index].custom_ingredients = e.target.value.trim();
-                });
-                contentDiv.appendChild(customInput);
-
-                if (item.custom_ingredients) {
-                    const customDisplay = document.createElement('span');
-                    customDisplay.textContent = `Customized: ${item.name} with ${item.custom_ingredients}`;
-                    customDisplay.className = 'custom-ingredients-label';
-                    contentDiv.appendChild(customDisplay);
-                }
-
                 if (item.source === 'Sector_Detail__c') {
                     const showButton = document.createElement('button');
                     showButton.textContent = 'Show';
@@ -688,12 +711,14 @@
 
             const textInput = document.createElement('input');
             textInput.type = 'text';
-            textInput.placeholder = 'Add item...';
+            textInput.placeholder = 'Add item (e.g., Paneer Tikka with onions)';
             textInput.className = 'manual-input';
             textInput.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter' && textInput.value.trim()) {
-                    const itemName = textInput.value.trim();
-                    fetchSectorItemDetails(itemName);
+                    const input = textInput.value.trim();
+                    addMessage('user', `Add ${input}`);
+                    conversation.push({ role: 'user', message: `Add ${input}` });
+                    handleAddItem(`add ${input}`);
                     textInput.value = '';
                 }
             });
@@ -723,7 +748,7 @@
 
             chatMessages.appendChild(selectionBox);
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category, custom_ingredients: item.custom_ingredients })));
+            console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
         }
 
         function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
@@ -741,7 +766,7 @@
                         addMessage('bot', `Error: ${data.error}. Try again!`);
                     } else if (data.menu_items.length > 0) {
                         addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
-                        displayItemsList(data.menu_items.filter(item => item.source === 'Sector_Detail__c'));
+                        displayItemsList(data.menu_items);
                     } else {
                         addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
                     }
@@ -765,10 +790,10 @@
                         addMessage('bot', `No "${itemName}" found. Try another!`);
                     } else {
                         const details = data.item_details;
-                        if (selectedItems.some(item => item.name === details.name)) {
+                        if (selectedItems.some(item => item.name === details.name && !item.custom)) {
                             addMessage('bot', `"${details.name}" already selected!`);
                         } else {
-                            selectedItems.push({ ...details, quantity: 1, custom_ingredients: '' });
+                            selectedItems.push({ ...details, quantity: 1 });
                             addMessage('bot', `Added "${details.name}"!`);
                             updateSelectionBox();
                         }
@@ -826,8 +851,14 @@
                 contentDiv.appendChild(nameDiv);
 
                 const fields = [
+                    { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
+                    { label: 'Veg/Non-Veg', value: item.veg_nonveg },
+                    { label: 'Spice', value: item.spice_levels },
                     { label: 'Category', value: item.category },
-                    { label: 'Description', value: item.description }
+                    { label: 'Ingredients', value: item.ingredients },
+                    { label: 'Nutrition', value: item.nutritional_info },
+                    { label: 'Sector', value: item.sector },
+                    { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
                 ];
                 fields.forEach(field => {
                     if (field.value) {
@@ -854,9 +885,15 @@
                         description: item.description || 'No description available',
                         source: item.source,
                         quantity: 1,
-                        custom_ingredients: ''
+                        ingredients: item.ingredients,
+                        nutritional_info: item.nutritional_info,
+                        price: item.price,
+                        sector: item.sector,
+                        spice_levels: item.spice_levels,
+                        veg_nonveg: item.veg_nonveg,
+                        dynamic_dish: item.dynamic_dish
                     };
-                    if (selectedItems.some(existing => existing.name === selectedItem.name)) {
+                    if (selectedItems.some(existing => existing.name === selectedItem.name && !existing.custom)) {
                         addMessage('bot', `"${selectedItem.name}" already selected!`);
                     } else {
                         selectedItems.push(selectedItem);
@@ -927,8 +964,7 @@
                 category: item.category || 'Not specified',
                 description: item.description || 'No description available',
                 image_url: item.image_url || '',
-                quantity: parseInt(quantity) || 1,
-                custom_ingredients: item.custom_ingredients || ''
+                quantity: parseInt(quantity) || 1
             }));
 
             fetch('/submit_items', {
@@ -966,7 +1002,8 @@
             conversation.forEach(msg => addMessage(msg.role, msg.message));
             displayOptions([
                 { text: 'Vegetarian', class: 'green' },
-                { text: 'Non-Vegetarian', class: 'red' }
+                { text: 'Non-Vegetarian', class: 'red' },
+                { text: 'Both', class: 'gray' }
             ]);
             updateSelectionBox();
         }