@page "{Transaction_UID}"
@using System.Text.Json
@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;
/* 			background-color: #f9f9f9; */
/* 			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
		}

		.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>
}
<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="#image1">Identification</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="tab" href="#image2">Selfie</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>
					<div id="image2" class="container tab-pane fade">
						<img id="SelfieImage" src="https://placehold.co/600x400?text=Hello" alt="Image 1" class="img-fluid">
					</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>

@* <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>

<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>
			<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>
			<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>
</template>
 *@
@section 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>
}