<!DOCTYPE html>
<html>

<head>
	<?php
	$this->load->view('includes/html_header');
	?>
</head>

<body>
<session class="main-session">
	<div class="row video-block-wrapper">
		<div class="col-12 video-block" id="video-block"></div>
	</div>
	<div class="row selling-block-wrapper">
		<div class="col-12 d-flex selling-block">
			<img class="mx-auto d-block img-fluid my-auto img-selling-ads" src="<?=$base_url;?>assets/img/selling-ads.png" />
		</div>
	</div>
	<div class="mobile-chat-panel">
		<div class="row mobile-chat-header">
			<div class="col-6">
				<img class="d-block mx-auto" src="<?=$base_url;?>assets/img/icon-chat-people.png" />
				<div class="mobile-chat-count"><?=$webinar['num_of_applicants'];?></div>
			</div>
			<div class="col-6">
				<img class="d-block mx-auto" src="<?=$base_url;?>assets/img/icon-chat-duration.png" />
				<div class="mobile-chat-duration">00:00:00</div>
			</div>
		</div>
		<div class="row mobile-chat-body">
			<div class="col-12 pl-0 pr-0">
				<div class="mobile-chat-message-block">
					<div class="chat-message-wrapper" id="mobile-chat-message-wrapper">
					</div>
				</div>
				<div class="mobile-chat-area">
					<div class="row">
						<div class="col-7 input-group">
							<input class="form-control send-target" type="text" placeholder="發送給每個人..." readonly />
							<div class="input-group-addon after-inputbox d-flex send-target-icon">
								<img class="mx-auto d-block my-auto" src="<?=$base_url;?>assets/img/icon-more.png" />
							</div>
						</div>
						<div class="col-5 text-right"><span>聊天模式</span><img src="<?=$base_url;?>assets/img/icon-chat-mode.png" /></div>
					</div>
					<div class="row mt-1">
						<div class="col-12 input-group">
							<input class="form-control send-message" name="mobile-message" type="text" placeholder="輸入您的評論..." />
							<div class="input-group-addon after-inputbox d-flex send-message-icon" data-content="mobile">
								<img class="mx-auto d-block my-auto" src="<?=$base_url;?>assets/img/icon-send-message.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</session>
<div id="footerSlideContainer">
	<div id="footerSlideButton"><img src="<?=$base_url;?>assets/img/vertical-drawer.png" /></div>
	<div id="footerSlideContent">
		<div id="footerSlideText">
			<div class="row chat-header">
				<div class="col-6">
					<img class="d-block mx-auto" src="<?=$base_url;?>assets/img/icon-chat-people.png" />
					<div class="chat-count"><?=$webinar['num_of_applicants'];?></div>
				</div>
				<div class="col-6">
					<img class="d-block mx-auto" src="<?=$base_url;?>assets/img/icon-chat-duration.png" />
					<div class="chat-duration">00:00:00</div>
				</div>
			</div>
			<div class="row chat-body">
				<div class="col-12 pl-0 pr-0">
					<div class="chat-message-block">
						<div class="chat-message-wrapper" id="chat-message-wrapper">
						</div>
					</div>
					<div class="chat-area">
						<div class="row">
							<div class="col-7 input-group">
								<input class="form-control send-target" type="text" placeholder="發送給每個人..." readonly />
								<div class="input-group-addon after-inputbox d-flex send-target-icon">
									<img class="mx-auto d-block my-auto" src="<?=$base_url;?>assets/img/icon-more.png" />
								</div>
							</div>
							<div class="col-5 text-right"><span>聊天模式</span><img src="<?=$base_url;?>assets/img/icon-chat-mode.png" /></div>
						</div>
						<div class="row mt-1">
							<div class="col-12 input-group">
								<input class="form-control send-message" name="message" type="text" placeholder="輸入您的評論..." />
								<div class="input-group-addon after-inputbox d-flex send-message-icon" data-content="desktop">
									<img class="mx-auto d-block my-auto" src="<?=$base_url;?>assets/img/icon-send-message.png" />
								</div>
							</div>
						</div>
						<div class="row selling-ads">
							<div class="col-12 selling-ads-chat-box">
								<img class="mx-auto d-block img-fluid selling-ads-chat-img" src="<?=$base_url;?>assets/img/selling-ads-chat.png" />
								<img class="mx-auto d-block img-fluid img-selling-ads-chat" src="<?=$base_url;?>assets/img/btn-course-application.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	let base_url = '<?=$base_url;?>';
	let vimeo_id = <?=$webinar['vimeo_id'];?>;
	let seminar_token = '<?=$webinar['webinar_token'];?>';
	let speaker = '<?=$webinar['speaker']['full_name'];?>';
	let currentUser = '<?=$webinar['applicant']['id'];?>';
	let chatMessage = [];
	<?php
		foreach ($webinar['chat_history'] as $chat) {
	?>
	chatMessage.push({
		user: '<?=$chat['user_id'];?>',
		full_name: '<?=$chat['full_name'];?>',
		message: '<?=$chat['message'];?>',
		mode: '<?=$chat['mode'];?>',
		time: <?=$chat['post_time'];?>,
	});
	<?php
		}
	?>
</script>
<?php
$this->load->view('includes/html_footer');
?>
</body>

</html>
