@extends('layout.masters')
@section('content')
<!-- ===================================== -->
<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-add-server')}}" 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">
							@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">
							@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">
							@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' >Localhost</option>
								<option value='keyfile' >Keyfile</option>
								<option value='ssh' >SSH</option>
								<!-- <option value='ftp' >FTP</option>
								<option value='ssh' >SSH</option>
								<option value='agent' >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" style="display: none;">
							<div class="form-group">
								<label for="title">User Name</label>
								<input type="text" class="form-control" id="taskTitle"  name="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"/>
								@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"/>
								@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" style="display: none;">
							<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 -->
					  </div>
					  <div class="buttons-container">
					  	<a class="btn btn-cancel" type="button" href="{{ url()->previous() }}">Cancel</a>
					  	<button class="btn btn-formSubmit" type="submit">Submit</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