<style>
	.sportlet-content-center {
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.sportlet-content-center img {
		margin-top: 30px;
	}
	.sportlet-content-center span {
		font-size: 24px;
		color: #134165;
	}
	.serverTodo li {
		display: flex;
		align-items: center;
		margin: 5px;
		font-size: 16px;
	}
	.serverTodo li.maked {
		color: #198754;
	}
	.serverTodo li.active {
		color: #fd7e14;
	}
	.serverTodo li.waiting {
		color: #134165;
	}
	.serverTodo li i {
		margin: 0px 5px;
	}
	i.fa-close {
		color: #dc3545;
	}
	i.fa-refresh {
		color: #fd7e14
	}
	i.fa-check {
		color: #198754;
	}
	.todoExtra {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.todoInfo {
		display: flex;
		justify-content: flex-end;
		margin: 10px 0px;
	}
	.todoInfo ul li {
		display: flex;
		align-items: center;
		font-size: 14px;
	}
    .statusIcon {
        font-size: 24px;
        color: #134165;
    }
</style>
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-header">
				<span class="card-title"><i class="ri-unsplash-line"></i> Sunucu Kurulum Ekranı</span>
			</div>
			<div class="card-content">
				<div class="sportlet">
					<div class="smain">
						<div class="mb-3">
							<ul class="serverTodo">
								
							</ul>
						</div>
						<hr>
						<div class="sportlet-content-center">
							<span id="statusText"></span>
							<i class="fa fa-refresh fa-spin statusIcon"></i>
						</div>
						<hr>
						<div class="todoExtra">
							<div class="todoInfo">
								<ul>
									<li class="maked"><i class="ri-check-double-line"></i>: Bitirilmiş işlem</li>
									<li class="active"><i class="ri-edit-circle-line"></i>: Üzerinde çalışılan işlem</li>
									<li class="waiting"><i class="ri-git-pull-request-fill"></i>: İşlem sırası bekleyen</li>
								</ul>			
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
    var laststep = -1,time = 90,more = true,more2 = true;
	getStatus();
	setInterval(function(){ 
		if(more){
			more = false;
			$.ajax({
                url: "{{ beGetRoute('client.userproduct.userproduct.show.post') }}",
				type: "post",
				data: {
					action:"format_trigger",
                    upid:{{ $userproduct['upid'] }}
				},
				dataType: "json",
				crossDomain: true,
				success: function(response){
					more = true;
				}
			});	
		}	
	},5000);
	setInterval(function(){ 
		if(more2){
			more2 = false;
			getStatus();	
		}	
	},5000);
	function getStatus(){
		$.ajax({
            url: "{{ beGetRoute('client.userproduct.userproduct.show.post') }}",
			type: "post",
            data: {
                action:"format_step",
                laststep:laststep,
                upid:{{ $userproduct['upid'] }}
            },
			dataType: "json",
			crossDomain: true,
			success: function(response){
				more2 = true;
				if(response.refresh){
					location.reload();
				}
				if(response.percent){
					$(".percentServer").html("%"+response.percent);
				}
				if(response.steps){
					$("#statusText").empty().append(response.steptext);
					$(".serverTodo").empty().append(response.steps);
				}
				if(response.stepnow){
					laststep = response.stepnow;
				}
			}
		});			
	}
</script>