<?php 
include_once ("includes/setup.inc.php");

$myID = fetch_postget_val('id',$_POST, $_GET);
$readonly = 0;

$indicator_Query = "SELECT *
					FROM t_pengguna
					WHERE id_pengguna = ?";
$PDO_stmt = $PDO->prepare($indicator_Query);
$PDO_stmt->bindValue(1, $myID, PDO::PARAM_INT);
$PDO_stmt->execute();
$pengguna_List = $PDO_stmt->fetch(PDO::FETCH_ASSOC);
?>

<div class="modal-header">
	<h5 class="modal-title">Muat Naik Dokumen Permohonan Login Pentadbir
	<br>Pemohon : <b><?=$pengguna_List['nama']?></b>
	<br>No KP : <b><?=$pengguna_List['kpbaru']?></b>
	</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeBtn" name="closeBtn" ></button>
</div>
<div class="modal-body">
	<input type="hidden" id="dz_myID" value="<?=$myID?>">
	<form action="javascript:;" class="form-horizontal" name="indicator_form" id="indicator_form">
		<div class="form-body">
			<div class="row">
				<div class="col-md-12">
					<?php
						echo '<div class="col-md-12 form-group row">';
							echo '<div class="col-md-12">
									<div class="dropzone dropzone-default" id="pengguna_dz">
										<div class="dropzone-msg dz-message needsclick">
											<h3 class="dropzone-msg-title">Dokumen Permohonan Login Pentadbir</h3>
											<span class="dropzone-msg-desc">Sila Muat Naik Dokumen Di Sini.</span>
										</div>
									</div>
									*Klik pada ruangan diatas untuk muatnaik dokumen permohonan login pentadbir(hanya format gambar/pdf sahaja)
								</div>';
						echo '</div>';
					?>
				</div>
				
			</div>
		</div>
	</form>
</div>
<div class="modal-footer">
	<?php
		echo '<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>';
	?>
</div>

<script>
var uploadPath = 'upload_pengguna';
var myDZ_pengguna = new Dropzone("div#pengguna_dz", {
	acceptedFiles: "image/jpg,image/jpeg,image/png,image/bmp,application/pdf",
	//maxFiles: 1,
	maxFilesize: 2,//max file size in MB,
	url: "general-photo_upload.php",
	paramName: "uploadfile",
	dictDefaultMessage : '<span style="font-style:italic"><h1>Drop files to upload</h1><h3>(or click)</h3></span>',
	init: function() {
		$.get("general-photo_upload.php", {uploadId:$('#dz_myID').val(), generalName:"", uploadFolder:uploadPath}, function(data) {
			$.each(data, function(key,value){
				var mockFile = { name: value.name, size: value.size };				
				myDZ_pengguna.emit("addedfile", mockFile);
				if(value.name.trim().endsWith(".pdf"))
				{
					myDZ_pengguna.emit("thumbnail", mockFile, uploadPath + "/pdf.jpg");
				}
				else
				{
					myDZ_pengguna.emit("thumbnail", mockFile, uploadPath + "/" + $('#dz_myID').val() + "/" + value.name);
				}
				myDZ_pengguna.emit("complete", mockFile);
				myDZ_pengguna.files.push(mockFile);
			});
		});
	}
});

myDZ_pengguna.on("error", function(file, errorMessage) {
	alert("ERROR " + errorMessage);
	myDZ_pengguna.removeFile(file);
});

myDZ_pengguna.on("success", function(file, photoPath) {
	file.previewElement.querySelector("[data-dz-name]").innerHTML = photoPath;
	console.log(photoPath);
	console.log(photoPath.trim().endsWith(".pdf"));
	if(photoPath.trim().endsWith(".pdf"))
	{
		myDZ_pengguna.emit("thumbnail", file, uploadPath + "/pdf.jpg");
	}
	else
	{
		myDZ_pengguna.emit("thumbnail", file, uploadPath + "/" + $('#dz_myID').val() + "/" + photoPath);
	}
});

myDZ_pengguna.on("sending", function(file, xhr, formData){
	formData.append("uploadId", $('#dz_myID').val());
	//formData.append("generalName", "banner.jpg");
	formData.append("uploadFolder", uploadPath);
	//myDropzone.removeAllFiles(); //remove all 1st
});
	
myDZ_pengguna.on("dictRemoveFileConfirmation", function(file, xhr, formData){
	formData.append("uploadId", $('#dz_myID').val());
});

myDZ_pengguna.on("addedfile", function(file) {
	var deleted = false;
	if(deleted == false)
	{
		file.previewElement.addEventListener("click", function() {
			var filesrc = uploadPath + "/" + $('#dz_myID').val() + "/" + file.previewElement.querySelector('[data-dz-name]').innerHTML.trim();
			if(filesrc.endsWith(".pdf"))
			{
				window.open(filesrc);
			}
			else
			{
				loadMyModal('general-photo_view.php?src="' + filesrc + '"', '#pengguna-modal');
			}
		});
		
		// Create the remove button
		var removeButton = Dropzone.createElement('<a class="btn btn-xs red"><i class="fa fa-trash-o"></i>Remove Image</a>');

		// Listen to the click event
		removeButton.addEventListener("click", function(e) {
			e.preventDefault();
			e.stopPropagation();

			var deleteFileName = file.previewElement.querySelector('[data-dz-name]').innerHTML;
			x = confirm("Are you sure to delete " + deleteFileName + "?");
			if(!x)  return false;
			var name = deleteFileName;                
			$.ajax({
				type: "POST",
				url: "general-photo_delete.php",
				data: "uploadId=" + $('#dz_myID').val() + "&filename="+name+ "&uploadFolder=" + uploadPath,
				dataType: "html"
			});
			myDZ_pengguna.removeFile(file);
		});

		file.previewElement.appendChild(removeButton);
	}
	
});
</script>