|
|
<!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: #F5F7FA; |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
.container { |
|
|
max-width: 90%; |
|
|
margin: 20px auto; |
|
|
padding: 15px; |
|
|
} |
|
|
.header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: flex-start; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
.back-btn { |
|
|
font-size: 1.5rem; |
|
|
color: #1C1C1C; |
|
|
text-decoration: none; |
|
|
margin-right: 10px; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
} |
|
|
.back-btn svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: bold; |
|
|
color: #1C1C1C; |
|
|
margin: 0; |
|
|
} |
|
|
.form-group { |
|
|
margin-bottom: 15px; |
|
|
position: relative; |
|
|
} |
|
|
.form-group label { |
|
|
font-size: 0.875rem; |
|
|
color: #6C757D; |
|
|
margin-bottom: 5px; |
|
|
display: block; |
|
|
} |
|
|
.form-group input, |
|
|
.form-group select { |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
border: 1px solid #E0E0E0; |
|
|
border-radius: 10px; |
|
|
font-size: 1rem; |
|
|
color: #1C1C1C; |
|
|
background-color: #FFFFFF; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
.form-group input[readonly] { |
|
|
background-color: #F5F7FA; |
|
|
} |
|
|
.change-btn, .copy-btn { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
top: 70%; |
|
|
transform: translateY(-50%); |
|
|
color: #FF0000; |
|
|
font-size: 0.75rem; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
text-transform: uppercase; |
|
|
padding: 5px 8px; |
|
|
border-radius: 5px; |
|
|
transition: opacity 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 4px; |
|
|
} |
|
|
.change-btn:hover, .copy-btn:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
.change-btn.disabled { |
|
|
color: #A9A9A9; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
.copy-btn svg { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
} |
|
|
.update-btn { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
background-color: #8B4513; |
|
|
border-color: #8B4513; |
|
|
color: #FFFFFF; |
|
|
border: 1px solid; |
|
|
border-radius: 10px; |
|
|
font-size: 1rem; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
margin-top: 20px; |
|
|
} |
|
|
.update-btn:hover { |
|
|
background-color: #5C2D0C; |
|
|
border-color: #5C2D0C; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 576px) { |
|
|
.container { |
|
|
padding: 10px; |
|
|
} |
|
|
.header h1 { |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
.back-btn svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
} |
|
|
.form-group input, |
|
|
.form-group select { |
|
|
font-size: 0.9rem; |
|
|
padding: 8px; |
|
|
} |
|
|
.change-btn, .copy-btn { |
|
|
font-size: 0.7rem; |
|
|
padding: 4px 6px; |
|
|
top: 70%; |
|
|
} |
|
|
.copy-btn svg { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
} |
|
|
.update-btn { |
|
|
padding: 10px; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
|
<script> |
|
|
function enableEditField(fieldId, flagId, event) { |
|
|
event.stopPropagation(); |
|
|
var field = document.getElementById(fieldId); |
|
|
var flagField = document.getElementById(flagId); |
|
|
var changeBtn = $(field).siblings('.change-btn'); |
|
|
changeBtn.hide(); |
|
|
if (flagField.value === "false") { |
|
|
field.removeAttribute("readonly"); |
|
|
field.focus(); |
|
|
$(field).on('input', function() { |
|
|
flagField.value = "true"; |
|
|
}); |
|
|
} |
|
|
|
|
|
['customerName', 'phone', 'email'].forEach(function(id) { |
|
|
if ($('#' + id).prop('readonly')) { |
|
|
$('#' + id).siblings('.change-btn').show(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
function onFocusNext(inputField, event) { |
|
|
event.stopPropagation(); |
|
|
var changeBtn = $(inputField).siblings('.change-btn'); |
|
|
if ($(inputField).prop('readonly')) { |
|
|
changeBtn.show(); |
|
|
} |
|
|
|
|
|
['customerName', 'phone', 'email'].forEach(function(id) { |
|
|
if ($('#' + id).prop('readonly')) { |
|
|
$('#' + id).siblings('.change-btn').show(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
function copyReferralCode(button, event) { |
|
|
event.stopPropagation(); |
|
|
var referralCode = document.getElementById('referralCode').value; |
|
|
navigator.clipboard.writeText(referralCode).then(() => { |
|
|
$(button).find('span').text('COPIED'); |
|
|
setTimeout(() => { |
|
|
$(button).find('span').text('COPY'); |
|
|
}, 2000); |
|
|
}).catch(err => { |
|
|
console.error('Failed to copy: ', err); |
|
|
}); |
|
|
|
|
|
['customerName', 'phone', 'email'].forEach(function(id) { |
|
|
if ($('#' + id).prop('readonly')) { |
|
|
$('#' + id).siblings('.change-btn').show(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
function updateProfile(event) { |
|
|
event.preventDefault(); |
|
|
var phone = $('#phone').val().trim(); |
|
|
var email = $('#email').val().trim(); |
|
|
var referralCode = $('#referralCode').val().trim(); |
|
|
if (!phone && !email && !referralCode) { |
|
|
alert("Please enter at least one field to update (Phone, Email, or Referral Code)."); |
|
|
return; |
|
|
} |
|
|
if (phone && !/^\d{10}$/.test(phone)) { |
|
|
alert("Please enter a valid 10-digit phone number."); |
|
|
return; |
|
|
} |
|
|
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { |
|
|
alert("Please enter a valid email address."); |
|
|
return; |
|
|
} |
|
|
var formData = $('#profileForm').serialize(); |
|
|
$.ajax({ |
|
|
type: "POST", |
|
|
url: "/user/update_profile", |
|
|
data: formData, |
|
|
dataType: 'json', |
|
|
success: function(response) { |
|
|
if (response.status === "success") { |
|
|
alert(response.message || "Profile updated successfully!"); |
|
|
location.reload(); |
|
|
} else { |
|
|
alert(response.message || "Failed to update profile."); |
|
|
} |
|
|
}, |
|
|
error: function(xhr, status, error) { |
|
|
console.error("Error:", error); |
|
|
alert("An error occurred while updating the profile. Please try again."); |
|
|
} |
|
|
}); |
|
|
} |
|
|
$(document).ready(function() { |
|
|
if ($('#nameEdited').val() === "true") { |
|
|
$('#customerName').siblings('.change-btn').addClass('disabled').off('click'); |
|
|
} |
|
|
if ($('#phoneEdited').val() === "true") { |
|
|
$('#phone').siblings('.change-btn').addClass('disabled').off('click'); |
|
|
} |
|
|
if ($('#emailEdited').val() === "true") { |
|
|
$('#email').siblings('.change-btn').addClass('disabled').off('click'); |
|
|
} |
|
|
|
|
|
$(document).on('click', function(event) { |
|
|
if (!$(event.target).closest('.form-group input, .change-btn, .copy-btn').length) { |
|
|
['customerName', 'phone', 'email'].forEach(function(id) { |
|
|
if ($('#' + id).prop('readonly')) { |
|
|
$('#' + id).siblings('.change-btn').show(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<a href="/menu" class="back-btn"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M15 18l-6-6 6-6"/> |
|
|
</svg> |
|
|
</a> |
|
|
<h1>Your Profile</h1> |
|
|
</div> |
|
|
|
|
|
<form id="profileForm" method="POST" onsubmit="updateProfile(event)"> |
|
|
<input type="hidden" id="nameEdited" name="nameEdited" value="{{ 'true' if customer['name_edited'] else 'false' }}"> |
|
|
<input type="hidden" id="phoneEdited" name="phoneEdited" value="{{ 'true' if customer['phone_edited'] else 'false' }}"> |
|
|
<input type="hidden" id="emailEdited" name="emailEdited" value="{{ 'true' if customer['email_edited'] else 'false' }}"> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="customerName">Name</label> |
|
|
<input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly onfocus="onFocusNext(this, event)"> |
|
|
<span class="change-btn" onclick="enableEditField('customerName', 'nameEdited', event)">CHANGE</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="phone">Mobile</label> |
|
|
<input type="text" id="phone" name="phone" value="{{ customer['phone'] }}" readonly onfocus="onFocusNext(this, event)"> |
|
|
<span class="change-btn" onclick="enableEditField('phone', 'phoneEdited', event)">CHANGE</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email">Email</label> |
|
|
<input type="email" id="email" name="email" value="{{ customer['email'] }}" readonly onfocus="onFocusNext(this, event)"> |
|
|
<span class="change-btn" onclick="enableEditField('email', 'emailEdited', event)">CHANGE</span> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="referralCode">Referral Code</label> |
|
|
<input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly> |
|
|
<span class="copy-btn" onclick="copyReferralCode(this, event)"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> |
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> |
|
|
</svg> |
|
|
<span>COPY</span> |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="update-btn">Update profile</button> |
|
|
</form> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
