<?php

include('views/_header.tpl.php');
$timenow = date('Y/m/d h:i:s', time());
$displaytime = date('h:i A m/d/y', time());
//date('m/d/Y h:i:s a', time());
// 2021-07-23 12:12:47

if (isset($_GET['saved'])) {
	//$msg = htmlentities(strip_tags($_GET['msg']));
	$saved = "Trivia Series Updated Successfully!";
}
if (isset($_GET['answers'])) {
	//$msg = htmlentities(strip_tags($_GET['msg']));
	$saved = "Please provide at least 2 Answers Choices/Options (ie. A & B).";
}
?>

<script src="/3rdparty/ckeditor/ckeditor.js"> </script>
<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.js'> </script>

<div class="loader" data-skin="dark" data-background-color="" data-text-color="" 
style="display: none; background:#000; text-align:center;">
	<div class="middle">
		<p>LOADING</p>
		<!--<span class="circle"></span>-->
		<div class="loadercircle"></div>
	</div>
</div>

<style>
	#mmen, #header { background: #fff; }
	#mmen { display:none; }
	div.spacer { padding-top:40px; }
	button, html input[type="button"], input[type="reset"], input[type="submit"] {
		padding:15px 35px;
	}
	div.dynamicSection {
		width:100%;	
		display:block;
	}
	.form .row-item .btn {
	    padding: 5px 10px;
		margin-top:0px;
	    margin-bottom: 0px;
	    margin-left: 0px;
		font-size:14px; 
		font-weight:300;
	}
	.form .row-item .lbl {
		float: left;
		padding-top: 11px;
		width: 100px;
		min-width:100px;
		text-align: right;
		background:none;
	}	
	.form .txt, input.datepicker {
		border:0px;
		background:#eee;
		margin-bottom:10px;
		padding:10px;
		font-size:17px;
		font-weight: 300;
	}
	.form textarea.txt {
		margin-bottom:30px;
	}
	label.lbl {
		font-size: 17px;
	}
	div.val {
		margin-top: 7px;
		margin-bottom:20px;
	}
	.saved  {
		background:#cd1000; margin-top:17px; color:#fff; text-align:center; padding:10px;
		font-size:17px; line-height:27px; font-family:Montserrat, 'Open Sans',Helvetica, sans-serif; 
	}
	.saved a, .saved a:active, .saved a:visited { font-size:14px; background:#fff; color:#28d52d; 
	border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; padding:2px 15px; font-weight:800; 
	font-family:Montserrat, 'Open Sans',Helvetica, sans-serif; }
	.saved a:hover { color:#fff;  background:#28d52d; }

	.rounded { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; padding-left:20px; padding-right:20px; }
	
	input[type=checkbox]
	{
		/* Double-sized Checkboxes */
		-ms-transform: scale(1); /* IE */
		-moz-transform: scale(1); /* FF */
		-webkit-transform: scale(1); /* Safari and Chrome */
		-o-transform: scale(1); /* Opera */
		transform: scale(1);
		padding: 3px;
	}

/**
* 
* @image rotate styles *
* 
*/
#container {
  width: 100%;
  min-height: 1200px;
  overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
  width: 100%;
  min-height: 1200px
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
  transform: rotate(180deg) translate(-100%, -100%);
  -webkit-transform: rotate(180deg) translate(-100%, -100%);
  -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
  transform: rotate(270deg) translateX(-100%);
  -webkit-transform: rotate(270deg) translateX(-100%);
  -ms-transform: rotate(270deg) translateX(-100%);
}
/* IMAGE ROTATE STYLE ENDS */
</style>

<!-- The Modal -->
<div id="myModal" class="modal">

	<!-- The Close Button -->
	<span class="close">&times;</span>

	<!-- Modal Content (The Image) -->
 	<img class="modal-content" id="img01" style="padding:2px; border:1px solid #777;" />

	<!-- Modal Caption (Image Text) -->
	<!--<div id="caption">Image Caption....</div>-->
</div>


