ready to be tested modal

app/Models/Attender.php

@@ -23,6 +23,7 @@ class Attender extends Model
     protected $guarded = ['id'];
     protected $fillable = [
         'name',
+        'organization',
         'surname',
         'email',
         'is_attending',

resources/views/emails/qr.blade.php

@@ -33,7 +33,7 @@
         <div class="inner">
 
             <table class="mail"
-                style="border: 1px solid #003197; border-radius: 5px; overflow: hidden; width: 25%; border-spacing: 0;">
+                style="border: 1px solid #003197; border-radius: 5px; overflow: hidden; width: 100%; border-spacing: 0;">
                 <thead style="background-color: #003197;">
                     <tr>
                         <th class="header" style="padding: 0; position: relative;">
@@ -55,9 +55,9 @@
                         </td>
                     </tr>
                     <tr>
-                        <td style="padding: 0 20px 0 20px; text-align: center">
+                        <td style="padding: 0 20px 0 20px;">
                             <p class="content_txt" style="font-size: 14px; font-weight: 400; line-height: 1.4; margin-bottom: 15px;">
-                                <img style="width: 180px" src="{{ $message->embedData(base64_decode($base64), $file_name) }}">
+                                <img style="width: 200px" src="{{ $message->embedData(base64_decode($base64), $file_name) }}">
                             </p>
                         </td>
                     </tr>

resources/views/scan.blade.php

@@ -41,9 +41,68 @@
         </div>
         <div class="border-rounded m-auto mt-3" style="width: 500px;" id="reader"></div>
      </div>
+    <!--Modal-->
+    <div class="modal opacity-0 transition-opacity ease-in duration-100 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
+        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
+
+        <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
+
+        <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
+            <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
+            </svg>
+            <span class="text-sm">(Esc)</span>
+        </div>
+
+        <!-- Add margin if you want to see some of the overlay behind the modal-->
+        <div class="modal-content py-8 text-left px-8">
+            <!--Title-->
+            <div class="flex justify-between items-center pb-3">
+            <p id="attender_name" class="text-xl font-bold"></p>
+            <p id="attender_organization" class="text-xl font-bold"></p>
+            <p id="attender_consent" class="text-xl font-bold"></p>
+            </div>
+
+            <!--Footer-->
+            <div class="flex justify-end pt-6">
+                <button type="button" class="modal-close px-4 bg-blue-500 p-3 rounded-lg text-white hover:bg-blue-400">Close</button>
+            </div>
+
+        </div>
+        </div>
+    </div>
 
     <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
     <script>
+        const overlay = document.querySelector(".modal-overlay");
+        overlay.addEventListener("click", toggleModal);
+
+        var closemodal = document.querySelectorAll(".modal-close");
+            for (var i = 0; i < closemodal.length; i++) {
+            closemodal[i].addEventListener("click", toggleModal);
+        }
+
+        document.onkeydown = function (evt) {
+            evt = evt || window.event;
+            var isEscape = false;
+            if ("key" in evt) {
+                isEscape = evt.key === "Escape" || evt.key === "Esc";
+            } else {
+                isEscape = evt.keyCode === 27;
+            }
+            if (isEscape && document.body.classList.contains("modal-active")) {
+                toggleModal();
+            }
+        };
+
+        function toggleModal() {
+            const body = document.querySelector("body");
+            const modal = document.querySelector(".modal");
+            modal.classList.toggle("opacity-0");
+            modal.classList.toggle("pointer-events-none");
+            body.classList.toggle("modal-active");
+        }
+
         function onScanSuccess(decodedText, decodedResult) {
             // Handle on success condition with the decoded text or result.
             console.log(`Scan result: ${decodedText}`, decodedResult);
@@ -70,12 +129,15 @@ function onScanSuccess(decodedText, decodedResult) {
                 },
                 success: function (response) {
                     if(response.success == true){
+                        $('#attender_name').append("Name and surname: " + response.data.name);
+                        $('#attender_organization').append("Organization: " + response.data.organization);
                         if(response.data.consent_form == 1){
-                            alert(response.data.name + " - " + response.data.organization + ": " + "Allowed (photo and filming)");
+                            $('#attender_consent').append("Photo and video consent: Allowed");
                         }
                         else{
-                            alert(response.data.name + " - " + response.data.organization + ": " + "Not allowed (photo and filming)");
+                            $('#attender_consent').append("Photo and video consent: Declined");
                         }
+                        toggleModal();
                     }
                     else{
                         alert("Internal server error");