@extends('layouts.app')

@section('page-css')

@endsection

@section('content')
	<div class="container-fluid d-block">
		<div id="register-page-container"  class="py-4">
			<div class="card">
				<div class="card-header">
					{{ $page_title }}
				</div>
				<div class="alert_container" style="display: none;">
				</div>
				<div class="card-body">
					<form role="form" class="form register_form" autocomplete="off">
						<div class="box-body">
							<div class="form-group">
								<label for="firstname">Employee ID</label>
								<input type="text" class="form-control" name="employee_id" id="employee_id" required="">
							</div>

							<div class="row">
								<div class="form-group col-md-4">
									<label for="group">Group</label>
									<select placeholder="test" name="group" id="group" class="selectpicker show-tick form-control" data-live-search="true" title="Select Group" required onchange="usersPageFunctions.populateDivision(this.value, 'division');">
										<option value="">Select Group</option>
										@foreach($groups as $key => $value)
											<option value="{{ $value['group_id'] }}">{{ $value['group_name'] }}</option>
										@endforeach
									</select>
								</div>
								<div class="form-group col-md-4">
									<label for="division">Division</label>
									<select name="division" class="selectpicker show-tick form-control dept" id="division" data-live-search="true" required="required" title="Select Division" onchange="usersPageFunctions.populateDepartment(this.value, 'department');" disabled> 
									</select>
								</div>
								<div class="form-group col-md-4">
									<label for="department">Department</label>
									<select name="department" class="selectpicker show-tick form-control" id="department" data-live-search="true" required="required" title="Select Department" disabled>
									</select>
								</div>
							</div>

							<div class="form-group">
								<label for="firstname">First Name</label>
								<input type="text" class="form-control" name="firstname" id="firstname" required="">
							</div>
							<div class="form-group">
								<label for="nickname">Nickname</label>
								<input type="text" class="form-control" name="nickname" id="nickname" required="" maxlength="8">
								<span class="help-block">Max of eight characters</span>
							</div>
							<div class="form-group">
								<label for="lastname">Last Name</label>
								<input type="text" class="form-control" name="lastname" id="lastname" required="">
							</div>
							<div class="form-group">
								<label for="designation">Position</label>
								<input type="text" class="form-control" name="designation" id="designation" required="" maxlength="20">
							</div>
							<div class="form-group">
								<label for="email">Email</label>
	                            <div class="d-flex">
	                                <div class="col-xs-8" style="padding-right: 0;">
	                                    <input type="text" class="form-control" name="email" id="email" required="">
	                                </div>
	                                <div class="col-xs-4" style="padding-left: 0">
	                                    <select required class="form-control" name="domain">
	                                    	<option value="">Select Domain</option>
	                                        <option value="globe.com.ph" selected>@globe.com.ph</option>
	                                        <option value="binary.digital">@binary.digital</option>
	                                    </select>
	                                </div>
	                            </div>
							</div>
							<div class="form-group">
								<label for="contact">Contact #</label>
								<input type="text" class="form-control" name="contact" id="contact" required="">
							</div>
							<div class="form-group clearfix">
								<label for="contact">Gender</label>
								<div class="clearfix">
									<div class="radio">
	                                    <label>
	                                        <input required type="radio" name="gender" id="gender-1" value="M">Male
	                                    </label>
	                                </div>
	                                <div class="radio">
	                                    <label>
	                                        <input required type="radio" name="gender" id="gender-2" value="F">Female
	                                    </label>
	                                </div>
	                        	</div>
							</div>
							@if($user_roles != NULL)
								<div class="form-group clearfix">
		                            <label>Role</label>
		                        	<div class="clearfix">
		                        		@foreach($user_roles as $user_roles_key => $user_roles_value)
											<label class="checkbox-inline" for="role-{{ $user_roles_key + 1 }}">
			                                	<input required='required' type="checkbox" id="role-{{ $user_roles_key + 1 }}" name="role[]" value="{{ $user_roles_value->name }}"> {{ $user_roles_value->name }}
			                            	</label>
										@endforeach
		                        	</div>
		                        </div>
	                        @endif
							<div class="form-group">
								<label for="password">Password</label>
								<input type="text" class="form-control" name="password" id="password">
								<span class="help-block">Leave it blank if you want to auto generate password</span>
							</div>
						</div>
						
					</form>
					<div class="box-footer">
						<button type="button" class="btn btn-sm btn-primary" onclick="usersPageFunctions.registerUser();">Submit</button>
					</div>
				</div>
			</div>
		</div>

		@include('pages.includes.footer')
	</div>
@endsection

@section('page-js')
	<script type="text/javascript">
		$.csrf_token    =   $('meta[name="csrf-token"]').attr('content');
    	$.backoffice_url  =   "{{ env('BACKOFFICE_URL') }}";

    	$('#users').trigger('click');
    	$('#register-link').addClass('active');
	</script>
@endsection