@extends('layouts.admin')

@section('content')

<style>
	button {
	  margin: 0 3px 10px 0;
	  padding-left: 2px;
	  padding-right: 2px;
	  width: 99px;
	}

	button:last-of-type {
	  margin: 0;
	}

	p.borderBelow {
	  margin: 0 0 20px 0;
	  padding: 0 0 20px 0;
	}

	video {
	  vertical-align: top;
	  --width: 25vw;
	  width: var(--width);
	  height: calc(var(--width) * 0.5625);
	}

	video:last-of-type {
	  margin: 0 0 20px 0;
	}

	video#gumVideo {
	  margin: 0 20px 20px 0;
	}
</style>

<div class="row">
    <div class="col-sm-12">

    		<form class="form2" action="{{ route('diary.store') }}" method="post" enctype="multipart/form-data">
	    	@csrf
	        	<h2>New video entry</h2> 
	        	<input type="hidden" name="type" value="Video">
	            <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="description">Journal Entry</label>
		              	<textarea class="form-control" id="description" name="description" rows="7">{{ old('description') }}</textarea>
		            </div>
		        </div> 

		        <input type="hidden" name="video_link" id="video_link">
		        <input type="hidden" name="video_storage" id="video_storage">

		        <div class="row mt-4">
		            <div class="form-group col-lg-12 col-xs-12">
					  	<video id="gum" playsinline autoplay muted></video>
			      		<video id="recorded" playsinline></video>
			      	</div>
			      	<div class="form-group col-lg-12 col-xs-12">
				        <button type="button" id="start" style="visibility:hidden;width:10px;">Start camera</button>
				        <button type="button" id="record" disabled>Record</button>
				        <button type="button" id="play" disabled>Play</button>
				        <button type="button" id="download" disabled>Upload Video</button>
				    </div>
			      	<div class="form-group col-lg-12 col-xs-12">
			        	<span id="errorMsg"></span>
			        	<p style="display: none;">
				          Echo cancellation: <input type="checkbox" id="echoCancellation" />
				        </p>
			      	</div>

			      	<div class="form-group mt-5">
		              	<div class="buttons">
		              	    <div id="Spinner" style="display:none">
		              		<i class="fa fa-spinner fa-spin" style="font-size:30px;"></i> Please wait until video gets uploaded
		              		</div>
		              		<button type="submit" class="btn btn-primary signpbtn" id="AddButton" style="display: none;">Add</button>
		              	</div>
		            </div>
		        </div>
	        </form>
    </div>
</div>

@endsection