subbubiriyanihub

Sleeping

App Files Files Community

subbubiriyanihub / templates /menu.html

Subbu1304

Update templates/menu.html

e55c2a9 verified about 1 month ago

raw

history blame contribute delete

46 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Menu</title>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
	<style>


	/* subbu */
	.addbutton .btn {
	background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Gradient white background */
	color: green; /* Make text color transparent */
	background-clip: text; /* Apply the gradient to the text */
	-webkit-background-clip: text; /* For Safari compatibility */
	border: 1px solid #90ee90; /* Light green border */
	padding: 6px 15px; /* Smaller padding */
	font-size: 14px; /* Smaller font size */
	font-weight:bold;
	border-radius: 5px; /* Optional: round the corners */
	transition: background 0.3s ease, border-color 0.3s ease; /* Add transition effect for hover */
	margin-left: 13px; /* Margin for positioning */
	}

	.addbutton .btn:hover {
	background: linear-gradient(135deg, #f0f0f0, #ffffff); /* Reverse gradient for hover effect */
	border-color: #28a745; /* Darker green border on hover */
	background-clip: text; /* Ensure the gradient is clipped to the text on hover */
	-webkit-background-clip: text; /* Safari compatibility */
	}



	.customisable-text {
	color: #28a745; /* Same color as the "ADD" button */
	font-size: 12px; /* Same font size as the "ADD" button */
	margin-left: 5px;
	margin-top:1px;
	}

	/* model */
	/* .modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Space between quantity controls and Add to Cart button */
	padding: 10px;
	}

	.modal-footer .d-flex {
	display: flex;
	align-items: center;
	gap: 10px; /* Space between quantity buttons */
	}

	.modal-footer .btn {
	height: 40px; /* Set consistent button height */
	padding: 0 15px; /* Adjust padding to fit inside the buttons */
	}

	.modal-footer .form-control {
	width: 50px; /* Fixed width for quantity input */
	height: 40px; /* Match the height of buttons */
	text-align: center; /* Center the value inside the input */
	}

	.modal-footer .btn-primary {
	background-color: #0FAA39; /* Green background for Add to Cart button */
	border-color: #0FAA39; /* Border color to match button background */
	font-weight: bold; /* Bold text */
	padding: 10px 20px; /* Adjust padding to make the button look better */
	height: 40px; /* Match the height with quantity buttons */
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto; /* Auto width to adjust to button text */
	border-radius: 5px; /* Rounded corners for the button */
	}

	.modal-footer .btn-outline-secondary {
	height: 40px; /* Ensure quantity buttons are the same size */
	width: 40px; /* Make sure the buttons are square */
	border-radius: 5px; /* Rounded corners for the buttons */
	}

	@media (max-width: 576px) {
	/* Responsive adjustments for smaller screens */
	.modal-dialog {
	max-width: 98%; /* Adjust modal width for smaller screens */
	}

	.modal-footer .btn {
	height: 35px; /* Smaller buttons for small screens */
	padding: 0 12px; /* Adjust padding to make the button look proportional */
	}

	.modal-footer .form-control {
	width: 40px; /* Adjust input size for smaller screens */
	height: 35px;
	}

	.modal-footer .d-flex {
	gap: 8px; /* Reduce space between quantity buttons on smaller screens */
	}
	} */











	body {
	font-family: Arial, sans-serif;
	background-color: #fdf4e3; /* Updated background color */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	}
	.container {
	max-width: 900px;
	}
	.menu-card {
	max-width: 350px;
	border-radius: 15px;
	overflow: hidden;
	background-color: #fff;
	margin: auto;
	display: flex;
	flex-direction: column;
	}
	.menu-image {
	height: 200px; /* Fixed height */
	width: 100%; /* Full width of the card */
	object-fit: fill; /* Ensure the image covers the area and maintains the aspect ratio */
	border-radius: 15px 15px 0 0; /* Rounded top corners */
	}
	.card-title {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 10px 0;
	}
	.card-text {
	font-size: 1rem;
	color: #6c757d;
	}


	.customize-btn {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
	background: linear-gradient(92.29deg, rgba(63, 63, 63, 0.7) 4.75%, rgba(0, 0, 0, 0.7) 93.57%);
	color: #fff;
	border: none;
	padding: 4px 12px; /* Reduced padding for smaller height */
	border-radius: 5px 0px 0px 5px ;
	display: flex;
	align-items: center;
	font-size: 12px; /* Slightly smaller text */
	}

	.customize-btn i {
	margin-left: 5px; /* Icon spacing */
	}

	/* .customize-btn:hover {
	background-color: #e08c00; /* Darker shade for hover effect */
	transition: background-color 0.3s ease;
	} *











	.btn-primary {
	font-size: 13px;
	font-weight: bold;
	border-radius: 5px;
	width: 100px;
	background-color: #0FAA39; /* Updated button background color */
	border-color: #0FAA39;
	}
	.btn-primary:hover {
	background-color: #0FAA39;
	border-color: #0FAA39;
	}
	.btn-primary:active,
	.btn-primary:focus {
	background-color: #0FAA39;
	border-color: #ffffff;
	box-shadow: none;
	}
	.view-cart-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
	}
	.view-cart-button {
	background-color: #0FAA39; /* Updated View Cart button background color */
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.view-cart-button:hover {
	background-color: #109835; /* Slightly darker shade for hover effect */
	text-decoration: none;
	}
	.avatar-dropdown-container {
	position: relative;
	}
	.avatar-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #5bbfc1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 20px;
	font-weight: bold;
	}
	.dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	background-color: #fff;
	border-radius: 5px;
	width: 200px; /* Adjust width as needed */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	}
	.avatar-dropdown-container:hover .dropdown-menu {
	display: block;
	}
	.avatar-dropdown-container {
	position: absolute;
	right: 20px; /* Adjust the value as needed to position it properly */
	top: 50%; /* Adjust top to place it within the header */
	transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
	display: flex;
	align-items: right;
	justify-content: center;
	}

	.dropdown-menu .dropdown-item {
	padding: 10px 15px;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #ddd;
	display: block; /* Make each item stack vertically */
	}
	.dropdown-menu .dropdown-item:last-child {
	border-bottom: none; /* Remove the bottom border from the last item */
	}
	.dropdown-menu .dropdown-item:hover {
	background-color: #f1f1f1;
	}
	.fixed-search-container {
	position: absolute;
	top: 90px; /* Move it slightly lower */
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 600px;
	z-index: 999; /* Keep it above content */
	background-color: white;
	padding: 10px;
	border-radius: 25px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	}
	/* Ensure the category filter dropdown does not overlap */
	form.text-center.mb-4 {
	margin-top: 10px; /* No margin at the top */
	margin-bottom: 0px; /* Small space at the bottom */
	}
	/* Ensure the container has enough margin so nothing is overlapped */
	.container {
	margin-top: 10px; /* Adjust spacing based on navbar and search bar */
	padding-top: 0 !important; /* Ensure no padding is added by default */
	}
	h1.text-center {
	margin-top: 10px; /* Reduced space above */
	padding-top: 0 !important; /* Removed padding */
	font-weight: semi-bold; /* Make the "Menu" text bold */
	}
	.fixed-top-bar {
	/* Remove the fixed positioning */
	position: relative; /* Change from fixed to relative */
	top: 0;
	left: 0;
	width: 100%;
	height: 54px;
	background-color: #FF6B35;
	color: white;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center; /* Vertically align items */
	z-index: 1000; /* Make sure it's still above other content */
	}
	.search-bar-container {
	padding: 10px;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 300px; /* Adjust width as needed */
	}
	.search-bar-container input {
	width: 85%;
	padding: 8px 10px 8px 30px; /* Add padding for the icon */
	font-size: 16px;
	border-radius: 10px;
	border: none;
	}
	.search-icon {
	position: absolute;
	left: 15px; /* Position the icon inside the input box */
	font-size: 20px;
	color: #888; /* Icon color */
	}
	/* Style for customization sections */
	.addon-section {
	background-color: #fff; /* Light gray background */
	border: 2px solid #6c757d; /* Border color */
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 10px; /* Spacing between sections */
	}
	/* Customization section title */
	.addon-section h6 {
	margin-bottom: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	color: #343a40; /* Darker title text */
	}
	/* Style for add-on checkboxes */
	.addon-section .form-check {
	display: inline-flex; /* Display checkboxes horizontally */
	align-items: center; /* Align checkboxes and labels */
	margin-left: 10px; /* Space between checkboxes */
	color: #343a40; /* Darker text color */
	}
	/* Customize the default checkbox */
	.addon-section .form-check-input {
	-webkit-appearance: none; /* Remove default checkbox styling in Webkit browsers (e.g. Chrome, Safari) */
	-moz-appearance: none; /* Remove default checkbox styling in Firefox */
	appearance: none; /* Remove default checkbox styling in all browsers */
	width: 20px;
	height: 20px;
	border: 2px solid #343a40; /* Darker border color */
	border-radius: 5px; /* Rounded corners */
	background-color: #f0f0f0; /* Lighter gray background when unchecked */
	position: relative;
	margin-right: 10px; /* Add space between the checkbox and label */
	}

	/* Checked state for the custom checkbox */
	.addon-section .form-check-input:checked {
	background-color: #006400; /* Dark green background when checked */
	border-color: #006400; /* Dark green border when checked */
	}
	/* Add the check mark when checkbox is checked */
	.addon-section .form-check-input:checked::before {
	content: ''; /* Unicode check mark */
	font-size: 14px;
	position: absolute;
	top: 3px;
	left: 4px;
	color: white; /* White color for the check mark */
	}
	/* Hover effect for the checkboxes */
	.addon-section .form-check-input:hover {
	/* background-color: #006400; /* Slightly darker background on hover */
	}
	/* Focus effect on custom checkbox */
	.addon-section .form-check-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px #006400; /* Green focus outline */
	}
	/* Custom checkbox label styles */
	.addon-section .form-check-label {
	font-size: 16px;
	margin-left: 5px;
	cursor: pointer;
	display: inline-block; /* Ensure label aligns correctly with checkbox */
	vertical-align: middle; /* Align text vertically with the checkbox */
	}
	/* Fix alignment of text and checkbox */
	.addon-section .form-check input[type="checkbox"],
	.addon-section .form-check label {
	display: inline-block;
	/* vertical-align: middle; /* Align text and checkboxes vertically */
	}
	/* Category Filter with Custom Radio Buttons */
	form.text-center.mb-4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px; /* Reduce bottom margin */
	}
	.form-check {
	display: inline-block;
	margin-right: 5px; /* Reduced space between radio button and label */
	margin-bottom: 0; /* Remove bottom margin */
	margin-top: 10px; /* Adds space between categories and Customized Dish */
	vertical-align: middle; /* Align radio buttons vertically */
	}
	.form-check-inline {
	display: inline-block;
	margin-right: 5px; /* Decrease space between each radio button */
	}
	.form-check-label {
	display: inline-block;
	font-size: 16px;
	margin-left: 5px; /* Spacing between radio button and label */
	vertical-align: middle; /* Align label vertically */
	}
	form-check-input addon-option{
	color: #333d47;
	}
	.custom-radio {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 20px;
	height: 20px;
	border: 3px solid #4CAF50; /* Green border */
	border-radius: 50%;
	margin-right: -5px; /* Reduced spacing between button and label */
	outline: none;
	cursor: pointer;
	position: relative;
	display: inline-block;
	vertical-align: middle; /* Align vertically with text */
	}
	.custom-radio:checked {
	background-color: #4CAF50; /* Green color when checked */
	border-color: #4CAF50; /* Matching border color */
	}
	.custom-radio:checked::after {
	content: '';
	position: relative;
	top: 5px;
	left: 5px;
	border-radius: 50%;
	}
	.custom-radio:hover {
	border-color: #388E3C;
	}
	/* Optional: Style the labels */
	.form-check-label {
	font-size: 16px;
	margin-left: 8px; /* Space between the radio button and the label */
	}
	.cart-container {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	/* modal################## */
	.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Space between quantity and Add to Cart button */
	padding: 10px;
	}
	.modal-footer .d-flex {
	display: flex;
	align-items: center;
	gap: 10px; /* Space between quantity buttons */
	}
	.modal-footer .btn {
	height: 40px; /* Set consistent button height */
	padding: 0 15px; /* Adjust padding to fit inside the buttons */
	}
	.modal-footer .form-control {
	width: 50px; /* Fixed width for quantity input */
	height: 40px; /* Match the height of buttons */
	text-align: center; /* Center the value inside the input */
	}
	.modal-footer .btn-primary {
	background-color: #0FAA39; /* Green background for Add to Cart button */
	border-color: #0FAA39; /* Border color to match button background */
	font-weight: bold; /* Bold text */
	padding: 10px 20px; /* Adjust padding to make the button look better */
	height: 40px; /* Match the height with quantity buttons */
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto; /* Auto width to adjust to button text */
	}
	.modal-footer .btn-outline-secondary {
	height: 40px; /* Ensure quantity buttons are the same size */
	width: 40px; /* Make sure the buttons are square */
	}
	@media (max-width: 576px) {
	/* Responsive adjustments for smaller screens */
	.modal-dialog {
	max-width: 98%; /* Adjust modal width for smaller screens */
	}
	.modal-footer .btn {
	height: 35px; /* Smaller buttons for small screens */
	}
	.modal-footer .form-control {
	width: 40px; /* Adjust input size for smaller screens */
	height: 35px;
	}
	}
	.quantity-control {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.quantity {
	font-size: 14px;
	font-weight: bold;
	min-width: 20px;
	text-align: center;
	}

	.btn-sm {
	padding: 2px 8px;
	font-size: 12px;
	}








	/* /* Style for buttons */
	.category-btn {
	padding: 10px 20px;
	margin: 5px;
	border: 2px solid #ccc;
	border-radius: 25px;
	background-color: white;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	}

	.category-btn:hover {
	background-color: #ff7043;
	color: white;
	}

	/* Highlight selected button */
	.active-btn {
	background-color: #ff7043;
	color: white;
	border: 2px solid #ff7043;
	} */
	/* Ensures all buttons stay in the same row */
	.category-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* This allows the buttons to wrap to the next line if necessary */
	gap: 10px; /* Space between buttons */
	}

	/* Ensures all buttons stay in the same row */
	.category-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* This allows the buttons to wrap to the next line if necessary */
	gap: 10px; /* Space between buttons */
	}

	/* Ensures all buttons stay in the same row */
	.category-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* This allows the buttons to wrap to the next line if necessary */
	gap: 10px; /* Space between buttons */
	}

	/* Style for the buttons */
	.category-btn {
	padding: 10px 20px;
	margin: 5px;
	border: 2px solid #ccc;
	border-radius: 25px;
	background-color: white;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;

	/* Make buttons same size */
	flex: 1; /* This makes all buttons grow equally */
	min-width: 150px; /* Minimum width for each button */
	max-width: 200px; /* Maximum width for each button */
	}

	/* Ensure that the buttons do not stretch too much or shrink too much */
	/* Ensures all buttons stay in the same row */
	.category-container {
	display: flex;
	justify-content: space-between; /* Aligns buttons in a row */
	gap: 15px; /* Space between buttons */
	margin-top: 20px; /* Space above the button row */
	}
	/* Style for the buttons */
	.category-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 2px solid #ccc;
	border-radius: 25px;
	background-color: white; /* Ensure background stays white */
	font-size: 16px;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s; /* No background color transition */
	width: 120px; /* Ensures buttons are of equal width */
	text-align: center;
	}

	/* Icons styling */
	.category-btn .icon {
	margin-right: 8px; /* Space between icon and text */
	font-size: 20px; /* Icon size */
	}

	/* Hover effect for buttons */
	.category-btn:hover {
	border-color: #ff7043; /* Change border color on hover */
	color: #ff7043; /* Change text color on hover */
	background-color: white; /* Ensure background stays white on hover */
	}

	/* Highlight selected button (no background color change) */
	.active-btn {
	border-color: #ff7043; /* Border color remains orange */
	color: #ff7043; /* Text color changes to orange */
	}

	/* Example icons from Font Awesome, adjust based on your icon class */
	.category-btn .icon.all {
	content: '\f0f6'; /* FontAwesome icon code for "All" */
	}
	.category-btn .icon.veg {
	content: '\f4cd'; /* FontAwesome icon code for "Veg" */
	}
	.category-btn .icon.nonveg {
	content: '\f0f6'; /* FontAwesome icon code for "Non Veg" */
	}
	.category-btn .icon.customized {
	content: '\f0c0'; /* FontAwesome icon code for "Customized" */
	}






	</style>
	</head>
	<body>

	<div class="fixed-top-bar">
	<!-- Avatar and Dropdown -->
	<div class="avatar-dropdown-container">
	<div class="avatar-icon">
	<span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
	</div>
	<div class="dropdown-menu">
	<a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>

	<a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
	<a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
	</div>
	</div>

	<!-- Search Bar Section -->
	<div class="search-bar-container">
	<input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
	<i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
	</div>
	</div>



	<!-- Category Filter with Custom Radio Buttons -->
	<!-- <form method="get" action="/menu" class="text-center mb-4">
	<label class="form-label fw-bold">Select a Category:</label>
	<div class="form-check form-check-inline">
	{% for category in categories %}
	<input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
	{% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
	<label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
	{% endfor %}
	</div>
	<!-- Separate Customized Dish radio button in a new div to align it properly -->
	<!-- <div class="form-check">
	<input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
	{% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
	<label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
	</div> -->
	<!-- </form> -->
	<form method="get" action="/menu" class="text-center mb-4">
	<!-- <label class="form-label fw-bold">Select a Category:</label> -->

	<div class="form-check form-check-inline category-container">
	{% for category in categories %}
	<!-- Replace the radio input with a button -->
	<button type="submit" name="category" value="{{ category }}" class="category-btn
	{% if selected_category == category %}active-btn{% endif %}">
	{{ category }}
	</button>
	{% endfor %}

	<!-- Customized Dish button -->
	<button type="submit" name="category" value="Customized Dish" class="category-btn
	{% if selected_category == "Customized Dish" %}active-btn{% endif %}">
	Customized Dish
	</button>
	</div>
	</form>







	<!-- Show menu items only when Customized Dish is not selected -->
	<div class="container mt-4">
	<!-- <h1 class="text-center">Menu</h1> -->

	<!-- Display text boxes for Customized Dish -->
	{% if selected_category == "Customized Dish" %}
	<div id="custom-dish-form" class="mt-4">
	<h3>Create Your Custom Dish</h3>
	<form method="POST" action="/customdish/generate_custom_dish">
	<div class="mb-3">
	<label for="custom-dish-name" class="form-label">Dish Name</label>
	<input type="text" class="form-control" id="custom-dish-name" name="name" required>
	</div>
	<div class="mb-3">
	<label for="custom-dish-description" class="form-label">Dish Description</label>
	<textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
	</form>
	</div>
	{% else %}
	<!-- Menu Sections -->
	{% for section, items in ordered_menu.items() %}
	<h3>{{ section }}</h3>
	<div class="row">
	{% for item in items %}
	<div class="col-md-6 mb-4">
	<div class="card menu-card">
	<img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
	onerror="this.src='/static/placeholder.jpg';" loading="lazy">
	<div class="addbutton">
	<div class="card-body d-flex align-items-center justify-content-between">
	<div>
	<h5 class="card-title">{{ item.Name }}</h5>
	<p class="card-text">${{ item.Price__c }}</p>
	</div>
	<div class="d-flex flex-column align-items-center justify-content-center">
	<!-- {% if item.Section__c == 'Soft Drinks' %}
	<!-- Soft Drinks: Direct Add-to-Cart Button -->
	<div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
	<button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
	<span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
	<button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
	</div>
	<button class="btn btn-primary" id="add-btn-{{ loop.index }}"
	onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
	ADD
	</button>
	{% else %} -->

	{% if item.Section__c == 'Soft Drinks' %}
	<!-- Soft Drinks: Direct Add-to-Cart Button -->
	<!-- <div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
	<button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
	<span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
	<button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
	</div> -->
	<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>
	<button class="btn btn-primary" id="add-btn-{{ loop.index }}"
	onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
	ADD
	</button>
	{% else %}
	<!-- Other sections if needed -->
	{% endif %}

	<!-- Other Items: Modal Button -->
	<button class="btn btn-primary"
	data-bs-toggle="modal" data-bs-target="#itemModal"
	onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}')">
	ADD
	</button>
	<div class="w-100 text-center">
	{% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
	<h5 class="customisable-text">Customisable</h5>
	{% endif %}
	</div>
	{% endif %}
	</div>
	</div>
	</div>
	</div>
	</div>
	{% endfor %}
	</div>
	{% endfor %}
	{% endif %}
	</div>

	<!-- View Cart Button -->
	<div class="view-cart-container">
	<a href="{{ url_for('cart.cart') }}" class="view-cart-button">
	View Cart
	</a>
	</div>

	<!-- Modal for Item Details -->
	<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 -->
	<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>
	<div class="mt-4">
	<h6>Custom Request</h6>
	<textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
	</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
	function showItemDetails(name, price, image, description, section, selectedCategory) {
	document.getElementById('modal-name').innerText = name;
	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...';
	document.getElementById('modal-instructions').value = '';

	const modalSectionEl = document.getElementById('modal-section');
	modalSectionEl.setAttribute('data-section', section);
	modalSectionEl.setAttribute('data-category', selectedCategory);

	// Set the default quantity to 1
	document.getElementById('quantityInput').value = 1;

	// Fetch customization options based on the section
	fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
	.then(response => response.json())
	.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 inside styled divs
	data.addons.forEach(addon => {
	const sectionDiv = document.createElement('div');
	sectionDiv.classList.add('addon-section'); // Add styling class

	// Add section title
	const title = document.createElement('h6');
	title.innerText = addon.name;
	sectionDiv.appendChild(title);

	// Create options list
	const optionsContainer = document.createElement('div');
	addon.options.forEach((option, index) => {
	const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
	const listItem = document.createElement('div');
	listItem.classList.add('form-check');
	listItem.innerHTML = `
	<input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
	data-name="${option}" data-group="${addon.name}" 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})` : ''}
	</label>
	`;
	optionsContainer.appendChild(listItem);
	});
	sectionDiv.appendChild(optionsContainer);
	addonsList.appendChild(sectionDiv);
	});
	})
	.catch(err => {
	console.error('Error fetching add-ons:', err);
	document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
	});
	}

	// Handle single-select/deselect logic for checkbox groups in all modals
	document.addEventListener('click', function(event) {
	if (event.target.classList.contains('addon-option')) {
	handleAddonClick(event.target);
	}
	});

	// Handle checkbox selection logic
	function handleAddonClick(checkbox) {
	const groupName = checkbox.getAttribute('data-group');
	const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo"].includes(groupName);

	// If it's not multi-select, uncheck all other checkboxes in the same group
	if (!isMultiSelectGroup) {
	const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
	checkboxes.forEach(otherCheckbox => {
	if (otherCheckbox !== checkbox) {
	otherCheckbox.checked = false;
	}
	});
	}
	}
	function filterMenu() {
	let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
	let sections = document.querySelectorAll('h3'); // Select section headers
	let items = document.querySelectorAll('.menu-card'); // Select all items
	let matchedSections = new Set(); // Store matched sections

	// Hide all items initially
	items.forEach(item => {
	let itemName = item.querySelector('.card-title').innerText.toLowerCase(); // Get item name
	let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name

	// If the search matches item name or section, show the item
	if (itemName.includes(input) \|\| (itemSection && itemSection.includes(input))) {
	item.style.display = 'block'; // Show item if it matches search
	matchedSections.add(item.closest('.row')); // Add section to matched list
	} else {
	item.style.display = 'none'; // Hide item if not matched
	}
	});

	// Show or hide sections based on matched items
	sections.forEach(section => {
	let sectionRow = section.nextElementSibling; // The row containing items
	if (matchedSections.has(sectionRow)) {
	section.style.display = 'block'; // Show section header
	sectionRow.style.display = 'flex'; // Show section items
	} else {
	section.style.display = 'none'; // Hide section header
	sectionRow.style.display = 'none'; // Hide section items
	}
	});
	}

	function addToCartFromModal() {
	const itemName = document.getElementById('modal-name').innerText;
	let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));

	// Validate item price
	if (isNaN(itemPrice)) {
	alert('Invalid price for the item. Please check the item details.');
	return;
	}

	const itemImage = document.getElementById('modal-img').src;
	console.log(itemName, itemPrice, itemImage); // Log values for debugging
	const modalSectionEl = document.getElementById('modal-section');
	const section = modalSectionEl.getAttribute('data-section');
	const selectedCategory = modalSectionEl.getAttribute('data-category');
	if (!itemName \|\| !itemPrice \|\| !section \|\| !itemImage) {
	console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
	return;
	}

	// Collect selected add-ons
	let selectedAddOns = Array.from(
	document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
	).map(addon => ({
	name: addon.getAttribute('data-name') \|\| 'Default Name', // Fallback Name
	price: parseFloat(addon.getAttribute('data-price') \|\| 0)
	}));

	// Get the selected quantity
	const quantity = parseInt(document.getElementById('quantityInput').value) \|\| 1; // Default to 1 if invalid

	const instructions = document.getElementById('modal-instructions').value;

	// Prepare data for the cart
	const cartPayload = {
	itemName: itemName,
	itemPrice: itemPrice,
	itemImage: itemImage,
	section: section,
	category: selectedCategory,
	addons: selectedAddOns,
	instructions: instructions,
	quantity: quantity // Include the quantity
	};

	// Send the cart data to the server
	fetch('/cart/add', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(cartPayload)
	})
	.then(response => response.json())
	.then(data => {
	if (data.success) {
	alert('Item added to cart successfully!');
	updateCartUI(data.cart); // Update cart UI after adding an item
	const modal = document.getElementById('itemModal');
	const modalInstance = bootstrap.Modal.getInstance(modal);
	modalInstance.hide();
	} else {
	alert(data.error \|\| 'Failed to add item to cart.');
	}
	})
	.catch(err => {
	console.error('Error adding item to cart:', err);
	alert('An error occurred while adding the item to the cart.');
	});
	}

	function updateCartUI(cart) {
	if (!Array.isArray(cart)) {
	console.error('Invalid cart data:', cart);
	return;
	}
	const cartIcon = document.getElementById('cart-icon');
	cartIcon.innerText = cart.length; // Assuming cart is an array of items
	}

	function updateCartDisplay(cart) {
	if (!Array.isArray(cart)) {
	console.error('Invalid cart data:', cart);
	return;
	}
	// Optional: Update quantity on the cart page
	const cartCountElement = document.getElementById('cart-count');
	cartCountElement.innerText = cart.reduce((total, item)=> total+item.quantity,0); // Update cart item count //Sum of all quantities

	// Optionally, show a small success notification that the item was added
	const successNotification = document.createElement('div');
	successNotification.classList.add('success-notification');
	successNotification.innerText = 'Item added to cart!';
	document.body.appendChild(successNotification);
	setTimeout(() => {
	successNotification.remove(); // Remove success notification after a few seconds
	}, 2000);
	}

	document.addEventListener('DOMContentLoaded', function () {
	// Get references to the quantity buttons and the input field
	const decreaseBtn = document.getElementById('decreaseQuantity');
	const increaseBtn = document.getElementById('increaseQuantity');
	const quantityInput = document.getElementById('quantityInput');

	// Add event listener to decrease button
	decreaseBtn.addEventListener('click', function () {
	let currentQuantity = parseInt(quantityInput.value);
	if (currentQuantity > 1) {
	currentQuantity--;
	quantityInput.value = currentQuantity;
	}
	});

	// Add event listener to increase button
	increaseBtn.addEventListener('click', function () {
	let currentQuantity = parseInt(quantityInput.value);
	currentQuantity++;
	quantityInput.value = currentQuantity;
	});
	});

	ft Drink added to cart successfully!');

	// subbu###################
	function addSoftDrinkToCart(name, price, image, section, category, index) {
	const itemPrice = parseFloat(price);
	const quantity = 1; // Default quantity

	const cartPayload = {
	itemName: name,
	itemPrice: itemPrice,
	itemImage: image \|\| '/static/placeholder.jpg',
	section: section,
	category: category,
	addons: [], // No add-ons for Soft Drinks
	instructions: '', // No instructions for Soft Drinks
	quantity: quantity
	};

	fetch('/cart/add', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(cartPayload)
	})
	.then(response => response.json())
	.then(data => {
	if (data.success) {
	// Hide the ADD button and show quantity controls
	document.getElementById(`add-btn-${index}`).style.display = 'none';
	document.getElementById(`quantity-control-${index}`).style.display = 'flex';
	updateCartQuantity(data.cart);
	alert('Soft Drink added to cart successfully!');
	} else {
	alert(data.error \|\| 'Failed to add Soft Drink to cart.');
	}
	})
	.catch(err => {
	console.error('Error adding Soft Drink to cart:', err);
	alert('An error occurred while adding the Soft Drink to the cart.');
	});
	}



	// subbu###################





	function increaseQuantity(name, index) {
	let quantityElement = document.getElementById(`quantity-${index}`);
	let currentQuantity = parseInt(quantityElement.innerText);
	currentQuantity++; // Increase the quantity by 1
	quantityElement.innerText = currentQuantity;

	// Update cart immediately
	updateCartQuantity(name, currentQuantity);
	}




	function decreaseQuantity(name, index) {
	let quantityElement = document.getElementById(`quantity-${index}`);
	let currentQuantity = parseInt(quantityElement.innerText);

	if (currentQuantity > 1) {
	currentQuantity--;
	quantityElement.innerText = currentQuantity;
	// Update cart immediately
	updateCartQuantity(name, currentQuantity);
	} else {
	// Remove from cart if quantity is 1 and show the "Add" button
	removeFromCart(name, index);
	document.getElementById(`add-btn-${index}`).style.display = 'block'; // Show ADD button
	document.getElementById(`quantity-control-${index}`).style.display = 'none'; // Hide quantity controls
	}
	}




	Function to update cart quantity
	function updateCartQuantity(cart) {
	if (!Array.isArray(cart)) {
	console.error('Invalid cart data:', cart);
	return;
	}
	const cartIcon = document.getElementById('cart-icon');
	cartIcon.innerText = cart.length; // Assuming cart is an array of items
	}


	function updateCartDisplay(cart) {
	if (!Array.isArray(cart)) {
	console.error('Invalid cart data:', cart);
	return;
	}
	// Optional: Update quantity on the cart page
	const cartCountElement = document.getElementById('cart-count');
	cartCountElement.innerText = cart.reduce((total, item)=> total+item.quantity,0); // Update cart item count //Sum of all quantities

	// Optionally, show a small success notification that the item was added
	const successNotification = document.createElement('div');
	successNotification.classList.add('success-notification');
	successNotification.innerText = 'Item added to cart!';
	document.body.appendChild(successNotification);
	setTimeout(() => {
	successNotification.remove(); // Remove success notification after a few seconds
	}, 2000);
	}



	</script>

	<!-- Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>