<?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 Set Updated Successfully!";
}
?>

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

<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;
	}
	.saved a, .saved a:active, .saved a:visited { background:#fff;  color:#28d52d; border-radius:50px; padding:3px 10px; font-weight:800; }
	.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">

	/* ###################################################### */
	/* ####### 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;	
		background: #eee !important;
		font-size:17px !important;
	}
	
/******************************************************************************/
/*********************     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/?set&edit={$set['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="margin-bottom:0px; padding-bottom:0px; font-size:17px; font-weight:500;">
				<a href="/admin/sets">&laquo; Back</a> | <?php

				if ($set) {
					echo "Edit";
				} else {
					echo "Add";
					$def = "static/uploads/storecats/placeholder.jpg";
				}

				?> Voice Trivia Set
			</h1>
			
			<br />

			<form method="post" class="form form-profile" enctype="multipart/form-data" 
				style="padding:0px 0px 0px; margin-top:0px; 
				font-family:Montserrat, 'Open Sans',Helvetica, sans-serif;">
			
				<h1 style="font-weight:600; border:2px solid #ccc; padding:20px; margin-top:0px;
						font-family:Montserrat, 'Open Sans',Helvetica, sans-serif;">
					CREATE/MANAGE TRIVIA SET
				</h1>
			
				<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;">
					<?= date('h:iA m/d/y',strtotime($set['date'])); ?>
				</div>
				<div class="clear"></div>
			
				<!-- ########### SWITCH FIELD STARTS HERE ########### -->
				<div class="row-item clearfix" id="sectiondiv" style=" 
				margin-top:20px; padding-bottom:20px; padding-top:0px">

					<div class="val" style="padding-top:0px; font-weight:300; text-align:left;
					margin-left:0">
						<?php
							$check_active = $set['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 ?> | <?= $set['is_active'] ?>-->
						</div>
						<div class="clear"></div>
					</div>
				</div>
<!--				<div class="clear"></div>
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Quiz ID:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="id" value="<?= $set['id'] ?>"
					style="min-width:250px; max-width:390px; 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;">Quiz Title:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="title" value="<?= $set['title'] ?>"
					style="min-width:250px; max-width:390px; 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;">Quiz Descrip:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="description" value="<?= $set['description'] ?>"
					style="min-width:250px; max-width:390px; 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;">Questions:</label>
				<div class="val" style="margin-left:0px; max-width:495px; margin-bottom:10px;">
					<textarea class="txt full-width"
						style="width:100%; height:auto; max-width:495px; float:right; font-size:17px !important;
						line-height:27px; min-height:200px;"
							name="itemtitles"><?= $set['itemtitles'] ?></textarea>
					<p class="rs description-input"></p>
				</div>
				
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Choices:</label>
				<div class="val" style="margin-left:0px; max-width:495px; margin-bottom:10px;">
					<textarea class="txt full-width"
						style="width:100%; height:auto; max-width:495px; float:right; font-size:17px !important;
						line-height:27px; min-height:200px;"
						name="itemChoices"><?= $set['itemChoices'] ?></textarea>
					<p class="rs description-input"></p>
				</div>
				
				<label class="lbl" for="txt_name1" style="width:auto; margin-right:5px;">Answers:</label>
				<div class="val" style="margin-left:0px; max-width:495px; margin-bottom:10px;">
					<textarea class="txt full-width"
						style="width:100%; height:auto; max-width:495px; float:right; font-size:17px !important;
						line-height:27px; min-height:200px;"
						name="itemMaster"><?= $set['itemMaster'] ?></textarea>
					<p class="rs description-input"></p>
				</div>
				
				<br /><br />
				<div class="clear"></div>
				
				<h2 style="font-weight:600; border:2px solid #ccc; padding:20px;
					font-family:Montserrat, 'Open Sans',Helvetica, sans-serif;">
					CREATE NEW TRIVIA QUESTIONS
				</h2>
				
				<div class="row-item clearfix levels">
					<div class="val" style="-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box; box-sizing: border-box;
						font-size:15px; font-weight:300; margin-left:0px;"> 
						
						<div style="margin-bottom:25px;">
							delete | sort | question | answer |
							option a | option b | option c | option d (video uploads coming soon)
						</div>
						
						<?php
						foreach ($set['backing'] as $level) {
							if ($level['sort']==99) {
								$status_level = "background:#ffc8ca !important;";
							} else {
								$status_level = "";
							}
							echo '<div style="width:100%; display:block; background:none; 
							border-bottom:3px solid #eee; font-weight:400;">
							
								<input class="form txt" type="checkbox" name="delete[]" value="1"
								style="width:8%; text-align:center; height:20px; width:20px; margin-right:7px;" />
								
								<input class="form txt" name="question_id[]" placeholder="#"
								style="display:none; width:8%; text-align:center; background:#ccc;" 
								value="' . $level['id'] . '" readonly />
							
								<input class="form txt" name="sort[]" placeholder="#" 
								style="'. $status_level .'width:8%; text-align:center" 
								value="' . $level['sort'] . '" />
								
								<br />
						  		
						  		<input class="form txt" name="question[]" placeholder="Question?"
						  		maxlength="50" style="'. $status_level .'width:98%; max-width:1000px;
						  		font-weight:600" 
						  		value="' . $level['question'] . '" />
						  		
						  		<input class="form txt" name="cf_id[]" type="hidden"
						  		style="width:0%" value="' . $level['cf_id'] . '" />
						  		<br />
						  		
								<input class="form txt" name="option1[]"
								placeholder="Option A" style="'. $status_level .'font-size:17px; width:98%;
								max-width:700px;"
								value="' . $level['option1'] . '" />
								<br />
								  
								<input class="form txt" name="option2[]"
								placeholder="Option B" style="'. $status_level .'font-size:17px; width:98%;
								max-width:700px;"
								value="' . $level['option2'] . '" />
								<br />
								
								<input class="form txt" name="option3[]"
								placeholder="Option C" style="'. $status_level .'font-size:17px; width:98%;
								max-width:700px;"
								value="' . $level['option3'] . '" />
								<br />
								<input class="form txt" name="option4[]"
								placeholder="Option D" style="'. $status_level .'font-size:17px; width:98%;
								max-width:700px;"
								value="' . $level['option4'] . '" />
								
								<br />
								<div style="background:none; width:70px; height:45px; line-height:45px; 
								float:left;">
									Answer:
								</div> 
								<input class="form txt" name="answer[]"
								placeholder="Answer" style="'. $status_level .'font-size:19px; text-align:center; 
								display:inline-block; float:left; width:70px" value="' . $level['answer'] . '" />
								
								<div class="clear"></div>
								<br />
						  	</div>
						  	<div class="clear"></div>
						  	<br />';
						}
						$totalreqs = count($set['backing']) + 1;
						?>
						<h3 style="font-weight:700; border-bottom:2px solid #cc0000; padding-bottom:7px">
							Add New Question
						</h3>
						<div style="margin-bottom:25px;">
							delete | sort | question | answer |
							option a | option b | option c | option d
						</div>
						<!-- <input class="form txt" name="user_id[]" type="hidden"
						style="width:0%" value="' . $level['user_id'] . '" /> -->
						<!--<input id="totalreqs" class="txt" type="hidden" value="<?= $totalreqs ?>" />-->
						<div id="first_level" style="-webkit-box-sizing: border-box;
							-moz-box-sizing: border-box; box-sizing: border-box; width:100%;">
							
							<input class="form txt" type="input" name="delete"
							style="width:8%; text-align:center; height:20px; width:20px; margin-right:7px;" />
							
							<input id="sortinput" class="form txt" name="question_id[]" placeholder="#"
							style="width:5%; text-align:center; display:none;" />
							
							<input id="sortinput" class="form txt" name="sort[]" placeholder="#"
							style="width:8%; text-align:center" />
							<!--<input class="form txt" name="back_amount[]" placeholder="$Budg" style="width:12%" />-->
							<!--<input class="form txt" name="back_quantity[]" placeholder="#CF" style="width:8%" />-->							<br />
							<input id="reqinput" class="form txt" name="question[]" placeholder="Question?"
							style="width:60%; max-width:1000px;" maxlength="70" />
							
							<input id="reqinput" class="form txt" name="option1[]" placeholder="Choice A"
							style="width:98%;" maxlength="50" />
							<br />
							
							<input id="reqinput" class="form txt" name="option2[]" placeholder="Choice B"
							style="width:98%;" maxlength="50" />
							<br />
							
							<input id="reqinput" class="form txt" name="option3[]" placeholder="Choice C"
							style="width:98%;" maxlength="50" />
							<br />
							
							<input id="reqinput" class="form txt" name="option4[]" placeholder="Choice D"
							style="width:98%;" maxlength="50" />
							<br />
							<div style="background:none; width:70px; height:45px; line-height:45px;
								float:left;">
								Answer:
							</div>
							 
							 <input class="form txt" name="answer[]" placeholder="Answer" style="width:100px;
							 font-size:19px; text-align:center; display:inline-block; float:left;" />
							<div class="clear"></div>
							<br />
							<!--<input class="form txt" name="days[]" placeholder="Days" style="width:10%" />-->
						</div>

						<div class="dynamicSection"></div>

						<p class="rs description-input">
							<a style="margin-left:0px; float:left; margin-top:10px; font-size:17px; padding:15px 20px"
                        	class="btn-blue btn" href='javascript:;'
                        	onclick='addLevel()'>+Add New Question</a>
                        	
							<div style="display:none; float:left; background:none; margin-top:10px; margin-left:7px;
								height:37px; line-height:37px; font-size:12px; color:#999">
								Enter 0 for # (then Save Changes) to delete a line
							</div>
						</p>
						<div class="clear"></div>
						<p class="" style="display:none; font-size:13px;">
							<strong>enter a number higher than 0 in the 
							first column (#) to &ldquo;accept&rdquo;</strong> the Question.
						</p>
					</div>
				</div>
				</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/sets'" />
				</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);
			//}
		});	
				
		//#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');
?>