<style>
	.updateModal .modal-body {
		min-height: 250px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.updatingArea img,
	.showOnprocess img {
		width: 120px;
		margin-top: 20px;
	}

	.updateModal h4,
	.updateModal h5,
	.updateModal h1 {
		font-weight: bold;
	}

	.updateModal {
		font-weight: normal;
	}

	h4.finishUpdate {
		height: 70px;
		width: 70px;
		background: #4AA96C;
		color: #fff;
		font-size: 47px;
		border-radius: 100%;
		line-height: 70px;
		margin: auto;
		box-shadow: 0 0 5px #ddd;
		margin-bottom: 20px;
	}

	#container {
		box-shadow: 0 0 8px var(--box-shadow) !important;
		color: var(--color) !important;
	}

	#container h1 {
		color: var(--color) !important;
	}
</style>
<div class="modal fade" id="updateModal" data-backdrop='static'>
	<div class="modal-dialog">
		<div class="modal-content updateModal">
			<?php include 'initial_page.php'; ?>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		$('#updateModal').modal('show');

		setTimeout(() => {
			$('.updatingArea').slideUp();
			$('.finishedArea, .modal-footer').slideDown();
		}, 2000);
	});

	$(document).on('click', '.startUpdate', function() {
		$('.showOnprocess').slideDown();
		$('.finishedArea').slideUp();
		$('.updateErrorMsg').remove();

		$update = $(this).data('update');
		var url = `<?= base_url('admin/system_update/start_update/${$update}'); ?>`;
		$(this).prop('disabled', true);
		$.get(url, {
			'csrf_test_name': `<?= $this->security->get_csrf_hash(); ?>`
		}, function(json) {
			if (json.st == 1) {
				$('.updateModal').html(json.load_data);
				$('.orderStatus').prop('disabled', false);

				if ($('.updateErrorMsg').length > 0) {
					$('.showOnprocess').hide();
					$('.modal-footer').slideDown();
				} else {
					setTimeout(() => {
						$('.showOnprocess').slideUp();
						$('.updatingArea').slideUp();
						$('.finishedArea, .modal-footer, .showAfterSuccess').slideDown();
					}, 2000);
				}
			} else {
				$('.showOnprocess').slideUp();
				$('.startUpdate').prop('disabled', false);
				alert(json.msg || 'Update failed.');
			}
		}, 'json').fail(function(xhr, status, error) {
			$('.showOnprocess').hide();
			$('.startUpdate').prop('disabled', false);
			let errorHtml = `
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal">&times;</button>
	                <h4 class="modal-title text-danger">Update Error</h4>
	            </div>
	            <div class="modal-body text-center text-danger">
	                <i class="fa fa-frown-o fa-4x mb-20 text-danger"></i>
	                <h4 class="text-danger">Sorry! Update Failed.</h4>
	                <p class="mb-10">An unexpected server error occurred during the update process.</p>
	                <div class="text-left" style="max-height: 250px; overflow: auto; border: 1px solid #feb2b2; padding: 15px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; font-size: 11px; color: #c53030;">
	                    <strong>Internal Error Details:</strong><br>
	                    ${xhr.responseText || 'No response from server. Check your internet connection.'}
	                </div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-secondary border" data-dismiss="modal">Close</button>
	                <button type="button" class="btn btn-primary startUpdate" data-update="1">Try Again</button>
	            </div>
	        `;
			$('.updateModal').html(errorHtml);
		});
		return false;
	});
</script>