Update templates/cart.html

templates/cart.html

@@ -6,176 +6,171 @@
     <title>Cart</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
-      
-      body {
+        body {
             font-family: Arial, sans-serif;
-            background-color:  #fdf4e3; /* Updated background color */
-               color: #333;
-      }
-/* Top orange bar */
-    .top-bar {
-      background-color: #FF6F3C;
-      width: 100%;
-      padding: 10px 15px;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
-    .back-link {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-    }
-    .back-arrow {
-      font-size: 1.8rem;
-      color: #000; /* Dark black */
-      font-weight: bold;
-    }
-    .back-label {
-      margin-left: 10px;
-      color: white;
-      font-weight: bold;
-      font-size: 1rem;
-    }
-    h1 {
-      color: #1C1C1C;
-      font-size: 1.2rem;
-      margin: 30px 0 15px; /* Default margin for larger screens */
-      text-align: center;
-    }
-        /* Title Styling: Dark Black, Centered, and Larger Size */
+            background-color: #fdf4e3;
+            color: #333;
+        }
+
+        /* Top orange bar */
+        .top-bar {
+            background-color: #FF6F3C;
+            width: 100%;
+            padding: 10px 15px;
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+        }
+        .back-link {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+        }
+        .back-arrow {
+            font-size: 1.8rem;
+            color: #000;
+            font-weight: bold;
+        }
+        .back-label {
+            margin-left: 10px;
+            color: white;
+            font-weight: bold;
+            font-size: 1rem;
+        }
+
+        /* Title Styling */
         .order-heading {
-            color: #000; /* Dark black color */
-            font-size: 2.5rem; /* Larger font size for desktop */
+            color: #000;
+            font-size: 2.5rem;
             font-weight: bold;
             text-align: center;
-            margin-top: 30px; /* Spacing from the top */
+            margin-top: 30px;
         }
+
         .cart-container {
             max-width: 768px;
             margin: 20px auto;
             padding: 15px;
             background-color: #FFFFFF;
             border-radius: 10px;
-            
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
-       .cart-container2 {
-         background-color:#FFFFFF;
-          display: flex;
+        .cart-container2 {
+            background-color: #FFFFFF;
+            display: flex;
             flex-direction: column;
             padding: 10px;
-       
-      
-        }
-    .cart-item {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    border: 1px solid transparent; /* Set the border to transparent */
-    padding: 30px 15px 15px;
-    background-color: #fff; /* Padding for the content */
-    box-sizing: border-box;
-    min-height: 100px;
-    position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
-    border: 1px solid #fdf4e3; /* light Orange border around each item */
-    border-radius: 8px; /* Rounded corners for items */
-}
-
-.remove-btn {
-    border: none; /* Remove the border around the button */
-    background-color: transparent; /* Transparent background */
-    cursor: pointer; /* Change cursor to pointer */
-    font-size: 1.2rem; /* Slightly decrease the size of the trash icon */
-    margin-bottom: 10px; /* Add space below the delete icon */
-    transition: color 0.3s ease; /* Smooth transition for icon color */
-    position: relative; /* Make it relative for movement */
-    top: -35px; /* Move the button 10px upwards */
-    left: 50px; /* Move the button 30px to the right */
-}
-.remove-btn i {
-    color: red; /* Make the trash icon red */
-}
-/* Hover effect */
-.remove-btn:hover {
-    color: black; /* Change the icon color to black on hover */
-    background-color: transparent; /* Keep background transparent on hover */
-}
-/* Prevent background color on focus or click */
-.remove-btn:focus {
-    outline: none; /* Remove the outline */
-    background-color: transparent; /* Keep background transparent after clicking */
-}
-
- /* Green Color for Prices */
-.text-primary {
-    color: #2e7d32; /* Green color for the prices */
-    text-align: right; /* Center-align the price */
-    font-weight: bold; /* Make the price text bold */
-    white-space: nowrap; /* Prevent price text from wrapping */
-}
-/* For the image container */
-.image-wrapper {
-    width: 80px;                     /* Width of the image container */
-    height: 80px !important;          /* Set the height of the container to match the image */
-    display: flex;                    /* Flex container for the image */
-    align-items: center;              /* Center image vertically */
-    justify-content: center;          /* Center image horizontally */
-}
-/* For the image */
-.cart-item img {
-    width: 70px;                      /* Set the width to 70px */
-    height: 70px;                     /* Set the height to 70px */
-    object-fit: cover;                /* Ensure the image covers the container without stretching */
-    border-radius: 5px;               /* Optional: rounded corners */
-    border: 1px solid #ffcc80;        /* Light orange border around images */
-    margin: 0;                         /* Ensure no extra space around the image */
-}
-        
+        }
+        .cart-item {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            border: 1px solid #fdf4e3;
+            padding: 30px 15px 15px;
+            background-color: #fff;
+            box-sizing: border-box;
+            min-height: 100px;
+            position: relative;
+            border-radius: 8px;
+        }
+        .remove-btn {
+            border: none;
+            background-color: transparent;
+            cursor: pointer;
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+            transition: color 0.3s ease;
+            position: relative;
+            top: -35px;
+            left: 50px;
+        }
+        .remove-btn i {
+            color: red;
+        }
+        .remove-btn:hover {
+            color: black;
+            background-color: transparent;
+        }
+        .remove-btn:focus {
+            outline: none;
+            background-color: transparent;
+        }
+        .text-primary {
+            color: #2e7d32;
+            text-align: right;
+            font-weight: bold;
+            white-space: nowrap;
+        }
+        .image-wrapper {
+            width: 80px;
+            height: 80px !important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .cart-item img {
+            width: 70px;
+            height: 70px;
+            object-fit: cover;
+            border-radius: 5px;
+            border: 1px solid #ffcc80;
+            margin: 0;
+        }
         .cart-item img:hover {
             transform: scale(1.05);
         }
         .cart-item-title {
             font-size: 1.1rem;
-            font-weight: bold; /* Make the title text bold */
-        }
-        
-    .checkout-button {
-    background-color:  #A52A2A;  
-    color: #ffffff;  /* White text */
-    padding: 12px;
-    border-radius: 8px;
-    border: none;
-    width: 100%;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-}
-.checkout-button:hover {
-    background-color: #A52A2A;  
-    color: #ffffff;  /* White text on hover */
-       }
+            font-weight: bold;
+        }
+        .checkout-button {
+            background-color: #A52A2A;
+            color: #ffffff;
+            padding: 12px;
+            border-radius: 8px;
+            border: none;
+            width: 100%;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        .checkout-button:hover {
+            background-color: #A52A2A;
+            color: #ffffff;
+        }
         .add-back-button {
-            padding: 6px 20px;
-            font-size: 0.9rem;
-            border-radius: 20px;
-            border: 1px solid #fff;
+            position: absolute;
+            top: -5px;
+            right: -10px;
+            font-size: 1rem;
+            padding: 0;
+            width: 30px;
+            height: 30px;
             background-color: #fff;
             color: #0FAA39;
+            border: 2px solid #0FAA39;
+            border-radius: 0;
             cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
+            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+            z-index: 2;
         }
         .add-back-button:hover {
             background-color: #fff;
             color: #0FAA39;
+            border-color: #0FAA39;
+            z-index: 3;
         }
-        
         .cart-item-details {
             flex: 1;
             margin-left: 15px;
         }
-       
         .cart-item-quantity {
             display: flex;
             align-items: center;
@@ -198,381 +193,419 @@
             font-size: 1rem;
             margin: 0 5px;
         }
-    /* Make the parent container position relative */
-.cart-summary {
-    position: relative; /* Make sure dropdown is positioned relative to this container */
-    text-align: left;
-    margin-top: 15px;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 12px;
-    border: 2px solid  #fdf4e3;  /* light Orange border around the cart summary */
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-}
-    .cart-item-instructions {
-        word-wrap: break-word; /* Ensure that long instructions text wraps to the next line */
-        white-space: normal;   /* Allow text to wrap and prevent overflow */
-        overflow: hidden;      /* Hide any overflow text */
-        max-width: 100%;       /* Ensure instructions text stays within the container's width */
-        word-break: break-word; /* Break the word when necessary */
-    
-}
-/* Coupon Section styling */
-.coupon-selection {
-    display: flex; /* Use flexbox to align items */
-    justify-content: space-between; /* Space between the label and the link */
-    align-items: center;
-    font-size: 1rem;
-    margin-bottom: 20px; /* Add space below Apply Coupon section */
-    position: relative; /* Ensure dropdown is within this container */
-}
-/* Ensure the Apply Coupon label and link are aligned correctly */
-.coupon-selection label {
-    font-weight: bold;
-    color: black;
-}
-.coupon-selection a {
-    color: #007bff; /* Blue for the link */
-    font-size: 1rem;
-    text-decoration: none;
-    text-align: right;
-}
-/* Coupon Dropdown styling */
-#couponDropdown {
-    width: 30%; /* Set dropdown to 30% of the width */
-    display: none; /* Hidden by default */
-    background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
-    z-index: 10; /* Ensure it's above other content */
-    margin-top: 10px; /* Add space from the link */
-    margin-left: auto; /* Push it to the right side */
-    margin-right: 0; /* Ensure it doesn't overflow outside */
-}
-/* Show the dropdown when it's active */
-#couponDropdown.show {
-    display: block;
-}
-/* Ensure Apply Coupon section aligns correctly */
-.coupon-selection {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 1rem;
-    margin-bottom: 20px; /* Add space below Apply Coupon section */
-}
-/* Apply Coupon link and label styles */
-.coupon-selection label {
-    font-weight: bold;
-    color: black;
-}
-.coupon-selection a {
-    color: #007bff; /* Blue for the link */
-    font-size: 1rem;
-    text-decoration: none;
-    text-align: right;
-}
-/* Bill details grid structure */
-.bill-details {
-    display: grid;
-    grid-template-columns: 1fr 1fr; /* Two-column layout */
-    grid-gap: 10px;
-    margin-bottom: 10px;
-}
-/* Adjust label and amount for bill details */
-.bill-details .label {
-    font-weight: 600;
-    font-size: 1rem;
-}
-.bill-details .amount {
-    text-align: right;
-    font-weight: 600;
-    font-size: 1rem;
-}
-/* Divider line between bill sections */
-.dotted-line {
-    border-bottom: 2px dotted #ccc;
-    margin: 15px 0;
-}
-/* Total bill grid layout */
-.total-bill {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    font-weight: 600;
-    font-size: 1.2rem;
-    margin-top: 10px;
-    margin-bottom: 10px; /* Add 10px space between To Pay and Submit Button */
-}
-.total-bill .label {
-    font-size: 1.1rem;
-}
-.total-bill .amount {
-    text-align: right;
-    font-size: 1.1rem;
-    color: #2e7d32; /* Green for Total Bill Price */
-}
-/* Margin to add space for dropdown when visible */
-.cart-summary.has-dropdown {
-    margin-bottom: 80px; /* Create space below the content when dropdown is visible */
-}
-.checkout-button {
-    background-color:  #A52A2A;
-    color:  #ffffff;
-    padding: 12px;
-    border-radius: 8px;
-    border: none;
-    height: 44px;
-    width: 100%;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-.suggestion-section {
-    margin-top: 25px;
-    padding: 15px;
-    background-color: #fff;
-    border-radius: 10px;
-    border: 2px solid  #fdf4e3;  /* light Orange border around the complete meal box */
-}
-.suggestion-items-container {
-    display: flex;
-    overflow-x: auto; /* Horizontal scrolling */
-    gap: 10px; /* Space between items */
-    padding-bottom: 10px;
-    padding-top: 10px;
-}
-/* Styling for the suggestion item card */
-.suggestion-item {
-    display: flex; /* Align items horizontally */
-    align-items: center; /* Center image and text vertically */
-    justify-content: flex-start; /* Align items to the start (left side) */
-    flex-shrink: 0;
-    width: 160px; /* Set fixed width for each suggestion item */
-    padding: 10px;
-    border-radius: 8px; /* Rounded corners */
-    background-color: #fff;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease;
-    margin-right: 10px; /* Ensure there's space between the cards */
-    position: relative; /* For positioning the + icon */
-    text-align: left; /* Align text to the left */
-    overflow: visible; /* Allow the button to overflow outside */
-    border: 2px solid  #fdf4e3;  /* light Orange border around the suggestion items */
-}
-.suggestion-item:hover {
-    transform: scale(1.05); /* Slight zoom effect on hover */
-}
-.suggestion-item img {
-    width: 50px; /* Set a fixed width for the image */
-    height: 50px; /* Set a fixed height for the image */
-    object-fit: cover; /* Ensure image fits correctly without distortion */
-    border-radius: 5px; /* Rounded corners for the image */
-    margin-right: 12px; /* Space between the image and text */
-}
-.suggestion-item div {
-    flex-grow: 1; /* Allow the text section to expand and fill available space */
-    text-align: left; /* Align text to the left */
-}
-/* Styling for the + symbol button (with green border, white background, and black text) */
-.add-back-button {
-    position: absolute;
-    top: -5px;
-    right: -10px;
-    font-size: 1rem; /* Smaller font size */
-    padding: 0; /* Remove padding */
-    width: 30px; /* Set fixed width */
-    height: 30px; /* Set fixed height */
-    background-color: #fff;
-    color: #0FAA39;
-    border: 2px solid #0FAA39;
-    border-radius: 0; /* Square shape */
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-    z-index: 2; /* Increased z-index to ensure it stays above the borders */
-}
-.add-back-button:hover {
-    background-color: #fff; /* Green background on hover */
-    color: #0FAA39; /* White color for the + symbol when hovered */
-    border-color: #0FAA39; /* Green border on hover */
-    z-index: 3; /* Ensure button stays on top when hovered */
-}
-/* Ensure the scroll container works fine */
-.suggestion-items-container::-webkit-scrollbar {
-    height: 8px; /* Height of the scrollbar */
-}
-.suggestion-items-container::-webkit-scrollbar-thumb {
-    background-color: #fff; /* Green color for scrollbar thumb */
-    border-radius: 4px;
-}
-.suggestion-items-container::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
-}
-     
-.cart-item-actions {
-    display: flex; /* Use flexbox to align items horizontally */
-    align-items: flex-start; /* Align the price at the top of the cart item (like the item name) */
-    margin-left: auto; /* This will push the price to the right side of the cart item */
-}
-  h4.mb-4.fw-bold {
-    text-align: center;  /* Centers the title */
-    color: #FF5722;  /* Orange color for the title */
-.cart-container h4 {
-    text-align: center;  /* This will center the title horizontally */
-    color: #FF5722;  /* Orange color */
-    font-weight: bold;  /* Make it bold */
-}
-
+        .cart-summary {
+            position: relative;
+            text-align: left;
+            margin-top: 15px;
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 12px;
+            border: 2px solid #fdf4e3;
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+        }
+        .cart-item-instructions {
+            word-wrap: break-word;
+            white-space: normal;
+            overflow: hidden;
+            max-width: 100%;
+            word-break: break-word;
+        }
+        .coupon-selection {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 1rem;
+            margin-bottom: 20px;
+            position: relative;
+        }
+        .coupon-selection label {
+            font-weight: bold;
+            color: black;
+        }
+        .coupon-selection a {
+            color: #007bff;
+            font-size: 1rem;
+            text-decoration: none;
+            text-align: right;
+        }
+        #couponDropdown {
+            width: 30%;
+            display: none;
+            background-color: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            z-index: 10;
+            margin-top: 10px;
+            margin-left: auto;
+            margin-right: 0;
+        }
+        #couponDropdown.show {
+            display: block;
+        }
+        .bill-details {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 10px;
+            margin-bottom: 10px;
+        }
+        .bill-details .label {
+            font-weight: 600;
+            font-size: 1rem;
+        }
+        .bill-details .amount {
+            text-align: right;
+            font-weight: 600;
+            font-size: 1rem;
+        }
+        .dotted-line {
+            border-bottom: 2px dotted #ccc;
+            margin: 15px 0;
+        }
+        .total-bill {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            font-weight: 600;
+            font-size: 1.2rem;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+        .total-bill .label {
+            font-size: 1.1rem;
+        }
+        .total-bill .amount {
+            text-align: right;
+            font-size: 1.1rem;
+            color: #2e7d32;
+        }
+        .cart-summary.has-dropdown {
+            margin-bottom: 80px;
+        }
+        .suggestion-section {
+            margin-top: 25px;
+            padding: 15px;
+            background-color: #fff;
+            border-radius: 10px;
+            border: 2px solid #fdf4e3;
+        }
+        .suggestion-items-container {
+            display: flex;
+            overflow-x: auto;
+            gap: 10px;
+            padding-bottom: 10px;
+            padding-top: 10px;
+        }
+        .suggestion-item {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-shrink: 0;
+            width: 160px;
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+            margin-right: 10px;
+            position: relative;
+            text-align: left;
+            overflow: visible;
+            border: 2px solid #fdf4e3;
+        }
+        .suggestion-item:hover {
+            transform: scale(1.05);
+        }
+        .suggestion-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 5px;
+            margin-right: 12px;
+        }
+        .suggestion-item div {
+            flex-grow: 1;
+            text-align: left;
+        }
+        .suggestion-items-container::-webkit-scrollbar {
+            height: 8px;
+        }
+        .suggestion-items-container::-webkit-scrollbar-thumb {
+            background-color: #fff;
+            border-radius: 4px;
+        }
+        .suggestion-items-container::-webkit-scrollbar-track {
+            background-color: #f1f1f1;
+        }
+        .cart-item-actions {
+            display: flex;
+            align-items: flex-start;
+            margin-left: auto;
+        }
 
