{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }} {{ version }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
				<li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error['warning'] %}
		<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> {{ error['warning'] }}</div>
		{% endif %}
		{% if success %}
		<div class="alert alert-success"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> {{ success }}</div>
		{% endif %}
		<div class="panel panel-default panel-resizable">
			<div class="panel-heading">
				<h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
			</div>
			<div class="panel-body">
				<ul class="nav nav-tabs">
					<li>
						<a href="{{ href_dashboard }}"><span class="fa fa-home"></span> {{ text_dashboard }}</a>
					</li>
					<li>
						<a href="{{ href_setting }}"><span class="fa fa-cog"></span> {{ text_settings }}</a>
					</li>
					<li>
						<a href="{{ href_multi_store_field }}"><span class="fa fa-list-alt"></span> {{ text_multi_store_fields }}</a>
					</li>
					<li>
						<a href="{{ href_target_keyword }}"><span class="fa fa-key"></span> {{ text_target_keywords }}</a>
					</li>
					<li class="active">
						<a href="{{ href_export_import }}"><span class="fa fa-exchange"></span> {{ text_export_import }}</a>
					</li>
					<li>
						<a href="{{ href_instruction }}"><span class="fa fa-graduation-cap"></span> {{ text_instructions }}</a>
					</li>
				</ul>
				
				<div class="flex row">
					<div class="flex col-sm-3">
						<ul class="nav nav-pills nav-stacked">
							<li class="active">
								<a href="#vtab_export" data-toggle="tab"><span class="fa fa-download"></span> {{ text_export }}</a>
							</li>
							<li>
								<a href="#vtab_import" data-toggle="tab"><span class="fa fa-upload"></span> {{ text_import }}</a>
							</li>
						</ul>
					</div>
					<div class="col-sm-9">
						<div class="tab-content">
							<div id="vtab_export" class="tab-pane active">
								<div class="page-header">
									<h3>{{ text_export }}</h3>
								</div>
								<form action="{{ export }}" method="post" enctype="multipart/form-data" id="form_export" class="form-horizontal">
									<div class="form-group">
										<label class="col-sm-3 control-label" for="input-store">{{ entry_store }}</label>
										<div class="col-sm-9 form-inline">
											<select name="store_id" class="form-control">
											{% for store in stores %}
											{% if (store['store_id'] == store_id) %}
												<option value="{{ store['store_id'] }}" selected="selected" >{{ store['name'] }}</option>
											{% else %}
												<option value="{{ store['store_id'] }}" >{{ store['name'] }}</option>
											{% endif %}
											{% endfor %}
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label" for="input-sheet">{{ entry_sheet }}</label>
										<div class="col-sm-9">
											<input type="checkbox" name="sheet_codes[]" value="target_keyword" class="switch" data-label-text="{{ text_target_keywords }}" checked="checked"/> <span class="info-window-item" data-href="https://opencartseomodule.com/export-import-for-custom-page-keywords"><i class="fa fa-question"></i></span>
										</div>
									</div>	
									<div class="form-group">
										<label class="col-sm-3 control-label">{{ entry_export }}</label>
										<div class="col-sm-9">
											<a id="button_export" class="btn btn-primary"><i class="fa fa-download"></i> {{ button_export }}</a>
										</div>
									</div>	
								</form>
							</div>
							<div id="vtab_import" class="tab-pane">
								<div class="page-header">
									<h3>{{ text_import }}</h3>
								</div>
								<form action="{{ import }}" method="post" enctype="multipart/form-data" id="form_import" class="form-horizontal">
									<div class="form-group">
										<label class="col-sm-3 control-label">{{ entry_upload }}</label>
										<div class="col-sm-9">
											<input type="file" name="upload" id="upload"/>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label" for="input-store">{{ entry_store }}</label>
										<div class="col-sm-9 form-inline">
											<select name="store_id" class="form-control">
											{% for store in stores %}
											{% if (store['store_id'] == store_id) %}
												<option value="{{ store['store_id'] }}" selected="selected" >{{ store['name'] }}</option>
											{% else %}
												<option value="{{ store['store_id'] }}" >{{ store['name'] }}</option>
											{% endif %}
											{% endfor %}
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-3 control-label">{{ entry_import }}</label>
										<div class="col-sm-9">
											<a id="button_import" class="btn btn-primary"><i class="fa fa-upload"></i><i class="fa fa-refresh rotate hide"></i> {{ button_import }}</a>
										</div>
									</div>	
								</form>	
							</div>
						</div>
					</div>
				</div>
				<div class="p-lg text-center">{{ text_powered_by }}</div>
			</div>
		</div>
		<div class="info-window">
			<div class="info-window-wrap">
				<div class="info-window-block">
					<div class="info-window-close"><i class="fa fa-close"></i></div>
					<div class="info-window-description"></div>
				</div>
			</div>
		</div>
		<br class="clear"/>
	</div>
