<div id="country2" class="tabcontent">
	<style type="text/css">
		@font-face {
		    font-family: "pixel_font";
		    src: url("<?php echo esc_url( WPKB_PLUGIN_URL . '/fonts/Gameplay.ttf' ); ?>"),
		         url("<?php echo esc_url( WPKB_PLUGIN_URL . '/fonts/Gameplay.ttf' ); ?>") format("truetype");
		    font-style: normal;
		    font-weight: normal;
		}

		.wrap_textarea{
			width: 100%;
			box-shadow: 0 0 6px rgba(0,0,0,0.4) inset;
			border: 1px solid #bababa;
			padding: 10px;
			background-color: #eaeaea;
			height: 195px;
			position: relative;
			margin: 0 !important;
			position: relative;
			margin: 20px 0 !important;
			overflow: hidden;
		}

		.wrap_textarea .textarea{
			overflow: auto;
			height: 100%;
			margin-right: -30px;
		}

		.wrap_textarea .textarea p{
			margin: 0;
			font-family: pixel_font,sans-serif;
			color: #888;
			font-size: 10px;
			letter-spacing: 1.1px;
			position: relative;
			padding-left: 55px;
		}
		.wrap_textarea .textarea p a{
			color: #888;
		}
		.wrap_textarea .textarea p span.timer{
			position: absolute;
			left: 0;
			top: 0;
			width: 40px;
			height: 100%;
		}

		.wrap_textarea:before{
			content: "";
			left: 0;
			top: 0;
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			background-image: linear-gradient(rgba(255,255,255,0.4),rgba(0,0,0,0.1));
			/*z-index: 1;*/
		}
		@keyframes blink {
			0% {opacity: .2;}
			20% {opacity: 1;}
			100% {opacity: .2;}
		}
		.saving span {
			animation-name: blink;
			animation-duration: 1.4s;
			animation-iteration-count: infinite;
			animation-fill-mode: both;
			display: inline-block;
			padding: 0 2px;
			font-size: 15px;
			line-height: 5px;
		}
		.saving span:nth-child(2) {
			animation-delay: .2s;
		}
		.saving span:nth-child(3) {
			animation-delay: .4s;
		}
	</style>
	<p><?php esc_html_e("Upload KBuckets to Upload KBucket",WPKB_TEXTDOMAIN) ?></p>
	<a style="display: none" href="<?php echo esc_url(add_query_arg( 'get-log', '1', sanitize_text_field( $_SERVER['REQUEST_URI'] ) ) ); ?>">
       <?php esc_html_e( "Download Log", WPKB_TEXTDOMAIN ); ?>
    </a>


	<form method="post" id="form_upload_xml" enctype="multipart/form-data">
		<?php wp_nonce_field('my_form_nonce', 'my_nonce_field'); ?>
		<div class="wrap_upload_xml_form" style="margin-top:10px;">
				<a target="_blank" class="kb_full_log" style="display: none" href="<?php echo esc_url( get_admin_url() . '?page=KBucket&show-log=1' ); ?>">
                  <?php esc_html_e( "Full Log", WPKB_TEXTDOMAIN ); ?>
                </a>

				<input type="file" size="24" name="upload_xml" id="upload_xml" accept="text/xml" />
				<input type="submit" class="button button-primary" name="submit"
					value="<?php esc_html_e("Upload XML",WPKB_TEXTDOMAIN) ?>"/>
				<a href="#"
			   style="float: right"
			   class="button button-default kb-remove"><?php esc_html_e("Clear KBucket Content",WPKB_TEXTDOMAIN) ?></a>
		</div>
	</form>

	<p><?php esc_html_e("Or, paste the link to your KBucket file",WPKB_TEXTDOMAIN) ?></p>
	<form method="post" id="form_url_xml" enctype="multipart/form-data">
		<?php wp_nonce_field('my_form_nonce', 'my_nonce_field'); ?>
			<div class="">
				<textarea name="url_xml" id="url_xml" style="width: 100%" rows="5"
						placeholder="<?php esc_html_e("Insert Kbucket file url", WPKB_TEXTDOMAIN) ?>"></textarea>
				<select name="update_interval" id="update_interval">
					<option value=""><?php esc_html_e("Manual",WPKB_TEXTDOMAIN) ?></option>
					<option value="day"><?php esc_html_e("Every day",WPKB_TEXTDOMAIN) ?></option>
					<option value="3h"><?php esc_html_e("Every 3 hours",WPKB_TEXTDOMAIN) ?></option>
					<option value="1h"><?php esc_html_e("Every 1 hour",WPKB_TEXTDOMAIN) ?></option>
				</select>
				<input type="submit" class="button button-primary" name="submit"
					value="<?php esc_html_e("Start",WPKB_TEXTDOMAIN) ?>"/>
			</div>
	</form>

	<script>
	var $ = jQuery;
	jQuery(document).ready(function($) {
		jQuery('input.kb_color_picker').wpColorPicker();
	});

	var timer = new Date().getTime();
	var blog_id  = <?php echo get_current_blog_id() ?>;

	function kbucket_timer(timer){
		var new_timer = new Date().getTime();
		return (((new_timer - timer) / 1000)/60).toString().substr(0, 5);
	}

	function inserted_text(target, text, updated, upd_class){
		jQuery('.kb_full_log').show();
		if(updated){
			if(jQuery(target).find('p.kbv_updated.'+upd_class).length){
				jQuery(target).find('p.kbv_updated.'+upd_class).css('opacity','0').html(text);
				jQuery(target).find('p.kbv_updated.'+upd_class).animate({
						'opacity': '1'},
					200, function() {
						setTimeout(function(){
							var elem = document.getElementById('log_upload');
							elem.scrollTop = elem.scrollHeight;
						},600);
					});
			}else{
				jQuery(target).append('<p class="kbv_updated '+upd_class+'" style="opacity:0"><span class="timer">'+ kbucket_timer(timer) + ': </span>' +text+'</p>');
				jQuery(target).find('p.kbv_updated.'+upd_class).animate({
						'opacity': '1'},
					200, function() {
						setTimeout(function(){
							var elem = document.getElementById('log_upload');
							elem.scrollTop = elem.scrollHeight;
						},600);
					});
			}
		}else{
			jQuery(target).append('<p style="opacity:0"><span class="timer">'+ kbucket_timer(timer) + ': </span>' +text+'</p>');
			jQuery(target).find('p:last-child').animate({
					'opacity': '1'},
				200, function() {
					setTimeout(function(){
						var elem = document.getElementById('log_upload');
						elem.scrollTop = elem.scrollHeight;
					},600);
				});
		}
	}


	function updateAllImages(img_arr) {
		console.log(img_arr);
		var imgCount = 0;

		var count_limit = 2; // Reduced from 5 to prevent 503 timeouts
		var count = Math.ceil(parseInt(img_arr.length) / count_limit);
		var all_img = img_arr.length;

		function getNextImage() {
			jQuery.ajax({
				type: 'POST',
				dataType: 'json',
				url: ajax_url,
				//timeout: 2200000, // 20 min
				timeout: 3600000, 
				data: {
					'action': 'ajax_upload_img_kbucket',
					'images': img_arr.slice(imgCount * count_limit, (imgCount * count_limit) + count_limit),
					'blog_id': blog_id,
					'nonce':'<?php echo esc_js(wp_create_nonce('my_ajax_nonce')); ?>'
				},
				async: true,
				success: function(response) {
					if (response.success && imgCount <= count) {
						++imgCount;


						var s_increment = parseInt(jQuery('#log_upload').find('.success_upload b').text());
						if(!jQuery('#log_upload').find('.success_upload b').length) s_increment = response.s_uploaded;
						else s_increment = s_increment + parseInt(response.s_uploaded);

						var e_increment = parseInt(jQuery('#log_upload').find('.error_upload b').text());
						if(!jQuery('#log_upload').find('.error_upload b').length) e_increment = response.e_uploaded;
						else e_increment = e_increment + parseInt(response.e_uploaded);

						var m_increment = parseInt(jQuery('#log_upload').find('.empty_upload b').text());
						if(!jQuery('#log_upload').find('.empty_upload b').length) m_increment = response.m_uploaded;
						else m_increment = m_increment + parseInt(response.m_uploaded);

						var all_ready = parseInt(s_increment) + parseInt(e_increment) + parseInt(m_increment);

						var upload_f_arr = img_arr.slice(imgCount * count_limit, (imgCount * count_limit) + count_limit);
						var upload_f_list = '';

						for(var i in upload_f_arr){
							upload_f_list = upload_f_list + upload_f_arr[i].name + '<br>';
						}

						inserted_text('#log_upload','Uploaded or exist files: <b>'+s_increment+'</b>', true, 'success_upload');
						inserted_text('#log_upload','Error with upload: <b>'+e_increment +'</b>', true, 'error_upload');
						inserted_text('#log_upload','Without image: <b>'+m_increment+'</b>', true, 'empty_upload');
						inserted_text('#log_upload','Total images: <b>'+all_ready+'</b>'+' of '+'<b>'+all_img+'</b>', true, 'all_upload');
						inserted_text('#log_upload','Progress: <b>'+Math.ceil((all_ready/all_img) * 100)+'%</b><strong class="saving"><span>.</span><span>.</span><span>.</span></strong>', true, 'c_upload');

						getNextImage();

						if( (imgCount - 1) === count ){
							inserted_text('#log_upload','All done!');
							jQuery('#form_upload_xml .button-primary').removeAttr('disabled');
							jQuery('#form_upload_xml input[type="file"]').show();

						}
					}

				},
				error: function(xhr, status, error){
					var errorMsg = 'Error: ' + (xhr.statusText || status || error);
					if(xhr.status === 503 || xhr.status === 0) {
						errorMsg = 'Server timeout (503). Retrying batch...';
						// Retry the same batch after a short delay
						setTimeout(function() {
							--imgCount; // Decrement to retry the same batch
							getNextImage();
						}, 3000); // Wait 3 seconds before retry
					} else {
						inserted_text('#log_upload', errorMsg);
						// Continue with next batch even on error
						if (imgCount <= count) {
							getNextImage();
						}
					}
				}
			});
		}
		getNextImage();
	}

	ajax_url = '<?= esc_url( admin_url('admin-ajax.php') ) ?>';


	function getScheduledKbuckets() {
		jQuery.ajax({
			dataType: 'json',
			url: ajax_url,
			data: {"action": "ajax_scheduled_kbucket",'blog_id': blog_id,'nonce':'<?php echo esc_html(wp_create_nonce('my_ajax_nonce')); ?>'},
			async: false,
			success: function(response) {
				if(response.logs && Object.keys(response.logs).length) {
					if(!jQuery('.wrap_upload_xml_form').find('#log_upload').length)
						jQuery('.wrap_upload_xml_form').prepend('<div class="wrap_textarea"><div class="textarea" id="log_upload"></div></div>');
					else
						jQuery('#log_upload').html('');
					for(var i in response.logs){
						let data = response.logs[i].split('|');
						var a = new Date(data[0] * 1000);
						var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
						var year = a.getFullYear();
						var month = months[a.getMonth()];
						var date = a.getDate();
						var hour = ("0" + a.getHours()).slice(-2);
						var min = ("0" + a.getMinutes()).slice(-2);
						var sec = ("0" + a.getSeconds()).slice(-2);
						var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;

						inserted_text('#log_upload', time + ' - ' + data[1]);
					}
				}
				if(response.active){
					// let t = Object.keys(response.logs);// Redirect after 5 min not active
					// if(Math.floor(Date.now() / 1000) > parseInt(t[t.length -1]) + 5 * 60){
					// 	setTimeout(() => {window.location.href = window.location.href}, 30000);
					// }
					jQuery('#form_url_xml [name="url_xml"]').val(response.url).prop('disabled', true);
					jQuery('#form_url_xml select[name="update_interval"]').val(response.interval).prop('disabled', true);
					jQuery('.wrap_upload_xml_form [name="upload_xml"]').prop('disabled', true);
					jQuery('.wrap_upload_xml_form input[name="submit"]').prop('disabled', true);
					jQuery('#form_url_xml input[name="submit"]').val('<?php esc_html_e("Stop", WPKB_TEXTDOMAIN) ?>');

				}else{
					jQuery('#form_url_xml [name="url_xml"]').prop('disabled', false);
					jQuery('#form_url_xml select[name="update_interval"]').prop('disabled', false);
					jQuery('.wrap_upload_xml_form [name="upload_xml"]').prop('disabled', false);
					jQuery('.wrap_upload_xml_form input[name="submit"]').prop('disabled', false);
					jQuery('#form_url_xml input[name="submit"]').val('<?php esc_html_e("Start", WPKB_TEXTDOMAIN) ?>');
					clearInterval(schedule);
				}
				if(response.url) jQuery('#form_url_xml [name="url_xml"]').val(response.url);
				if(response.interval) jQuery('#form_url_xml select[name="update_interval"]').val(response.interval);
			},
			error: function(e){
				inserted_text('#log_upload','Error: '+e.statusText);
			}
		});
	}

	getScheduledKbuckets();
	var schedule = setInterval(getScheduledKbuckets, 1000 * 8); // every 8 seconds

	jQuery('.wrap_upload_xml_form .button.kb-remove').on('click', function(event) {
		event.preventDefault();
		let p = confirm("Do You have delete all kbuckets, attached images, categories, sub-categories & tags?");
		if(p){
			jQuery.ajax({
				dataType: 'json',
				url: ajax_url,
				data: {"action": "ajax_purge_kbuckets",'blog_id': blog_id,'nonce':'<?php echo esc_html(wp_create_nonce('my_ajax_nonce')); ?>'},
				async: false,
				success: function (response) {
					alert("Your KBucket page has been reset. Go ahead and upload your new content");
				}
			});

		}
	});

	jQuery('#form_url_xml [name="submit"]').on('click', function(event) {
		console.log("disabled");
		let self = this;
		if(jQuery('#form_url_xml [name="url_xml"]').val() === '') return;
		let type =jQuery('#form_url_xml [name="url_xml"]').prop('disabled');
		if(!type){
			jQuery('#form_url_xml [name="url_xml"]').prop('disabled', true);
			jQuery('#form_url_xml select[name="update_interval"]').prop('disabled', true);
			jQuery('.wrap_upload_xml_form [name="upload_xml"]').prop('disabled', true);
			jQuery('.wrap_upload_xml_form input[name="submit"]').prop('disabled', true);
			jQuery('#form_url_xml input[name="submit"]').val('<?php esc_html_e("Stop", WPKB_TEXTDOMAIN) ?>');
		}else{
			jQuery('#form_url_xml [name="url_xml"]').prop('disabled', false);
			jQuery('#form_url_xml select[name="update_interval"]').prop('disabled', false);
			jQuery('.wrap_upload_xml_form [name="upload_xml"]').prop('disabled', false);
			jQuery('.wrap_upload_xml_form input[name="submit"]').prop('disabled', false);
			jQuery('#form_url_xml input[name="submit"]').val('<?php esc_html_e("Start", WPKB_TEXTDOMAIN) ?>');
			clearInterval(schedule);
		}
		jQuery(self).prop('disabled', true);
		jQuery.ajax({
			dataType: 'json',
			url: ajax_url,
			data: {
				"action": "ajax_activate_scheduled_kbucket",
				"activate": !type,
				"url": jQuery('#form_url_xml [name="url_xml"]').val(),
				"interval": jQuery('#form_url_xml select[name="update_interval"]').val(),
				"initial_start": true,
				'blog_id': blog_id,
				'nonce':'<?php echo esc_js(wp_create_nonce('my_ajax_nonce')); ?>'
			},
			success: function(response) {
				schedule = setInterval(getScheduledKbuckets, 1000 * 10);
				jQuery(self).prop('disabled', false);
				//setTimeout(() => {
				//	jQuery.ajax({
				//		dataType: 'html',
				//		url: '<?php //echo get_site_url() ?>///wp-admin/admin.php?page=KBucket',
				//		data: {}
				//	});
				//}, 5000);
			},
			error: function(e){
				inserted_text('#log_upload','Error: '+e.statusText);
			}
		});
	})

	jQuery('#form_upload_xml').on('submit', function(event) {
		event.preventDefault();

		if(jQuery(document.getElementById("form_upload_xml")).find("input[type=file]").val() == '') return false;

		if(!jQuery('.wrap_upload_xml_form').find('#log_upload').length) jQuery('.wrap_upload_xml_form').prepend('<div class="wrap_textarea"><div class="textarea" id="log_upload"></div></div>');
		else jQuery('#log_upload').html('');

		inserted_text('#log_upload','Begin upload<strong class="saving"><span>.</span><span>.</span><span>.</span></strong><br>');

		var uploadform = document.getElementById("form_upload_xml");

		var form_data = new FormData();
		var file = jQuery(uploadform).find("input[type=file]");
		var individual_file = file[0].files[0];
		form_data.append("file", individual_file);
		form_data.append("security", jQuery(uploadform).find("input[name=security]").val());
		form_data.append("action", "ajax_upload_kbucket");
		form_data.append("size", "");
		form_data.append("blog_id", blog_id);
		form_data.append('nonce', '<?php echo esc_js(wp_create_nonce('my_ajax_nonce')); ?>')

		jQuery('#form_upload_xml .button-primary').attr('disabled','disabled');
		jQuery('#form_upload_xml input[type="file"]').hide();


		jQuery.ajax({
			url: ajax_url,
			type: "POST",
			data: form_data,
			contentType: false,
			cache: false,
			dataType: "json",
			processData: false,
			timeout: 2200000, // 20 min
			success: function(response) {
				jQuery('#log_upload').find('.saving').remove();
				if(response.error){
					inserted_text('#log_upload', response.error);
					jQuery('#form_upload_xml .button-primary').removeAttr('disabled');
		            jQuery('#form_upload_xml input[type="file"]').show();
				}else{
					inserted_text('#log_upload', 'File Uploaded!<br>');
					inserted_text('#log_upload', 'Begin parsing '+response.file+'<strong class="saving"><span>.</span><span>.</span><span>.</span></strong><br>');

					jQuery.ajax({
						type: 'POST',
						dataType: 'json',
						url: ajax_url,
						timeout: 2200000, // 20 min
						data: {
							'action': 'ajax_parsing_kbucket',
							'file': response.success,
							'nonce':'<?php echo esc_js(wp_create_nonce('my_ajax_nonce')); ?>'
						},
						success: function(response){
							jQuery('#log_upload').find('.saving').remove();

							// Check for errors first - if sync failed, content was NOT deleted
							if(response.error && response.error.length > 0){
								inserted_text('#log_upload', '<strong style="color: red;">SYNC FAILED - KBucket content was NOT deleted</strong><br>');
								for(var i = 0; i < response.error.length; i++){
									inserted_text('#log_upload', '<strong style="color: red;">ERROR: ' + response.error[i] + '</strong><br>');
								}
								if(response.debug){
									inserted_text('#log_upload', 'Debug info: ' + response.debug + '<br>');
								}
								inserted_text('#log_upload', 'Please check your XML file and try again.<br>');
								jQuery('#form_upload_xml .button-primary').removeAttr('disabled');
								jQuery('#form_upload_xml input[type="file"]').show();
								return;
							}

							if(response.success && response.success.length > 0){
								inserted_text('#log_upload', 'Parsing complete!<br>');
								inserted_text('#log_upload', response.success.join('<br>'));

								inserted_text('#log_upload','Begin upload images<strong class="saving"><span>.</span><span>.</span><span>.</span></strong><br>');
								if(response.kb_arr_image && Object.keys(response.kb_arr_image).length > 0){
									var arr = Object.keys(response.kb_arr_image).map(function (key) {
										response.kb_arr_image[key].key = key;
										return response.kb_arr_image[key];
									});
									updateAllImages(arr);
								}else{
									inserted_text('#log_upload','Images not found', true, 'success_upload');
									inserted_text('#log_upload','Progress: <b>100%</b><strong class="saving"><span>.</span><span>.</span><span>.</span></strong>', true, 'c_upload');
									inserted_text('#log_upload','All done!');
									jQuery('#form_upload_xml .button-primary').removeAttr('disabled');
									jQuery('#form_upload_xml input[type="file"]').show();
								}
							} else {
								inserted_text('#log_upload', '<strong style="color: red;">Parsing failed with no success messages</strong><br>');
								jQuery('#form_upload_xml .button-primary').removeAttr('disabled');
								jQuery('#form_upload_xml input[type="file"]').show();
							}
						},
						error: function(e){
							inserted_text('#log_upload','Error: '+e.statusText);
						}
					});
				}
			},
			error: function(e){
				inserted_text('#log_upload','Error: '+e.statusText);
			}
		});
	});
	</script>
</div>