-   <body> 
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 600px;
+            max-height: 80vh;
+            overflow-y: auto;
+            position: relative;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        }
+        .modal-content h3 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #333;
+        }
+        .close-modal {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #333;
+        }
+        .menu-items-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            padding: 10px;
+        }
+        .menu-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: calc(50% - 10px);
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            border: 2px solid #fdf4e3;
+        }
+        .menu-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 5px;
+            margin-right: 10px;
+        }
+        .menu-item-details {
+            flex-grow: 1;
+        }
+        .menu-item-details small {
+            display: block;
+            color: #666;
+        }
+        .bill-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        .bill-item-details {
+            flex: 1;
+        }
+        .bill-item-details small {
+            display: block;
+            color: #666;
+        }
+        .bill-item-price {
+            font-weight: bold;
+            color: #2e7d32;
+        }
+        .bill-summary {
+            margin-top: 20px;
+        }
+        .modal-actions {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+        }
+        .action-btn {
+            padding: 10px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            width: 48%;
+            text-align: center;
+            color: #fff;
+        }
+        .view-bill-btn {
+            background-color: #A52A2A;
+        }
+        .cancel-btn {
+            background-color: #6c757d;
+        }
+        .confirm-order-btn {
+            background-color: #A52A2A;
+        }
     </style>
 </head>