<style type="text/css">
	/* Style the Image Used to Trigger the Modal */
	#myImg {
		border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
		cursor: pointer;
		transition: 0.3s;
	}

	#myImg:hover {
		opacity: 0.7;
	}

	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 999; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		/*background-color:red;*/
		background: url('/static/js/fancybox/fancybox_overlay.png');
		/*background-color: rgb(0,0,0);*/ /* Fallback color */
		/*background-color: rgba(0,0,0,0.9);*/ /* Black w/ opacity */
	}

	/* Modal Content (Image) */
	.modal-content {
		border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
		margin:  40px auto 0;
		display: block;
		width: auto;
		max-width: 700px;
		max-height:80%;
		/*background:red;*/
		box-shadow: 12px 0 15px -1px rgb(0 0 0 / 80%), -12px 0 8px -1px rgb(0 0 0 / 80%);
		z-index: 9999999999 !important;
		/*border:1px solid blue;*/
	}

	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#caption {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		text-align: center;
		color: #ccc;
		padding: 10px 0;
		height: 150px;
	}

	/* Add Animation - Zoom in the Modal */
	.modal-content, #caption {
		animation-name: zoom;
		animation-duration: 0.6s;
	}

	@keyframes zoom {
		from {
			transform: scale(0)
		}
		to {
			transform: scale(1)
		}
	}

	/* The Close Button */
	.close {
		position: absolute;
		top: 95px;
		right: 35px;
		color: #f1f1f1;
		font-size: 40px;
		font-weight: bold;
		transition: 0.3s;
	}

	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
		.modal-content {
			width: 90%;
			margin:10% 5% 0;
		}
		/* The Close Button */
		.close {
			position: absolute;
			top: 105px;
			right: 35px;
			color: #f1f1f1;
			font-size: 40px;
			font-weight: bold;
			transition: 0.3s;
		}
		
	}
</style>

<style type="text/css">

	a.btn-slim { 
		color:#ddd;
		background:#000;
		padding:5px 15px;
		font-size:15px;
		border-radius:50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
	}
	a.btn-slim:hover {
		color:#fff;
		background:#444;
	}
	
	/* ###################################################### */
	/* ####### The Switch - the box around the slider ####### */
	/* ###################################################### */

	.switch {
		position: relative;
		display: inline-block;
		width: 60px !important;
		height: 32px;
	}

	/* Hide default HTML checkbox */
	.switch input {
		display: none;
	}

	/* The slider */
	.sliderr {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
	}

	.sliderr:before {
		position: absolute;
		content: "";
		height: 28px;
		width: 28px;
		left: 2px;
		bottom: 2px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
	}

	input:checked + .sliderr {
		background-color: #98cb54;
	}

	input:focus + .sliderr {
		box-shadow: 0 0 1px #98cb54;
	}

	input:checked + .sliderr:before {
		-webkit-transform: translateX(28px);
		-ms-transform: translateX(28px);
		transform: translateX(28px);
	}

	/* Rounded sliders */
	.sliderr.round {
		border-radius: 32px;
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	}

	.sliderr.round:before {
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;

	}
	/* ##################################################### */
	/* ##############     The Switch ENDS     ############## */
	/* ##################################################### */ 
	
	.ck-editor__editable_inline, .ck-editor__editable, .ck.ck-editor__main .ck-content, .ck.ck-editor, .ck-content, .cke_contents {
		max-height: 200px !important;
		height: 100px !important;
		font-size:17px !important;
		background: #eee !important;
	}
	
	.cke_inner, .cke_reset {
		background: #eee !important;
	}
	div#cke_description, .cke_chrome {
		border-radius:6px !important;	
		-moz-border-radius: 6px !important;
		-webkit-border-radius: 6px !important;
		background: #eee !important;
		font-size:17px !important;
	}
	
	#uploadStatus {
		padding: 0px 0px;
		margin-top: 0px;
		font-size: 17px;
		text-align: left;
	}
	.progress {
		display: -ms-flexbox;
		display: flex;
		height: 20px;
		overflow: hidden;
		font-size: .75rem;
		background-color: #e9ecef;
		border-radius:50px;
		-moz-border-radius: 50px; 
		-webkit-border-radius: 50px;
		margin-top: 10px;
		margin-bottom:10px;
		max-width:330px;
	}
	
	.progress-bar {
		padding: 0px 0px;
		margin: 0 0 0px;
		border: 0px solid #D9D9D9;
		border-radius:50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		position: relative;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-pack: center;
		justify-content: center;
		overflow: hidden;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		background-color: #28a745;
		transition: width .6s ease;
		font-size: 16px;
		text-align: center;
	}
	
