From 00f42f16867eded79ebfb3cbad13f8c381ad507b Mon Sep 17 00:00:00 2001
From: jojo aquino <jfaquinojr@gmail.com>
Date: Sun, 4 May 2025 18:16:26 +0100
Subject: [PATCH] fix modal dragging

---
 .../Pages/Participant/VideoCall/Room.cshtml   | 231 ++++++++----------
 .../Participant/VideoCall/Room.cshtml.js      |  10 +-
 2 files changed, 104 insertions(+), 137 deletions(-)

diff --git a/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml b/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml
index e81d207..d62cb49 100644
--- a/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml
+++ b/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml
@@ -1,5 +1,6 @@
 @page "{Transaction_UID}"
 @using System.Text.Json
+@using Syncfusion.EJ2
 @model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
 @{
     Layout = "_Blank";
@@ -40,8 +41,6 @@
 			margin-bottom: 10px;
 			padding: 10px;
 			border-radius: 5px;
-/* 			background-color: #f9f9f9; */
-/* 			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
 		}
 
 		.avatar {
@@ -61,6 +60,30 @@
 			cursor: move;
 		}
 </style>
+
+	<link href="~/lib/ej2/css/bootstrap5.3.css" rel="stylesheet" />
+	<script src="~/lib/ej2/js/ej2.min.js"></script>
+	<script type="text/javascript">
+		var pdfViewer;
+		window.onload = function () {
+			pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+
+			document.getElementById('btnUpdateFormFields').onclick = function () {
+				debugger;
+				let formFieldCollections = pdfViewer.formFieldCollections;
+				let otherFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'mangjose');
+				let currentFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'andrew');
+			}
+		}
+
+		function formFieldClick(arg) {
+		}
+
+		function documentLoaded(arg) {
+		}
+
+
+	</script>
 }
 <div class="vh-100" id="videoGrid-container"></div>
 
@@ -137,21 +160,41 @@
 				<!-- Nav tabs -->
 				<ul class="nav nav-tabs">
 					<li class="nav-item">
-						<a class="nav-link active" data-bs-toggle="tab" href="#image1">Identification</a>
+						<a class="nav-link active" data-bs-toggle="tab" href="#tabIdentification">Identification</a>
 					</li>
 					<li class="nav-item">
-						<a class="nav-link" data-bs-toggle="tab" href="#image2">Selfie</a>
+						<a class="nav-link" data-bs-toggle="tab" href="#tabSelfie">Selfie</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" data-bs-toggle="tab" href="#tabOTP">OTP</a>
+					</li>
+					<li class="nav-item">
+						<a class="nav-link" data-bs-toggle="tab" href="#tabDetails">Details</a>
 					</li>
 				</ul>
 
 				<!-- Tab panes -->
-				<div class="tab-content">
-					<div id="image1" class="container tab-pane active">
-						<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid">
+				<div class="tab-content mt-2">
+					<div id="tabIdentification" class="container tab-pane active">
+						<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid"
+							 style="height:350px;">
 					</div>
-					<div id="image2" class="container tab-pane fade">
+					<div id="tabSelfie" class="container tab-pane fade">
 						<img id="SelfieImage" src="https://placehold.co/600x400?text=Hello" alt="Image 1" class="img-fluid">
 					</div>
+					<div id="tabOTP" class="container tab-pane fade">
+						<span id="Otp" class="h1">user has not yet entered OTP</span>
+					</div>
+					<div id="tabDetails" class="container tab-pane fade">
+						<div class="mb-3">
+							<label for="device" class="form-label">Device</label>
+							<input type="text" class="form-control" id="device" placeholder="Android" readonly="readonly">
+						</div>
+						<div class="mb-3">
+							<label for="location" class="form-label">Location</label>
+							<input type="text" class="form-control" id="location" placeholder="Metro Manila" readonly="readonly">
+						</div>
+					</div>
 				</div>
 
 			</div>
@@ -169,139 +212,61 @@
 	</div>
 </div>
 
-@* <template id="TemplateSidePane">
-	<div data-is-focusable="false" aria-modal="true" data-ui-id="SidePaneSignatories" class="ms-Stack css-366">
-		<div class="ms-Stack css-367">
-			<div role="heading" aria-label="People" aria-level="2" class="ms-StackItem css-368">Signatories</div>
-			<div class="ms-StackItem css-157">
-				<button type="button" class="ms-Button ms-Button--commandBar root-369" aria-label="Close" data-is-focusable="true">
-					<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
-						<i data-icon-name="cancel" aria-hidden="true" class="ms-Icon root-89 css-196 ms-Button-icon icon-370" style="font-family: FabricMDL2Icons;"></i>
-					</span>
-				</button>
-			</div>
-		</div>
-		<div class="ms-StackItem css-373">
-			<div class="ms-Stack css-374">
-				<div class="ms-StackItem css-375">
-					<div class="ms-Stack css-252">
-						<div data-ui-id="people-pane-content" class="ms-Stack css-376">
-							<div class="ms-Stack css-162">
-								<div aria-live="assertive" role="status" aria-atomic="true" class="ms-Stack css-241" />
-							</div>
-							<div class="ms-StackItem css-377">
-								<div class="ms-Stack css-378">
-									<div class="ms-Stack css-379">
-										<div aria-label="In this call {numberOfPeople}" id="id__427" class="ms-StackItem css-380">
-											<h2 id="SignatoryCount">In this call (2)</h2>
-										</div>
-										<div class="ms-StackItem css-157">
-											<button type="button" data-ui-id="people-pane-header-more-button" class="ms-Button ms-Button--default ms-Button--hasMenu root-381" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true">
-												<span class="ms-Button-flexContainer flexContainer-193" data-automationid="splitbuttonprimary">
-													<i data-icon-name="PeoplePaneMoreButton" aria-hidden="true" class="ms-Icon root-89 ms-Button-icon icon-382">
-														<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-															<path d="M6.75 10a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm5 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM15 11.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z" fill="currentColor" />
-														</svg>
-													</i>
-												</span>
-											</button>
-										</div>
-									</div>
-									<div class="ms-Stack css-384">
-										<div id="SignatoryList" data-ui-id="participant-list" class="ms-Stack css-386" role="menu">
-											<div role="menuitem" id="id__436" aria-label="principal3@jfaquinojr.com, , Muted, , , , " aria-labelledby="id__427 id__436" aria-expanded="true" aria-disabled="true" aria-controls="id__437" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
-												<div class="ms-Stack css-394">
-													<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
-														<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
-															<div role="presentation" class="ms-Persona-imageArea imageArea-399">
-																<div class="ms-Persona-initials initials-402" aria-hidden="true">
-																	<span>P</span>
-																</div>
-															</div>
-														</div>
-													</div>
-													<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
-														<div class="ms-TooltipHost root-404" role="none">
-															<span aria-labelledby="text-tooltip428" class="css-405">principal3@jfaquinojr.com</span>
-															<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
-														</div>
-													</div>
-													<div class="ms-Stack css-406">
-														<div class="ms-Stack css-407">
-															<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
-																<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-																	<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
-																</svg>
-															</i>
-														</div>
-													</div>
-												</div>
-											</div>
-											<div role="menuitem" id="id__442" aria-label="Notary One, , , , , , " aria-labelledby="id__427 id__442" aria-expanded="false" aria-disabled="true" aria-controls="id__443" data-is-focusable="false" data-ui-id="participant-item" class="css-392">
-												<div class="ms-Stack css-394">
-													<div data-ui-id="chat-composite-participant-custom-avatar" class="ms-Persona ms-Persona--size32 root-396">
-														<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
-															<div role="presentation" class="ms-Persona-imageArea imageArea-399">
-																<div class="ms-Persona-initials initials-409" aria-hidden="true">
-																	<span>NO</span>
-																</div>
-															</div>
-														</div>
-													</div>
-													<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
-														<div class="ms-TooltipHost root-404" role="none">
-															<span aria-labelledby="text-tooltip428" class="css-405">Notary One</span>
-															<div hidden="" id="text-tooltip428" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">Notary One</div>
-														</div>
-													</div>
-													<span class="css-410">(you)</span>
-													<div class="ms-Stack css-406" />
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
+<div class="modal fade" id="PdfViewer" data-bs-backdrop="false" data-bs-keyboard="false">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
 
-<template id="TemplateSignatoryItem">
-	<div role="menuitem" class="css-392">
-		<div class="ms-Stack css-394">
-			<div class="ms-Persona ms-Persona--size32 root-396">
-				<div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-261">
-					<div role="presentation" class="ms-Persona-imageArea imageArea-399">
-						<div class="ms-Persona-initials initials-402" aria-hidden="true">
-							<span class="signatory-initials">X</span>
-						</div>
-					</div>
-				</div>
+			<div class="modal-header draggable">
+				<h4 class="modal-title">@Model.DocumentType</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
 			</div>
-			<div style="padding: 0.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
-				<div class="ms-TooltipHost root-404" role="none">
-					<span aria-labelledby="text-tooltip428" class="css-405 signatory-name">principal3@jfaquinojr.com</span>
-					<div hidden="" class="signatory-tooltip" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; overflow: hidden; white-space: nowrap;">principal3@jfaquinojr.com</div>
-				</div>
+
+			<div class="modal-body">
+				<ejs-pdfviewer id="pdfviewer" enableFormDesigner="true" enableFormDesignerToolbar="true" designerMode="true"
+					documentPath="https://localhost:7121/Participant/VideoCall/Room/@Model.Transaction_UID?handler=Document"
+					style="height:641px;"
+					documentLoad="documentLoaded"
+					formFieldClick="formFieldClick">
+				</ejs-pdfviewer>
 			</div>
-			<div class="ms-Stack css-406">
-				<div class="ms-Stack css-407">
-					<i data-icon-name="ParticipantItemMicOff" role="img" aria-label="Muted" class="root-408">
-						<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-							<path d="M12 5v4.88l.9.9A3 3 0 0 0 13 10V5a3 3 0 0 0-6-.12l1 1V5a2 2 0 1 1 4 0ZM7 7.7 2.15 2.86a.5.5 0 1 1 .7-.7l15 15a.5.5 0 0 1-.7.7l-3.63-3.62a5.48 5.48 0 0 1-3.02 1.25v2.02a.5.5 0 0 1-1 0v-2.02a5.5 5.5 0 0 1-5-5.48.5.5 0 0 1 1 0 4.5 4.5 0 0 0 7.3 3.52l-1.06-1.07A3 3 0 0 1 7 10V7.7Zm4.02 4.02L8 8.71V10a2 2 0 0 0 3.02 1.72Zm3.78.96-.74-.74c.28-.59.44-1.25.44-1.94a.5.5 0 0 1 1 0c0 .97-.25 1.89-.7 2.68Z" fill="currentColor" />
-						</svg>
-					</i>
+
+			<div class="modal-footer justify-content-start">
+				<div class="flex-fill">
+					<button id="btnUpdateFormFields" class="btn btn-primary">Ready for Signature</button>
 				</div>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 			</div>
+
+		</div>
+    </div>
+</div>
+
+<div class="modal fade" id="OtpForm">
+	<div class="modal-dialog modal-sm">
+		<div class="modal-content">
+
+			<div class="modal-header draggable">
+				<h4 class="modal-title">Enter your One Time Password</h4>
+				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+			</div>
+
+			<div class="modal-body">
+				<input type="text" id="Otp" class="form-control" placeholder="Enter your One-Time-Password" asp-action="Otp" />
+			</div>
+
+			<div class="modal-footer justify-content-start">
+				<div class="flex-fill">
+					<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
+				</div>
+				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+			</div>
+
 		</div>
 	</div>
-</template>
- *@
+</div>
+
 @section Scripts {
+	<ejs-scripts></ejs-scripts>
     <script type="text/javascript" src="/dist/_jfa.js"></script>
     <script type="text/javascript" src="/lib/azure-communication-service/callComposite.js"></script>
     <script src="~/Pages/Participant/VideoCall/Room.cshtml.js" asp-append-version="true"></script>
diff --git a/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml.js b/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml.js
index 917711f..0928ea3 100644
--- a/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml.js
+++ b/EnotaryoPH/EnotaryoPH.Web/Pages/Participant/VideoCall/Room.cshtml.js
@@ -257,17 +257,19 @@
     let offsetX, offsetY;
 
     const header = modal.querySelector('.modal-header');
+    const dialog = modal.querySelector('.modal-content');
 
     header.addEventListener('mousedown', (e) => {
       isDragging = true;
-      offsetX = e.clientX - modal.offsetLeft;
-      offsetY = e.clientY - modal.offsetTop;
+      offsetX = e.clientX - (modal.offsetLeft + dialog.offsetLeft);
+      offsetY = e.clientY - (modal.offsetTop + dialog.offsetTop);
     });
 
     document.addEventListener('mousemove', (e) => {
+
       if (!isDragging) return;
-      modal.style.left = `${e.clientX - offsetX}px`;
-      modal.style.top = `${e.clientY - offsetY}px`;
+      dialog.style.left = `${e.clientX - offsetX}px`;
+      dialog.style.top = `${e.clientY - offsetY}px`;
     });
 
     document.addEventListener('mouseup', () => {