-<!-- Top Orange Label Bar -->
-  <div class="top-bar">
-    <a href="/menu" class="back-link">
-      <span class="back-arrow">&#10216;</span>
-      <span class="back-label">Back to Menu</span>
-    </a>
-  </div>
-<!-- Order History Title (centered and dark black) -->
-<div class="order-heading">Your Cart</div>
+<body>
+    <!-- Top Orange Label Bar -->
+    <div class="top-bar">
+        <a href="/menu" class="back-link">
+            <span class="back-arrow">⟨</span>
+            <span class="back-label">Back to Menu</span>
+        </a>
+    </div>
 
+    <!-- Order History Title -->
+    <div class="order-heading">Your Cart</div>
 
     <div class="container">
         <div class="cart-container">
-            <div style="text-align: right;">
-                </div>
-           
-
-           <div class="cart-container2">
-    {% for item in cart_items %}
-        <div class="cart-item">
-            <div class="image-wrapper">
-                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-            </div>
-            <div class="cart-item-details">
-                <div class="cart-item-title">
-                    {{ item.Name }}
-                </div> 
-                <div class="cart-item-addons">
-                    <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                </div>
-                <div class="cart-item-instructions">
-                    <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                </div>
-                <div class="cart-item-quantity mt-2">
-                    <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                    <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
-                    <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                </div>
-            </div>
-                <div class="cart-item-actions">
-                            <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-
-            <!-- Delete Button with Trash Icon and onclick handler -->
+            <div class="cart-container2">
+                {% for item in cart_items %}
+                    <div class="cart-item">
+                        <div class="image-wrapper">
+                            <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                        </div>
+                        <div class="cart-item-details">
+                            <div class="cart-item-title">{{ item.Name }}</div>
+                            <div class="cart-item-addons">
+                                <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
+                            </div>
+                            <div class="cart-item-instructions">
+                                <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
+                            </div>
+                            <div class="cart-item-quantity mt-2">
+                                <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
+                                <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
+                                <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
+                            </div>
+                        </div>
+                        <div class="cart-item-actions">
                             <button type="button" class="btn btn-light text-dark remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
                                 <i class="bi bi-trash"></i>
                             </button>
