<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;Добавяне на предмет</h3>
		</div>
	</div>
	<div class="row">
		<div class="col-12-none col-md-12-none col-sm-12-none col-xs-12-none col-lg-4 col-xl-4">
			&nbsp;
		</div>
		<div class="col-12 col-md-12 col-sm-12 col-xs-12 col-lg-4 col-xl-4">
			<h3></h3>
			<div class="panel panel-default">
				<label><i class="fas fa-image"></i>&nbsp;&nbsp;Качете снимка на предмета</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: 320px; height: 180px;"></i></div>
					</label>
				</div>
				<label for="subname"><i class="fas fa-chalkboard"></i>&nbsp;&nbsp;Име на предмета</label>
				<form action="/" method="POST">
					<input type="hidden" name="pt" value="subject" />
					<input type="text" id="subname" name="subname" style="background-color: #CCCCCC; margin-bottom: 10px;" class="form-control-lg form-control" required title="Въведете име на предмета">
					<input type="hidden" id="picname" name="picname" value="<?php $picname=sha1("SN".time().""); print("".$picname.""); ?>">
					<button class="form-control-lg form-control btn-success"><i style="color: #f5f5f5;" class="fas fa-plus"></i>&nbsp;&nbsp;Добави</button>
				</form>
			</div>
			<div id="uploadimageModal" class="modal" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">
								Качване и изрязване на снимка
							</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: 320px; margin-top: 20px"></div>
								</div>
								<div class="col-12 text-center" style="padding-top: 30px;">
									<br />
									<button class="btn btn-success crop_image"><i class="fas fa-cut"></i>&nbsp;Изрежи и качи</button>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Затвори</button>
						</div>
					</div>
				</div>
				<script>
					thename="<?php print("".$picname.""); ?>";
					$(document).ready(function()
					{
						$image_crop = $('#image_demo').croppie(
						{
							enableExif: true,
							viewport:
							{
								width:320,
								height:180,
								type:'square' // circle square
							},
							boundary:
							{
								width:320,
								height:180
							}
						});
						$('#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'
							}).then(function(response)
							{
								$.ajax(
								{
									url:"uppic.php",
									type: "POST",
									data:{"image": response, "imgname": thename},
									success:function(data)
									{
										$('#uploadimageModal').modal('hide');
										$('#uploaded_image').html(data);
									}
								});
							})
						});
					});
				</script>
			</div>
		<div class="col-12-none col-md-12-none col-sm-12-none col-xs-12-none col-lg-4 col-xl-4">
			&nbsp;
		</div>
	</div>
</div>