/******************************************************************************/
/*********************     MOBILE STYLES START HERE      **********************/
/******************************************************************************/ 

@media (max-width: 600px) {
	.form .row-item {
		padding-bottom: 5px;
	}
	.form .row-item .lbl .lblsms {
		display: none;
	}
	.form .row-item .val {
		margin-left: 0px; /* was 193px */
	}
	.form .row-item .lbl {
		float: left;
		padding-top: 12px;
		padding-bottom:7px;
		width: 100%; /* was 177px */
		text-align: left;
	}
	#descriplabel {
		padding:0px; height:10px;
	}
	#descriplabel2 {
		display: none;
	}
	.row-item.submit-wrapper {
		padding-left: 0%;
	}
	.form .description-input {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-style: italic;
		color: #999;
	}
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$(".timepicker").datetimepicker({
			hours12: true,
			format: 'Y-m-d H:i:s',
			formatTime: 'h:i',
			timepicker: true,
			datepicker: true,
			timepickerScrollbar: true,
			step: 30
		});

		$(".datepicker").datetimepicker({
			hours24: true,
			format: 'm/d/y',
			formatTime: 'H:i',
			datepicker: true,
			timepicker: false,
			timepickerScrollbar: true,
			step: 30
		});
	});
</script>

<?php
if (isset($saved)) {
	echo "<div class='saved' />
		$saved &nbsp;&nbsp;&nbsp; <a href='/admin/?series&edit={$series['id']}'>Ok</a>
		</div>";
}
if (isset($answers)) {
	echo "<div class='saved' />
		$answers &nbsp;&nbsp;&nbsp; <a href='/admin/?series&edit={$series['id']}'>Ok</a>
		</div>";
}
?>
<br />
<div class="clear"></div>
<div class="home-feature-category" style="background:none; border:none;">
	<div class="container_12 clearfix">
		<div class="grid_12 marked-category">
			
			<h1 style="font-weight:600; border:0px solid #ccc; padding:0px; margin-top:0px;
				font-family:Montserrat, 'Open Sans',Helvetica, sans-serif; margin-bottom:10px;">
				<a href="/admin/series" style="font-size:17px; font-weight:500;">&laquo; Back</a> 
				<span style="font-weight:300;">|</span> <?php

				if ($series) {
					echo "EDIT";
				} else {
					echo "CREATE";
				}
				?>
			</h1>
			
			<?php if ($series['parent'] == 1) { ?>
				<div style="padding:0 0 10px; font-size: 17px;
					font-family:Montserrat,'Open Sans',Helvetica, sans-serif; font-weight:600; color:#dd0000">
					OVERVIEW + FIRST QUESTION
				</div>
			<?php } else { ?>
				<div style="padding:0 0 10px; font-size: 17px;
					font-family:Montserrat,'Open Sans',Helvetica, sans-serif; font-weight:600; color:#dd0000">
					<!--<div style="width:22px; height:25px; background:#000; color:#fff; text-align:center;
						line-height:25px; display:inline-block; float:left; border-radius:50px; padding-right:3px">
						<i class="fa fa-chevron-left" aria-hidden="true" style=""></i>
					</div> -->
					<div style="display:inline-block; float:left; height:25px; line-height:25px;
						background:none; /*margin-left:5px; margin-right:5px;*/">
						QUESTION <?php echo $series['sort']; ?> of <?php echo $series['qty']; ?>	
					</div>
					<!--<div style="width:22px; height:25px; background:#000; color:#fff; text-align:center;
						line-height:25px; display:inline-block; float:left; border-radius:50px; padding-left:3px">
						<i class="fa fa-chevron-right" aria-hidden="true" style=""></i>
					</div>--> 
				</div>			
			<?php } ?>

			<form id="uploadForm" method="post" class="form form-profile" enctype="multipart/form-data" 
				style="padding:0px 0px 0px; margin-top:10px; 
				font-family:Montserrat, 'Open Sans',Helvetica, sans-serif;">
			
				<input id="seriesid" class="txt" type="text" name="id" value="<?= $series['id'] ?>" readonly
				style="display:none; background:#ccc; min-width:70px; max-width:150px; font-size:17px;
				font-weight:300; width:100% !important">
				
				<?php if ($series['parent'] == 1) { ?>
			
				<div style="float:left; text-align:left; height:30px; line-height:30px; 
					border-top:3px solid #03b5ff; padding-top:10px; width:100%; font-size:17px;">
					ID# <?= $series['id'] ?> | Created: <?= date('h:iA m/d/y',strtotime($series['date'])); ?>
				</div>
				<div class="clear"></div>
				<br />
				
				<input class="txt" type="text" name="parent" value="<?= $series['parent'] ?>"
				style="display:none; background:#ccc; min-width:70px; max-width:150px; font-size:17px;
				font-weight:300; width:100% !important">
				
				<!-- ########### SWITCH FIELD STARTS HERE ########### -->
				<div class="row-item clearfix" id="sectiondiv" style=" 
				margin-top:0px; padding-bottom:10px; padding-top:0px">

					<div class="val" style="padding-top:0px; font-weight:300; text-align:left;
					margin-left:0">
						<?php
							$check_active = $series['is_active'] ? ' checked="checked"' : '';
						?>
						<label class='switch' style="display:inline-block; float:left;">
							<input class='' id='showcollab' data-toggle='toggle' type='checkbox'
							name="is_active"<?= $check_active ?> /><span class='sliderr round'></span>
						</label>
						<div style="display:inline-block; float:left; height:30px; width:175px; 
						line-height:30px;
							font-weight:300; margin-left:7px; background:none">
							ON = ACTIVE | OFF = HIDE 
							<!--| <?= $check_active ?> | <?= $series['is_active'] ?>-->
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<label class="lbl" for="txt_name1" style="width:auto; 
				margin-right:5px;">How many questions?:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="qty" value="<?= $series['qty'] ?>" readonly
					style="background:#ccc; min-width:70px; max-width:150px; font-size:17px;
					font-weight:300; width:100% !important">
					<p class="rs description-input"></p>
				</div>
				
				<label class="lbl" for="txt_name1" style="width:auto; 
				margin-right:5px;">Trivia Series Title:</label>
				
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="title" value="<?= $series['title'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; 
					width:100% !important">
					<p class="rs description-input"></p>
				</div>
				
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Descrip:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="description" 
					value="<?= $series['description'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; 
					width:100% !important">
					<p class="rs description-input"></p>
				</div>	
				
				<label class="lbl" for="txt_name1" style="width:auto; 
				margin-right:5px;">Featured:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="featured"
					value="<?= $series['featured'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300;
					width:100% !important">
					<p class="rs description-input"></p>
				</div>					

				<div style="float:left; text-align:left; height:30px; line-height:30px;
					border-top:3px solid #03b5ff; padding-top:10px; width:100%; font-size:17px;">
				</div>
				<div class="clear"></div>
				
				<div style="padding:0 0 10px; font-size:22px; margin-bottom:15px;
					font-family:Montserrat,'Open Sans',Helvetica, sans-serif; font-weight:600; 
					color:#dd0000">
					EDIT FIRST QUESTION
				</div>
				
				<?php } else { ?>
					<br />
					<!-- ########### SWITCH FIELD STARTS HERE ########### -->
					<div class="row-item clearfix" id="sectiondiv" style=" 
					margin-top:0px; padding-bottom:10px; padding-top:0px">

						<div class="val" style="padding-top:0px; font-weight:300; text-align:left;
						margin-left:0">
							<?php
								$check_active = $series['is_active'] ? ' checked="checked"' : '';
							?>
							<label class='switch' style="display:inline-block; float:left;">
								<input class='' id='showcollab' data-toggle='toggle' type='checkbox'
								name="is_active"<?= $check_active ?> /><span class='sliderr round'></span>
							</label>
							<div style="display:inline-block; float:left; height:30px; width:175px; line-height:30px;
								font-weight:300; margin-left:7px; background:none">
								ON = ACTIVE | OFF = HIDE<!--| <?= $check_active ?> | <?= $series['is_active'] ?>-->
							</div>
							<div class="clear"></div>
						</div>
					</div>
					
				<?php  } ?>
				
				<!--<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Question Order:</label>
				<div class="val" style="margin-left:0px;">
				<input class="txt" type="text" name="sort" value="<?= $series['sort'] ?>" readonly
				style="background:#ccc; min-width:70px; max-width:150px; font-size:17px;
				font-weight:300; width:100% !important">
				<p class="rs description-input"></p>
				</div>-->
				
				<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
				<!-- ////////////////////////////    START OF THE QUESTION    //////////////////////////// -->
				<!-- ///////////////////////////////////////////////////////////////////////////////////// -->
				
				<div style="border-top:0px solid #ccc; border-bottom:3px solid #ccc;">
					<h3 style="font-size: 17px; margin-bottom:0px; padding-bottom:0px;
						font-family:Montserrat,'Open Sans',Helvetica, sans-serif; font-weight:500;">
						Attach Video (optional):
					</h3>						
							
					<div class="val" style="margin-left:0px;">
						<div class="makeblock" style="">

							<video width="343" height="257" controls='true' type='video/mp4' 
							preload="metadata" autoplay muted loop playsinline
							style="margin-top:10px; margin-bottom:-10px; background:none; margin:0 auto;
							background:#000; border-radius:12px; 
							-moz-border-radius: 12px; -webkit-border-radius: 12px;">
							
								<source src="/static/collections/video/<?= $series['video'] ?>" type="video/mp4">
								<source src="movie.ogg" type="video/ogg" />
								Your browser does not support the video tag.
							</video>
							<br />

							<span class="maxsize">(max size: 10MB*)</span>
							<div style="clear:both"></div>
						</div>						
					</div>
					<div class="clear"></div>
					
					<div style="margin-left:0px;">
						<div class="fileUploadx">
							<span>Upload</span>
							<!--<input type="file" name="file" id="fileInput">
							<input type="submit" name="submit" value="UPLOAD"/>-->
							
							<input type="file" class="uploadx" name="video" id="fileInput"
							onchange="updateCouponImage(this)"  /><!--data-type="image"-->

						</div>
						<span class="maxsize">(max size: 10MB*)</span>
						<div style="clear:both"></div>
						<br />
						<a href="javascript:;" id="uploadNewVideo"
						style="" class="btn-slim">Upload Video</a>
						<br /><br />
					</div>	
					
					<div class="progress" style="">
						<div class="progress-bar" style=""></div>
					</div>
					
					<div id="uploadStatus" style=""></div>
					
					<div class="val" style="margin-left:0px; word-wrap: break-word; padding:0 0px; 
					margin:10px 0px 0; font-weight:300;">
						<span style="font-weight:500;">Video Filename:</span> <?php echo $series['video']; ?>
					</div>
					<div class="clear"></div>
					<br />
				</div>
				<br />
				<!-- END OF VIDEO SECTION -->
					
				<!-- //////////////////////////////////////////////////////////////////// -->
				
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Question:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="itemtitles" value="<?= $series['itemtitles'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; width:100% !important">
					<p class="rs description-input"></p>
				</div>
		
				<label class="lbl" for="txt_name1" style="width:auto; 
				margin-right:5px;">Answer Choices/Options:</label>
				<div class="val" style="margin-left:0px; max-width:495px; margin-bottom:10px;">
					<div style="width:30px; display-inline:block; float:left; 
						height:45px; background:none; line-height:45px; text-align:center; font-size:22px;">
						A:
					</div> 
					
					<input class="txt" type="text" name="itemChoiceA" value="<?= $series['itemChoiceA'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; width:90% !important;
					display-inline:block; float:left;">
					<div class="clear"></div>
					<br />
					
					<div style="width:30px; display-inline:block; float:left;
						height:45px; background:none; line-height:45px; text-align:center; font-size:22px;">
						B:
					</div> 
					<input class="txt" type="text" name="itemChoiceB" value="<?= $series['itemChoiceB'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; width:90% !important;
					display-inline:block; float:left;">
					<div class="clear"></div>
					<br />
					
					<div style="width:30px; display-inline:block; float:left;
						height:45px; background:none; line-height:45px; text-align:center; font-size:22px;">
						C:
					</div> 
					<input class="txt" type="text" name="itemChoiceC" value="<?= $series['itemChoiceC'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; width:90% !important;
					display-inline:block; float:left;">
					<div class="clear"></div>
					<br />
					
					<div style="width:30px; display-inline:block; float:left;
						height:45px; background:none; line-height:45px; text-align:center; font-size:22px;">
						D:
					</div> 
					<input class="txt" type="text" name="itemChoiceD" value="<?= $series['itemChoiceD'] ?>"
					style="min-width:250px; max-width:790px; font-size:17px; font-weight:300; width:90% !important;
					display-inline:block; float:left;">
					<div class="clear"></div>
					<br />
					
					<textarea class="txt full-width"
						style="width:100%; height:auto; max-width:495px; float:right; font-size:17px !important;
						line-height:27px; min-height:100px;"
						name="itemChoices"><?= $series['itemChoices'] ?></textarea>
					<p class="rs description-input"></p>
					<br />
				</div>
				
				<label class="lbl" for="txt_name1" 
                style="text-align:left; width:auto; margin-right:5px; margin-top:10px;">Answer:</label>
                
                <div class="val" style="margin-left:0px; margin-top:10px;">
					<select name="ans" id="" class="txt" type="number" style="background:#eee; 
						line-height:45px; height:45px; padding:10px; max-width:290px;">
			           <option value="">Select One</option>
			           
			           <option value="A" <?php if($series['ans'] == 'A') 
			           echo "selected"; ?>>A</option>
			           <option value="B" <?php if($series['ans'] == 'B') 
			           echo "selected"; ?>>B</option>
			           <option value="C" <?php if($series['ans'] == 'C') 
			           echo "selected"; ?>>C</option>
			           <option value="D" <?php if($series['ans'] == 'D') 
			           echo "selected"; ?>>D</option>                
			       </select> 
                    <p class="rs description-input"></p>
                </div>  
				
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Answer:</label>
				<div class="val" style="margin-left:0px; max-width:495px; margin-bottom:10px;">
					<input class="txt" type="text" value="<?= $series['itemMaster'] ?>" readonly
					style="min-width:150px; max-width:290px; font-size:17px; font-weight:300; width:90% !important;
					display-inline:block; float:left; background:#ddd">
				</div>
				<div class="clear"></div>
				<br /><br /><br /><br /><br /><br />
				
				</div><!-- END OF COLLAB TOGGLESLIDE AREA -->
				
				<!-- QUESTION | CHOICE A | CHOICE B | CHOICE C | CHOICE D | ANSWER -->
	
				<div style="position:fixed; width:100%; bottom:0; left:0; right:0; padding:20px 20px 50px; 
				height:90px;
					background:rgba(0,0,0,.7); z-index:99999999999999999; -webkit-box-sizing: border-box;
					-moz-box-sizing: border-box; box-sizing: border-box;">
					<input type="submit" style="font-weight:300; width:40%; margin:0 4%; display:inline-block;" 
					class="btn btn-black" />
					<input type="button" value="Cancel" class="btn btn-black" 
					style="width:40%; margin:0 4%; display:inline-block;" onclick="location = '/admin/series'" />
				</div>
				
			</form>

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

