| <!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/bootstrap@5.3.0-alpha1/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> |
