Update templates/customer_details.html

templates/customer_details.html

@@ -68,7 +68,7 @@
         .change-btn, .copy-btn {
             position: absolute;
             right: 10px;
-            top: 70%; /* Moved further down */
+            top: 70%;
             transform: translateY(-50%);
             color: #FF0000;
             font-size: 0.75rem;
@@ -96,7 +96,7 @@
         .update-btn {
             width: 100%;
             padding: 12px;
-            background-color: #8B4513; /* Brown */
+            background-color: #8B4513;
             border-color: #8B4513;
             color: #FFFFFF;
             border: 1px solid;
@@ -107,7 +107,7 @@
             margin-top: 20px;
         }
         .update-btn:hover {
-            background-color: #5C2D0C; /* Darker brown */
+            background-color: #5C2D0C;
             border-color: #5C2D0C;
         }
 
@@ -131,7 +131,7 @@
             .change-btn, .copy-btn {
                 font-size: 0.7rem;
                 padding: 4px 6px;
-                top: 70%; /* Maintain downward position */
+                top: 70%;
             }
             .copy-btn svg {
                 width: 10px;
@@ -157,20 +157,32 @@
                     flagField.value = "true";
                 });
             }
+            ['customerName', 'phone', 'email'].forEach(function(id) {
+                if (id !== fieldId && $('#' + id).prop('readonly')) {
+                    $('#' + id).siblings('.change-btn').show();
+                }
+            });
         }
         function onFocusNext(inputField) {
             var changeBtn = $(inputField).siblings('.change-btn');
             if ($(inputField).prop('readonly')) {
                 changeBtn.show();
             }
+            ['customerName', 'phone', 'email'].forEach(function(id) {
+                if ($('#' + id).prop('readonly') && id !== $(inputField).attr('id')) {
+                    $('#' + id).siblings('.change-btn').show();
+                }
+            });
         }
-        function copyReferralCode() {
+        function copyReferralCode(button) {
             var referralCode = document.getElementById('referralCode').value;
             navigator.clipboard.writeText(referralCode).then(() => {
-                alert('Referral code copied to clipboard!');
+                $(button).find('span').text('COPIED');
+                setTimeout(() => {
+                    $(button).find('span').text('COPY');
+                }, 2000);
             }).catch(err => {
                 console.error('Failed to copy: ', err);
-                alert('Failed to copy referral code.');
             });
         }
         function updateProfile(event) {
@@ -260,12 +272,12 @@
             <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()">
+                <span class="copy-btn" onclick="copyReferralCode(this)">
                     <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>COPY</span>
                 </span>
             </div>