@extends('fullWidthLayout')
@push('css')
<link rel="stylesheet" href="/assets/plugins/custom/cropper/cropper.bundle.css" />
<style>
	#cropper-preview-sign {
		position: relative;
	}

	#cropper-preview-sign img {
		display: block;
		width: 100%;
		height: auto;
	}

	#cropper-preview-sign:hover img {
		opacity: 0.3;
	}

	#cropper-preview-sign:hover .text-overlay {
		opacity: 1;
		cursor: pointer;
	}

	.text-overlay {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}
</style>
@endpush
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.11/dist/interact.min.js"></script>
<div class="split">
	<div id="split-0">
		<div class="row m-0 page-title-wrapper d-md-flex align-items-md-center">
			<div class="col-md-12">
				<div class="title py-2">
					<h2 class="mb-0">Pages</h2>				
				</div>
			</div>
		</div>
		<div class="p-5 step-title">
			<div id="checkboxList" class="mt-3">
			</div>
		</div>
	</div>
	<div id="split-1" style="width: auto !important;">
		<div class="row m-0 page-title-wrapper d-md-flex align-items-md-center sticky-top">
			<div class="col-md-12">
				<div class="title px-1 d-flex justify-content-between align-items-center">
					<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
						<div class="btn-group" role="group" aria-label="First group">
							@if(empty($file_path))
							<label for="fileUpload" class="btn btn-primary  btn-icon btn-square mb-0"><i class="fas fa-upload" data-toggle="tooltip" title="Load Pdf"></i></label>
							@endif
							<input type="file" id="fileUpload" accept="application/pdf" class="d-none" />
							<button type="button" class="btn btn-success btn-icon btn-square mb-0 d-none" id="addSignature" data-toggle="tooltip" title="Add New Signature"><i class="fas fa-plus"></i></button>
							<button type="button" class="btn btn-warning btn-square mb-0 d-none" id="getSignedDocument" data-toggle="tooltip" title="Request to sign"><i class="fas fa-signature"></i> Request to sign</button>
							<button type="button" class="btn btn-success btn-square mb-0 d-none" id="setSignatories" data-toggle="tooltip" title="Set Signature Position"><i class="fas fa-arrows-alt"></i> Set Signature Position</button>
							@if(!empty($return_url))
							<a href="{{$return_url}}" class="btn btn-info btn-square mb-0" data-toggle="tooltip" title="Back to Main Application"><i class="fas fa-reply"></i> Back to Main Application</a>
							@endif
						</div>
					</div>
					<div id="pdf-meta" class="mb-0">
						<div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div>
						</div>
					</div>
					<div class="btn-group" role="group" aria-label="Basic example">
						<button type="button" id="pdf-prev" class="btn btn-info btn-square" data-toggle="tooltip" title="Previous"><i class="fas fa-angle-left"></i></button>
						<button type="button" id="pdf-next" class="btn btn-info btn-square" data-toggle="tooltip" title="Next"><i class="fas fa-angle-right"></i></button>
					</div>
				</div>
			</div>
		</div>
		<div class="p-5 d-none" id="pdf-main-container-with-header">
			<div class="d-flex align-item-center justify-content-between mt-2 mb-2">
				<div>
					
				</div>
				<div>
					
				</div>
			</div>
			<div class="text-center">
				<div id="pdf-main-container">
					<div id="pdf-loader">Loading document ...</div>
					<div id="pdf-contents" style="padding-bottom: 10px;">
						<div class="position-relative pdf-viewer-wrapper">
							<canvas id="pdf-canvas" width="757"></canvas>
							<div class="signature-wrapper">
								<!-- <div class="position-relative d-inline-block single-signature-main-wrapper"><div class="single-signature-wrapper" dataindex="0" style="transform: translate(0px, 0px);"><span class="name">demo--1</span><br><span class="designation">demo designation</span></div><span class="clossButton">X</span></div> -->
							</div>
						</div>

						<div id="page-loader">Loading page ...</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="split-2">
		<div class="row m-0 page-title-wrapper d-md-flex align-items-md-center">
			<div class="col-md-12">
				<div class="title py-2">
					<h2 class="mb-0">Signatory List</h2>				
				</div>
			</div>
		</div>
		<div class="p-5">
			<div class="input-from-wrapper d-none">
				<div class="form-group mb-3">
					<div class="" style="height:auto;width:100%;">
						<div id="cropper-preview-sign" data-toggle="modal" data-target="#kt_chat_modal">
							<img src="" style="width:100%;" />
							<div class="text-overlay">
								<div id="cropper-change-sign">Change Signature</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group mb-3">
					<label for="officerName">Name</label>
					<input type="text" class="form-control rounded-0" name="officer_name" id="officerName" placeholder="Officer Name">
				</div>
				<div class="form-group mb-3">
					<label for="officerDesignation">Designation</label>
					<input type="text" class="form-control rounded-0" name="officer_designation" id="officerDesignation" placeholder="Officer Designation">
				</div>
				<hr />
				<div class="radio">
					<label><input type="radio" name="optradio" value="all_pages" checked> All Pages</label>
				</div>
				<div class="radio">
					<label><input type="radio" name="optradio" value="selected_pages"> Pages</label>
				</div>
				<div class="form-group">
					<input type="text" class="form-control rounded-0" id="selectedPages" placeholder="1,2,3" />
				</div>
				<button class="btn btn-success btn-square float-right">Set Signature</button>
			</div>

			<div style="padding: 10px 0;">
				<h5>Select signatory from the list</h5>
				<ul style="list-style: none;padding-left:5px;">
				@foreach ($signatories as $signatory)
					<li @if(isset($signatory['is_signed']) && $signatory['is_signed'] == '1') class="text-success signatory" @else class="addSignature signatory" style="cursor:pointer;" @endif data-name="{{ $signatory['name'] }}" data-designation="{{ $signatory['designation'] }}"
						@if(isset($signatory['positionX'])) data-position_x="{{ $signatory['positionX'] }}" @endif
						@if(isset($signatory['positionY'])) data-position_y="{{ $signatory['positionY'] }}" @endif
						@if(isset($signatory['height'])) data-height="{{ $signatory['height'] }}" @endif
						@if(isset($signatory['width'])) data-width="{{ $signatory['width'] }}" @endif
						@if(isset($signatory['index'])) data-index="{{ $signatory['index'] }}" @endif
						@if(isset($signatory['user_id'])) data-user_id="{{ $signatory['user_id'] }}" @endif
						@if(isset($signatory['is_signed']) && $signatory['is_signed'] == '1') data-is_signed="{{ $signatory['is_signed'] }}" @endif
						@if(isset($signatory['current_user'])) data-current-signatory="{{ $signatory['current_user'] }}" @endif
						>
						@if(isset($signatory['is_signed']) && $signatory['is_signed'] == '1') 
							<span class="text-success"><i class="fa fa-user-check text-success" style="width: 25px;"></i> {{ $signatory['name'].', '.$signatory['designation'] }}</span>
						@else 
							@if(isset($signatory['current_user']))
								<span class="text-info"><i class="fa fa-user text-info" style="width: 25px;"></i> {{ $signatory['name'].', '.$signatory['designation'] }}</span>
							@else
								<span class=""><i class="fa fa-user" style="width: 25px;"></i> {{ $signatory['name'].', '.$signatory['designation'] }}</span>
							@endif
						@endif
					</li>
				@endforeach
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="kt_chat_modal" role="dialog" data-backdrop="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<!--begin::Card-->
			<div class="card card-custom">
				<!--begin::Header-->
				<div class="card-header align-items-center px-4 py-3">
					<div class="text-center flex-grow-1">
						<div class="text-dark-75 font-weight-bold font-size-h5">Upload Signature Image</div>
					</div>
					<div class="text-right flex-grow-1">
						<button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md" data-dismiss="modal">
							<i class="ki ki-close icon-1x"></i>
						</button>
					</div>
				</div>
				<!--end::Header-->
				<!--begin::Body-->
				<div class="card-body">
					<div>
						<img src="/assets/images/signatures.jpg" id="image" />
						<label for="officerSign" class="btn btn-sm btn-info btn-square mt-2">Upload Signature</label>
						<input type="file" class="form-control d-none" id="officerSign" accept="image/*" />
					</div>
				</div>
				<!--end::Body-->
				<!--begin::Footer-->
				<div class="card-footer align-items-center">
					<div class="d-flex align-items-center justify-content-between mt-5">
						<div>
							<button type="button" class="btn btn-primary btn-md text-uppercase font-weight-bold chat-send py-2 px-6 btn-square" data-dismiss="modal" id="btnCrop">Crop</button>
						</div>
					</div>
				</div>
				<!--end::Footer-->
			</div>
			<!--end::Card-->
		</div>
	</div>