<script type="text/javascript">
	//CKEDITOR.replace( 'description' );
	$(document).ready(function() {
		$(".popXXX").click(function () {
			//alert('Pop');
		});
			
		$(".pop").on("click", function() {
			//alert('Pop');
			var src= $(this).find('img').attr('src');
			//alert(src);
			$('.modal-content').attr('src', src);
			//$('.modal-content').attr('src', $('.imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
			$('.modal').show(); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
		});
		
		$(".close").on("click", function() {
			$('.modal').hide();
		});
		$(".modal").on("click", function() {
			$('.modal').hide();
		});		
		
		$(".showreplydiv").on("click", function() {
			//alert('Reply Div Click');
			//$('.modal').hide();
			
			//if ($('#replydiv').is(':visible')) {
				$('#replydiv').slideToggle({
					direction: "down"
				}, 300);
			//}
		});	
		
		$('input[id=radio_image]').change(function() {
			//var radio_vid = input[id=radio_image];
			$('input:radio[id=radio_video]').prop('checked', false);
			$('input:radio[id=radio_image]').prop('checked', true);
			var value = $( 'input[id=radio_image]:checked' ).val();
			//this.checked = false;
			//alert(value);
			$("#notif_type").val(value);
			$("#videodiv").hide();
			$("#videoprevdiv").hide();
			$("#imagediv").show();
			$("#imageprevdiv").show();
		});

		$('input[id=radio_video]').change(function() {
			//var radio_vid = input[id=radio_image];
			$('input:radio[id=radio_image]').prop('checked', false);
			$('input:radio[id=radio_video]').prop('checked', true);
			var value = $( 'input[id=radio_video]:checked' ).val();
			//this.checked = false;
			//alert(value);
			$("#notif_type").val(value);
			$("#imagediv").hide();
			$("#imageprevdiv").hide();
			$("#videodiv").show();
			$("#videoprevdiv").show();
		});
		
		$("#uploadNewVideo").on("click", function() {
			//alert('Upload Video...');
			//e.preventDefault();
			
//			if (!$('#fileInput').val()) {
//				alert('Please attach a video...');	
//			}
			var series_id = $("#seriesid").val();
//			var file_data = $('#fileInput').prop('video')[0];
//			var form_data = new FormData();
//			form_data.append('video', file_data);
//			form_data.append('id', series_id);
			var formData = new FormData($("#uploadForm")[0]);
			//alert(form_data);
			//return false; 
			//var form = new FormData($('#uploadForm')); // new FormData(this),
			//var series_id = $("#seriesid").val();
			//			alert('Series ID: ' + series_id);
			//			return false; // fileInput
			
			$.ajax({
				xhr: function() {
					var xhr = new window.XMLHttpRequest();
					xhr.upload.addEventListener("progress", function(evt) {
						if (evt.lengthComputable) {
							var percentComplete = ((evt.loaded / evt.total) * 100);
							$(".progress-bar").width(percentComplete + '%');
							$(".progress-bar").html(percentComplete+'%');
						}
					}, false);
					return xhr;
				},
				type: 'POST',
				url: 'https://voicetrivia.com/series/uploadVideo',
				data: formData,
				contentType: false,
				cache: false,
				processData:false,
				beforeSend: function() {
					$(".progress-bar").width('0%');
					$('#uploadStatus').html('<img src="https://voicetrivia.com/static/loading.gif" style="height:25px;" />');
				},
				error:function() {
					$('#uploadStatus').html('<p style="color:#EA4335;">Video upload failed, please try again.</p>');
				},
				success: function(resp) {
					//alert(resp);
					if (resp == 'ok') {
						//$('#uploadForm')[0].reset();
						$('#uploadStatus').html('<p style="color:#28A74B;">Video has uploaded successfully!</p>');
						setTimeout(function () {
							// Code to be executed after the delay
							window.location.href = window.location.href;
							//$('#elementToDisappear').fadeOut();
						}, 1000);
					} else if (resp == 'err') {
						$('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid video file to upload.</p>');
					}
				}
			});
		});
		
		// VIDEO UPLOAD 
		// https://www.codexworld.com/file-upload-with-progress-bar-using-jquery-ajax-php/
		// File upload via Ajax
		$("#uploadFormXXX").on('submit', function(e) {
			//e.preventDefault();
			//alert('Form clicked');
			//return false;
		});

		// File type validation
		$("#fileInput").change(function() {
			var allowedTypes = ['video/mp4'];
			var file = this.files[0];
			var fileType = file.type;
			if (!allowedTypes.includes(fileType)) {
				alert('Please select a valid video file of the .mp4 type');
				$("#fileInput").val('');
				return false;
			}
			if (this.files[0].size > 14000000) {
				alert("Please upload file less than 14MB. Thanks!!");
				$(this).val(null);
			}
		});
				
		//#myModal is also part of the selector with .modal
		
//		$(document).on('click','#dark_overlay, .darkoverlay2',function() {
//			//$('#dark_overlay').fadeOut('3000',function() {//use 3000 in place of 300m
//			$('.modal').hide();
//			$("#dark_overlay").removeClass('darkoverlay2');
//			//$("#updatecontent").height(47);
//			//$(".quick-post").height(130);
//			//$("#rewards_slide_up").hide();
//		});
	});
	// DOC READY ENDS
	////////////////////////////////////////////
	
	function addLevel()
	{
		$('.levels .dynamicSection').append($('#first_level').html());
	}
	function updateCouponImage(input)
	{
		if (!input.files || !input.files[0])
			return false;

		var reader = new FileReader();
		reader.onload = function(e) {
			$("[data-variable='image']").attr("src", e.target.result);
		}
		reader.readAsDataURL(input.files[0]);
	}
</script>

<?php
	include('views/_footer.tpl.php');
?>