{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="float-end">
				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ol class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
				<li class="breadcrumb-item"><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
				{% endfor %}
			</ol>
		</div>
	</div>

	<div class="container-fluid">
		{% if (error_warning) %}
		<div class="alert alert-danger export-import-dismissible">
			<i class="fa fa-exclamation-circle"></i> {{ error_warning }}
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>
		{% endif %}
		{% if (success) %}
		<div class="alert alert-success export-import-dismissible">
			<i class="fa fa-check-circle"></i> {{ success }}
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>
		{% endif %}
		{% if ((not error_warning) and (not success)) %}
		<div class="alert alert-info export-import-dismissible" id="export_import_welcome">
			<i class="fa fa-info-circle"></i>
			{{ text_welcome }}<br /><br />{{ text_used_category_ids}} {{ text_used_product_ids }}
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>
		{% endif %}
		<div class="card">
			<div class="card-body">
				<ul class="nav nav-tabs">
					<li class="nav-item active"><a href="#tab-export" data-bs-toggle="tab" class="nav-link active">{{ tab_export }}</a></li>
					<li class="nav-item"><a href="#tab-import" data-bs-toggle="tab" class="nav-link">{{ tab_import }}</a></li>
					<li class="nav-item"><a href="#tab-settings" data-bs-toggle="tab" class="nav-link">{{ tab_settings }}</a></li>
					<li class="nav-item"><a href="#tab-support" data-bs-toggle="tab" class="nav-link">{{ tab_support }}</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab-export">
						<form action="{{ export }}" method="post" enctype="multipart/form-data" id="export" class="form-horizontal">
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">{{ entry_export }}</div>
							</div>
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12"><p>{{ entry_export_type }}</p>
								</div>
								<div class="col-sm-12">
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='c') %}
											<input class="form-check-input" type="radio" name="export_type" value="c" checked="checked">
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="c">
											{% endif %}
											{{ text_export_type_category }}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='p') %}
											<input class="form-check-input" type="radio" name="export_type" value="p" checked="checked" />
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="p" />
											{% endif %}
											{{ text_export_type_product }}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='o') %}
											<input class="form-check-input" type="radio" name="export_type" value="o" checked="checked" />
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="o" />
											{% endif %}
											{{ text_export_type_option }}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='a') %}
											<input class="form-check-input" type="radio" name="export_type" value="a" checked="checked" />
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="a" />
											{% endif %}
											{{ text_export_type_attribute }}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='f') %}
											<input class="form-check-input" type="radio" name="export_type" value="f" checked="checked" />
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="f" />
											{% endif %}
											{{ text_export_type_filter }}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (export_type=='u') %}
											<input class="form-check-input" type="radio" name="export_type" value="u" checked="checked" />
											{% else %}
											<input class="form-check-input" type="radio" name="export_type" value="u" />
											{% endif %}
											{{ text_export_type_customer }}
										</label>
									</div>
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;" id="export_filter">
								<div class="col-sm-6">
									{{ entry_category_filter }}
									<span class="help">{{ help_category_filter }}</span>
									<br />
									<input type="text" name="category" value="" placeholder="{{ entry_category }}" id="input-category" data-oc-target="autocomplete-category" class="form-control" autocomplete="off"/>
									<ul id="autocomplete-category" class="dropdown-menu"></ul>
										<div class="input-group">
											<div class="form-control p-0" style="height: 150px; overflow: auto;">
												<table id="import-category" class="table m-0">
													<tbody>
														{% for category in categories %}
														<tr id="category-{{ category.category_id }}">
															<td>{{ category.name }}<input type="hidden" name="categories[]" value="{{ category.category_id }}"/></td>
															<td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
														</tr>
														{% endfor %}
													</tbody>
												</table>
											</div>
										</div>
									</ul>
								</div>
								<div class="col-sm-6">
									{{ entry_manufacturer_filter }}
									<span class="help">{{ help_manufacturer_filter }}</span>
									<br />
									<input type="text" name="manufacturer" value="" placeholder="{{ entry_manufacturer }}" id="input-manufacturer" data-oc-target="autocomplete-manufacturer" class="form-control" autocomplete="off"/>
									<ul id="autocomplete-manufacturer" class="dropdown-menu"></ul>
										<div class="input-group">
											<div class="form-control p-0" style="height: 150px; overflow: auto;">
												<table id="import-manufacturer" class="table m-0">
													<tbody>
														{% for manufacturer in manufacturers %}
														<tr id="manufacturer-{{ manufacturer.manufacturer_id }}">
															<td>{{ manufacturer.name }}<input type="hidden" name="manufacturers[]" value="{{ manufacturer.manufacturer_id }}"/></td>
															<td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>
														</tr>
														{% endfor %}
													</tbody>
												</table>
											</div>
										</div>
									</ul>
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;" id="range_type">
								<div class="col-sm-12">
									{{ entry_range_type }}
									<span class="help">{{ help_range_type }}</span>
									<br />
								</div>
								<div class="col-sm-12">
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="range_type" id="range_type_id" value="id" />
										<label class="form-check-label" for="range_type_id">{{ button_export_id }}</label>
									</div>
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="range_type" id="range_type_page" value="page" />
										<label class="form-check-label" for="range_type_page">{{ button_export_page }}</label>
									</div>
									<br /><br />
									<span class="id">{{ entry_start_id }}</span>
									<span class="page">{{ entry_start_index }}</span>
									<br />
									<input type="text" name="min" value="{{ min }}" />
									<br />
									<span class="id">{{ entry_end_id }}</span>
									<span class="page">{{ entry_end_index }}</span>
									<br />
									<input type="text" name="max" value="{{ max }}" />
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">
									<a onclick="downloadData();" class="btn btn-primary"><span>{{ button_export }}</span></a>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="tab-import">
						<form action="{{ import }}" method="post" enctype="multipart/form-data" id="import" class="form-horizontal">
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">{{ entry_import }}
									<span class="help">{{ help_import }}</span>
									<span class="help">{{ help_format }}</span>
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">
									<p>{{ entry_incremental }}</p>
								</div>
								<div class="col-sm-12">
									<div class="form-check">
										<label class="form-check-label">
											{% if (incremental) %}
												<input class="form-check-input" type="radio" name="incremental" value="1" checked="checked" />
												{{ text_yes }} {{ help_incremental_yes }}
											{% else %}
												<input class="form-check-input" type="radio" name="incremental" value="1" />
												{{ text_yes }} {{ help_incremental_yes }}
											{% endif %}
										</label>
									</div>
									<div class="form-check">
										<label class="form-check-label">
											{% if (incremental) %}
												<input class="form-check-input" type="radio" name="incremental" value="0" />
												{{ text_no }} {{ help_incremental_no }}
											{% else %}
												<input class="form-check-input" type="radio" name="incremental" value="0" checked="checked" />											
												{{ text_no }} {{ help_incremental_no }}
											{% endif %}
										</label>
									</div>
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">
									{{ entry_upload }}<br /><br />
									<input type="file" name="upload" id="upload" />
								</div>
							</div>
							<div class="row mb-3" style="margin:0px;">
								<div class="col-sm-12">
									<a onclick="uploadData();" class="btn btn-primary"><span>{{ button_import }}</span></a>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="tab-settings">
						<form action="{{ settings }}" method="post" enctype="multipart/form-data" id="settings" class="form-horizontal">
							<div class="row mb-3">
								<div class="sm-12">
									<div class="form-check form-switch">
										{% if (settings_use_option_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_option_id" name="export_import_settings_use_option_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_option_id" name="export_import_settings_use_option_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_option_id">{{ entry_settings_use_option_id }}</label>
									</div>
									<div class="form-check form-switch">
										{% if (settings_use_option_value_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_option_value_id" name="export_import_settings_use_option_value_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_option_value_id" name="export_import_settings_use_option_value_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_option_value_id">{{ entry_settings_use_option_value_id }}</label>
									</div>
									<div class="form-check form-switch">
										{% if (settings_use_attribute_group_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_attribute_group_id" name="export_import_settings_use_attribute_group_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_attribute_group_id" name="export_import_settings_use_attribute_group_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_attribute_group_id">{{ entry_settings_use_attribute_group_id }}</label>
									</div>
									<div class="form-check form-switch">
										{% if (settings_use_attribute_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_attribute_id" name="export_import_settings_use_attribute_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_attribute_id" name="export_import_settings_use_attribute_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_attribute_id">{{ entry_settings_use_attribute_id }}</label>
									</div>
									<div class="form-check form-switch">
										{% if (settings_use_filter_group_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_filter_group_id" name="export_import_settings_use_filter_group_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_filter_group_id" name="export_import_settings_use_filter_group_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_filter_group_id">{{ entry_settings_use_filter_group_id }}</label>
									</div>
									<div class="form-check form-switch">
										{% if (settings_use_filter_id) %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_filter_id" name="export_import_settings_use_filter_id" checked="checked">
										{% else %}
										<input class="form-check-input" type="checkbox" role="switch" id="export_import_settings_use_filter_id" name="export_import_settings_use_filter_id">
										{% endif %}
										<label class="form-check-label" for="export_import_settings_use_filter_id">{{ entry_settings_use_filter_id }}</label>
									</div>
								</div>
							</div>
							<div class="row mb-3">
								<div class="col-sm-12">
									<a onclick="updateSettings();" class="btn btn-primary"><span>{{ button_settings }}</span></a>
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="tab-support">
						<div id="export_import_notification" class="alert alert-info export-import-dismissible">
							<i class="fa fa-info-circle"></i>
							<div id="export_import_loading"><img src="../extension/export_import/admin/view/image/export-import/loading.gif" />{{ text_loading_notifications }}</div>
							<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
						</div>
						<table class="table table-bordered table-hover">
							<tbody>
								<tr>
									<td class="text-nowrap">{{ entry_version }}</td>
									<td>{{ version_export_import }}</td>
								</tr>
								<tr>
									<td class="text-nowrap">{{ entry_oc_version }}</td>
									<td>{{ version_opencart }}</td>
								</tr>
								<tr>
									<td class="text-nowrap">{{ entry_php_version }}</td>
									<td>{{ version_php }}</td>
								</tr>
								<tr>
									<td class="text-nowrap" style="vertical-align:top;">{{ entry_license }}</td>
									<td class="text-wrap">{{ text_license }}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript"><!--

function getNotifications() {
	$('#export_import_notification').html('<i class="fa fa-info-circle"></i><div id="export_import_loading"><img src="../extension/export_import/admin/view/image/export-import/loading.gif" />{{ text_loading_notifications }}</div><button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
	setTimeout(
		function(){
			$.ajax({
				type: 'GET',
				url: 'index.php?route=extension/export_import/tool/export_import{{ method_separator }}getNotifications&user_token={{ user_token }}',
				dataType: 'json',
				success: function(json) {
					if (json['error']) {
						$('#export_import_notification').html('<i class="fa fa-info-circle"></i>'+json['error']+' <span style="cursor:pointer;font-weight:bold;text-decoration:underline;float:right;" onclick="getNotifications();">{{ text_retry }}</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
					} else if (json['message']) {
						$('#export_import_notification').html('<i class="fa fa-info-circle"></i>'+json['message']+'<button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
					} else {
						$('#export_import_notification').html('<i class="fa fa-info-circle"></i>'+'{{ error_no_news }}'+'<button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
					}
				},
				failure: function(){
					$('#export_import_notification').html('<i class="fa fa-info-circle"></i>'+'{{ error_notifications }} <span style="cursor:pointer;font-weight:bold;text-decoration:underline;float:right;" onclick="getNotifications();">{{ text_retry }}</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
				},
				error: function() {
					$('#export_import_notification').html('<i class="fa fa-info-circle"></i>'+'{{ error_notifications }} <span style="cursor:pointer;font-weight:bold;text-decoration:underline;float:right;" onclick="getNotifications();">{{ text_retry }}</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>');
				}
			});
		},
		500
	);
}

function check_export_filter(export_type) {
	if (export_type=='p') {
		$('#export_filter').show();
	} else {
		$('#export_filter').hide();
	}
}

function check_range_type(export_type) {
	if ((export_type=='p') || (export_type=='c') || (export_type=='u')) {
		$('#range_type').show();
		$('#range_type_id').prop('checked',true);
		$('#range_type_page').prop('checked',false);
		$('.id').show();
		$('.page').hide();
	} else {
		$('#range_type').hide();
	}
}

$(document).ready(function() {

	check_export_filter($('input[name=export_type]:checked').val());
	check_range_type($('input[name=export_type]:checked').val());

	$("#range_type_id").click(function() {
		$(".page").hide();
		$(".id").show();
	});

	$("#range_type_page").click(function() {
		$(".id").hide();
		$(".page").show();
	});

	$('input[name=export_type]').click(function() {
		check_export_filter($(this).val());
		check_range_type($(this).val());
	});

	$('span.close').click(function() {
		$(this).parent().remove();
	});

	$('a[data-bs-toggle="tab"]').click(function() {
		$('#export_import_welcome').remove();
	});

	$('a[href="#tab-support"').click(function() {
		if ($(this).parent().attr('class')!='active') {
			getNotifications();
		}
	});

});

function checkFileSize(id) {
	// See also http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation for details
	var input, file, file_size;

	if (!window.FileReader) {
		// The file API isn't yet supported on user's browser
		return true;
	}

	input = document.getElementById(id);
	if (!input) {
		// couldn't find the file input element
		return true;
	}
	else if (!input.files) {
		// browser doesn't seem to support the `files` property of file inputs
		return true;
	}
	else if (!input.files[0]) {
		// no file has been selected for the upload
		alert( "{{ error_select_file }}" );
		return false;
	}
	else {
		file = input.files[0];
		file_size = file.size;
		{% if ((post_max_size is defined) and (post_max_size)) %}
		// check against PHP's post_max_size
		post_max_size = {{ post_max_size }};
		if (file_size > post_max_size) {
			alert( "{{ error_post_max_size }}" );
			return false;
		}
		{% endif %}
		{% if ((upload_max_filesize is defined) and (upload_max_filesize)) %}
		// check against PHP's upload_max_filesize
		upload_max_filesize = {{ upload_max_filesize }};
		if (file_size > upload_max_filesize) {
			alert( "{{ error_upload_max_filesize }}" );
			return false;
		}
		{% endif %}
		return true;
	}
}

function uploadData() {
	if (checkFileSize('upload')) {
		$('#import').submit();
	}
}

function isNumber(txt){ 
	var regExp=/^[\d]{1,}$/;
	return regExp.test(txt); 
}

count_product = {{ count_product }};

function updateCountProducts() {
	$.ajax({
		url: 'index.php?route=extension/export_import/tool/export_import{{ method_separator }}getCountProduct&user_token={{ user_token }}',
		type: 'post',
		dataType: 'json',
		data: $("input[name='categories[]'],input[name='manufacturers[]']").serialize(),
		success: function(json) {
			if (json['count']) {
				count_product = json['count'];
			} else {
			}
		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
}

function validateExportForm(id) {
	var export_type = $('input[name=export_type]:checked').val();
	if ((export_type!='c') && (export_type!='p') && (export_type!='u')) {
		return true;
	}

	var val = $("input[name=range_type]:checked").val();
	var min = $("input[name=min]").val();
	var max = $("input[name=max]").val();

	if ((min=='') && (max=='')) {
		return true;
	}

	if (!isNumber(min) || !isNumber(max)) {
		alert("{{ error_param_not_number }}");
		return false;
	}

	var count_item;
	switch (export_type) {
		case 'p': count_item = count_product-1;  break;
		case 'c': count_item = {{ count_category-1 }}; break;
		default:  count_item = {{ count_customer-1 }}; break;
	}
	var batchNo = parseInt(count_item/parseInt(min))+1; // Maximum number of item-batches, namely, item number/min, and then rounded up (that is, integer plus 1)
	var minItemId;
	switch (export_type) {
		case 'p': minItemId = parseInt( {{ min_product_id }} );  break;
		case 'c': minItemId = parseInt( {{ min_category_id }} ); break;
		default:  minItemId = parseInt( {{ min_customer_id }} ); break;
	
	}
	var maxItemId;
	switch (export_type) {
		case 'p': maxItemId = parseInt( {{ max_product_id }} );  break;
		case 'c': maxItemId = parseInt( {{ max_category_id }} ); break;
		default:  maxItemId = parseInt( {{ max_customer_id }} ); break;
	
	}

	if (val=="page") {  // Min for the batch size, Max for the batch number
		if (parseInt(max) <= 0) {
			alert("{{ error_batch_number }}");
			return false;
		}
		if (parseInt(max) > batchNo) {        
			alert("{{ error_page_no_data }}"); 
			return false;
		} else {
			$("input[name=max]").val(parseInt(max)+1);
		}
	} else {
		if (minItemId <= 0) {
			alert("{{ error_min_item_id }}");
			return false;
		}
		if (parseInt(min) > maxItemId || parseInt(max) < minItemId || parseInt(min) > parseInt(max)) {  
			alert("{{ error_id_no_data }}"); 
			return false;
		}
	}
	return true;
}

function downloadData() {
	if (validateExportForm('export')) {
		$('#export').submit();
	}
}

function updateSettings() {
	$('#settings').submit();
}

// Category
$('#input-category').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/category{{ method_separator }}autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['category_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-category').val('');

        $('#import-category-' + item['value']).remove();

        html = '<tr id="category-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="categories[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#import-category tbody').append(html);
        updateCountProducts();
    }
});

$('#import-category').on('click', '.btn', function () {
    $(this).parent().parent().remove();
        updateCountProducts();
});

// Manufacturer
$('#input-manufacturer').autocomplete({
    'source': function (request, response) {
        $.ajax({
            url: 'index.php?route=catalog/manufacturer{{ method_separator }}autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function (json) {
                response($.map(json, function (item) {
                    return {
                        label: item['name'],
                        value: item['manufacturer_id']
                    }
                }));
            }
        });
    },
    'select': function (item) {
        $('#input-manufacturer').val('');

        $('#import-manufacturer-' + item['value']).remove();

        html = '<tr id="manufacturer-' + item['value'] + '">';
        html += '  <td>' + item['label'] + '<input type="hidden" name="manufacturers[]" value="' + item['value'] + '"/></td>';
        html += '  <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#import-manufacturer tbody').append(html);
        updateCountProducts();
    }
});

$('#import-manufacturer').on('click', '.btn', function () {
    $(this).parent().parent().remove();
        updateCountProducts();
});

var alert = export_import_alert;
//--></script>

</div>
{{ footer }}