-
-                            <div class="text-primary" style="color: #000 !important;">
-                                $<span class="base-price">{{ item.Price__c }}</span>
-                            </div>
+                            <div class="text-primary">${{ item.Price__c }}</div>
                         </div>
                     </div>
                 {% else %}
-                    <!-- Code to handle the case when cart_items is empty -->
                     <p>No items in your cart.</p>
                 {% endfor %}
             </div>
 
-
             <!-- Suggestions Section -->
             {% if suggestions %}
-            <div class="suggestion-section">
-                <h5>Complete Your Meal</h5>
-                <div class="suggestion-items-container">
-                    {% for suggestion in suggestions %}
-                    <div class="suggestion-item">
-                        <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                        <div>
-                            <div>{{ suggestion.Name }}</div>
-                            <div class="text-muted">${{ suggestion.Price__c }}</div>
-                        </div>
-                        <!-- Replace add button with a cart icon -->
-                        <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">+</button>
-                        
-                           
+                <div class="suggestion-section">
+                    <h5>Complete Your Meal</h5>
+                    <div class="suggestion-items-container">
+                        {% for suggestion in suggestions %}
+                            <div class="suggestion-item">
+                                <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                                <div>
+                                    <div>{{ suggestion.Name }}</div>
+                                    <div class="text-muted">${{ suggestion.Price__c }}</div>
+                                </div>
+                                <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}')">+</button>
+                            </div>
+                        {% endfor %}
                     </div>
