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

use yii\bootstrap\Progress;
use yii\bootstrap\Modal;
use myretail\models\SyncToJurnal;
use myretail\models\SyncConfig;

$this->title = 'Master Sync';
$this->params['breadcrumbs'][] = $this->title;

$total = SyncToJurnal::getTotalSyncDataMaster();
?>
<div class="import-master-index">
    <h1><?= Html::encode($this->title) ?></h1>

    <?php
    if (SyncConfig::isEmpty()) {
    ?>
    	<div>Please fill the configuration before starting the sync process.</div>
    <?php
    } else {
    ?>

	    <?php
	    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 ="iconWarehouse" class="fa fa-square-o"></i></span> Sync Warehouse (<span id="countWarehouse">0</span> / <?= number_format($total['warehouse'], 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>
		<div>
			<span class="sync-icon"><i id ="iconUpdateWarehouse" class="fa fa-square-o"></i></span> Sync Update Warehouse (<span id="countUpdateWarehouse">0</span> / <?= number_format($total['updateWarehouse'], 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>
	<?php
    }
    ?>
</div>

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

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

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

	function updateDataWarehouse() {
		console.log('begin update warehouse');
		var data = '';

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

		$.ajax({
			url: '<?= Url::to(['update-warehouse/index']); ?>',
			success: function(result) {
				if (result == 'upware') {
					progress = 100;
					$('#iconUpdateWarehouse').removeClass('fa-spinner fa-pulse');
					$('#iconUpdateWarehouse').addClass('fa-check-square-o');
					$('#countUpdateWarehouse').html(totalUpdateWarehouse.toLocaleString('id'));
				} else {
					countUpdateWarehouse += parseInt(result);
					progress = Math.round(countUpdateWarehouse / totalUpdateWarehouse * 100 / 8) + 88;
					$('#countUpdateWarehouse').html(countUpdateWarehouse.toLocaleString('id'));
				}
				$('.progress-bar').css('width', progress+'%').attr('aria-valuenow', progress);

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

	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 = 88;
					$('#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 / 8) + 75;
					$('#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
						updateDataWarehouse();
				}
			}
		});
	}

	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 = 75;
					$('#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 / 8) + 63;
					$('#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 = 63;
					$('#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 / 8) + 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 importDataWarehouse() {
		console.log('begin import warehouse');
		var data = '';

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

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

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

	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 = 38;
					$('#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 / 8) + 25;
					$('#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 {
						importDataWarehouse();
					}
				}
			}
		});
	}

	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 = 25;
					$('#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 / 8) + 13;
					$('#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 = 13;
					$('#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 / 8);
					$('#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>