@if( $work_info_action == 'edit' )
	<form method="POST" action="{{ route('work-info-update', ['user_id'=> $user->id]) }}" autocomplete="off">
@else
	<form method="POST" action="{{ route('work-info-store', ['user_id'=> $user->id]) }}" autocomplete="off">
@endif	
    @csrf
    @if( Auth::user()->allowToManageUsers() )
		<div class="page-section">
			<div class="card">
				<input id="users_data" type="hidden" value="{{ json_encode($superior_users) }}" />
				<input id="user_department" type="hidden" value="{{ $work_info_action == 'edit' ? $user->details->job->department->id : '' }}"/>
				<div class="card-header">{{ __('Job Info') }}</div>
				<div class="card-body">
					<div class="mb-3 row">
						<div class="col-md-6 col-12">
							<div class="mb-3 row">
								<label for="employment_type" class="col-12 col-form-label required-label">
									{{ __('Employment Type') }}
								</label>
								<div class="col-12">
									<select class="@error('employment_type') is-invalid @enderror" id="employment_type" name="employment_type">
										<option disabled @if( !old('employment_type') && $work_info_action == 'add-new' ) selected @endif>Please Choose One</option>
										@foreach ($employee_types as $employee_type)
											@if( $work_info_action == 'edit' || $user->details->employment_type )
												<option value="{{ $employee_type }}" @if( (old('employment_type') ? old('employment_type') : $user->details->employment_type ) == $employee_type ) selected @endif>{{ $employee_type }}</option>
											@else
												<option value="{{ $employee_type }}" @if( old('employment_type') == $employee_type ) selected @endif>{{ $employee_type }}</option>
											@endif
										@endforeach
									</select>
									@error('employment_type')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
								</div>
							</div>
							<div class="mb-3 row">
								<label for="joined_date" class="col-12 col-form-label required-label">
									{{ __('Joined Date') }}
								</label>
								<div class="col-12">
									@if( $work_info_action == 'edit' || $user->details->joined_date )
                                        <input id="joined_date" type="text" class="form-control datepicker_all @error('joined_date') is-invalid @enderror" name="joined_date" value="{{ old('joined_date') ? old('joined_date') : Carbon\Carbon::parse( $user->details->joined_date)->format('d/m/Y') }}" placeholder="dd/mm/yyyy" />
	                                @else 
	                                    <input id="joined_date" type="text" class="form-control datepicker_all @error('joined_date') is-invalid @enderror" name="joined_date" value="{{ old('joined_date') }}" placeholder="dd/mm/yyyy" />
	                                @endif
									@error('joined_date')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
								</div>
							</div>
							<div class="mb-3 row">
								<label for="confirmation_date" class="col-12 col-form-label">
									{{ __('Confirmation Date') }}
								</label>
								<div class="col-12">
									@if( $work_info_action == 'edit' || $user->details->confirmation_date )
	                                    <input id="confirmation_date" type="text" class="form-control datepicker_all @error('confirmation_date') is-invalid @enderror" name="confirmation_date" value="{{ old('confirmation_date') ? 
	                                    old('confirmation_date') : 
	                                    ($user->details->confirmation_date? 
	                                    	Carbon\Carbon::parse( $user->details->confirmation_date)->format('d/m/Y')
	                                    	:'' 
	                                    ) 
	                                	}}" placeholder="dd/mm/yyyy" />
	                                @else 
	                                    <input id="confirmation_date" type="text" class="form-control datepicker_all @error('confirmation_date') is-invalid @enderror" name="confirmation_date" value="{{ old('confirmation_date') }}" placeholder="dd/mm/yyyy" />
	                                @endif
									@error('confirmation_date')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
								</div>
							</div>
							@if( $user->active == 0 && $user->details->resigned_date != null )
								<div class="mb-3 row">
									<label for="resigned_date" class="col-12 col-form-label">
										{{ __('Resigned Date') }}
									</label>
									<div class="col-12">
	                                	<input type="text" name="resigned_date" class="form-control datepicker_all" value="{{ Carbon\Carbon::parse($user->details->resigned_date)->format('d/m/Y') }}" placeholder="dd/mm/yyyy" readonly>
									</div>
								</div>
							@endif
						</div>
						<div class="col-md-6 col-12">
							<div class="mb-3 row">
								<label for="job_id" class="col-12 col-form-label required-label">
									{{ __('Job Title') }}
								</label>
								<div class="col-12">
									<select class="@error('job_id') is-invalid @enderror" id="job_id" name="job_id">
										<option disabled @if( !old('job_id') && $work_info_action == 'add-new' ) selected @endif>
											Please Choose One
										</option>
										@foreach($new_jobs as $job)
											@if( $work_info_action == 'edit' )
												<option value="{{ $job['id'] }}" @if( (old('job_id') ? old('job_id') : $user->details->job_id ) == $job['id'] ) selected @endif data-department_obj='{{ json_encode($job) }}'>
													{{ $job['job_title'] }}
												</option>
											@else
												<option value="{{ $job['id'] }}" @if( old('job_id') == $job['id'] ) selected @endif data-department_obj='{{ json_encode($job) }}'>
													{{ $job['job_title'] }}
												</option>
											@endif
										@endforeach
									</select>
									@error('job_id')
										<span class="invalid-feedback" role="alert">
											<strong>{{ $message }}</strong>
										</span>
									@enderror
								</div>
							</div>
							<div class="mb-3 row">
								<label for="name" class="col-12 col-form-label">
									{{ __('Division') }}
								</label>
								<div class="col-12">
									@if( $work_info_action == 'edit' )
										<input id="department" type="text" class="form-control" name="department" value="{{ old('department') ? old('department') : $user->details->job->department->name }}" readonly />
									@else
										<input id="department" type="text" class="form-control" name="department" value="{{ old('department') }}" readonly />
									@endif
								</div>
							</div>
							<div class="mb-3 row">
								<label for="manager" class="col-12 col-form-label">
									{{ __('Division Head') }}
								</label>
								<div class="col-12">
									@if( $work_info_action == 'edit' )
										@php
											$hod = $user->details->getDepartment()->getDepartmentHeadName();
										@endphp
										<input id="manager" type="text" class="form-control" name="manager" value="{{ old('manager') ? old('manager') : $hod }}" readonly />
									@else
										<input id="manager" type="text" class="form-control" name="manager" value="{{ old('manager') }}" readonly />
									@endif
								</div>
							</div>
							@if( $user->active == 0 && $user->details->resigned_date != null )
								<div class="mb-3 row">
									<label for="resigned_reason" class="col-12 col-form-label">
										{{ __('Resigned Reason') }}
									</label>
									<div class="col-12">
	                                	<input type="text" name="resigned_reason" class="form-control" value="{{ !$user->details->resigned_reason ? '-' : $user->details->resigned_reason }}" readonly>
									</div>
								</div>
							@endif
						</div>
					</div>
				</div>
			</div>
		</div><!-- Employment Info -->

		<div class="page-section">
			<div class="card">
				<div class="card-header">
					<div class="row justify-content-between align-items-center">
	                    <div class="col text-start">
	                     	<h1 class="typography-2 font-weight-semibold mb-0">{{ __('Superior Info') }}</h1>
	                    </div>
	                    @if( ( $user_superiors && $user_superiors->count() < 3 ) || $work_info_action == 'add-new' )
		                    <div class="col text-end">
		                    	<a id="add_more_btn" class="btn btn-purple btn-action" role="button">
									<i class="fas fa-plus"></i>
								</a>
		                    </div>
	                    @endif
	                </div>
				</div>
				<div class="card-body">
					<div class="mb-3 row">
						<div class="col-12">
							<div id="input_wrapper" class="row">
								<div class="col-12">
		            				<div class="mb-3 row align-items-center">
										<label for="superior_user_id" class="col-lg-2 col-12 col-form-label">{{ __('Primary Superior') }}</label>
										<div class="col-lg-9 col-10">
											<select class="@error('superior_user_id') is-invalid @enderror" id="superior_user_id" name="superior_user_id[]">
												<option disabled @if( !old('superior_user_id') && $work_info_action == 'add-new' ) selected @endif>Please Choose One</option>
												@foreach($superior_users as $index => $superior_user)
													@if( $work_info_action == 'edit' )
														<option value="{{ $superior_user['id'] }}"  @if( (old('superior_user_id') ?  : $user_superiors->first()->superior_user_id ) == $superior_user['id'] ) selected @endif>
															{{ $superior_user['name'] }}
														</option>	
													@else
														<option value="{{ $superior_user['id'] }}"  @if( old('superior_user_id') == $superior_user['id'] ) selected @endif>
															{{ $superior_user['name'] }}
														</option>
													@endif
												@endforeach
											</select>
											@error('superior_user_id')
												<span class="invalid-feedback" role="alert">
													<strong>{{ $message }}</strong>
												</span>
											@enderror
										</div>
									</div>
								</div>
								@if( $work_info_action == 'edit' )
									@foreach ($user_superiors as $index => $user_superior)									
										@if($index > 0)
											<div class="col-12">
							            		<div class="mb-3 row align-items-center">
							            			<label for="superior_user_id{{ ($index+1) }}" class="col-lg-2 col-12 col-form-label">
							            				{{ __("Superior".($index+1)) }}
							            			</label> 
							            			<div class="col-lg-9 col-10">
														<select class="form-select" id="superior_user_id{{ ($index+1) }}" name="superior_user_id[]" aria-label="superior_user_id" required>
															<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>
															@foreach($superior_users as $index => $superior_user)
																<option value="{{ $superior_user['id'] }}"  @if( (old('superior_user_id') ?  : $user_superior->superior_user_id ) == $superior_user['id'] ) selected @endif>
																	{{ $superior_user['name'] }}
																</option>
															@endforeach
														</select>
													</div>
													<div class="col-lg-1 col-2">
														<a href="{{ route('work-info-remove-superior', ['id' => $user_superior->id]) }}" class="btn btn-action btn-danger" role="button">
															<i class="far fa-trash-alt"></i>
														</a>
													</div>
												</div>
											</div>
										@endif
									@endforeach
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!-- Superior Info -->
	@endif

	<div class="page-section d-flex text-end">
		@if( $work_info_action == 'edit' )
			<input id="superior_id" type="hidden" name="superior_id" value="{{ $user_superiors->pluck('id') }}" />
			<input id="user_superior_id" type="hidden" name="user_superior_id" value="{{ $user_superiors->pluck('superior_user_id') }}" />
		@else
			<input id="user_superior_id" type="hidden" name="user_superior_id" value="[]" />	
		@endif
		<a class="btn btn-black btn-custom" href="{{ route('user-index') }}">Back</a>
        <button type="submit" class="ms-3 btn btn-lg btn-purple btn-submit">
        	@if( $work_info_action == 'edit' )
        		Save
        	@else
        		Next
        	@endif
        </button>
    </div>
