@extends('layouts.master')

@section('title', isset($event) ? $event['result']['name'] : \Lang::get('article.article'))

@section('css')
<link href="{{ URL::asset('public/css/fine-uploader.min.css') }}" rel="stylesheet">
<style type="text/css">
	.qq-thumbnail-selector{
		width: 200px;
	}
	.uploaded-message{
		display: none;
	}
</style>
@stop

@section('content')
@if($data['status'] == 200)
<div class="container">
	<h2>Facial Recognition Check In</h2>
	<hr>
	<div class="form-group">
		<center><h4>{{ $data['result']['user_name'] }}</h4></center>

		@if($facial_message['status'] == 200)
		@foreach($facial_message['result'] as $message_key => $message_value)
		{!! $message_value['value'] !!}
		@endforeach
		@endif

		<script type="text/template" id="image_container">
			<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
				<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
					<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
				</div>

				<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
					<span class="qq-upload-drop-area-text-selector"></span>
				</div>

				<div class="form-group">
					<div class="qq-upload-button-selector btn btn-primary">
						<div>Select Photo</div>
					</div>
					<button type="button" id="trigger-upload" class="btn btn-success">
						<i class="icon-upload icon-white"></i> Upload
					</button>
				</div>
				<span class="qq-drop-processing-selector qq-drop-processing">
					<span>Processing dropped files...</span>
					<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
				</span>

				<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
					<li>
						<div class="qq-progress-bar-container-selector">
							<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
						</div>

						<div class="form-group">
							<center><img class="qq-thumbnail-selector"></center>
							<hr>

							<center>
								<span class="qq-upload-file-selector qq-upload-file"></span>
								<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
								<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
								<span class="qq-upload-size-selector qq-upload-size"></span>
							</center>
							<input name="file" tabindex="0" type="hidden">

							<hr>

							<center><button type="button" class="qq-upload-cancel-selector btn btn-warning image-button">Cancel</button></center>
							<center><button type="button" class="qq-upload-retry-selector btn btn-success image-button">Retry</button></center>
							<center class="uploaded-message"><label>Photo has been uploaded</label><br><br></center>
							<center><span class="qq-upload-spinner-selector qq-upload-spinner"></span><span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span></center>
						</div>
					</li>
				</ul>

				<dialog class="qq-alert-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">Close</button>
					</div>
				</dialog>

				<dialog class="qq-confirm-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">No</button>
						<button type="button" class="qq-ok-button-selector">Yes</button>
					</div>
				</dialog>

				<dialog class="qq-prompt-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<input type="text">
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">Cancel</button>
						<button type="button" class="qq-ok-button-selector">Ok</button>
					</div>
				</dialog>
			</div>
		</script>
		<div id="fine-uploader-trigger"></div>

		@if($event['result']['is_e_badge'] == 1)
			@if(isset($data['preload']))
			<div align="center" style="margin: 20px;"> 
				<a id="e_badge" href="{{ $GLOBALS['sso_onsite'] }}/e_badge/{{ $data['result']['sso_user_code'] }}" class="btn btn-success"><i class="far fa-file-pdf"></i> Download E-Badge</a>
			</div>
			@else
			<div align="center" style="margin: 20px;"> 
				<a id="e_badge" style="display: none;" href="{{ $GLOBALS['sso_onsite'] }}/e_badge/{{ $data['result']['sso_user_code'] }}" class="btn btn-success"><i class="far fa-file-pdf"></i> Download E-Badge</a>
			</div>
			@endif
		@endif
	</div>
</div>
@else
<div class="container" style="height: 45vh">
	<h2 class="text-center">Your photo and e-badge has been successfully uploaded and printed.</h2>
</div>
@endif
@stop
@section('javascript')
<script type="text/javascript" src="{{ URL::asset('public/js/fine-uploader.min.js') }}"></script>
@if($data['status'] == 200)
<script type="text/javascript">
	$(window).on('load', function(){
		@if(isset($data))
		var list = {!! isset($data['preload']) ? json_encode($data['preload']) : '[]' !!};
		uploader.addInitialFiles(list);

		for (var key in list) {
			var target = $(uploader.getItemByFileId(key));
			target.find('.uploaded-message').show();
			target.find('input[name=file]').val(list[key]['thumbnailUrl']);
		}
		@endif
	});

	var file_select_item = 0;
	var uploader = new qq.FineUploader({
		element: $('#fine-uploader-trigger')[0],
		template: 'image_container',
		request: {
			endpoint: '/payment/bankdraft/file/create',
			inputName: 'storage',
			filenameParam: 'file_name',
			totalFileSizeName: 'file_size',
			params: {
				storage_type: 8,
				ids: "{{ $data['result']['id'] }}",
				_token: "{{ csrf_token() }}"
			}
		},
		multiple: false,
		deleteFile: {
			enabled: true,
			method: "DELETE",
			forceConfirm: true,
			endpoint: "/payment/bankdraft/file/delete",
			params: {
				type: 8,
				ids: "{{ $data['result']['id'] }}",
				_token: "{{ csrf_token() }}"
			}
		},
		validation: {
			itemLimit: 1,
			allowedExtensions: ['jpeg', 'jpg', 'png', 'svg', 'ico'],
			sizeLimit: (3 * 1048576)
		},
		scaling: {
			restoreExif: false,
			sendOriginal: false,
			sizes: [
				{name: "", maxSize: 1000},
			]
		},
		thumbnails: {
			placeholders: {
				waitingPath: '{{ URL::asset('public/images/fine-uploader/waiting-generic.png') }}',
				notAvailablePath: '{{ URL::asset('public/images/fine-uploader/not_available-generic.png') }}'
			}
		},

		autoUpload: false,
		callbacks: {
			onComplete: function(id, name, response, xhr){
				var target = $(uploader.getItemByFileId(id));
				if(response.status == 200){
					uploader.setUuid(id, response.result['code']);
					target.find('input[name=file]').val(response.result['url']);
					target.find('.qq-thumbnail-selector').attr('src', response.result['url']);
					target.find('.uploaded-message').show();
					notification("Photo has uploaded sucessfully", "Success");

					$('#e_badge').show();
				}else{
					notification("[error_perform]", "Danger");
				}
			}
		}
	});

	$('#trigger-upload').click(function() {
		uploader.uploadStoredFiles();
	});
</script>
@endif
@stop