-                    {% endfor %}
                 </div>
-            </div>
-
             {% endif %}
 
             <!-- Subtotal -->
             <div class="cart-summary">
-                  <!-- Coupon Section -->
-                      {% if coupons %}
-                          <div class="coupon-selection d-flex justify-content-between align-items-center">
-                              <label class="text-dark font-weight-bold mb-0">Apply Coupon</label>
-                              <a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()" class="text-primary">+ Apply Coupon</a>
-                          </div>
-
-                          <!-- Coupon Dropdown, positioned below Apply Coupon -->
-                          <select id="couponDropdown" class="form-select mt-2" style="display:none;" onchange="calculateDiscount()">
-                              <option value="">Select a coupon</option>
-                              {% for coupon in coupons %}
-                                  <option value="{{ coupon }}">{{ coupon }}</option>
-                              {% endfor %}
-                          </select>
-                      {% endif %}
-
-               
+                {% if coupons %}
+                    <div class="coupon-selection d-flex justify-content-between align-items-center">
+                        <label class="text-dark font-weight-bold mb-0">Apply Coupon</label>
+                        <a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()" class="text-primary">+ Apply Coupon</a>
+                    </div>
+                    <select id="couponDropdown" class="form-select mt-2" style="display:none;" onchange="calculateDiscount()">
+                        <option value="">Select a coupon</option>
+                        {% for coupon in coupons %}
+                            <option value="{{ coupon }}">{{ coupon }}</option>
+                        {% endfor %}
+                    </select>
+                {% endif %}
 
                 <div class="bill-details">
                     <div class="label">Cart Total</div>
                     <div class="amount">${{ subtotal }}</div>
