Update templates/customer_details.html

templates/customer_details.html

@@ -145,7 +145,8 @@
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
-        function enableEditField(fieldId, flagId) {
+        function enableEditField(fieldId, flagId, event) {
+            event.stopPropagation(); // Prevent click from bubbling to document
             var field = document.getElementById(fieldId);
             var flagField = document.getElementById(flagId);
             var changeBtn = $(field).siblings('.change-btn');
@@ -157,26 +158,28 @@
                     flagField.value = "true";
                 });
             }
-            // Show CHANGE buttons for all other readonly fields
+            // Show CHANGE buttons for all readonly fields
             ['customerName', 'phone', 'email'].forEach(function(id) {
                 if ($('#' + id).prop('readonly')) {
                     $('#' + id).siblings('.change-btn').show();
                 }
             });
         }
-        function onFocusNext(inputField) {
+        function onFocusNext(inputField, event) {
+            event.stopPropagation(); // Prevent focus click from bubbling to document
             var changeBtn = $(inputField).siblings('.change-btn');
             if ($(inputField).prop('readonly')) {
                 changeBtn.show();
             }
-            // Show CHANGE buttons for all other readonly fields
+            // Show CHANGE buttons for all readonly fields
             ['customerName', 'phone', 'email'].forEach(function(id) {
                 if ($('#' + id).prop('readonly')) {
                     $('#' + id).siblings('.change-btn').show();
                 }
             });
         }
-        function copyReferralCode(button) {
+        function copyReferralCode(button, event) {
+            event.stopPropagation(); // Prevent click from bubbling to document
             var referralCode = document.getElementById('referralCode').value;
             navigator.clipboard.writeText(referralCode).then(() => {
                 $(button).find('span').text('COPIED');
@@ -186,6 +189,12 @@
             }).catch(err => {
                 console.error('Failed to copy: ', err);
             });
+            // Show CHANGE buttons for all readonly fields
+            ['customerName', 'phone', 'email'].forEach(function(id) {
+                if ($('#' + id).prop('readonly')) {
+                    $('#' + id).siblings('.change-btn').show();
+                }
+            });
         }
         function updateProfile(event) {
             event.preventDefault();
@@ -234,6 +243,16 @@
             if ($('#emailEdited').val() === "true") {
                 $('#email').siblings('.change-btn').addClass('disabled').off('click');
             }
+            // Handle outside clicks
+            $(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>
@@ -255,26 +274,26 @@
 
             <div class="form-group">
                 <label for="customerName">Name</label>
-                <input type="text" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly>
-                <span class="change-btn" onclick="enableEditField('customerName', 'nameEdited')">CHANGE</span>
+                <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)">
-                <span class="change-btn" onclick="enableEditField('phone', 'phoneEdited')">CHANGE</span>
+                <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)">
-                <span class="change-btn" onclick="enableEditField('email', 'emailEdited')">CHANGE</span>
+                <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)">
+                <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>