<?php
use yii\helpers\Html;
use yii\helpers\Url;

use yii\bootstrap\Progress;
use yii\bootstrap\Modal;
use backend\models\SyncToJurnal;

$this->title = 'Master Sync';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="import-master-index">
    <h1><?= Html::encode($this->title) ?></h1>

    <?php
    $total = SyncToJurnal::getTotalSyncDataMaster();

    echo Progress::widget([
	    'percent' => 0,
	    'barOptions' => ['class' => 'progress-bar-success'],
    	'options' => ['class' => 'active progress-striped']
	]);
	?>
	<div>
		<span class="sync-icon"><i id ="iconProduct" class="fa fa-square-o"></i></span> Sync Product (<span id="countProduct">0</span> / <?= number_format($total['product'], 0, ',', '.') ?>)
	</div>
	<div>
		<span class="sync-icon"><i id ="iconCustomer" class="fa fa-square-o"></i></span> Sync Customer (<span id="countCustomer">0</span> / <?= number_format($total['customer'], 0, ',', '.') ?>)
	</div>
	<div>
		<span class="sync-icon"><i id ="iconSupplier" class="fa fa-square-o"></i></span> Sync Supplier (<span id="countSupplier">0</span> / <?= number_format($total['supplier'], 0, ',', '.') ?>)
	</div>
	<div>
		<span class="sync-icon"><i id ="iconUpdateProduct" class="fa fa-square-o"></i></span> Sync Update Product (<span id="countUpdateProduct">0</span> / <?= number_format($total['updateProduct'], 0, ',', '.') ?>)
	</div>
	<div>
		<span class="sync-icon"><i id ="iconUpdateCustomer" class="fa fa-square-o"></i></span> Sync Update Customer (<span id="countUpdateCustomer">0</span> / <?= number_format($total['updateCustomer'], 0, ',', '.') ?>)
	</div>
	<div>
		<span class="sync-icon"><i id ="iconUpdateSupplier" class="fa fa-square-o"></i></span> Sync Update Supplier (<span id="countUpdateSupplier">0</span> / <?= number_format($total['updateSupplier'], 0, ',', '.') ?>)
	</div>

	<?php
	Modal::begin([
		// 'header' => '<h2>Hello world</h2>',
		'footer' => '<button class="btn btn-primary btn-close">OK</button>',
		'clientEvents' => [
			'hide.bs.modal' => "function(e) {
				$('.progress-bar').css('width', '0%').attr('aria-valuenow', 0);
				$('.sync-icon i').removeClass('fa-check-square-o');
				$('.sync-icon i').addClass('fa-square-o');
			}"
		],
    ]);
    echo 'Sync done!';
    Modal::end();
    ?>

    <button class="btn btn-primary start-import">Mulai Sync</button>
    <button class="btn btn-danger stop-import">Stop Sync</button>
</div>