-                    
-
                     <div class="label">Discount</div>
                     <div class="amount" id="discountText">-${{ discount }}</div>
-
-
-                    
-                    
                 </div>
 
                 <div class="dotted-line"></div>
 
                 <div class="total-bill">
-                     <div class="label">To Pay</div>
-                     <div class="amount" id="totalBillText">${{ subtotal }}</div>
+                    <div class="label">To Pay</div>
+                    <div class="amount" id="totalBillText">${{ subtotal }}</div>
                 </div>
                 <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
         </div>
     </div>
 
+    <!-- Anything Else Modal -->
+    <div class="modal" id="anythingElseModal">
+        <div class="modal-content">
+            <span class="close-modal" onclick="closeAnythingElseModal()">×</span>
+            <h3>Anything Else You Want?</h3>
+            <div class="menu-items-container" id="menuItems"></div>
+            <div class="modal-actions">
+                <button class="action-btn view-bill-btn" onclick="showBill()">View Bill</button>
+                <button class="action-btn cancel-btn" onclick="closeAnythingElseModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bill Modal -->
+    <div class="modal" id="billModal">
+        <div class="modal-content">
+            <span class="close-modal" onclick="closeBillModal()">×</span>
+            <h3>Your Bill</h3>
+            <div id="billItems"></div>
+            <div class="bill-summary">
+                <div class="bill-details">
+                    <div class="label">Subtotal</div>
+                    <div class="amount" id="billSubtotal">$0.00</div>
+                    <div class="label">Discount</div>
+                    <div class="amount" id="billDiscount">$0.00</div>
+                </div>
+                <div class="dotted-line"></div>
+                <div class="total-bill">
+                    <div class="label">Total</div>
+                    <div class="amount" id="billTotal">$0.00</div>
+                </div>
+            </div>
+            <div class="modal-actions">
+                <iml class="action-btn confirm-order-btn" onclick="submitOrder()">Confirm Order</button>
+                <button class="action-btn cancel-btn" onclick="closeBillModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
 
     <script>
-        // Example function to handle the increase/decrease button clicks
+        let currentCart = null;
+        let menuItems = [];
+
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
-            // Update quantity based on action
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
-            // Validate quantity
             if (isNaN(quantity) || quantity < 1) {
                 alert("Invalid quantity!");
                 return;
             }
