Update templates/menu.html

templates/menu.html

@@ -164,6 +164,27 @@
             justify-content: space-between;
             align-items: center;
         }
+        /* Style for customization sections */
+        .addon-section {
+            background-color: #f8f9fa; /* Light gray background */
+            border: 2px solid #5bbfc1; /* Border color */
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 15px; /* Spacing between sections */
+        }
+
+        /* Customization section title */
+        .addon-section h6 {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #333;
+        }
+
+        /* Style for add-on checkboxes */
+        .addon-section .form-check {
+            margin-left: 10px;
+        }
 
     </style>
 </head>
@@ -303,6 +324,7 @@
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
 
+
                     <div class="mt-4">
                         <h6>Special Instructions</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
@@ -322,7 +344,7 @@
     <script>
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `${price}`;
+            document.getElementById('modal-price').innerText = `₹${price}`;
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
@@ -339,16 +361,16 @@
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = ''; // Clear previous content
-
+        
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
                     }
 
-                    // Display customization options dynamically
+                    // Display customization options inside styled divs
                     data.addons.forEach(addon => {
                         const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section');
+                        sectionDiv.classList.add('addon-section'); // Add styling class
 
                         // Add section title
                         const title = document.createElement('h6');
@@ -367,7 +389,7 @@
                                 <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
                                        data-name="${option}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                                 <label class="form-check-label" for="${optionId}">
-                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                                    ${option} ${addon.extra_charge ? `(₹${addon.extra_charge_amount})` : ''}
                                 </label>
                             `;
                             optionsContainer.appendChild(listItem);
@@ -383,6 +405,7 @@
                 });
         }
 
+
         function filterMenu() {
             let input = document.getElementById('searchBar').value.toLowerCase();
             let sections = document.querySelectorAll('.menu-section'); // Select all sections