{**
 * NOTICE OF LICENSE
 * With the purchase or the installation of the software in your application
 * you accept the license agreement.
 *
 * You can not resell and redistribute this file.
 *
 * @author    Dalibor Stojcevski <dal_sto@yahoo.com>
 * @copyright 2019 Dalibor Stojcevski
 * @license   Dalibor Stojcevski
 *}

<div class="panel">
  <div class="form-group">
	<label class="control-label col-lg-3" for="input-live-start">Start index</label>
	  <div class="col-lg-9">
		<input type="text" name="import_api_live_start" id="input-live-start" value="0"/>
	  </div>
  </div></br></br>
  <div class="form-group">
	<label class="control-label col-lg-3" for="input-live-limit">Number of products</label>
	  <div class="col-lg-9">
		<input type="text" name="import_api_live_limit" id="input-live-limit" value="0"/>
	  </div>
  </div>			  
  <div class="buttons">
	<input type="button" value="Start import" id="start-import" data-loading-text="{l s='Loading' mod='import_api'}" class="btn btn-primary api-import" />
  </div>
  <div id="import-result" style="min-height:100px"></br>
	<div class="progress">
	  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
	  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
	</div>
	<span>Imported : </span> <span id="import-number">NA</span></br>		 
	<span>Updated : </span><span id="update-number">NA</span></br>
	<span>Total : </span><span id="total-number">NA</span></br>
	</br></br> 
	<p> For cron job you should use link {$get_import_link|escape:'htmlall':'UTF-8'} </p>
  </div>
</div>
<div class="panel">
 <fieldset class="form-horizontal">
  <legend>Test results</legend>
  <div class="form-group">
	<label class="control-label col-lg-3" for="input-index-test">Test start index</label>
	  <div class="col-lg-9">
		<input type="text" name="import_api_start_index" id="input-index-test" value="0"/>
	  </div>
  </div>	
  <div class="buttons">
	<input type="button" value="Original import" id="view-raw" data-loading-text="{l s='Loading' mod='import_api'}" class="btn btn-primary api-test" />
	<input type="button" value="After split" id="view-split" data-loading-text="{l s='Loading' mod='import_api'}" class="btn btn-primary api-test" />
	<input type="button" value="After grouping" id="view-grouping" data-loading-text="{l s='Loading' mod='import_api'}" class="btn btn-primary api-test" />
	<input type="button" value="After modification" id="view-modified" data-loading-text="{l s='Loading' mod='import_api'}" class="btn btn-primary api-test" />
  </div>
  <div id="test-result" style="min-height:500px"></div>
 </fieldset>
</div>

<div class="panel">
	<p> If you have imported products by mistake and they can't be updated. Or you just need to delete products from this file, go to <a href="{$delete_link}">Delete products page</a>
</div>


<script type="text/javascript">
var global_limit = 0;
var created = 0;
var updated = 0;

$(document).delegate('#start-import', 'click', function() {
   $('#start-import').button('loading');
   $('#import-number').html('');
   $('#update-number').html('');
   start = +($('#input-live-start').val());
   global_limit = limit = +($('#input-live-limit').val());
   created = 0;
   updated = 0;
   importProducts(start, limit); 
});

function importProducts(start = 0, limit = 0){
	$.ajax({
		url: '{$get_import_link}&action=import&start=' + start + '&limit=' + limit,
        type: 'post',
        data: $('#module_form').serialize(),
        dataType: 'json',
        beforeSend: function() {       	
			$('#import-number').html($('#import-number').html() + ' /Please wait...');
			$('#update-number').html($('#update-number').html() + ' /Please wait...');
		},
        complete: function() {
           
        },
        success: function(ret) {
			session_processed = ret['products_created'] + ret['products_updated'];
			
			if(ret['notice'] == 'time_out'){
			    createVisialProgress(ret);
				start = start + session_processed;

                if	(limit){
					limit -= session_processed;
				}

				importProducts(start, limit);
				
			} else if(ret['notice'] == 'missing'){
			    createVisialProgress(ret);
				importProducts();
				
			} else {
				$('#start-import').button('reset');
			}
        },
        error: function(xhr, ajaxOptions, thrownError) {
            //alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			importProducts(start, limit);
        }
    });	
}


function createVisialProgress(ret){
	updated += ret['products_updated'];
	created += ret['products_created'];
	$('#import-number').html(created);
	$('#update-number').html(updated);
	processed = created + updated;

	if(!global_limit){
		global_limit = ret['total'];
		$('#total-number').html(ret['total']);
	}

	if(global_limit){
		valeur = ( processed / global_limit ) * 100;
		$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
	}
}

$(document).delegate('.api-test', 'click', function() {
    $.ajax({
	    url: '{$get_import_link}&action=test&id=' + $(this).attr('id') + '&start=' + $('#input-index-test').val(),
        type: 'post',
        data: $('#module_form').serialize(),
        dataType: 'json',
        beforeSend: function() {
			$('#test-result').html('Please wait...');
        	$(".api-test").attr("disabled", true);
        	//$('.api-test').button('loading');
		},
        complete: function() {
           //$('.api-test').button('reset');
		   $(".api-test").attr("disabled", false);
        },
        success: function(ret) {
            if(ret['error'] !== undefined){
				alert(ret['error']);
			} else {
				html = '';
				$.each(ret,function(p, product){
					html += jsonObjToHtml(product);
					html += '</br><hr>';
				});
				
				$('#test-result').html(html);
			}
								
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

function jsonObjToHtml(obj){
	html = '';
	$.each(obj, function(index, value){					
		if(Array.isArray(value)){
			html += '<p><b>' + index + '</b></p>';
			html += '<ul>';
			$.each(value, function(i, v) {
				if (v !== null && typeof (v) === 'object') {
					html += jsonObjToHtml(v);
				} else {
					html += '<li>' + v + '</li>';
				}
			});
			html += '</ul>';
		} else if (value !== null && typeof (value) === 'object') {
			html += '<p><b>' + index + '</b></p>';
			html += jsonObjToHtml(value);
		} else {
			html += '<p><b>' + index + '</b>: ' + value + '</p>';
		}	   
	});
	return html;
}
</script>