-            // Send updated quantity to the server
             fetch('/cart/update_quantity', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -581,82 +614,56 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    // Update the item price and quantity in the UI
                     quantityInput.value = quantity;
-                    let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
+                    let itemElement = quantityInput.closest(".cart-item");
                     if (itemElement) {
-                        let basePriceElement = itemElement.querySelector(".base-price");
-                        let addonsPriceElement = itemElement.querySelector(".addons-price");
-                        // Update the base price
-                        if (basePriceElement) {
-                            basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
-                        }
-                        // Update add-ons price if needed (optional)
-                        if (addonsPriceElement && data.addons_price !== undefined) {
-                            addonsPriceElement.innerText = data.addons_price.toFixed(2);
+                        let basePriceElement = itemElement.querySelector(".text-primary");
+                        if (basePriceElement && data.new_item_price) {
+                            basePriceElement.innerText = `$${data.new_item_price.toFixed(2)}`;
                         }
-                    } else {
-                        console.error(`Parent cart item element not found for item: ${itemName}`);
                     }
                     location.reload();
-                    // Recalculate subtotal dynamically
-                    
                 } else {
                     alert("Error updating quantity: " + data.error);
                 }
             })
             .catch(err => console.error("Error:", err));
         }
+
         function toggleCouponDropdown() {
             let couponDropdown = document.getElementById('couponDropdown');
-    
-            // Toggle the visibility of the coupon dropdown
             if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
                 couponDropdown.style.display = "block";
             } else {
                 couponDropdown.style.display = "none";
             }
         }
+
         function calculateDiscount() {
-            let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
-            let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value
-            let subtotal = parseFloat("{{ subtotal }}"); // Get the subtotal (from the backend)
-            // If a valid coupon is selected
+            let couponDropdown = document.getElementById('couponDropdown');
+            let selectedCoupon = couponDropdown.value.trim();
+            let subtotal = parseFloat("{{ subtotal }}");
             if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
-                // Apply 10% discount
                 let discount = subtotal * 0.10;
                 let total = subtotal - discount;
-                // Update UI with discount and total bill
                 document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
                 document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
             } else {
-                // If no coupon is selected or "None" is selected, reset the discount
                 document.getElementById("discountText").innerText = `$0.00`;
                 document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }
-       
+
         function proceedToOrder() {
             let couponDropdown = document.getElementById('couponDropdown');
-    
-            // Initialize selectedCoupon to an empty string by default
             let selectedCoupon = "";
-    
-            // Only proceed if couponDropdown exists
             if (couponDropdown) {
-                // If the value is not null or undefined, strip the value
-                if (couponDropdown.value != null) {
-                    selectedCoupon = couponDropdown.value.trim();  // safely call .trim() if value is not null
-                } else {
-                    selectedCoupon = "";  // Assign empty string if value is null
-                }
+                selectedCoupon = couponDropdown.value ? couponDropdown.value.trim() : "";
             }
-            // If no coupon is selected or the value is empty, treat it as no coupon
             if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
-                selectedCoupon = null;  // Treat it as no coupon selected
+                selectedCoupon = null;
             }
-            // Send the selected coupon to the backend for processing
-            fetch('/checkout', {
+            fetch('/cart/checkout', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ selectedCoupon: selectedCoupon })
@@ -664,134 +671,139 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    alert(data.message); // Success message
-                    window.location.href = '/order';  // Redirect to order page
+                    currentCart = data.cart;
+                    menuItems = data.menu_items;
+                    displayAnythingElse();
                 } else {
-                    alert(data.error || data.message);  // Handle error message
+                    alert(data.error || data.message);
                 }
             })
