@page "{Transaction_UID}"
@using System.Text.Json
@using Syncfusion.EJ2
@model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
@{
    Layout = "_Blank";
}

@section Head {
<style>

		.modal-dialog-right {
			position: fixed;
			top: 0;
			bottom: 0;
			left: auto;
			right: 0;
			margin: 0;
			padding: 0;
			width: 350px; /* Adjust the width as needed */
			height: 100%;
		}

		.modal-content-right {
			border-radius: 0;
			height: 100vh;
			width: 100%;
			background-color: #fff;
			box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
		}

		.list-group {
			list-style: none;
			padding: 0;
		}

		.list-group-item {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 10px;
			padding: 10px;
			border-radius: 5px;
		}

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: #007bff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-weight: bold;
			text-transform: uppercase;
		}

		.modal-header.draggable {
			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>

<input type="hidden" id="Participants" value="@(System.Web.HttpUtility.JavaScriptStringEncode(JsonSerializer.Serialize(Model.Participants)).Replace("\\", ""))" />
<input type="hidden" asp-for="CommunicationUserToken" />
<input type="hidden" asp-for="CommunicationUserId" />
<input type="hidden" asp-for="CommunicationRoomId" />
<input type="hidden" asp-for="DisplayName" />
<input type="hidden" asp-for="ParticipantType" />

<form method="post" asp-page-handler="StartRecording">
    <input type="hidden" asp-for="ServerCallID" />
    <input type="hidden" asp-for="Transaction_UID" />
</form>


<div class="modal fade right" id="RightSidebarModal" tabindex="-1" role="dialog" aria-labelledby="rightSidebarModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-right" role="document">
		<div class="modal-content modal-content-right">
			<!-- Modal Header -->
			<div class="modal-header">
				<h5 class="modal-title" id="rightSidebarModalLabel">Participants</h5>
				<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
			</div>

			<!-- Modal Body -->
			<div class="modal-body">
				<ul class="list-group" id="ParticipantListGroup">
					<li class="list-group-item">
						<div class="avatar">JD</div>
						John Doe
					</li>
					<li class="list-group-item">
						<div class="avatar">SM</div>
						Sarah Miller
					</li>
					<li class="list-group-item">
						<div class="avatar">AM</div>
						Alex Martin
					</li>
					<li class="list-group-item">
						<div class="avatar">CW</div>
						Chris Wilson
					</li>
				</ul>
			</div>


		</div>
	</div>
</div>

<template id="TemplateParticipantItem">
	<li class="list-group-item participant-item" data-participant-uid="">
		<div class="avatar participant-avatar">JD</div>
		<span class="participant-name">John Doe</span>
	</li>
</template>


<div class="modal fade " id="DraggableModal" data-bs-backdrop="false">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<!-- Modal Header -->
			<div class="modal-header draggable">
				<h4 id="SignatoryName" class="modal-title">Signatory Name</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
			</div>

			<!-- Modal Body -->
			<div class="modal-body">

				<!-- Nav tabs -->
				<ul class="nav nav-tabs">
					<li class="nav-item">
						<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="#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 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="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>

			<!-- Modal Footer -->
			<div class="modal-footer justify-content-start">
                <div class="flex-fill">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">Approve</button>
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Reject</button>
				</div>
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
			</div>

		</div>
	</div>
</div>

<div class="modal fade" id="PdfViewer" data-bs-backdrop="false" data-bs-keyboard="false">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">

			<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 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="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>
</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>
}