</div>
<script type="text/javascript">

var info_window = {
	'item' : new Array(),
	'current_url' : ''
}
	
$.each($('.info-window-item'), function(key, value) {
	var url = $(this).attr('data-href');
		
	if (url) {
		$.getJSON(url + '?format=json&callback=?', function(data) {
			info_window.item[url] = data['description'];
		});
	}
});
	
$('.info-window-item').on('click', function() {
	var url = $(this).attr('data-href');
	
	if (url == info_window.current_url) {
		info_window.current_url = '';
		$('.info-window').removeClass('resized');
		$('.panel-resizable').removeClass('resized');
	} else {
		info_window.current_url = url;
		$('.info-window .info-window-description').html(info_window.item[url]);
		$('.panel-resizable').addClass('resized');
		$('.info-window').addClass('resized');
	}
});
	
$('.info-window .info-window-close').on('click', function() {
	info_window.current_url = '';
	$('.info-window').removeClass('resized');
	$('.panel-resizable').removeClass('resized');
});

$('.switch').bootstrapSwitch({
    'onColor': 'success',
	'labelWidth': '90',
    'onText': '{{ text_yes }}',
    'offText': '{{ text_no }}'
});

function showAlert(json) {
	$('.alert, .text-danger').remove();
	$('.form-group').removeClass('has-error');
						
	if (json['error']) {
		if (json['error']['warning']) {
			$('#content > .container-fluid').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> ' + json['error']['warning'] + '</div>');
		}				
				
		for (i in json['error']) {
			var element = $('#input_' + i);
					
			if (element.parent().hasClass('input-group')) {
                $(element).parent().after('<div class="text-danger">' + json['error'][i] + '</div>');
			} else {
				$(element).after('<div class="text-danger">' + json['error'][i] + '</div>');
			}
		}				
				
		$('.text-danger').parents('.form-group').addClass('has-error');
	}
			
	if (json['success']) {
		$('#content > .container-fluid').prepend('<div class="alert alert-success"><i class="fa fa-check-circle"></i><button type="button" class="close" data-dismiss="alert">&times;</button> ' + json['success'] + '</div>');
	}
}
</script> 
<script type="text/javascript">

$('body').on('click', '#button_export', function() {
	$('#form_export').submit();
});

$('body').on('click', '#button_import', function() {
	$.ajax( {
		type: 'post',
		url: $('#form_import').attr('action'),
		data: new FormData($('#form_import')[0]),
		dataType: 'json',
		processData: false,
		contentType: false,
		beforeSend: function() {
			$('#button_import .fa-refresh').removeClass('hide');
			$('#button_import .fa-upload').addClass('hide');
		},
		complete: function() {
			$('#button_import .fa-refresh').addClass('hide');
			$('#button_import .fa-upload').removeClass('hide');
		},
		success: function(json) {
			showAlert(json);
		},
		error: function(xhr, ajaxOptions, thrownError) {
			console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
    });
});

</script>
{{ footer }}