@php
		if($workflow_document->workflow_type_id == 1)
			$type_para = "Incoming";
		elseif($workflow_document->workflow_type_id == 2)
			$type_para = "Outgoing";
		elseif($workflow_document->workflow_type_id == 3)
			$type_para = "Internal";
		else
			$type_para = "Incoming";
		@endphp
		
		<div class="page-header">
			<h1 class="page-title">{{ __('Approval For Document Workflow') }}</h1>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('Dashboard') }}</a></li>
				<li class="breadcrumb-item"><a href="{{ route('documents', $type_para) }}">{{ __('Document') }}</a></li>
				<li class="breadcrumb-item active">{{ __('Approval For Document Workflow') }}</li>
			</ol>
			<div class="page-header-actions">
				<a class="btn btn-dark" href="{{ route('documents', $type_para) }}">
				<i class="icon wb-arrow-left" aria-hidden="true"></i>
				<span class="hidden-sm-down">{{ __('Back To Document') }}</span>
				</a>
			</div>
		</div>
		
		<style type="text/css">
			.files input {
				outline: 2px dashed #92b0b3;
				padding: 200px 0px 85px 50%;
				text-align: center !important;
				margin: 0;
				width: 100% !important;
			}
			 .files input:focus{     
				outline: 2px dashed #92b0b3;  
			 }
			.files{ position:relative}
			.color input{ background-color:#f1f1f1;}
			.files:before {
				position: absolute;
				bottom: 20px;
				left: 0;  pointer-events: none;
				width: 100%;
				right: 0;
				height: 150px;
				content: " {{ __('Click Or Drop Files To Upload.') }} ";
				display: block;
				margin: 0 auto;
				color: #76838f;
				text-transform: capitalize;
				text-align: center;
				background: white;
				font-size: 24px;
			}
		</style>
		<div class="page-content">
			<div class="row">
				<!-- LEFT SECTION -->
				<div class="col-xxl-12 col-xl-12 col-lg-12">
					<div class="card">
						<div class="card-block">
							@if($errors->any())
								<div class="alert alert-danger">
									@foreach($errors->all() as $error)
										<p>{{ $error }}</p>
									@endforeach
								</div>
							@endif
							<form method="post" action="" id="add-form" class="approved_section" autocomplete="off" enctype="multipart/form-data">
							@csrf
								<div class="row">
									<div class="form-group col-md-{{ $workflow_document->its_reply !=1 ? '6' : '12'}}">
										<label class="form-control-label">{{ __('Is It Approved?') }}</label>										
										<div class="select2-primary">
											<select class="form-control validate[required] is_approved select2" data-plugin="select2"  style="width:100%" name="is_approved">
												<option value = "1">{{ __('Yes') }}</option>
												<option value = "0">{{ __('No') }}</option>
											</select>
										</div>
									</div>
									@if($workflow_document->its_reply!=1)
									<div class="form-group col-md-6">
										<label class="form-control-label" for="approver_id">{{ __('Assign As Approver') }}</label>
										<div class="select2-primary">
											<select class="form-control  validate[required] select2" data-plugin="select2"  style="width:100%" name="approver_id" id="approver_id">
												<option value = ''>-- Select a approver --</option>
												@include('document-workflows.create_document_reviewer_options')
											</select>
										</div>
									</div>
									@endif
								</div>
								<div class="row comment_section /*d-none*/">
									<div class="form-group col-md-6">
										<label class="form-control-label">{{ __('Comments') }}</label>
										<textarea class="form-control validate[required]" name = "comment" maxlength="{{ $setting->comment_text_limit }}">{{ old('comment') ? old('comment') : '' }}</textarea>
									</div>
									<div class="form-group  col-md-6">
										<label class="form-control-label" for="scanned_documents">{{ __('Attach Documents') }}</label>			
										<div class="files" id="files1">
											<input type="file" name="files1" multiple/>
										</div>
										<div class="file-wrap container-fluid">
											<div class="file-list row row-lg" id="scanned_documents_priview"></div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<button type="button" class="btn btn-success" id="uploadBtn"><i class="icon wb-check" aria-hidden="true"></i> {{ __('Save & Close') }}</button>
								</div>
							</form>
						</div>
					</div>
				</div>
				<!-- LEFT SECTION -->
			</div>
		</div>
	  <script type="text/javascript">


		$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
			var fileIdCounter = 0;
			var ext_allow = '{{ $setting->allowed_uploaded_file_type }}';
			this.closest(".files").change(function (evt) {
				var output = [];
				
				for (var i = 0; i < evt.target.files.length; i++) {
					fileIdCounter++;
					var file = evt.target.files[i];
					var fileId = sectionIdentifier + fileIdCounter;
					var Extension = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();

					if (ext_allow.toLowerCase().indexOf(Extension) >= 0)
					{
						filesToUpload.push({
							id: fileId,
							file: file
						});
						var removeLink = '<a class="removeFile" href="javascript:void(0);" data-fileid="' + fileId + '"><i class="icon wb-trash" aria-hidden="true" style="color:red"></i></a>';
						output.push('<div class="col-md-12 mt-10 px-2 removeFileParent"><div class="bg-light p-2">', escape(file.name), "</strong> ", " &nbsp; &nbsp; ", removeLink, '<div class="progress mw-100"><div class="bar" id="bar_'+fileId+'"></div ><div class="percent"  id="percent_'+fileId+'">0%</div ></div></div></div>');
						move_progress_bar('percent_'+fileId, file.size);
					}
					else 
					{
						alert("{{ __('Scanned documents only allows file types of')}}" + " {{ $setting->allowed_uploaded_file_type }}. ");
					}
				};

				$(this).parents().find('.form-group').find("#scanned_documents_priview")
					.append(output.join(""));

				//reset the input to null - nice little chrome bug!
				evt.target.value = null;
			});

			$(this).parents().find('.form-group').find("#scanned_documents_priview").on("click", ".removeFile", function (e) {
				e.preventDefault();
				var fileId = $(this).parent().children("a").data("fileid");

				// and get the index of the match
				for (var i = 0; i < filesToUpload.length; ++i) {
					if (filesToUpload[i].id === fileId)
						filesToUpload.splice(i, 1);
				}
				$(this).parent().remove();
			});

			this.clear = function () {
				for (var i = 0; i < filesToUpload.length; ++i) {
					if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
						filesToUpload.splice(i, 1);
				}

				$(this).parents().find('.form-group').find("#scanned_documents_priview").empty();
			}

			return this;
		};

		(function () {
			var filesToUpload = [];
			var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
			$("#uploadBtn").click(function (e) {
				e.preventDefault();
				if ($("#add-form").validationEngine("validate") == true)
				{
					$(this).attr('disabled','disabled');
					var formData = new FormData($('#add-form')[0]);
					for (var i = 0, len = filesToUpload.length; i < len; i++) {
						formData.append("scanned_documents[]", filesToUpload[i].file);
					}
					
					$.ajax({
						url: "{{ route('store_approval', base64_encode($workflow_document->id)) }}",
						data: formData,
						processData: false,
						contentType: false,
						type: "POST",
						success: function (data) {
							files1Uploader.clear();							
							if(data==true){
								showSuccess("{{ __('Document has been updated successfully') }}");
								setTimeout(function(){
									location.reload();
								}, 20);
							}else{
								showError("{{ __('We are having some problem. Please try later.') }}");
								setTimeout(function(){
									location.reload();
								}, 20);
							}
						}
					});
				}
			});
		})()

	  </script>