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

<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>
      <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>
  </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>