@extends('layouts.admin')

@section('content')

<style type="text/css">
	body { font-family: Helvetica, sans-serif; }
	h2, h3 { margin-top:0; }
	form { margin-top: 15px; }
	form > input { margin-right: 15px; }
	#results 
	{ 
		border:1px solid; 
		background:#f8f8f8; 
	    padding: 3em;
	    margin: 1em;
	    width: 100%;
	}
	#results > img { width: 160px; height: 120px; }
	
	.left { float: left; }
	.right { float: right; }
	.half { width: 50%; }
</style>

<div class="row" style="padding-bottom: 3em">
    <div class="col-sm-12"> 
    	<form class="form2" action="{{ route('diary.store') }}" method="post" enctype="multipart/form-data">
    	@csrf
        	<h2>New picture entry</h2> 
        	<input type="hidden" name="type" value="Image">
            <div class="row">
	            <div class="form-group col-lg-12">
	              	<label class="col-form-label" for="title">Title</label>
	              	<input class="form-control" id="title" type="text" name="title" value="{{ old('title') }}" required>
	            </div>
          	</div>

          	<div class="row">
	            <div class="form-group col-lg-12">
	              	<label class="col-form-label" for="location">Location</label>
	              	<input class="form-control" id="location" type="text" name="location" value="{{ old('location') }}">
	            </div>
          	</div>

          	<div class="row">
	            <div class="form-group col-lg-12">
	              	<label class="col-form-label" for="Uploadingimages">Upload Image(s)</label>
	              	<input class="form-control" id="Uploadingimages" type="file" name="Uploadingimages[]" multiple>
	            </div>
          	</div>

          	<div class="row">
	            <div class="form-group col-lg-12">
	              	<label class="col-form-label" for="description">Journal Entry</label>
	              	<textarea class="form-control" id="description" name="description" rows="7">{{ old('description') }}</textarea>
	            </div>
           	</div>

           	<div class="row">
				<div class="col-3">
					<h4>Images</h4>
					
					<div id="my_camera"></div>
					
					<!-- A button for taking snaps -->
					<input type="button" value="Take picture" onClick="start_snapping()">
					<!-- <input type="button" value="Stop" onClick="stop_snapping()"> -->
					<input type="button" value="Clear" onClick="erase_snaps()">
				</div>
				
				<div class="col-9">
					<div id="results"><p>Your captured images will appear here...</p></div>
					<div id="imagesFiles"></div>
				</div>
           	</div>

          	<div class="row">
	            <div class="form-group mt-5">
	              	<div class="buttons">
	              		<button type="submit" class="btn btn-primary signpbtn">Add</button>
	              	</div>
	            </div>
            </div>
        </form>
    </div>
</div>


<!-- Webcame -->
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="{{ asset('assets/js/webcam.min.js') }}"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		width: 320,
		height: 240,
		image_format: 'jpeg',
		jpeg_quality: 90
	});
	Webcam.attach( '#my_camera' );
</script>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">

	// preload shutter audio clip
	var shutter = new Audio();
	shutter.autoplay = false;
	shutter.src = navigator.userAgent.match(/Firefox/) ? '{{ asset("assets/js/shutter.ogg")}}' : '{{ asset("assets/js/shutter.mp3")}}';

	var timer = null;
	 
	function take_snapshot() {
		// take snapshot and get image data
		Webcam.snap( function(data_uri) {
			// Sound for image
			try { shutter.currentTime = 0; } catch(e) {;} // fails in IE
			shutter.play();
			// Sound for image


			// Image file Size in bytes
			var stringLength = data_uri.length - 'data:image/png;base64,'.length;
			var sizeInBytes = 4 * Math.ceil((stringLength / 3))*0.5624896334383812;
			var fileSize = sizeInBytes.toFixed(); 

			var inputImage = document.createElement('input'); 
			inputImage.type = "hidden";
    		inputImage.name = "sizes[]"; 
			inputImage.setAttribute('value', fileSize);
    		document.getElementById('imagesFiles').appendChild(inputImage);
    		// Image file Size in bytes


			// display results in page
			var img = new Image();
			img.src = data_uri;
			document.getElementById('results').appendChild( img );

			// create new element dynamicaly 
			var input = document.createElement('input');
    		input.type = "hidden";
    		input.name = "images[]"; 
			input.setAttribute('value', data_uri);
    		document.getElementById('imagesFiles').appendChild(input);
		} );
	}
	
	function start_snapping() {
		take_snapshot();
	}
	
	function erase_snaps() {
		document.getElementById('results').innerHTML = '';
	}
</script>

@endsection