@extends('layouts.master')

@section('title', \Lang::get('payment.bank_draft'))

@section('css')
<link href="{{ URL::asset('public/css/fine-uploader.min.css') }}" rel="stylesheet">
@stop

@section('content')
<div class="container" style="margin-top: 2%; margin-bottom:2%;">
	<div class="text-xs-center">
		<h1 class="display-3">@lang('global.thank_you')!</h1>
		<p class="lead"><strong>@lang('payment.refer_information_and_proceed_payment').</strong></p>
		<hr>
		<div class="panel panel-default">
			<div class="panel-body">{!! $data['description'] !!}</div>
		</div>
		<p>
			@lang('payment.upload_documents_for_verify') <span class="label label-warning">@lang('payment.recommended_img_type')</span>
		</p>
		<script type="text/template" id="image_container">
			<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="@lang('payment.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>@lang('payment.files_select')</div>
					</div>
					<button type="button" id="trigger-upload" class="btn btn-success">
						<i class="icon-upload icon-white"></i> @lang('payment.upload')
					</button>
				</div>
				<span class="qq-drop-processing-selector qq-drop-processing">
					<span>@lang('payment.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">
							<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
							<img class="qq-thumbnail-selector">
							{{-- <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale> --}}
							<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>
							<input name="file[]" tabindex="0" type="hidden">

							<button type="button" class="qq-upload-cancel-selector btn btn-warning pull-right image-button">Cancel</button>
							<button type="button" class="qq-upload-retry-selector btn btn-success pull-right image-button">Retry</button>
							<button type="button" class="qq-upload-delete-selector btn btn-danger pull-right image-button">Delete</button>
							<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
						</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">@lang('global.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">@lang('global.no')</button>
						<button type="button" class="qq-ok-button-selector">@lang('global.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">@lang('global.cancel')</button>
						<button type="button" class="qq-ok-button-selector">@lang('global.ok')</button>
					</div>
				</dialog>
			</div>
		</script>
		<div id="fine-uploader-trigger"></div>
		<br/>
		<div class="form-group">
			<a href="{{ url()->previous() }}" class="btn btn-default btn-sm">@lang('global.back')</a>
			<a href="/dashboard" class="btn btn-success btn-sm">@lang('layout.my_dashboard')</a>
		</div>
	</div>
</div>
@stop

@section('javascript')
<script type="text/javascript" src="{{ URL::asset('public/js/fine-uploader.min.js') }}"></script>
<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('input[name^=file]').val(list[key]['uuid']);
			target.find('.qq-upload-file').html('<a href="'+ list[key]['original_url'] +'" target="_blank">'+ target.find('.qq-upload-file').html()+'</a>');
		}
		@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: 4,
				ids: "{{ isset($data) ? $data['invoice']['id'] : null }}",
				_token: "{{ csrf_token() }}"
			}
		},
		deleteFile: {
			enabled: true,
			forceConfirm: true,
			endpoint: "/payment/bankdraft/file/delete",
			params: {
				type: 4,
				ids: "{{ isset($data) ? $data['invoice']['id'] : null }}",
				_token: "{{ csrf_token() }}"
			}
		},
		validation: {
			allowedExtensions: ['jpeg', 'jpg', 'png', 'pdf'],
			sizeLimit: (5 * 1048576)
		},
		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: {
			onSubmit: function(id, name){
				file_select_item++;
				$('.qq-upload-button-selector div').html('Files Select <span class="badge">'+file_select_item+'</span>');
			},
			onCancel: function(id, name){
				file_select_item--;
				if(file_select_item == 0){
					$('.qq-upload-button-selector div').html('Files Select');
				}else{
					$('.qq-upload-button-selector div').html('Files Select <span class="badge">'+file_select_item+'</span>');
				}
			},
			onComplete: function(id, name, response, xhr){
				file_select_item = 0;
				$('.qq-upload-button-selector div').html('Files Select');
				var target = $(uploader.getItemByFileId(id));
				if(response.status == 200){
					uploader.setUuid(id, response.result['code']);
					target.find('input[name^=file]').val(response.result['code']);
					target.find('.qq-upload-file').html('<a href="'+response.result['original_url']+'" target="_blank">'+target.find('.qq-upload-file').html()+'</a>');
					target.find('.qq-thumbnail-selector').attr('src', response.result['url']);
				}
			}
		}
	});

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