<?xml version="1.0" encoding="utf-8"?>
<modification>
	<name>Drag and Drop Product Images By Sainent</name>
	<code>drag_and_drop_images_sainent_oc3x_ver_1_2</code>
	<version>1.2</version>
	<author>Sainent eBusiness</author>
	<link>http://www.sainent.com/</link>
 	<!-- Upload Image Drag & Drop -->
	<file path="admin/controller/catalog/product.php">
		<operation>
			<search index="0"><![CDATA[protected function getForm() {]]></search>
			<add position="after"><![CDATA[
			$data['dropimage_sainent'] = $this->config->get('module_dropimage_sainent_status');
			$data['dropimage_default_path'] = $this->config->get('module_dropimage_sainent_default_path');
			$data['lang'] = $this->language->get('code');
			]]></add>
		</operation>
	</file>
	<file path="admin/view/template/catalog/product_form.twig">
		<operation>
			<search index="0"><![CDATA[<div class="tab-pane" id="tab-image">]]></search>
			<add position="after"><![CDATA[
			{% if dropimage_sainent %}
			<div class="row">
				<div class="col-sm-4">
					<h2 class="text-center">{{ entry_image }}</h2>
					<input id="drop-image-explorer-main" type="file" name="file[]" />
				</div>
				<div class="col-sm-8">
					<h2 class="text-center">{{ entry_additional_image }}</h2>
					<input id="drop-image-explorer" type="file" name="file[]" multiple />
				</div>
			</div>
			<hr/>
			<div class="input-group">
				<span class="input-group-addon">image/</span>
				<input id="drop-image-path" type="text" class="form-control" name="drop_image_path" value="{{ dropimage_default_path }}" placeholder="" readonly="">
				<div class="input-group-btn">
					<button type="button" class="btn btn-danger" data-toggle="tooltip" title="{{ button_clear }}" onclick="$('#drop-image-path').val('');"><i class="fa fa-eraser"></i></button>
					<button type="button" id="drop-image-btn" class="btn btn-primary"><i class="fa fa-cloud-upload"></i>  Select Upload Destination Path</button>
				</div>
			</div>
			<p id="drop-image-error" class="text-danger"></p>
			<hr/>
			{% endif %}	
			]]></add>
		</operation>
		<operation>
			<search index="0"><![CDATA[function addImage() {]]></search>
			<add position="replace"><![CDATA[function addImage(thumb = '',path = '') {]]></add>
		</operation>
		<operation>
			<search index="0"><![CDATA[$('#images tbody').append(html);]]></search>
			<add position="after"><![CDATA[
{% if dropimage_sainent %}
	$('#thumb-image' + image_row + ' img').attr('src',thumb);
	$('#input-image' + image_row).val(path);
{% endif %}			
			]]></add>
		</operation>
		<operation>
			<search index="0"><![CDATA[{{ footer }}]]></search>
			<add position="before"><![CDATA[
{% if dropimage_sainent %}			
<link href="view/javascript/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="view/javascript/bootstrap-fileinput-master/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="view/javascript/bootstrap-fileinput-master/js/plugins/sortable.js" type="text/javascript"></script>
<script src="view/javascript/bootstrap-fileinput-master/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="view/javascript/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
{% if lang != 'en' %}
<script src="view/javascript/bootstrap-fileinput-master/js/locales/{{ lang }}.js" type="text/javascript"></script>
{% endif %}
<script src="view/javascript/bootstrap-fileinput-master/themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="view/javascript/bootstrap-fileinput-master/themes/fa/theme.js" type="text/javascript"></script>
<style>
.kv-file-upload{
	display:none !important;
}
</style>
<script type="text/javascript"><!--
	var lang = '';
	{% if lang != 'en' %}
		lang = '{{ lang }}';
	{% endif %}
	$("#drop-image-explorer-main").fileinput({
		theme: 'fa',
		language: lang,
        uploadUrl: 'index.php?route=extension/module/dropimage_sainent/upload&user_token={{ user_token }}&drop_target=true',
		uploadAsync: false,
		allowedFileExtensions : ['jpg', 'jpeg', 'gif', 'png', 'JPG', 'JPEG', 'GIF', 'PNG'],
		browseOnZoneClick:true,
		maxFileSize: 20480,
		showCancel:false,
		overwriteInitial: true,
		maxFileCount:1,
		initialPreviewAsData: false,
		uploadExtraData: function(){ 
			return {
				'directory': $("#drop-image-path").val()
			};
		},
	}).on('filebatchpreupload', function(event, data, id, index) {
		$('#drop-image-error').html('');
	}).on('filebatchuploadsuccess', function(event, data, id, index) {
		var obj = data.response;
		if(obj.dropfile){
			for(var i in obj['dropfile']){
				/*console.log(obj['dropfile'][i]['thumb']);
				console.log(obj['dropfile'][i]['path']);*/
				$('#thumb-image').find('img').attr('src', obj['dropfile'][i]['thumb']);
				$('#input-image').val(obj['dropfile'][i]['path']);
			}
		}
		$("#drop-image-explorer-main").fileinput('clear');
	});
	
	$("#drop-image-explorer").fileinput({
		theme: 'fa',
		language: lang,
		uploadUrl: 'index.php?route=extension/module/dropimage_sainent/upload&user_token={{ user_token }}&drop_target=true',
		uploadAsync: false,
		allowedFileExtensions : ['jpg', 'jpeg', 'gif', 'png', 'JPG', 'JPEG', 'GIF', 'PNG'],
		browseOnZoneClick:true,
		maxFileSize: 20480,
		showCancel:false,
		overwriteInitial: true,
		maxFileCount:500,
		initialPreviewAsData: false,
		uploadExtraData: function(){ 
			return {
				'directory': $("#drop-image-path").val()
			};
		},
	}).on('filebatchpreupload', function(event, data, id, index) {
		$('#drop-image-error').html('');
	}).on('filebatchuploadsuccess', function(event, data, id, index) {
		var obj = data.response;
		if(obj.dropfile){
			for(var i in obj['dropfile']){
				/*console.log(obj['dropfile'][i]['thumb']);
				console.log(obj['dropfile'][i]['path']);*/
				addImage(obj['dropfile'][i]['thumb'], obj['dropfile'][i]['path']);
			}
		}
		$("#drop-image-explorer").fileinput('clear');
	});
	
	$('#drop-image-btn').on('click', function() {
		var $button = $(this);
		var $icon   = $button.find('> i');
		var directory = '';
		if ($('#drop-image-path').val() != '') {
			directory = '&directory='+encodeURIComponent($('#drop-image-path').val());
		}
		$('#modal-drop-image, #modal-image').remove();

		$.ajax({
			url: 'index.php?route=extension/module/dropimage_sainent/filemanager&user_token={{ user_token }}' + directory + '&target=drop-image-path&drop_target=true',
			dataType: 'html',
			beforeSend: function() {
				$button.prop('disabled', true);
				if ($icon.length) {
					$icon.attr('class', 'fa fa-circle-o-notch fa-spin');
				}
			},
			complete: function() {
				$button.prop('disabled', false);
				if ($icon.length) {
					$icon.attr('class', 'fa fa-cloud-upload');
				}
			},
			success: function(html) {
				$('body').append('<div id="modal-drop-image" class="modal">' + html + '</div>');

				$('#modal-drop-image').modal('show');
			}
		});
	});

//--></script> 
{% endif %}	
			]]></add>
		</operation>
	</file>
	<!-- Upload Image Drag & Drop -->
</modification>