<!-- Modal -->
<div class="modal fade" id="previewAndSignDocumentModal" tabindex="-1" role="dialog" aria-labelledby="previewAndSignDocumentModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="previewAndSignDocumentModalLabel">@{{ company }} - @{{ title }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<i class="fas fa-times text-white"></i>
				</button>
			</div>
			<div class="modal-body">
				<iframe :src="pdfUrl" width="100%" height="450px" frameborder="0"></iframe>
				<div class="pt-2 border-top text-right">
					<button v-if="!processing" type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Cancel</button>
					<button v-if="!processing" type="button" class="btn btn-sm btn-info" @click="counterSignDocument"><i class="fas fa-signature"></i> Sign</button>
					<button v-else type="button" class="btn btn-sm btn-info">Saving...</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	(function() {
		function init() {
			window.previewAndSignDocumentModal = new Vue({
				el: '#previewAndSignDocumentModal',
				data: {
					modal: null,
					company: null,
					title: null,
					documentUid: null,
					signature: null,
					pdfUrl: null,
					processing: false
				},
				delimiters: ['@{{', '}}'],
				methods: {
					initOnClickSign: function() {
						var self = this;
						$('[preview-and-sign]').click(function() {
							self.documentUid = $(this).data('uid');
							self.company = $(this).data('company');
							self.title = $(this).data('title');
							self.signature = $(this).data('signature');
							self.pdfUrl = $(this).data('pdf');
							self.modal.modal('show');
						});
					},
					counterSignDocument: function() {
						var self = this;

						var data = {
							uid: self.documentUid,
							hrmProSignature: self.signature
						};
						self.processing = true;
						$.post('/api/companyProDocument/counterSignAsHrmPro', data, function(response) {
							self.processing = false;
							if (response.success) {
								toastr.success('Successfully signed!');
								self.modal.modal('hide');
								fastReload();
							} else {
								toastr.error(response.message);
							}
						}, 'json');
					},
					init: function() {
						var self = this;
						this.modal = $('#previewAndSignDocumentModal');
						this.modal.on('hidden.bs.modal', function() {
							self.company = null;
							self.title = null;
							self.documentUid = null;
							self.signature = null;
							self.pdfUrl = null;
						});
						this.initOnClickSign();
					}
				},
				mounted: function() {
					this.init();
				}
			});
		}
		addMCInitializer('previewAndSignDocumentModal', init, '#previewAndSignDocumentModal');
	})();
</script>