</form>

@push('js')
<script type="text/javascript">
	$(document).ready(function(){
		var max_input      = 3; //maximum 3 select boxes allowed
		var current_number = $("#input_wrapper").children().length; //initlal select box count
		//on add input button click
		$("body").on("click", "#add_more_btn", function (e) {
	        //max input box allowed
	        if( current_number < max_input ) {
	            //add selection box
	            current_number++; //select box increment
	            appendNewRow(current_number); // append new row
	            // Delete the remove button if there is 3 select boxes.
	            if( current_number == max_input ) {
	            	$("#add_more_btn").parent().hide();
	            }
	        }
	        return false;
	    });

		$("body").on("click",".removeclass", function(e){ //user click on remove button
			$(this).parent().parent().parent().remove(); //remove select box
			$('.ajax-generate-row').remove();
			current_number--; //decrement select box
			for( $i = current_number; $i > 1; $i-- ){
				appendNewRow($i); // append new row	
			}
			if( current_number < 3 ) {
	            $("#add_more_btn").parent().show();
	        }
	        return false;
	    });

		function appendNewRow(running_number){
			var users = $('#users_data').val();
			var html_code = `
				<div class="col-12 ajax-generate-row">
					<div class="mb-3 row align-items-center">
            			<label for="superior_user_id`+ running_number +`" class="col-lg-2 col-12 col-form-label">
            				{{ __("Superior `+ running_number +`") }}
            			</label> 
            			<div class="col-lg-9 col-10">
							<select class="form-select" id="superior_user_id`+ running_number +`" name="superior_user_id[]" aria-label="superior_user_id" required>
								<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>
				`;
			if( users ){
				$.each(JSON.parse(users), function(index, user){
					html_code += `
								<option value="`+user.id+`">`+user.name+`</option>
							`;
				});
			}
			html_code += `
							</select>
						</div>
						<div class="col-lg-1 col-2">
							<a class="btn btn-action btn-danger removeclass" role="button">
								<i class="far fa-trash-alt"></i>
							</a>
						</div>
					</div>
				</div>
				`;

            $("#input_wrapper").append(html_code).ready(function () {
				$('select').select2({
				    minimumResultsForSearch: -1
				});
			});
		}

		//When job title is selected; Department details will be shown
		$('#job_id').change(function(){
			var selectedOption = $('#job_id option:selected').data('department_obj');
			$("#department").val(selectedOption.name);
			$("#manager").val(selectedOption.manager);
			if( selectedOption.deparment_id != $('#user_department').val() ){
				$.ajax({
				    url: "{{ route('get-users-by-department') }}",
				    type: 'POST',
				    data: {
				    	'user_id' : '{{ $user->id }}',
				    	'department_id' : selectedOption.deparment_id,
				    	"_token": "{{ csrf_token() }}",
				    },
				    success: function(data, key) {
				    	if( key == 'success' ){
				    		$('#users_data').val(JSON.stringify(data['success']));
				    		$('#superior_user_id').find('option').remove().end().append(`<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>`);
				    		var current_number = $("#input_wrapper").children().length;
				    		for( $i = current_number; $i > 1; $i-- ){	
				    			$('#superior_user_id'+$i).find('option').remove().end().append(`<option disabled @if( !old('superior_user_id') ) selected @endif>Please Choose One</option>`);
				    		}
				    		$.each(data['success'], function(k,v){
				    			$('#superior_user_id')
				    				.append('<option value="'+v.id+'">'+v.name+'</option>');
				    			for( $i = current_number; $i > 1; $i-- ){
				    				$('#superior_user_id'+$i)
				    				    .append('<option value="'+v.id+'">'+v.name+'</option>');
				    			}
				    		});
				    		$('select').select2({
							    minimumResultsForSearch: -1
							});
				    	}
				    }
				});
			}
		});

		$("body").on("change", 'select[name="superior_user_id[]"]', function(){
			var element_id = ($(this).get(0).id).replace('superior_user_id','');
			var get_superior_id = JSON.parse($('#user_superior_id').val());
			if( element_id == '' ){
				get_superior_id[0] = parseInt($(this).val());
			}else{
				get_superior_id[(parseInt(element_id) - 1)] = parseInt($(this).val());
			}
			$('#user_superior_id').val(JSON.stringify(get_superior_id));
		});
	});
</script>
@endpush