Update templates/customer_details.html

templates/customer_details.html

@@ -64,7 +64,7 @@
         .form-group input[readonly] {
             background-color: #F5F7FA;
         }
-        .change-btn {
+        .change-btn, .copy-btn {
             position: absolute;
             right: 10px;
             top: 50%;
@@ -78,8 +78,11 @@
             border-radius: 5px;
             background-color: rgba(255, 255, 255, 0.8);
             transition: opacity 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 4px;
         }
-        .change-btn:hover {
+        .change-btn:hover, .copy-btn:hover {
             opacity: 0.8;
         }
         .change-btn.disabled {
@@ -87,12 +90,16 @@
             cursor: not-allowed;
             background-color: rgba(255, 255, 255, 0.5);
         }
+        .copy-btn svg {
+            width: 12px;
+            height: 12px;
+        }
         .update-btn {
             width: 100%;
             padding: 12px;
             background-color: #8B4513; /* Brown */
             border-color: #8B4513;
-            color: #FFFFFF; /* White text for contrast */
+            color: #FFFFFF;
             border: 1px solid;
             border-radius: 10px;
             font-size: 1rem;
@@ -122,10 +129,14 @@
                 font-size: 0.9rem;
                 padding: 8px;
             }
-            .change-btn {
+            .change-btn, .copy-btn {
                 font-size: 0.7rem;
                 padding: 4px 6px;
             }
+            .copy-btn svg {
+                width: 10px;
+                height: 10px;
+            }
             .update-btn {
                 padding: 10px;
                 font-size: 0.9rem;
@@ -138,7 +149,7 @@
             var field = document.getElementById(fieldId);
             var flagField = document.getElementById(flagId);
             var changeBtn = $(field).siblings('.change-btn');
-            changeBtn.hide(); // Hide CHANGE button when clicked
+            changeBtn.hide();
             if (flagField.value === "false") {
                 field.removeAttribute("readonly");
                 field.focus();
@@ -150,9 +161,18 @@
         function onFocusNext(inputField) {
             var changeBtn = $(inputField).siblings('.change-btn');
             if ($(inputField).prop('readonly')) {
-                changeBtn.show(); // Show CHANGE button only if field is readonly
+                changeBtn.show();
             }
         }
+        function copyReferralCode() {
+            var referralCode = document.getElementById('referralCode').value;
+            navigator.clipboard.writeText(referralCode).then(() => {
+                alert('Referral code copied to clipboard!');
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+                alert('Failed to copy referral code.');
+            });
+        }
         function updateProfile(event) {
             event.preventDefault();
             var phone = $('#phone').val().trim();
@@ -239,7 +259,14 @@
 
             <div class="form-group">
                 <label for="referralCode">Referral Code</label>
-                <input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}">
+                <input type="text" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
+                <span class="copy-btn" onclick="copyReferralCode()">
+                    <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>
+                    COPY
+                </span>
             </div>
 
             <button type="submit" class="update-btn">Update profile</button>