Update templates/menu.html

templates/menu.html

@@ -691,7 +691,7 @@ form-check-input addon-option{
     </div>
 
   <!-- Modal for Item Details -->
-<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+<!-- <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -731,8 +731,56 @@ form-check-input addon-option{
             </div>
         </div>
     </div>
+</div> -->
+<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Item Image -->
+                <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
+                <!-- Item Name -->
+                <h5 id="modal-name" class="fw-bold text-center"></h5>
+                <!-- Item Price -->
+                <p id="modal-price" class="text-muted text-center"></p>
+                <!-- Item Description -->
+                <p id="modal-description" class="text-secondary"></p>
+
+                <!-- Add-ons Section (Always Visible) -->
+                <div id="modal-addons" class="modal-addons mt-4">
+                    <h6>Customization Options</h6>
+                    <div id="addons-list" class="addons-container">Loading customization options...</div>
+                </div>
+
+                <!-- Only show Custom Request & Other Sections if not Appetizer or Customized Dish -->
+                <div id="other-sections" style="display: none;">
+                    <div class="mt-4">
+                        <h6>Custom Request</h6>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                    </div>
+                </div>
+
+                <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+            </div>
+            <!-- Quantity Controls and Add to Cart Button -->
+            <div class="modal-footer d-flex align-items-center justify-content-between">
+                <!-- Quantity Controls -->
+                <div class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+                    <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                    <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
+                </div>
+                <!-- Add to Cart Button -->
+                <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
+            </div>
+        </div>
+    </div>
 </div>
 
+
 <!-- JavaScript -->
 <script>
     // Show item details and fetch customization options