<script type="text/javascript">
	var progress = 0;
	var continueSync = true;

	var totalProduct = <?= $total['product'] ?>;
	var totalCustomer = <?= $total['customer'] ?>;
	var totalSupplier = <?= $total['supplier'] ?>;
	var countProduct = 0;
	var countCustomer = 0;
	var countSupplier = 0;

	var totalUpdateProduct = <?= $total['updateProduct'] ?>;
	var totalUpdateCustomer = <?= $total['updateCustomer'] ?>;
	var totalUpdateSupplier = <?= $total['updateSupplier'] ?>;
	var countUpdateProduct = 0;
	var countUpdateCustomer = 0;
	var countUpdateSupplier = 0;

	function updateDataSupplier() {
		console.log('begin update supplier');
		var data = '';

		if (!$('#iconUpdateSupplier').hasClass('fa-spinner')) {
			$('#iconUpdateSupplier').removeClass('fa-square-o');
			$('#iconUpdateSupplier').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['update-supplier/index']); ?>',
			success: function(result) {
				if (result == 'upsupp') {
					progress = 100;
					$('#iconUpdateSupplier').removeClass('fa-spinner fa-pulse');
					$('#iconUpdateSupplier').addClass('fa-check-square-o');
					$('#countUpdateSupplier').html(totalUpdateSupplier.toLocaleString('id'));
				} else {
					countUpdateSupplier += parseInt(result);
					progress = Math.round(countUpdateSupplier / totalUpdateSupplier * 100 / 6) + 83;
					$('#countUpdateSupplier').html(countUpdateSupplier.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'upsupp')
						updateDataSupplier();
					else
						$('.modal').modal('show');
				}
			}
		});
	}

	function updateDataCustomer() {
		console.log('begin update customer');
		var data = '';

		if (!$('#iconUpdateCustomer').hasClass('fa-spinner')) {
			$('#iconUpdateCustomer').removeClass('fa-square-o');
			$('#iconUpdateCustomer').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['update-customer/index']); ?>',
			success: function(result) {
				if (result == 'upcust') {
					progress = 83;
					$('#iconUpdateCustomer').removeClass('fa-spinner fa-pulse');
					$('#iconUpdateCustomer').addClass('fa-check-square-o');
					$('#countUpdateCustomer').html(totalUpdateCustomer.toLocaleString('id'));
				} else {
					countUpdateCustomer += parseInt(result);
					progress = Math.round(countUpdateCustomer / totalUpdateCustomer * 100 / 6) + 67;
					$('#countUpdateCustomer').html(countUpdateCustomer.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'upcust')
						updateDataCustomer();
					else
						updateDataSupplier();
				}
			}
		});
	}

	function updateDataProduct() {
		console.log('begin update product');
		var data = '';

		if (!$('#iconUpdateProduct').hasClass('fa-spinner')) {
			$('#iconUpdateProduct').removeClass('fa-square-o');
			$('#iconUpdateProduct').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['update-product/index']); ?>',
			success: function(result) {
				if (result == 'upprod') {
					progress = 67;
					$('#iconUpdateProduct').removeClass('fa-spinner fa-pulse');
					$('#iconUpdateProduct').addClass('fa-check-square-o');
					$('#countUpdateProduct').html(totalUpdateProduct.toLocaleString('id'));
				} else {
					countUpdateProduct += parseInt(result);
					progress = Math.round(countUpdateProduct / totalUpdateProduct * 100 / 6) + 50;
					$('#countUpdateProduct').html(countUpdateProduct.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'upprod')
						updateDataProduct();
					else
						updateDataCustomer();
				}
			}
		});
	}

	function importDataSupplier() {
		console.log('begin import supplier');
		var data = '';

		if (!$('#iconSupplier').hasClass('fa-spinner')) {
			$('#iconSupplier').removeClass('fa-square-o');
			$('#iconSupplier').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['import-supplier/index']); ?>',
			success: function(result) {
				if (result == 'supp') {
					progress = 50;
					$('#iconSupplier').removeClass('fa-spinner fa-pulse');
					$('#iconSupplier').addClass('fa-check-square-o');
					$('#countSupplier').html(totalSupplier.toLocaleString('id'));
				} else {
					countSupplier += parseInt(result);
					progress = Math.round(countSupplier / totalSupplier * 100 / 6) + 33;
					$('#countSupplier').html(countSupplier.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'supp')
						importDataSupplier();
					else {
						updateDataProduct();
					}
				}
			}
		});
	}

	function importDataCustomer() {
		console.log('begin import customer');
		var data = '';

		if (!$('#iconCustomer').hasClass('fa-spinner')) {
			$('#iconCustomer').removeClass('fa-square-o');
			$('#iconCustomer').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['import-customer/index']); ?>',
			success: function(result) {
				if (result == 'cust') {
					progress = 33;
					$('#iconCustomer').removeClass('fa-spinner fa-pulse');
					$('#iconCustomer').addClass('fa-check-square-o');
					$('#countCustomer').html(totalCustomer.toLocaleString('id'));
				} else {
					countCustomer += parseInt(result);
					progress = Math.round(countCustomer / totalCustomer * 100 / 6) + 17;
					$('#countCustomer').html(countCustomer.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'cust')
						importDataCustomer();
					else
						importDataSupplier();
				}
			}
		});
	}

	function importDataProduct() {
		console.log('begin import product');
		var data = '';

		if (!$('#iconProduct').hasClass('fa-spinner')) {
			$('#iconProduct').removeClass('fa-square-o');
			$('#iconProduct').addClass('fa-spinner fa-pulse');
		}

		$.ajax({
			url: '<?= Url::to(['import-product/index']); ?>',
			success: function(result) {
				if (result == 'prod') {
					progress = 17;
					$('#iconProduct').removeClass('fa-spinner fa-pulse');
					$('#iconProduct').addClass('fa-check-square-o');
					$('#countProduct').html(totalProduct.toLocaleString('id'));
				} else {
					countProduct += parseInt(result);
					progress = Math.round(countProduct / totalProduct * 100 / 6);
					$('#countProduct').html(countProduct.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

				data = result;
				console.log(data);
			},
			complete: function() {
				if (continueSync) {
					if (data != 'prod')
						importDataProduct();
					else
						importDataCustomer();
				}
			}
		});
	}

	$('.start-import').click(function() {
		continueSync = true;
		importDataProduct();
	});

	$('.stop-import').click(function() {
		continueSync = false;
		$('.fa-spinner.fa-pulse').removeClass('fa-spinner fa-pulse').addClass('fa-square-o');
		$('.sync-icon i').removeClass('fa-check-square-o');
		$('.sync-icon i').addClass('fa-square-o');
	});

	$('.btn-close').click(function() {
		continueSync = true;
		$('.modal').modal('hide');
	});
</script>