BiryaniHubflaskSalesTeamcustomization

Sleeping

App Files Files Community

BiryaniHubflaskSalesTeamcustomization / templates /customer_details.html

nagasurendra

Update templates/customer_details.html

6e26d04 verified 22 days ago

raw

history blame contribute delete

8.69 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>User Profile</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	background-color: #FDF4E3;
	}

	.back-to-menu {
	display: block;
	margin: 30px auto 10px auto;
	padding: 10px 20px;
	background-color: #ff5722;
	color: #ffffff;
	border: none;
	border-radius: 25px;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	width: 100%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
	}

	.back-to-menu:hover {
	background-color: #e64a19;
	text-decoration: none;
	}

	.editable {
	background-color: #f0f8ff; /* Light blue when edited */
	}

	.input-group {
	position: relative;
	}

	.btn-change {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ffffff;
	color: #0FAA39;
	border: none;
	border-radius: 5px;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 0.9rem;
	}

	.btn-change:hover {
	background-color: #ffffff;
	color: #0FAA39;
	}

	.copy-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #007bff;
	font-size: 1.2rem;
	cursor: pointer;
	}

	.update-btn {
	background-color: #0FAA39;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
	font-weight: bold; /* Making the button text bold */
	}

	.update-btn:hover {
	background-color: #0f8e29;
	}

	.edit-btn {
	background-color: #0FAA39;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
	font-weight: bold; /* Making the button text bold */
	}

	.edit-btn:hover {
	background-color: #0f8e29;
	}

	/* Flexbox for equally spaced buttons */
	.button-container {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	}

	/* Ensure both buttons have equal height and width */
	.edit-btn, .update-btn {
	flex: 1;
	margin: 0 5px;
	padding: 10px 20px;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 5px;
	height: 50px; /* Equal height for both buttons */
	}

	/* Change text color inside input fields to gray */
	input[type="text"], input[type="email"], input[type="number"], .form-control {
	color: #808080; /* Change text color to gray */
	}

	/* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
	.form-label {
	color: #1C1C1C; /* Change heading text color */
	}

	h1 {
	color: #1C1C1C; /* Change User Profile heading color */
	font-size: 24px; /* Change font size of 'User Profile' */
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	function enableEditField(fieldId) {
	var field = document.getElementById(fieldId);
	field.removeAttribute("readonly");
	field.classList.add("editable");
	field.focus();
	}

	function updateProfile(event) {
	event.preventDefault();
	var formData = $('#profileForm').serialize();

	$.ajax({
	type: "POST",
	url: "/user/update_profile",
	data: formData,
	success: function(response) {
	if (response.status === "success") {
	alert(response.message);
	location.reload();
	} else {
	alert(response.message);
	}
	},
	error: function() {
	alert("An error occurred while updating the profile.");
	}
	});
	}

	function editProfileFields() {
	document.getElementById('customerName').removeAttribute('readonly');
	document.getElementById('email').removeAttribute('readonly');
	document.getElementById('phone').removeAttribute('readonly');
	document.getElementById('customerName').classList.add('editable');
	document.getElementById('email').classList.add('editable');
	document.getElementById('phone').classList.add('editable');
	}

	function copyReferralCode() {
	var referralCode = document.getElementById('referralCode');
	referralCode.select();
	document.execCommand('copy');
	alert('Referral Code Copied!');
	}
	</script>
	</head>
	<body>
	<div class="container mt-4">
	<h1>User Profile</h1>

	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	<div class="alert alert-{{ messages[0][0] }}">
	{{ messages[0][1] }}
	</div>
	{% endif %}
	{% endwith %}

	<div class="card">
	<div class="card-body">
	<form id="profileForm" method="POST" onsubmit="updateProfile(event)">
	<div class="mb-3">
	<label for="customerName" class="form-label"><strong>Name:</strong></label>
	<div class="input-group">
	<input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
	</div>
	</div>

	<div class="mb-3">
	<label for="email" class="form-label"><strong>Email:</strong></label>
	<div class="input-group">
	<input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
	</div>
	</div>

	<div class="mb-3">
	<label for="phone" class="form-label"><strong>Phone:</strong></label>
	<div class="input-group">
	<input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
	</div>
	</div>

	<div class="mb-3">
	<label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
	<div class="input-group">
	<input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
	<button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
	</div>
	</div>

	<div class="mb-3">
	<label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
	<input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
	</div>

	<!-- Flex container for Edit and Update buttons -->
	<div class="button-container">
	<button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
	<button type="submit" class="update-btn">Update Profile</button>
	</div>
	</form>
	</div>
	</div>

	<a href="/menu" class="back-to-menu">Back to Menu</a>
	</div>
	</body>
	</html>