@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 User</h3>
				</div>
				<div class="form-container">
					<form action="{{url('post-create')}}" method="POST">
						{{ csrf_field() }}
						<div class="form-group">
							<label for="title">User Name</label>
							<input type="text" class="form-control" id="taskTitle"  name="name">
							@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="email">Email id</label>
							<input type="email" aria-describedby="emailHelp" class="form-control" id="productAmount" name="email"/>
							@if ($errors->has('email'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('email') }}</span>
							</div>
							@endif
						</div>
						<div class="form-group">
							<label for="role">User role</label>
							<select class="form-control" name="role" id="selectRole" onchange="roleChange()">
								<option selected disabled hidden>Choose here</option>
								@foreach($roles as $role)
								<option value='{{$role->role_id}}' >{{$role->role_name}}</option>
								@endforeach
							</select>
							@if ($errors->has('role'))
							<div class="alert alert-danger">
								<span class="error">{{ $errors->first('role') }}</span>
							</div>
							@endif
						</div>
						<!--custom checkboxes-->
						<div class="form-group" id="depOption" style="display: none;">
							<label for="deps[]">Select Deployment</label>
							<div class="custom-checkbox">
								@foreach($deployments as $deployment)
								<div class="form-check">
									<label>
										<input type="checkbox" name="deps[]" value="{{$deployment->dep_id}}"> <span
										class="label-text">{{$deployment->dep_title}}</span>
									</label>
								</div>
								@endforeach
							</div>
						</div>
						<!--ends custom checkboxes-->
						<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 roleChange() {
		  var x = document.getElementById("selectRole").value;
		  var hiddenDiv = document.getElementById("depOption");
		  hiddenDiv.style.display = (x == 2) ? "block":"none";
		}

		document.getElementById('submit').onclick = function() {
		  var selected = [];
		  for (var option of document.getElementById('server').options) {
		    if (option.selected) {
		      selected.push(option.value);
		    }
		  }
		}
	</script>
@endsection