<?php if ($sendGACodeTrigger !== false) { ?>
	<script>
		//ga('send', 'event', 'school_code_submission', '<?=$sendGACodeTrigger;?>');
	</script>
	<?php } ?>
<body  class="videoPlayingBody" >
<style>
	@media (min-width: 768px) { 
		iframe {min-height: 350px!important;}

	}
</style>
<main>
	<div class="container-fluid">
		<?php include(VIEWPATH . "includes/top-bar.php"); ?>
		<div class='container'>
			<div class="col-md-9">
				<div class="videoPlaying-videoBackgroundImage-removed">
					<div class="row">
						<div class="col-md-12">
							<div class="col-md-7">
								<div class="videoPlaying-title"><?php echo $video['title']; ?></div>
							</div>
							<div class='col-md-5 pull-right' >
								<div class="share-link">
									<a href="#">
										<span class="glyphicon glyphicon-share videoPlaying-actionsIcons" aria-hidden="true"></span>Share
									</a>
									<a href="#" class="videoPlaying-actionsaMiddle" data-id="<?php echo $video['id']; ?>" id="like_video">
										<span class="glyphicon glyphicon-heart videoPlaying-actionsIcons" aria-hidden="true"></span>Like
									</a>
									<a href="#" data-id="<?php echo $video['id']; ?>" id="watch_later_video">
										<span class="glyphicon glyphicon-plus videoPlaying-actionsIcons" aria-hidden="true"></span>Watch Later
									</a>
								</div>
							</div>
							<!--<div class="col-md-2">
							<?php
							if(!empty($search_categories)){
								?>
								<a href="/search?categories=<?php echo implode(",",$search_categories); ?>">
								<div class="videoPlaying-close pull-right">
								<span class="glyphicon glyphicon-remove"></span>
								</div>
								</a>
								<?php
							}else{
								?>
								<a href="/category-select">
								<div class="videoPlaying-close pull-right">
								<span class="glyphicon glyphicon-remove"></span>
								</div>
								</a>
								<?php
							}
							?>

							</div>-->

							<div class="col-md-8">
								<div class="videoPlaying-author">
									<div class='pull-left'><?php echo $video['author_name']; ?></div>
									<div class='pull-left stars'><?php echo $star_rating; ?></div>
								</div>
							</div>

							<!--<div class="col-md-4 col-xsm-12 col-sm-12" style="display: table;content: '';">
							<?php echo $star_rating; ?>
							</div>-->



						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="videoPlaying-video">

								<?php 
								$totalPlays = 0;
								foreach ($_SESSION['video_count'] AS $videoId=>$count) {

									$totalPlays += $count;
								}
								if(!empty($my_user) || $_SESSION['validSchoolCode'] == true  || $totalPlays  < $video_limit ){ ?>
									<iframe style="width: 100%;min-height: 300px" src="https://www.youtube.com/embed/<?php echo $video['youtube_id']; ?>?autoplay=1&cc_load_policy=1&modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
									<?php } else { ?>
									<div class='col-md-12' style="background-color:#fff;padding:20px;margin:20px 0;text-align: center;">
										<div class='col-md-8' style="margin:0 auto;float:none;">

											<?php if ($_SESSION['video_count'][$videoID] > $video_limit) { ?>
												<script>
													var popupVideoLimitNotice = true;
												</script>
												<?php } ?>

											<?php if (!empty($_SESSION['validSchoolCodeMsg'])) { ?>
												<span style='color:red'><?=$_SESSION['validSchoolCodeMsg'];?></span>
												<?php 
												unset($_SESSION['validSchoolCodeMsg']);
											} ?>
											<a href='/login-signup'>Please login or signup first to watch more videos.</a>

											<!--Please enter your school code to play the video:
											<form method="post" id="contact-form">
											<input required="" class="form-control contact-inputs first" type="text" name="school_code" placeholder="Enter school code">
											<input class="form-control contact-submit" type="submit" name="submit" value="Submit">
											</form>
											<br>
											<a href='/contact'>Request code</a> -->
										</div>
									</div>
									<?php } ?>
							</div>
						</div>

						<div class='video-playing-info-box col-md-12'>
							<div class='col-md-6'>
								<h3>Experience it!</h3>
								<p>
									Like this video? Apply for job shadowing to experience it first hand. Go ahead and click!
								</p>
								<button data-toggle="modal" data-target="#resumeModal"  type="button" class="play-all-button <?php echo ($isLoggedIn)? "" : "not-logged-in-swal" ?>">Apply Now</button>

								<br style="clear:both;" />
							</div>
							<div class='col-md-6'>
								<h3>Ask a question</h3>
								<p>
									Like this video? Apply for job shadowing to experience it first hand. Go ahead and click!
								</p>
								<a class='play-all-button'>
									Join Our Form
								</a>
								<br style="clear:both;" />
							</div>
						</div>
					</div>

					<br style='clear:both' />
					<br style='clear:both' />
					


					<!--                <div class="videoPlaying-navbar">-->
					<!--                    <div class="inside">-->
					<!--                        <ul class="nav navbar-nav">-->
					<!--                            <li><a href="#"><span class="videoPlaying-navbarTagsTitle">Related tags:</span></a></li>-->
					<!--                            --><?php
					//                            foreach ($video['tags'] as $tag) {
					//                                ?>
					<!--                                <li class="videoPlaying-navbarTags">-->
					<!--                                    <a href="#">-->
					<!--                                    <span>-->
					<!--									--><?php //echo $tag['tag'];?>
					<!--								</span>-->
					<!--                                    </a>-->
					<!--                                </li>-->
					<!--                                --><?php
					//                            }
					//                            ?>
					<!---->
					<!--                        </ul>-->
					<!--                    </div>-->
					<!--                </div>-->
					<div class="clearfix"></div>


				</div>
			</div>
			<div class="col-md-3 videoPlaying-interestedContainer">
				<style>
					.videoPlaying-interested.open{
						height: <?php echo (180 * count($related_videos)); ?>px !important;
					}
				</style>
				<div class="videoPlaying-interested">
					<div class="row">
						<div class="col-md-12">
							<div class="videoPlaying-interestedText">
								You might be interested in
							</div>
						</div>
					</div>
					<div class="row">
						<?php
						foreach ($related_videos as $related_video) {
							?>

							<div class="col-sm-6 col-md-12">
								<a href="<?php echo base_url(); ?>video-playing/<?php echo $related_video['id']; ?>/<?=$related_video['seo-title'];?>">
									<div class="videoTemplate-videos" style="--background-image: url(https://img.youtube.com/vi/<?php echo $related_video['youtube_id']; ?>/mqdefault.jpg
										);">
										<img src="https://img.youtube.com/vi/<?php echo $related_video['youtube_id']; ?>/mqdefault.jpg" />
										<div class="videoTemplate-videosTags">
											<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
											<!-- <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> -->
											WATCHED
										</div>
										<img class="videoTemplate-videosPlay" src="<?php echo base_url() ?>/img/play.png" width="38" height="37">
										<div class="videoTemplate-videosDescription"><?php echo $related_video['title']; ?></div>
										<div class="videoTemplate-videosTime"><?php echo $related_video['duration']; ?></div>
									</div>
								</a>
							</div>
							<?php
						}
						?>
					</div>
				</div>

				<div class="row">
					<div id="videoPlaying-interestedArrow" class="col-md-12">
						<div class="videoPlaying-interestedArrow">
							<span class="glyphicon glyphicon-chevron-up videoPlaying-interestedArrowUp"></span>
							<span class="glyphicon glyphicon-chevron-down videoPlaying-interestedArrowDown"></span>
						</div>
					</div>
				</div>
			</div>
			
								<div class='video-playing-description-box col-md-12'>
						<div class='col-md-6'>
							<h3>Video Description</h3>
							<p><?php echo $video['description']; ?></p>
						</div>
						<div class='col-md-6'>
							<h3>Biography</h3>
							<div class="videoPlaying-infoMediaPicture col-md-2">
								<img src="<?php echo base_url() . $video['author_image']; ?>" height="50" width="50">
							</div>
							<div class='col-md-10'>
							<?php
							/*if(strlen($video['author_bio']) > 200){
								echo substr($video['author_bio'],0,200) . " ...";
								echo "<a  data-toggle=\"modal\" data-target=\"#bioModal\" style='display:block;margin-top: 20px;' href='#'>Read More</a>";
								?>
								<!-- Modal -->
								<div class="modal fade" id="bioModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												<h4 class="modal-title" id="myModalLabel">Bio</h4>
											</div>
											<div class="modal-body">
												<?php echo $video['author_bio']; ?>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
											</div>
										</div>
									</div>
								</div>
								<?php
							}else{
								echo $video['author_bio'];
							}*/
							echo $video['author_bio'];
							?>
							</div>
						</div>
					</div>

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