resources/views/modals/emoney-modal.blade.php

@@ -1,28 +1,81 @@
+<style>
+  .copy-link {
+            color: blue;
+            text-decoration: underline;
+            cursor: pointer;
+            float: right;
+        }
+</style>
 <dialog id="emoney" class="modal">
-    <div class="modal-box w-11/12 max-w-5xl">
-      <h3 class="text-lg font-bold">Hadiah</h3>
-      <label class="form-control w-full max-w-xs">
-        <div class="label">
-          <span class="label-text">Nama Bank</span>
-        </div>
-        <input type="text" value="RHB Bank Berhad" class="input input-bordered input-sm input-accent w-full max-w-xs" disabled/>
-      </label>
-      <label class="form-control w-full max-w-xs">
-        <div class="label">
-          <span class="label-text">No. Akaun</span>
-        </div>
-        <input type="text" value="15601700275298" class="input input-bordered input-sm input-accent w-full max-w-xs" disabled/>
-      </label>
-      <label class="form-control w-full max-w-xs">
-        <div class="label">
-          <span class="label-text">Kod QR</span>
-        </div>
-        <img src="{{asset('assets/qr-bank.jpeg')}}" alt="">
-      </label>
-      <div class="modal-action">
-        <form method="dialog">
-          <button class="btn">Tutup</button>
-        </form>
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="text-lg font-bold">Hadiah</h3>
+    <label class="form-control w-full max-w-xs">
+      <div class="label">
+        <span class="label-text">Nama Bank</span>
       </div>
+      <input type="text" value="RHB Bank Berhad" class="input input-bordered input-sm input-accent w-full max-w-xs" disabled/>
+    </label>
+    <label class="form-control w-full max-w-xs">
+      <div class="label">
+        <span class="label-text">No. Akaun</span>
+      </div>
+      <p class="input input-bordered input-sm input-accent w-full max-w-xs">
+        15601700275298 
+          <span id="copyText" class="copy-link">(copy)</span>
+      </p>
+      <p id="copyMessage" class="text-green-500" style="display:none;">Copied to clipboard!</p>
+    </label>
+    <label class="form-control w-full max-w-xs">
+      <div class="label">
+        <span class="label-text">Kod QR</span>
+      </div>
+      <img src="{{asset('assets/qr-bank.jpeg')}}" alt="">
+    </label>
+    <div class="modal-action">
+      <form method="dialog">
+        <button class="btn">Tutup</button>
+      </form>
     </div>
-  </dialog>
+  </div>
+</dialog>
+<script>
+        document.getElementById('copyText').addEventListener('click', function() {
+            var textToCopy = "15601700275298";
+            
+            if (navigator.clipboard && window.isSecureContext) {
+                // navigator.clipboard API method
+                navigator.clipboard.writeText(textToCopy).then(function() {
+                    var copyMessage = document.getElementById('copyMessage');
+                    copyMessage.style.display = 'block';
+                    setTimeout(function() {
+                        copyMessage.style.display = 'none';
+                    }, 2000);
+                }).catch(function(error) {
+                    alert('Failed to copy text: ' + error);
+                });
+            } else {
+                // Fallback method for older browsers or non-secure contexts
+                // Create a temporary textarea element
+                var tempTextArea = document.createElement('textarea');
+                tempTextArea.value = textToCopy;
+                document.body.appendChild(tempTextArea);
+                
+                // Select the text
+                tempTextArea.select();
+                tempTextArea.setSelectionRange(0, 99999); // For mobile devices
+
+                try {
+                    document.execCommand('copy');
+                    var copyMessage = document.getElementById('copyMessage');
+                    copyMessage.style.display = 'block';
+                    setTimeout(function() {
+                        copyMessage.style.display = 'none';
+                    }, 2000);
+                } catch (error) {
+                    alert('Failed to copy text: ' + error);
+                }
+
+                document.body.removeChild(tempTextArea);
+            }
+        });
+    </script>