<?php

//////////////////////////////////////////////////////////////
//===========================================================
// manage_load_balancer_theme.php
//===========================================================
// SOFTACULOUS VIRTUALIZOR
// Version : 1.0
// Inspired by the DESIRE to be the BEST OF ALL
// ----------------------------------------------------------
// Started by: Alons
// Date:       8th Mar 2010
// Time:       23:00 hrs
// Site:       https://www.virtualizor.com/ (SOFTACULOUS VIRTUALIZOR)
// ----------------------------------------------------------
// Please Read the Terms of use at https://www.virtualizor.com
// ----------------------------------------------------------
//===========================================================
// (c)Softaculous Ltd.
//===========================================================
//////////////////////////////////////////////////////////////

if(!defined('VIRTUALIZOR')){

	die('Hacking Attempt');

}

function manage_load_balancer_theme(){

global $theme, $globals, $cluster, $user, $l, $host, $current, $error, $done, $onboot, $load_balancer, $sort_column, $sort_column_by, $servers, $servergroups, $vpses, $save_settings_done, $lb_uuid, $lb_ssl_certs, $kernel, $lb_status, $lb_stats, $lb_logs;

softheader($l['<title>']);
										
echo '
<style>

.dashboard-tab .nav-tabs, .adv_border .nav-tabs, .nav-tabs{
border-bottom: 1px solid var(--light_color) !important;
margin: 0;
}

.dashboard-tab .nav-tabs li a, .adv_border .nav-tabs li a, .nav-tabs a{
position: relative;
padding: 10px;
margin-right: 20px;
border: none;
border-radius: 0;
background: transparent;
transition: all 0.3s ease 0s;
z-index: 2;
font-size: 15px;
}

.dashboard-tab .nav-tabs li a:before, .adv_border .nav-tabs li a:before, .nav-tabs a:before{
content: "";
width: 100%;
height: 4px;
border-radius: 2px;
position: absolute;
bottom: 0;
left: 0;
}

.dashboard-tab .nav-tabs li a:after, .adv_border .nav-tabs li a:after, .nav-tabs a:after{
content: "";
width: 0;
height: 4px;
background-color: var(--primary_color) !important;
border-bottom: 1px solid #dee2e6 !important;
border-radius: 2px;
position: absolute;
bottom: -2px;
left: 0;
transition: all .4s ease 0s;
z-index: 1;
}
.dashboard-tab .nav-tabs .nav-link:hover{
border-radius : 2px;
}

.dashboard-tab .nav-tabs li a.active:after, .adv_border .nav-tabs li a.active:after, .nav-tabs a.active:after{
width: 100%;
opacity: 1;
}
.dashboard-tab .nav-tabs li a.active{
background-color:transparent !important;
color:var(--balck) !important;
}
.table td{
border-top: 1px solid #dee2e6 !important;
}
.status{
position:absolute;
bottom: 0px;
right: -4px;
}
</style>';

$GLOBALS['breadcrumbs'] = array('dashboard', 'lm_load_balancer', 'lms_manage_load_balancer');

echo page_header(__('Manage Load Balancer'), 'fas fa-balance-scale-right', '', 0, 0, '');

if(!empty($save_settings_done)){
	show_alert(__('Settings were saved successfully'));
}
error_handle($error);
echo '
<script>
$(document).ready(function(){
	$("#ssl_options").on("change", function(){
		if($(this).val() == "use_own"){
			$("#use_own_div").show();
		}else{
			$("#use_own_div").hide();
		}
	});

	$("#source_protocol").on("change", function(){
		if($(this).val() == "http"){
			$(".lb_div").removeClass("col-7");
			$(".lb_div").addClass("col-6");
			$(".vps_div").removeClass("col-4");
			$(".vps_div").addClass("col-5");
			$("#ssl_cert").hide();
			$("#use_own_div").hide();
			$("#ssl_options").val("create");
			$("#source_port").val("80");
		}else if($(this).val() == "https" || $(this).val() == "http2" || $(this).val() == "http3"){
			$(".lb_div").removeClass("col-6");
			$(".lb_div").addClass("col-7");
			$(".vps_div").removeClass("col-5");
			$(".vps_div").addClass("col-4");
			$("#source_port").val("443");
			$("#ssl_cert").show();
		}else if($(this).val() == "tcp"){
			$(".lb_div").removeClass("col-7");
			$(".lb_div").addClass("col-6");
			$(".vps_div").removeClass("col-4");
			$(".vps_div").addClass("col-5");
			$("#ssl_cert").hide();
			$("#use_own_div").hide();
			$("#ssl_options").val("create");
			$("#source_port").val("22");
		}
	})

	$("#save_settings").on("click", function(){
		$("#save_settings").prop("disabled", true);
		processing_symb(1);
		$.ajax({
			type: "POST",
			url: "'.$globals['index'].'act=manage_load_balancer&lb_uuid='.$lb_uuid.'&save_settings=1&api=json",
			dataType : "json",
			data:$("#settings_form").serialize(),
			success:function(res){
				processing_symb(0);
				$("#save_settings").prop("disabled", false);
				if("save_settings_done" in res){
					setTimeout(function(){ showalert("'.__J('Settings were saved successfully').'");
						$("#alert-modal").on("hidden.bs.modal", function (e) {
							location.reload(true);
						});
					return; } ,200);
				}
	
				// Are there any errors ?
				if(typeof(res["error"]) != "undefined"){
					setTimeout(function(){ var errors = "";
					for(x in res["error"]){
						errors = errors + res["error"][x]+ "<br>";
					}
					showalert(errors ,"1"); } ,200);
				}
			}
		});
	})
})

function remove_vm(vpsid){
	msg = `'.__J('Are you sure that you want to <b class=\'text-danger\'>remove</b> the VPS?').'<br>
	'.get_checkbox('delete_vm', __J('Delete VPS from panel as well?'), 'delete_vm').'`;
	showalert(msg, 4, function(confirm){
		if(confirm == false){
			return false;
		}else{
			processing_symb(1);
			var is_checked = $("#delete_vm").prop("checked");
			$.ajax({
				type: "POST",
				url: "'.$globals['index'].'act=manage_load_balancer&lb_uuid='.$lb_uuid.'&remove_vps="+vpsid+(!empty(is_checked) ? "&delete_vm=1" : "")+"&api=json",
				dataType : "json",
				success:function(res){
					processing_symb(0);
					if("remove_vps_done" in res){
						setTimeout(function(){ showalert("'.__J('The VPS was removed successfully').'");
							$("#alert-modal").on("hidden.bs.modal", function (e) {
								location.reload(true);
							});
						return; } ,200);
					}
		
					// Are there any errors ?
					if(typeof(res["error"]) != "undefined"){
						setTimeout(function(){ var errors = "";
						for(x in res["error"]){
							errors = errors + res["error"][x]+ "<br>";
						}
						showalert(errors ,"1"); } ,200);
					}
				}
			});
		}
	});
}
function remove_rule(rule){
	showalert("'.__J('Are you sure that you want to <b class=\'text-danger\'>delete</b> the rule?').'", 4, function(confirm){
		if(confirm == false){
			return false;
		}else{
			processing_symb(1);
			$.ajax({
				type: "POST",
				url: "'.$globals['index'].'act=manage_load_balancer&lb_uuid='.$lb_uuid.'&remove_rule="+rule+"&api=json",
				dataType : "json",
				success:function(res){
					processing_symb(0);
					if("remove_rule_done" in res){
						setTimeout(function(){ showalert("'.__J('The rule was removed successfully').'");
							$("#alert-modal").on("hidden.bs.modal", function (e) {
								location.reload(true);
							});
						return; } ,200);
					}
		
					// Are there any errors ?
					if(typeof(res["error"]) != "undefined"){
						setTimeout(function(){ var errors = "";
						for(x in res["error"]){
							errors = errors + res["error"][x]+ "<br>";
						}
						showalert(errors ,"1"); } ,200);
					}
				}
			});
		}
	});
}

function check_source_protocol(val, checkit = 0){
	if(val == "http"){
		$(".edit_lb_div").removeClass("col-7");
		$(".edit_lb_div").addClass("col-6");
		$(".edit_vps_div").removeClass("col-4");
		$(".edit_vps_div").addClass("col-5");
		$("#edit_ssl_cert").hide();
		$("#edit_use_own_div").hide();
		$("#edit_ssl_options").val("create");
		if(checkit){
			$("#edit_source_port").val("80");
		}
	}else if(val == "https" || val == "http2" || val == "http3"){
		$(".edit_lb_div").removeClass("col-6");
		$(".edit_lb_div").addClass("col-7");
		$(".edit_vps_div").removeClass("col-5");
		$(".edit_vps_div").addClass("col-4");
		$("#edit_ssl_cert").show();
		if(checkit){
			$("#edit_source_port").val("443");
		}
	}else if(val == "tcp"){
		$(".edit_lb_div").removeClass("col-7");
		$(".edit_lb_div").addClass("col-6");
		$(".edit_vps_div").removeClass("col-4");
		$(".edit_vps_div").addClass("col-5");
		$("#edit_ssl_cert").hide();
		$("#edit_use_own_div").hide();
		$("#edit_ssl_options").val("create");
		if(checkit){
			$("#edit_source_port").val("22");
		}
	}
}
function edit_rule(k, ele){

	if($("#edit_lb_rule_div").length <= 0){
		var _edit_lb_rule_div = \'<div id="edit_lb_rule_div"></div>\';
		$(_edit_lb_rule_div).prependTo(\'#softcontent\');
	}
	var data = JSON.parse($("#settings_"+k).html());
	var _htm = `
	<div class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h5>'.__J('Edit Rule').'</h5>
					<button type="button" class="close text-always-white" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body pr-1 pl-1 pt-0 pb-2">
					<div class="card p-3 m-2">
						<form method="post" id="edit_settings_form">
							<input type="hidden" name="old_key" value="`+(k)+`"/>
							<fieldset class="user_details_f">
								<legend class="user_details_f mb-0">'.__J('Load Balancer Method').'</legend>
								<div class="row mx-auto w-100">
									<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-4 my-2 px-1">
										<label>
											'.__J('Choose Method').'
										</label><br>
										<select name="edit_lb_method" class="custom-select">
											<option value="roundrobin" `+(data.lb_method == "roundrobin" ? "selected" : "")+`>roundrobin('.__J('Default').')</option>
											<option value="leastconn" `+(data.lb_method == "leastconn" ? "selected" : "")+`>leastconn</option>
											<option value="static-rr" `+(data.lb_method == "static-rr" ? "selected" : "")+`>static-rr</option>
											<option value="first" `+(data.lb_method == "first" ? "selected" : "")+`>first</option>
										</select>
									</div>
								</div>
							</fieldset>
							<fieldset class="user_details_f">
								<legend class="user_details_f mb-0">'.__J('Load Balancer Rules').'</legend>
								<div class="row mx-auto w-100">
									<div class="col-12 my-2 px-1">
										<div class="row mx-auto w-100">
											<div class="col-6 p-0 d-flex edit_lb_div" >
												<h6>'.__J('Load Balancer').'</h6>
											</div>
											<div class="col-1 p-0 d-flex align-items-center justify-content-center mt-3">
											</div>
											<div class="col-5 p-0 d-flex edit_vps_div">
												<h6>'.VM_SHORT.'</h6>
											</div>
										</div>
									</div>
								</div>
								<div class="row mx-auto w-100">
									<div class="col-12 my-2 px-1">
										<div class="row mx-auto w-100">
											<div class="col-6 p-0 d-flex edit_lb_div">
												<div class="w-100 px-1">
													<label>
													'.__J('Protocol').'
													</label><br>
													<select name="edit_source_protocol" class="custom-select" id="edit_source_protocol" onchange="check_source_protocol($(this).val(), 1);">
														<option value="http" `+(data.source_protocol == "http" ? "selected" : "")+`>HTTP</option>
														<option value="https" `+(data.source_protocol == "https" ? "selected" : "")+`>HTTPS</option>
														<option value="http2" `+(data.source_protocol == "http2" ? "selected" : "")+`>HTTP2</option>
														<option value="http3" `+(data.source_protocol == "http3" ? "selected" : "")+`>HTTP3</option>
														<option value="tcp" `+(data.source_protocol == "tcp" ? "selected" : "")+`>TCP</option>
													</select>
												</div>
												<div class="w-100 px-1">
													<label>
														'.__J('Port').'
													</label><br>
													<input type="text" name="edit_source_port" id="edit_source_port" value="`+data.source_port+`" class="form-control">
												</div>
												<div class="w-100 px-1" id="edit_ssl_cert" style="display:none;">
													<label>
														'.__J('Certificate').'
													</label><br>
													<select id="edit_ssl_options" class="custom-select" name="edit_ssl_options">
														<option value="create">'.__J('Self-signed').'</option>
														<option value="use_own">'.__J('Use Your Own').'</option>';
														if(!empty($lb_ssl_certs)){
															foreach($lb_ssl_certs as $k => $v){
																echo '<option value="'.$k.'" `+(data.ssl_id == "'.$k.'" ? "selected" : "")+`>'.$v['ssl_name'].'</option>';
															}
														}
														echo '
													</select>
												</div>
											</div>
											<div class="col-1 p-0 d-flex align-items-center justify-content-center mt-3">
												<i class="fas fa-arrow-right"></i>
											</div>
											<div class="col-5 p-0 d-flex edit_vps_div">
												<div class="w-100 px-1">
													<label>
														'.__J('Protocol').'
													</label><br>
													<select name="edit_dest_protocol" class="custom-select" onchange="($(this).val() == \'https\' ? $(\'#edit_dest_port\').val(\'443\') : $(\'#edit_dest_port\').val(\'80\'))">
														<option value="http" `+(data.dest_protocol == "http" ? "selected" : "")+`>HTTP</option>
														<option value="https" `+(data.dest_protocol == "https" ? "selected" : "")+`>HTTPS</option>
														<option value="tcp" `+(data.dest_protocol == "tcp" ? "selected" : "")+`>TCP</option>
													</select>
												</div>
												<div class="w-100 px-1">
													<label>
														'.__J('Port').'
													</label><br>
													<input type="text" name="edit_dest_port" id="edit_dest_port" value="`+data.dest_port+`" class="form-control">
												</div>
											</div>
										</div>
									</div>
									<!-- <div class="col-2 my-2 px-1">
										<label>
											'.__J('Directory').'
										</label><br>
										<input type="text" name="edit_dir" value="`+data.dir+`" class="form-control">
									</div> -->
								</div>
								<div class="row mx-auto w-100 my-3" `+(data.source_protocol == "http" ? "style=\'display:none\'" : "")+`>
									<div class="col-3">
										<label class="control-label">'.__J('Reinstall SSL').'&nbsp;<a class="info" data-placement="right" tooltip="'.__J('If checked then SSL will be reinstalled depending on SSL option selected').'"><i class="fas text-primary fa-info-circle"></i></a></label>
									</div>
									<div class="col-1">
										'.get_checkbox('reinstall_ssl', '', 'reinstall_ssl').'
									</div>
								</div>
							</fieldset>
							<fieldset class="user_details_f" id="edit_use_own_div" style="display:none;">
								<legend class="user_details_f mb-0">'.__J('Certificate Details').'</legend>
								<div class="row mx-auto w-100">
									<div class="col-sm-12 px-1 my-2">
										<label>
											'.__J('SSL Name').'
										</label><br>
										<input type="text" name="edit_ssl_name" class="form-control"/>
									</div>
								</div>
								<div class="row mx-auto w-100">
									<div class="col-sm-12 px-1 my-2">
										<label>
											'.__J('Certificate').'
										</label><br>
										<textarea class="form-control font-monospace" name="edit_cert" rows="5"></textarea>
									</div>
									<div class="col-sm-12 px-1 my-2">
										<label>
											'.__J('Private Key').'
										</label><br>
										<textarea class="form-control font-monospace" name="edit_key" rows="5"></textarea>
									</div>
									<div class="col-sm-12 px-1 my-2">
										<label>
											'.__J('Certificate Chain').'
										</label><br>
										<textarea class="form-control font-monospace" name="edit_chain" rows="5"></textarea>
									</div>
								</div>
							</fieldset>
							<div class="w-100 text-center">
								<input type="button" id="edit_settings" value="'.__J('Save Settings').'" class="go_btn"/>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>`;
	var ele = $(_htm).prependTo(\'#edit_lb_rule_div\');
	$(ele).modal();
	show_tooltip();
	$("#edit_ssl_options").on("change", function(){
		if($(this).val() == "use_own"){
			$("#edit_use_own_div").show();
		}else{
			$("#edit_use_own_div").hide();
		}
	});
	check_source_protocol(data.source_protocol);
	$("#edit_settings").on("click", function(){
		$("#edit_settings").prop("disabled", true);
		processing_symb(1);
		$.ajax({
			type: "POST",
			url: "'.$globals['index'].'act=manage_load_balancer&lb_uuid='.$lb_uuid.'&edit_settings=1&api=json",
			dataType : "json",
			data:$("#edit_settings_form").serialize(),
			success:function(res){
				processing_symb(0);
				$("#edit_settings").prop("disabled", false);
				if("edit_settings_done" in res){
					setTimeout(function(){ showalert("'.__J('Settings were saved successfully').'");
						$("#alert-modal").on("hidden.bs.modal", function (e) {
							location.reload(true);
						});
					return; } ,200);
				}
	
				// Are there any errors ?
				if(typeof(res["error"]) != "undefined"){
					setTimeout(function(){ var errors = "";
					for(x in res["error"]){
						errors = errors + res["error"][x]+ "<br>";
					}
					showalert(errors ,"1"); } ,200);
				}
			}
		});
	})
	$(ele).on("hidden.bs.modal", function (e) {
		$("#edit_lb_rule_div").remove();
	});
}
</script>
<div class="card p-2 mx-3" style="">
	<div class="row mx-auto w-100">
		<div class="col-sm-12 mb-3 d-flex align-items-center p-0">
			<div class="mr-2">
				<div class="border border-primary rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 50px; height:50px;position:relative">
					<i class="fas fa-code-branch h4 m-0"></i>
					<div class="status">
						<i class="fas fa-circle cursor-pointer fa-circle-'.($lb_status ? 'green' : 'red').' h6 m-0"></i>
					</div>
				</div>
			</div>
			<div>
				<div class="d-flex align-items-center mb-2 text-dark">
					<h5 class="m-0">'.$load_balancer['hostname'].'</h5>
					<small class="ml-2"><a href="'.$globals['index'].'&act=managevps&vpsid='.$load_balancer['vpsid'].'" target="_blank"><i class="fas fa-external-link-alt text-primary"></i></a></small>
				</div>
				<div class="d-flex align-items-center">
					<div class="text-muted m-0">'.$load_balancer['sg_name'].'</div>
					<div class="mx-1">/</div>
					<div class="text-muted m-0">'.$load_balancer['ip'].'</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard-tab" id="dashboard">
		<ul class="nav nav-tabs mb-4 dash-tabs" id="pills-tab" role="tablist">
			<li class="nav-item">
				<a class="nav-link active" id="vps-list-tab" data-toggle="pill" href="#vps-list" role="tab" aria-controls="vps-list" aria-selected="false"><i class="fas fa-server mr-2"></i>'.__('VPS List').'<span class="badge badge-primary bg-primary ml-2">'.$load_balancer['num_vps'].'</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" id="rules-list-tab" data-toggle="pill" href="#rules-list" role="tab" aria-controls="rules-list" aria-selected="false"><i class="fas fa-atlas mr-2"></i>'.__('Rules List').'<span class="badge badge-primary bg-primary ml-2">'.count($load_balancer['settings']).'</span></a>
				
			</li>
			<li class="nav-item">
				<a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="settings" aria-selected="false"><i class="fas fa-cogs mr-2"></i>'.__('Settings').'</a>
			</li>				
			<li class="nav-item">
				<a class="nav-link" id="stats-tab" data-toggle="pill" href="#stats" role="tab" aria-controls="stats" aria-selected="false"><i class="fas fa-table mr-2"></i>'.__('Statistics').'</a>
			</li>				
			<li class="nav-item">
				<a class="nav-link" id="logs-tab" data-toggle="pill" href="#logs" role="tab" aria-controls="logs" aria-selected="false"><i class="fas fa-clipboard-list mr-2"></i>'.__('Logs').'</a>
			</li>				
		</ul>
		<div class="tab-content px-2" id="pills-tabContent">
			<div class="tab-pane fade show active" id="vps-list" role="tabpanel" aria-labelledby="vps-list-tab">
				';
				if(empty($vpses)){
					echo '<div class="notice"><b>'.__('Note').' : </b>&nbsp; '.__('No VPS added').'</div>';
				}else{
					echo '
					<div class="w-100 mx-auto sticky">
						<table class="table table-hover tablesorter">
							<tr>
								<th class="min_width">
									'.__('VPS ID').'
								</th>
								<th>
									UUID
								</th>
								<th>
									'.__('Hostname').'
								</th>
								<th>
									IP
								</th>
								<th>
									'.__('Server').'
								</th>
								<th class="min_width">
									'.__('Manage').'
								</th>
							</tr>';
							foreach($vpses as $vpsid => $vps){
								echo '
								<tr>
									<td>
										<a href="'.$globals['index'].'act=managevps&vpsid='.$vpsid.'" target="_blank">'.$vpsid.'</a>
									</td>
									<td>
										'.$vps['uuid'].(!empty($vps['locked']) ? '<i class="fas fa-lock pl-2" tooltip="'.$vps['locked']['reason'].'" data-original-title="" title="" style=""></i>' : '').'
									</td>
									<td>
										'.$vps['hostname'].'
									</td>
									<td>
										'.$vps['ip'].'
									</td>
									<td>
										'.$servers[$vps['serid']]['server_name'].'
									</td>
									<td>
										<a href="#" class="text-danger" onclick="remove_vm(\''.$vpsid.'\')" title="'.__('Remove').'"><i class="fas fa-trash m-1"></i></a>
									</td>
								</tr>
								';
							}
							echo'
						</table>
					</div>';
				}
				echo'
			</div>
			<div class="tab-pane fade" id="rules-list" role="tabpanel" aria-labelledby="rules-list-tab">
				<div class="w-100 mx-auto sticky">
					<table class="table table-hover tablesorter">
						<tr>
							<th>
								'.__('Source Protocol').'
							</th>
							<th>
								'.__('Source Port').'
							</th>
							<th>
								'.__('Destination Protocol').'
							</th>
							<th>
								'.__('Destination Port').'
							</th>
							<th>
								'.__('Load Balancer Method').'
							</th>
							<!--<th>
								'.__('Directory').'
							</th>-->
							<th class="min_width">
								'.__('Manage').'
							</th>
						</tr>
					';
					foreach($load_balancer['settings'] as $k => $v){
						echo '
						<tr id="tr_'.$k.'">
							<span id="settings_'.$k.'" style="display:none;">'.json_encode($v).'</span>
							<td class="pl-2">
								'.$v['source_protocol'].'
							</td>
							<td class="pl-2">
								'.$v['source_port'].'
							</td>
							<td class="pl-2">
								'.$v['dest_protocol'].'
							</td>
							<td class="pl-2">
								'.$v['dest_port'].'
							</td>
							<td class="pl-2">
								'.$v['lb_method'].'
							</td>
							<!--<td class="pl-2">
								'.$v['dir'].'
							</td>-->
							<td>
								<div class="d-flex">
									<a href="#" class="text-warning" title="'.__('Edit').'"><i class="fas fa-pencil-alt m-1" onclick="edit_rule(\''.$k.'\',this)"></i></a>
									<a href="#" class="text-danger" title="'.__('Remove').'" onclick="remove_rule(\''.$k.'\')"><i class="fas fa-trash m-1"></i></a>
								</div>
							</td>
						</tr>
						';
					}
					echo'
					</table>
				</div>
			</div>
			<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
				<form method="post" id="settings_form">
					<fieldset class="user_details_f">
						<legend class="user_details_f mb-0">'.__('Load Balancer Method').'</legend>
						<div class="row mx-auto w-100">
							<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-xl-4 my-2 px-1">
								<label>
									'.__('Choose Method').'
								</label><br>
								<select name="lb_method" class="custom-select">
									<option value="roundrobin">roundrobin('.__('Default').')</option>
									<option value="leastconn">leastconn</option>
									<option value="static-rr">static-rr</option>
									<option value="first">first</option>
								</select>
							</div>
						</div>
					</fieldset>
					<fieldset class="user_details_f">
						<legend class="user_details_f mb-0">'.__('Load Balancer Rules').'</legend>
						<div class="row mx-auto w-100">
							<div class="col-12 my-2 px-1">
								<div class="row mx-auto w-100">
									<div class="col-6 p-0 d-flex lb_div" >
										<h6>'.__('Load Balancer').'</h6>
									</div>
									<div class="col-1 p-0 d-flex align-items-center justify-content-center mt-3">
									</div>
									<div class="col-5 p-0 d-flex vps_div">
										<h6>'.VM_SHORT.'</h6>
									</div>
								</div>
							</div>
						</div>
						<div class="row mx-auto w-100">
							<div class="col-12 my-2 px-1">
								<div class="row mx-auto w-100">
									<div class="col-6 p-0 d-flex lb_div">
										<div class="w-100 px-1">
											<label>
											'.__('Protocol').'
											</label><br>
											<select name="source_protocol" class="custom-select" id="source_protocol">
												<option value="http">HTTP</option>
												<option value="https">HTTPS</option>
												<option value="http2">HTTP2</option>
												<option value="http3">HTTP3</option>
												<option value="tcp">TCP</option>
											</select>
										</div>
										<div class="w-100 px-1">
											<label>
												'.__('Port').'
											</label><br>
											<input type="text" name="source_port" id="source_port" value="80" class="form-control">
										</div>
										<div class="w-100 px-1" id="ssl_cert" style="display:none;">
											<label>
												'.__('Certificate').'
											</label><br>
											<select id="ssl_options" class="custom-select" name="ssl_options">
												<option value="create">'.__('Self-signed').'</option>
												<option value="use_own">'.__('Use Your Own').'</option>
												';
												if(!empty($lb_ssl_certs)){
													foreach($lb_ssl_certs as $k => $v){
														echo '<option value="'.$k.'">'.$v['ssl_name'].'</option>';
													}
												}
												echo '
											</select>
										</div>
									</div>
									<div class="col-1 p-0 d-flex align-items-center justify-content-center mt-3">
										<i class="fas fa-arrow-right"></i>
									</div>
									<div class="col-5 p-0 d-flex vps_div">
										<div class="w-100 px-1">
											<label>
												'.__('Protocol').'
											</label><br>
											<select name="dest_protocol" class="custom-select" onchange="($(this).val() == \'https\' ? $(\'#dest_port\').val(\'443\') : $(\'#dest_port\').val(\'80\'))">
												<option value="http">HTTP</option>
												<option value="https">HTTPS</option>
												<option value="tcp">TCP</option>
											</select>
										</div>
										<div class="w-100 px-1">
											<label>
												'.__('Port').'
											</label><br>
											<input type="text" name="dest_port" id="dest_port" value="80" class="form-control">
										</div>
									</div>
								</div>
							</div>
							<!--<div class="col-2 my-2 px-1">
								<label>
									'.__('Directory').'
								</label><br>
								<input type="text" name="dir" value="/" class="form-control">
							</div>-->
						</div>
					</fieldset>
					<fieldset class="user_details_f" id="use_own_div" style="display:none;">
						<legend class="user_details_f mb-0">'.__('Certificate Details').'</legend>
						<div class="row mx-auto w-100">
							<div class="col-sm-12 px-1 my-2">
								<label>
									'.__('SSL Name').'
								</label><br>
								<input type="text" name="ssl_name" class="form-control"/>
							</div>
						</div>
						<div class="row mx-auto w-100">
							<div class="col-sm-12 px-1 my-2">
								<label>
									'.__('Certificate').'
								</label><br>
								<textarea class="form-control font-monospace" name="cert" rows="5"></textarea>
							</div>
							<div class="col-sm-12 px-1 my-2">
								<label>
									'.__('Private Key').'
								</label><br>
								<textarea class="form-control font-monospace" name="key" rows="5"></textarea>
							</div>
							<div class="col-sm-12 px-1 my-2">
								<label>
									'.__('Certificate Chain').'
								</label><br>
								<textarea class="form-control font-monospace" name="chain" rows="5"></textarea>
							</div>
						</div>
					</fieldset>
					<div class="w-100 text-center">
						<input type="button" id="save_settings" value="'.__('Save Settings').'" class="go_btn" name="save_settings"/>
					</div>
				</form>
			</div>
			<div class="tab-pane fade" id="stats" role="tabpanel" aria-labelledby="stats-tab">
				<div style="overflow:auto;" id="stats_div">'.$lb_stats.'</div>
			</div>
			<div class="tab-pane fade" id="logs" role="tabpanel" aria-labelledby="logs-tab">
				<div style="overflow:auto;"><pre>'.implode('<br>', $lb_logs).'</pre></div>
			</div>
		</div>
	</div>
</div>
<br/>
';

softfooter();

echo '
<script>
$("#stats_div").find("table")[$("#stats_div").find("table").length-4].remove();
$("#stats_div").find("table")[$("#stats_div").find("table").length-3].remove();
</script>
<div id="processing_symb"><div class="loader-lg"></div></div>';
}

