@extends('layout.masters')
@section('content')
<!-- ===================================== -->
<script type="text/javascript">
$(document).ready(function (){
	var x = document.getElementById("connection").value;
	if(x == 'ftp' || x == 'ssh'){
		document.getElementById("ftp").style.display = 'block';
		document.getElementById("file").style.display = 'none';
	}
	else if(x == 'keyfile'){
		document.getElementById("file").style.display = 'block';
		document.getElementById("ftp").style.display = 'none';
	}
	else{
		document.getElementById("file").style.display = 'none';
		document.getElementById("ftp").style.display = 'none';
	}
	$('#link').click(function(event) {
	console.log("success");
	})
})
</script>
<div id="page-wrapper">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12 col-md-6 col-md-offset-3">
				<div class="page-title">
					<h3>Add New Server</h3>
				</div>
				<div class="form-container">
					<form action="{{url('post-edit-server', $server->server_id)}}" method="POST" enctype="multipart/form-data">
						{{ csrf_field() }}
						<div class="form-group">
							<label for="title">Server Name</label>
							<input type="text" class="form-control" name="server_name" value="{{$server->server_name}}">
							@if ($errors->has('server_name'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('server_name') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="title">Host</label>
							<input type="text" class="form-control"  name="host" value="{{$server->host}}">
							@if ($errors->has('host'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('host') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="title">Server IP</label>
							<input type="text" class="form-control" name="server_ip" value="{{$server->server_ip}}">
							@if ($errors->has('server_ip'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('server_ip') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="role">Type of connection </label>
							<select class="form-control" name="connection_type" id="connection" onchange="connectionChange()">
								<option selected disabled hidden>Choose here</option>
								<option value='localhost'  {{ ( $server->connection_type == 'localhost' ) ? 'selected':''}} >Localhost</option>
								<option value='keyfile'  {{ ( $server->connection_type == 'keyfile' ) ? 'selected':''}} >Keyfile</option>
								<option value='ssh' {{ ($server->connection_type == 'ssh') ? 'selected':''}} >SSH</option>
								<!-- <option value='ftp' {{ ($server->connection_type == 'ftp') ? 'selected':''}} >FTP</option>
								<option value='ssh' {{ ($server->connection_type == 'ssh') ? 'selected':''}} >SSH</option>
								<option value='agent' {{ ($server->connection_type == 'agent') ? 'selected':''}} >Agent</option> -->
							</select>
							@if ($errors->has('connection_type'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('connection_type') }}</span>
							</div>
							@endif
						</div>
						<div id="ftp" >
							<div class="form-group">
								<label for="title">User Name</label>
								<input type="text" class="form-control" name="username" value="{{$server->username}}">
								@if ($errors->has('name'))
								<div class="alert alert-danger">
									<span class="error">{{ $errors->first('name') }}</span>
								</div>
								@endif
							</div>
							<div class="form-group">
								<label for="password">Password</label>
								<input type="password" class="form-control" name="password" value="{{$server->password}}"/>
								@if ($errors->has('password'))
								<div class="alert alert-danger">
									<span class="error">{{ $errors->first('password') }}</span>
								</div>
								@endif
							</div>
							<div class="form-group">
								<label for="email">Port</label>
								<input type="text" class="form-control" name="port" value="{{$server->port}}"/>
								@if ($errors->has('port'))
								<div class="alert alert-danger">
									<span class="error">{{ $errors->first('port') }}</span>
								</div>
								@endif
							</div>
						</div>
						<div class="form-group" id="file" >
							@if ($server->keyfile_path == '' || $server->keyfile_path == NULL)
							<label for="title">Select keyfile to upload </label>
							<input type="file" class="form-control" name="fileToUpload" id="fileToUpload">
						<!-- @if ($errors->has('name'))
						<div class="alert alert-danger">
						  <span class="error">{{ $errors->first('name') }}</span>
					  	</div>
					  	@endif -->
							@endif
							@if ($server->keyfile_path != '' && $server->keyfile_path != NULL)
							<label for="title">Uploaded key file name  </label><br>
							<input type="text" name="port" disabled value="{{$server->keyfile_name}}"/>
							<a class="btn btn-danger btn-xs delete" type="button" data-toggle="modal" data-id='{{$server->server_id}}' data-route='delete-server-keyfile' data-target="#customModal">delete</a>
							@endif
					  	</div>
						
					  <div class="buttons-container">
					  	<a class="btn btn-cancel" type="button" href="{{ url()->previous() }}">Cancel</a>
					  	<button class="btn btn-formSubmit" type="submit">Update</button>
					  </div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- /#page-wrapper -->
<!-- ===================================== -->

	<script>
		function connectionChange() {
		  var x = document.getElementById("connection").value;
		  if(x == 'ftp' || x == 'ssh'){
		  	document.getElementById("ftp").style.display = 'block';
		  	document.getElementById("file").style.display = 'none';
		  }
		  else if(x == 'keyfile'){
		  	document.getElementById("file").style.display = 'block';
		  	document.getElementById("ftp").style.display = 'none';
		  }
		  else{
		  	document.getElementById("file").style.display = 'none';
		  	document.getElementById("ftp").style.display = 'none';
		  }
		}
	</script>
@endsection