fix invitation button in show page

rails_root/app/views/survey_responses/show.html.erb

@@ -140,13 +140,35 @@
       <% end %>
     </div>
   </div>
-
-
-
   <hr>
-  <div class="row d-flex justify-content-center">
-    <div class="col-8 btn-group" role="group">
-      <%= link_to "Edit Response",
+  <%# this is the view containing the link %>
+    <div id="invitation-link-container" class="mt-4" style="display: none;">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Invitation Link Created</h5>
+          <p class="card-text">
+            <span id="invitation-link"></span>
+          </p>
+          <button class="btn btn-primary" onclick="copyToClipboard()">Copy Link</button>
+        </div>
+      </div>
+      <hr>
+    </div>
+    <script>
+      function copyToClipboard() {
+        var linkText = document.getElementById("invitation-link").innerText;
+        navigator.clipboard.writeText(linkText)
+          .then(() => {
+            alert("Link copied to clipboard!");
+          })
+          .catch((error) => {
+            console.error("Failed to copy link: ", error);
+          });
+      }
+    </script>
+    <div class="row d-flex justify-content-center">
+      <div class="col-8 btn-group" role="group">
+        <%= link_to "Edit Response",
             edit_survey_response_path(@survey_response),
             class: "btn btn-outline-primary"
       	%>
@@ -161,9 +183,47 @@
 
             form_class: "btn btn-outline-danger",
             class: "btn-passthrough"
-      %>
+      	%>
+      </div>
     </div>
-  </div>
+    <%# show invitation link if it exist %>
+    <script>
+      function initializeInvitation() {
+          var invitationButton = document.getElementById('invitation-button');
+          var invitationLinkContainer = document.getElementById('invitation-link-container');
+          var invitationLink = document.getElementById('invitation-link');
+
+          invitationButton.addEventListener('click', function() {
+      var parentSurveyResponseId = this.getAttribute('data-parent-survey-response-id');
+
+      fetch('/invitations', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+        },
+        body: JSON.stringify({ parent_survey_response_id: parentSurveyResponseId })
+      })
+      .then(response => response.json())
+      .then(data => {
+        invitationLink.textContent = data.invitation_url;
+        invitationLinkContainer.style.display = 'block';
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+          });
+        }
+
+      			if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeInvitation);
+        } else {
+          initializeInvitation();
+        }
+    </script>
+
+
+
   <br>
   <div class="row d-flex justify-content-center">
     <div class="col-6 text-center">