<script>
$('document').ready(function(){
	showHidePhotoViewBtn();
});
function loadPhotoFile(){
	$('#upload_image').trigger('click');
}
function showHidePhotoViewBtn(){
	var photoFile = $('#photo_file').val();
	if(photoFile.trim()!=''){
		$('#view_photo_file_btn').show();
	}else{
		$('#view_photo_file_btn').hide();
	}
}
function viewPhotoFile(){
	var photoFile = $('#photo_file').val();
	window.open('<?=base_url("public/uploads")?>/'+photoFile);
}
$(document).ready(function(){
	var $modal = $('#modal');

	var image = document.getElementById('sample_image');

	var cropper;

	$('#upload_image').change(function(event){
		var files = event.target.files;

		var done = function(url){
			image.src = url;
			$modal.modal('show');
		};

		if(files && files.length > 0)
		{
			reader = new FileReader();
			reader.onload = function(event)
			{
				done(reader.result);
			};
			reader.readAsDataURL(files[0]);
		}
	});

	$modal.on('shown.bs.modal', function() {
		cropper = new Cropper(image, {
			aspectRatio: 1,
			viewMode: 3,
			preview:'.preview'
		});
	}).on('hidden.bs.modal', function(){
		cropper.destroy();
   		cropper = null;
	});

	$('#crop').click(function(){
		canvas = cropper.getCroppedCanvas({
			width:400,
			height:400
		});

		canvas.toBlob(function(blob){
			url = URL.createObjectURL(blob);
			var reader = new FileReader();
			reader.readAsDataURL(blob);
			reader.onloadend = function(){
				var base64data = reader.result;
				$.ajax({
					url:'<?=get_admin_path("video_gallery/upload_image")?>',
					method:'POST',
					data:{image:base64data, delete_image: $('#photo_file').val(), prev_photo_file: $('#prev_photo_file').val(), <?=csrf_token()?>: '<?=csrf_hash()?>'},
					success:function(data)
					{
						$('#photo_file').val(data);
						$modal.modal('hide');
						if(data!=''){
							showHidePhotoViewBtn();
						}
					}
				});
			};
		});
	});	
});
</script>