|
|
<!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; |
|
|
} |
|
|
|
|
|
.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: 20%; |
|
|
font-weight: 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: 20%; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.edit-btn:hover { |
|
|
background-color: #0f8e29; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.edit-btn, .update-btn { |
|
|
flex: 1; |
|
|
margin: 0 5px; |
|
|
padding: 10px 20px; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
border-radius: 5px; |
|
|
height: 50px; |
|
|
} |
|
|
|
|
|
|
|
|
input[type="text"], input[type="email"], input[type="number"], .form-control { |
|
|
color: #808080; |
|
|
} |
|
|
|
|
|
|
|
|
.form-label { |
|
|
color: #1C1C1C; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
color: #1C1C1C; |
|
|
font-size: 24px; |
|
|
} |
|
|
</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