</div>
<div class="modal fade" id="signedDocument">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<div class="modal-title">Signed Document</div>
				<div class="float-right">@if(!empty($return_url)) <a href="#" id="returnUrl" class="btn btn-sm btn-primary">Return to main application</a> @endif</div>
			</div>
			<div class="modal-body">
				<h2 class="text-success font-weight-boldest text-center">The document has been signed successfully</h2>
				<iframe src="" style="width:100%;height:calc(100vh - 100px)"></iframe>
			</div>
		</div>
	</div>
</div>
@endsection

@push('js')
<script src="/assets/plugins/custom/cropper/cropper.bundle.js"></script>
<script>
	file_content = '';
	$(document).on('change', '#fileUpload', function() {
		let elementMainDiv = $(this).closest('.items');
		const file = this.files[0];
		if (file.type == 'application/pdf') {
			const reader = new FileReader();
			var filename = file.name;

			reader.addEventListener("load", function() {
				file_content = URL.createObjectURL(file);
				showPDF(file_content);

				blobToBase64(file);
				setTimeout(function() {
					blob_file_content = objectData._result;
				}, 100);
				$(".addSignature").removeClass('d-none');
				$("#getSignedDocument").removeClass('d-none');
				$("#pdf-main-container-with-header").removeClass('d-none');
			}, false);

			if (file) {
				reader.readAsDataURL(file);
			}
		} else {
			toastr.error('File type is not allow');
		}
	});
	$(document).on('change', '#officerSign', function() {
		let elementMainDiv = $(this).closest('.items');
		const file = this.files[0];

		if (file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png') {
			const reader = new FileReader();
			var filename = file.name;

			reader.addEventListener("load", function() {
				openNewImageSign(URL.createObjectURL(file));

				blobToBase64(file);
				setTimeout(function() {
					blob_file_content = objectData._result;
				}, 100);
			}, false);

			if (file) {
				reader.readAsDataURL(file);
			}
		} else {
			toastr.error('File type is not allow');
		}
	});
	cropper = '';
	var options = {};
	$(document).ready(function() {
		options = {
			aspectRatio: 300 / 80,
			movable: true,
			zoomable: true,
			rotatable: true,
			scalable: true,
			minContainerWidth: 400,
			minContainerHeight: 400,
			crop: function(event) {
				var croppedImage = cropper.getCroppedCanvas({
					width: 300,
					height: 80
				}).toDataURL('image/jpeg');

				var lg = $('#cropper-preview-sign img');
				lg.attr('src', croppedImage);

				boxArray[currentIndex].signatureImage = croppedImage;
				$(".single-signature-main-wrapper[dataindex="+currentIndex+"] .sign img").attr('src', croppedImage);
			},
		};

		loadSignaturePosition();
    });
	$(document).on('click', '#cropper-change-sign', function() {
		var image = document.getElementById('image');
        if (cropper != '') {
            cropper.destroy();
        }
		cropper = new Cropper(image, options);
	});

	function openNewImageSign(newUrl = '') {
		if (newUrl != '') {
			cropper.replace(newUrl);
		}
	}

	$(document).on('keyup', '#selectedPages', function() {
		$(".page_selections:checked").prop('checked', false);
		if ($(this).val() != '') {
			$("[name=optradio][value=selected_pages]").prop('checked', true);
			let pages = $(this).val();
			pages = pages.replace(/,\s*$/, "");;
			pages = pages.split(',');
			$.each(pages, function(k, v) {
				if ($(".page_selections[value='" + v + "']").length > 0) {
					$(".page_selections[value='" + v + "']").prop('checked', true);
				} else {
					toastr.error('You entered wrong page number, please check again');
				}
			});
		} else {
			$("[name=optradio][value=all_pages]").prop('checked', true);
		}
	});
	$(document).on('click', '#btnCrop', function() {
		if (cropper != '') {
            cropper.destroy();
        }
    });
	$(document).on('click', '.page_selections', function() {
		let pages = [];
		$.each($(".page_selections:checked"), function(k, v) {
			pages.push($(v).val());
		});
		if (pages.length > 0) {
			$("[name=optradio][value=selected_pages]").prop('checked', true);
			$("#selectedPages").val(pages.join(','));
		} else {
			$("[name=optradio][value=all_pages]").prop('checked', true);
			$("#selectedPages").val('');
		}
	})
	$(document).on('click', '#getSignedDocument', function() {
		getSignedDocument(true);
	})
	$(document).on('click', '#setSignatories', function() {
		getSignedDocument(false);
	})
	function getSignedDocument(requestForSign) {
		let addedSignatories = [];
		let allSignatories = [];
		$.each($(".signatory"), function(k,v){
			if (typeof $(v).attr('data-index') != 'undefined') {
				let boxArraySingle = boxArray[$(v).data('index')];
				if (typeof $(v).attr('data-current-signatory') != 'undefined' && $(v).attr('data-current-signatory') == 1) {
					addedSignatories.push({
						"name": boxArraySingle.name,
						"designation": boxArraySingle.designation,
						"positionX": boxArraySingle.positionX,
						"positionY": boxArraySingle.positionY,
						"height": boxArraySingle.height,
						"width": boxArraySingle.width,
						"pages": boxArraySingle.pages,
						"user_id": boxArraySingle.userId,
						"signatureImage": boxArraySingle.signatureImage
					})
					if (requestForSign) {
						allSignatories.push({
							"index": $(v).data('index'),
							"name": boxArraySingle.name,
							"designation": boxArraySingle.designation,
							"positionX": boxArraySingle.positionX,
							"positionY": boxArraySingle.positionY,
							"height": boxArraySingle.height,
							"width": boxArraySingle.width,
							"pages": boxArraySingle.pages,
							"user_id": boxArraySingle.userId,
							"signatureImage": boxArraySingle.signatureImage,
							"is_signed": "1"
						});
					} else {
						allSignatories.push({
							"index": $(v).data('index'),
							"name": boxArraySingle.name,
							"designation": boxArraySingle.designation,
							"positionX": boxArraySingle.positionX,
							"positionY": boxArraySingle.positionY,
							"height": boxArraySingle.height,
							"width": boxArraySingle.width,
							"pages": boxArraySingle.pages,
							"user_id": boxArraySingle.userId,
							"signatureImage": boxArraySingle.signatureImage,
						});
					}
				} else {
					allSignatories.push({
						"index": $(v).data('index'),
						"name": boxArraySingle.name,
						"designation": boxArraySingle.designation,
						"positionX": boxArraySingle.positionX,
						"positionY": boxArraySingle.positionY,
						"height": boxArraySingle.height,
						"width": boxArraySingle.width,
						"pages": boxArraySingle.pages,
						"signatureImage": boxArraySingle.signatureImage,
						"user_id": boxArraySingle.userId,
						"is_signed": boxArraySingle.isSigned,
					});
				}
			} else {
				allSignatories.push({
					"name": $(v).data('name'),
					"designation": $(v).data('designation'),
					"user_id": $(v).data('user_id')
				});
			}
		})
		console.log(addedSignatories);
		console.log(allSignatories);
		returnUrl = '';
		@if(!empty($return_url)) 
			returnUrl = "{{$return_url}}?origin_file={{$file_path_origin}}&signatory="+btoa(JSON.stringify(allSignatories));
		@endif


		if (requestForSign) {
			if (passphrase = prompt('Enter your passphrase:')) {
				$.ajax({
					url: '{{ url()->full() }}',
					method: 'post',
					data: {_token:'{{ csrf_token() }}', sign_data:addedSignatories, content:blob_file_content, passphrase},
					success: function(response) {
						if (response.status == 'success') {
							$("#signedDocument").find('iframe').attr('src', response.data);
							
							@if(!empty($return_url)) 
								returnUrl = "{{$return_url}}?origin_file={{$file_path_origin}}&signed_file="+btoa(response.data)+"&signatory="+btoa(JSON.stringify(allSignatories));
								$("#returnUrl").attr('href', returnUrl);
							@endif
							$("#signedDocument").modal('show');

						} else {
							alert('Failed to sign. '+response.message);
						}
					}
				})
			}
		} else {
			window.location.href = returnUrl;
		}
	}
	function blobToBase64(blob) {
		objectData = new Promise((resolve) => {
			const reader = new FileReader();
			reader.onloadend = () => resolve(reader.result);
			reader.readAsDataURL(blob);
		});
		// console.log(objectData);
		// console.log(objectData._result);
		// console.log(objectData._result);
		return objectData._result;
	}
	function blobToBase64_2(blob) {
		var reader = new FileReader();
		reader.readAsDataURL(blob); 
		base64data = '';
		reader.onloadend = function() {
			var base64data = reader.result;
		}
		return base64data;
	}
	function loadSignaturePosition() {
		$(".signatory[data-index]").trigger('click');
	}
</script>
@if(!empty($file_path))
<script>
	$(document).ready(function() {
		file_content = '';
		blob_file_content = '';
		var xhr = new XMLHttpRequest();
		xhr.open('GET', '{{ url($file_path) }}', true);
		xhr.responseType = 'blob';

		xhr.onload = function(e) {
		if (this.status == 200) {
			// Note: .response instead of .responseText
			var blob = new Blob([this.response], {type: 'application/pdf'}),
				// url = URL.createObjectURL(blob),
				file_content = URL.createObjectURL(blob);
				showPDF(file_content);

				blobToBase64(blob);
				setTimeout(function() {
					blob_file_content = objectData._result;
				}, 100);
				$(".addSignature").removeClass('d-none');
				$("#getSignedDocument").removeClass('d-none');
				$("#pdf-main-container-with-header").removeClass('d-none');      
		}
		};

		xhr.send();
	})
</script>
@endif
@endpush