@php
	//$ImgSrc="https://cloudmyschoolone.s3.ap-south-1.amazonaws.com/cloudt.myschoolone.com/upload_photos/StudentDocs/2022/06/b0d44c0de12e094d3ba02c5d9edec6ba.jpg";
	$ImgSrc="https://cloudmyschoolone.s3.ap-south-1.amazonaws.com/cloudt.myschoolone.com/cloud/Gallery/PhotoGallery/2023/07/4b53c40101de48e5504ee8bc8b9d496b.jpg";
	// echo "<pre>";
		// print_r($GetAllMobileNumberDetails);
	// echo "</pre>";
@endphp
 <link href="{{asset('')}}cork/HTML/ltr/DemoV3/html/src/assets/css/dark/apps/chat.css" rel="stylesheet" type="text/css" />
 <link href="{{asset('')}}cork/HTML/ltr/DemoV3/html/src/assets/css/light/apps/chat.css" rel="stylesheet" type="text/css" />
<div class="chat-section layout-top-spacing">
	<div class="row">
		<input type="hidden" name="CurrentUser" id="CurrentUser">
		<input type="hidden" name="CurrentWhatsAppConfigId" id="CurrentWhatsAppConfigId">
		<div class="col-xl-12 col-lg-12 col-md-12">
			<div class="chat-system">
				<div class="hamburger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu mail-menu d-lg-none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div>
				<div class="user-list-box">
					<div class="search">
						<input type="text" class="form-control" placeholder="Search User">
					</div>
					<div class="people ps ps--active-y">
						@foreach($GetAllMobileNumberDetails as $UserNumber=>$eachDetails)
							@php
							$UserNumber=$eachDetails['UserNumber'];
							$Message=$eachDetails['Message'];
							$MessageSendType=$eachDetails['MessageSendType'];
							$UserName=$eachDetails['UserName'];
							$WhatsAppConfigId=$eachDetails['WhatsAppConfigId'];
							$DisplayTiming=$eachDetails['DisplayTiming'];
							$UnReadCount=$eachDetails['UnReadCount'];
							$FromMobilName=$eachDetails['FromMobilName'];
							$DisplayCount="display:none";
							@endphp
							<div class="person" data-chat="{{$UserNumber}}" onclick="DisplayChat('{{$UserNumber}}','{{$WhatsAppConfigId}}')">
								<div class="user-info">
									<div class="f-head">
										<img src="{{$ImgSrc}}" alt="avatar">
									</div>
									<div class="f-body">
										<div class="meta-info">
											<span class="user-name" data-name="{{$UserNumber}}" frommobile-name="{{$FromMobilName}}">{{$UserName}}<input type="hidden" value="{{$UserNumber}}"></span>
											<span class="user-meta-time">{{$DisplayTiming}}
											@if($UnReadCount>0)
												<br>
												@php
													$DisplayCount="display:block";
												@endphp
											@endif
											<span class="badge badge-success" id="ReadUnRead{{$UserNumber}}" style="{{$DisplayCount}}">{{$UnReadCount}}</span>
											</span>
										</div>
										<span class="preview">{{$Message}}</span>
									</div>
								</div>
							</div>
						@endforeach                   
						<div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; height: 561px; right: 0px;">
						<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 298px;"></div></div>
					</div>
				</div>
				<div class="chat-box">
					<div class="chat-not-selected">
						<p> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg> Click User To Chat</p>
					</div>
					<div class="chat-box-inner">
						<div class="chat-meta-user">
							<div class="current-chat-user-name">
								<span><img src="../src/assets/img/90x90.jpg" alt="dynamic-image">
								<span class="name"></span></span>
							</div>
							
							<div class="chat-action-btn align-self-center">
								<div id="SystemCallName"></div>
								<div class="dropdown d-inline-block">
									<span class="FromMobileName"></span>
									<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
									</a>
									<div class="dropdown-menu left" aria-labelledby="dropdownMenuLink-2">
										<div id="GiveOption"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="chat-conversation-box">
							<div id="chat-conversation-box-scroll" class="chat-conversation-box-scroll">
							@foreach($GetAllMobileNumberDetails as $UserNumber=>$eachDetails)
								<div class="chat" data-chat="{{$UserNumber}}">
									<div id="DisplayChatDetails{{$UserNumber}}"> </div>
								</div>
							@endforeach
							</div>
						</div>
						<div class="chat-footer">
							<div class="chat-input">
								<form class="chat-form" action="javascript:void(0);">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
									<input type="text" id="SendMsg" class="form-control" placeholder="Message" onkeyup="SendWhatsAppMessage(event)">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="{{asset('')}}/WhatsApp/WhatsAppChat.js"></script>