<?php
	if ($emb!="OK")
	{
		header("location: https://enter.vlevski.eu/");
	}
?>
<div style="margin-top: 55px;" class="container-fluid">
	<div class="row">
		<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" style="margin-bottom: 10px;">
			<h3 class="main-header"><i class="fas fa-file-signature"></i>&nbsp;Add question</h3>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="row">
				<div class="col-6">
					<select style="background-color: #CCCCCC;" class="form-control-lg form-control">
						<option value="">-- Select subject</option>
						<option value="B">Biology</option>
						<option value="C">Chemistry</option>
						<option value="I">ICT</option>
						<option value="M">Mathematics</option>
						<option value="P">Physics</option>
					</select>
				</div>
				<div class="col-6">
					<select style="background-color: #CCCCCC;" class="form-control-lg form-control">
						<option value="">-- Select level</option>
						<option value="Easy">Easy</option>
						<option value="Medium">Medium</option>
						<option value="Hard">Hard</option>
					</select>
				</div>
			</div>
			<div class="panel panel-default">
				<label><i class="fas fa-image"></i>&nbsp;&nbsp;Upload pic for the question (or leave it blank if question has no picture assigned to him)</label>
				<div class="panel-body" align="center">
					<label for="upload_image" style="cursor: pointer;">
						<input type="file" name="upload_image" id="upload_image" style="display: none;" accept="image/*" />
						<br />
						<div id="uploaded_image"><i class="fas fa-image" style="width: 960px; height: 540px;"></i></div>
					</label>
				</div>
				<form action="/" method="POST">
					<input type="hidden" name="l" value="en" />
					<div class="row">
						<div class="col-12">
							<input type="text" id="qn" name="qn" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required placeholder="Type your Question in this field">
						</div>
					</div>
					<div class="row">
						<div class="col-6">
							<input type="text" id="ra" name="ra" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required placeholder="Type your Right Answer in this field">
						</div>
						<div class="col-6">							
							<input type="text" id="w1" name="w1" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required placeholder="Type your Wrong Answer 1 in this field">
						</div>
					</div>
					<div class="row">
						<div class="col-6">
							<input type="text" id="w2" name="w2" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required placeholder="Type your Wrong Answer 2 in this field (or leave it blank if you don't have)">
						</div>
						<div class="col-6">
							<input type="text" id="w3" name="w3" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required placeholder="Type your Wrong Answer 3 in this field (or leave it blank if you don't have)">
						</div>
					</div>
					<div class="row">
						<div class="col-6">
							<select style="background-color: #CCCCCC;" class="form-control-lg form-control">
								<option value="">-- Order of answers</option>
								<option value="S">Shuffle the answers</option>
								<option value="1">Always place right answer 1</option>
								<option value="2">Always place right answer 2</option>
								<option value="3">Always place right answer 3</option>
								<option value="4">Always place right answer 4</option>
							</select>
							<input type="hidden" id="picname" name="picname" value="<?php $picname=sha1("p".time()."".rand(10,99).""); print("".$picname.""); ?>">
						</div>
						<div class="col-6">
							<button class="form-control-lg form-control btn-success"><i style="color: #f5f5f5;" class="fas fa-plus"></i>&nbsp;&nbsp;Add</button>
						</div>
					</div>
				</form>
			</div>
			<div id="uploadimageModal" class="modal" role="dialog">
				<div class="modal-dialog" style="min-width: 1010px;">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">
								Upload and cropping
							</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
						<div class="modal-body">
							<div class="row">
								<div class="col-12 text-center">
									<div id="image_demo" style="width: 100%; margin-top: 20px; border-radius: 10px;"></div>
								</div>
								<div class="col-12 text-center" style="padding-top: 10px;">
									<button class="btn btn-success crop_image"><i class="fas fa-cut"></i>&nbsp;Crop and upload</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<script>
					thename="<?php print("".$picname.""); ?>";
					$(document).ready(function()
					{
						$image_crop = $('#image_demo').croppie(
						{
							enableExif: true,
							viewport:
							{
								width: 960,
								height: 540,
								type: 'square' // circle square
							},
							boundary:
							{
								width: 960,
								height: 540
							}
						});
						$('#upload_image').on('change', function()
						{
							var reader = new FileReader();
							reader.onload = function (event)
							{
								$image_crop.croppie('bind',
								{
									url: event.target.result
								}).then(function()
								{
									console.log('jQuery bind complete');
								});
							}
							reader.readAsDataURL(this.files[0]);
							$('#uploadimageModal').modal('show');
						});
						$('.crop_image').click(function(event)
						{
							$image_crop.croppie('result',
							{
								type: 'canvas',
								size: 'viewport',
								format: 'jpeg'
							}).then(function(response)
							{
								$.ajax(
								{
									url:"/aq/uppic.php",
									type: "POST",
									data:{"image": response, "imgname": thename},
									success:function(data)
									{
										$('#uploadimageModal').modal('hide');
										$('#uploaded_image').html(data);
									}
								});
							})
						});
					});
				</script>
			</div>
		</div>
	</div>
</div>
<br />
									<br />
									<br />
									<br />