-            .catch(err => console.error('Error during checkout:', err));
-        }
-        function calculateSubtotal() {
-            let subtotal = 0;
-            document.querySelectorAll('.cart-item').forEach(item => {
-                const quantity = parseInt(item.querySelector('input').value);
-                const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
-                const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
-                subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
+            .catch(err => {
+                console.error('Error during checkout:', err);
+                alert('An error occurred. Please try again.');
             });
-            // Update the subtotal in the HTML
-            document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
-            return subtotal;
         }
-        function addSuggestion(itemId) {
-            fetch(`/cart/add_suggestion/${itemId}`, {
+
+        function displayAnythingElse() {
+            const menuItemsContainer = document.getElementById('menuItems');
+            menuItemsContainer.innerHTML = '';
+            menuItems.forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.className = 'menu-item';
+                itemElement.innerHTML = `
+                    <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';">
+                    <div class="menu-item-details">
+                        <strong>${item.Name}</strong>
+                        <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small>
+                        <small>$${item.Price__c.toFixed(2)}</small>
+                    </div>
+                    <button class="add-back-button" onclick="addToCartSuggestion('${item.Name}', '${item.Price__c}', '${item.Image1__c}')">+</button>
+                `;
+                menuItemsContainer.appendChild(itemElement);
+            });
+            document.getElementById('anythingElseModal').style.display = 'flex';
+        }
+
+        function closeAnythingElseModal() {
+            document.getElementById('anythingElseModal').style.display = 'none';
+        }
+
+        function showBill() {
+            closeAnythingElseModal();
+            const billItemsContainer = document.getElementById('billItems');
+            billItemsContainer.innerHTML = '';
+            currentCart.items.forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.className = 'bill-item';
+                itemElement.innerHTML = `
+                    <div class="bill-item-details">
+                        <strong>${item.name} x${item.quantity}</strong>
+                        <small>Add-ons: ${item.addons}</small>
+                        <small>Instructions: ${item.instructions}</small>
+                    </div>
+                    <div class="bill-item-price">$${item.price.toFixed(2)}</div>
+                `;
+                billItemsContainer.appendChild(itemElement);
+            });
+            document.getElementById('billSubtotal').innerText = `$${currentCart.subtotal.toFixed(2)}`;
+            document.getElementById('billDiscount').innerText = `$${currentCart.discount.toFixed(2)}`;
+            document.getElementById('billTotal').innerText = `$${currentCart.total.toFixed(2)}`;
+            document.getElementById('billModal').style.display = 'flex';
+        }
+
+        function closeBillModal() {
+            document.getElementById('billModal').style.display = 'none';
+            currentCart = null;
+        }
+
+        function submitOrder() {
+            if (!currentCart) {
+                alert('No cart data available.');
+                return;
+            }
+            fetch('/cart/submit_order', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({})
+                body: JSON.stringify({ cart: currentCart })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    alert('Item added to cart!');
-                    location.reload();
+                    alert(data.message);
+                    window.location.href = '/order';
                 } else {
-                    alert(data.error);
+                    alert(data.error || data.message);
                 }
             })
-            .catch(err => console.error('Error adding suggestion:', err));
+            .catch(err => {
+                console.error('Error during order submission:', err);
+                alert('An error occurred during order submission. Please try again.');
+            });
         }
+
         function removeItemFromCart(itemName) {
             fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                }
+                headers: { 'Content-Type': 'application/json' }
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     alert(data.message);
-                    location.reload(); // Reload the page to update the cart
+                    location.reload();
                 } else {
                     alert(data.message);
                 }
             })
             .catch(err => console.error('Error removing item:', err));
         }
-        function addToCart(itemName, customerEmail) {
-            fetch(`/cart/add_item`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    email: customerEmail,
-                    item_name: itemName.trim(), //Ensure the item name is trimmed
-                    quantity: 0 // DEFAULT QUANTITY PASSED HERE
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert("Item added/updated successfully.");
-                    location.reload(); // Reload the page to update the cart
-                } else {
-                    alert(data.error || "Failed to add item to cart.");
-                }
-            })
-            .catch(err => console.error("Error adding item to cart:", err));
-        }
-        function addSuggestion(itemId) {
-            fetch(`/cart/add_suggestion/${itemId}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({})
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart!');
-                    location.reload();
-                } else {
-                    alert(data.error);
-                }
-            })
-            .catch(err => console.error('Error adding suggestion:', err));
-        }
-        function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
-            const customerEmail = "{{ customer_email }}"; // Get customer email from session
-            // Create the data object to send to the ser        ver
+
+        function addToCartSuggestion(itemName, itemPrice, itemImage) {
+            const customerEmail = "{{ customer_email }}";
             const data = {
                 item_name: itemName,
                 item_price: itemPrice,
                 item_image: itemImage,
-                item_id: itemId,
-                addons: [], // Default to empty, you can adjust if needed
-                instructions: "", // Default to empty, you can adjust if needed
+                addons: [],
+                instructions: "",
                 customer_email: customerEmail
             };
-            // Send the data to the backend via a POST request
             fetch('/cart/add_suggestion_to_cart', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(data)
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart!');
-                    location.reload(); // Reload to update the cart view
+                    location.reload();
                 } else {
                     alert('Error adding item to cart: ' + data.error);
                 }
             })
             .catch(err => console.error('Error adding item:', err));
         }
-        
-        
     </script>
-
 </body>
-</html>
-
+</html>