@extends('oxygen::layouts.master-dashboard')

@section ('content')
	{{ lotus()->pageHeadline($pageTitle) }}

	{{ lotus()->breadcrumbs([
		['Dashboard', route('dashboard')],
		['Test Audio & Video', route('manage.testvideo.index')],
		[$pageTitle, null, true]
	]) }}

	<form action="{{ entity_resource_path() }}" method="post" class="form-horizontal" enctype="multipart/form-data">
		{{ csrf_field() }}
		{{ method_field('put') }}

		<div class="row justify-content-center">
			<div class="col-md-10">

				<div class="form-group row mx-auto">
					<div class="col-md-3 text-left text-md-right">
						<label for="title">Video or Audio Title</label>
					</div>              
					<div class="col-md-7">
						<input type="text" value="{{ $testvideo->title }}" name="title" class="form-control">
					</div>
				</div>				

				<div class="form-group row mx-auto">
					<div class="col-md-3 text-left text-md-right">
						<label for="video_upload">Video</label>
					</div>
					<div class="col-md-7">
						<input type="file" name="video_upload" accept="video/*" id="VideoUploader" class="form-control" onchange="loadVideo(event)">
						<br><br>
						<video id="video_output" controls style="max-width: 100%">
                        @if (count($testvideo->files) > 0)
							<source src="{{ $testvideo->files[0]->file_url }}" type="{{ $testvideo->files[0]->file_mime_type }}">
                        @endif
						</video>
					</div>
				</div>   
				
				<div class="form-group row mx-auto">
				<div class="col-md-3 text-left text-md-right">	
				<label>OR</label>
				</div></div>
                
                <div class="form-group row mx-auto">
					<div class="col-md-3 text-left text-md-right">
						<label for="audio_upload">Audio</label>
					</div>
					<div class="col-md-7">
						<input type="file" name="audio_upload" accept="audio/*" id="AudioUploader" class="form-control" onchange="loadAudio(event)">
						<br><br>
						<audio id="audio_output" controls style="max-width: 100%">
                        @if (count($testvideo->files) > 0)
							<source src="{{ $testvideo->files[0]->file_url }}" type="{{ $testvideo->files[0]->file_mime_type }}">
                        @endif
                       </audio>
					</div>
				</div>

				<div class="form-group row justify-content-center mt-4">
					<div class="col-md-2">
						<div class="text-center p-t-32">
							<a href="{{ route('manage.testvideo.index') }}" class="btn btn-secondary pull-right">Cancel</a>
							<button type="submit" class="btn btn-success">Update</button>
						</div>
					</div>
				</div>

			</div>
		</div>
	</form>

	<script>
		var loadVideo = function (event) {
			var videoOutput = document.getElementById('video_output');
			videoOutput.src = URL.createObjectURL(event.target.files[0]);
			videoOutput.removeAttribute('hidden');
		};

        var loadAudio = function (event) {
			var audioOutput = document.getElementById('audio_output');
			audioOutput.src = URL.createObjectURL(event.target.files[0]);
			audioOutput.removeAttribute('hidden');
		};
	</script>

@stop