@extends('Admin.include.app')
@section('content')

<style>
	.input-group .fas {
		color: black;
	}
</style>

<!-- Main content -->
<section class="content">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					<div class="card-body">
						<div id="" class="" style="width: 100%; visibility: visible;">
							<div id="" class="">
								<span id="" class="">
									<span class="outer-tab">
										<span class="">
											<a class="tab-sec" id="" href="#" style="text-decoration:none;">
												<span class="tabspan"><i class="fas fa-book-reader"></i>&nbsp;Fill & Update Your Information</span>
											</a>
										</span>
									</span>
								</span>
							</div>
							<div id="" class="" style="display:block;">
								<div id="" class="" style="width: 100%; visibility: visible;">
									<div id="">
										<div class="tab_Detail">
											<div class="card-body">
												<form name="addForm" id="addForm" method="POST" enctype="multipart/form-data" action="{{ route('user.update',$data->id) }}">
                            					@csrf
                                                @method("PATCH")
												<div class="col-md-12">
													<div class="card card-success">
														<div class="card-header">
															<h3 class="card-title"><i class="fas fa-user"></i>&nbsp; User Info</h3>
														</div>
														<div class="card-body">
															<div class="row">
															
																<div class="form-group col-md-2">
																	<label>Title*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-genderless"></i></span>
																		</div>
																		<select name="title" id="title" class="form-control form-control-sm @error('title') is-invalid @enderror" required autocomplete="title" autofocus>
																			<option value="" hidden selected disabled>Select</option>
																			<option value="Mr." {{(!empty($data->userDetail) && ($data->userDetail->title == "Mr."))?'selected':''}}>Mr.</option>
																			<option value="Ms." {{(!empty($data->userDetail) && ($data->userDetail->title == "Ms."))?'selected':''}}>Ms.</option>
																			<option value="Mrs." {{(!empty($data->userDetail) && ($data->userDetail->title == "Mrs."))?'selected':''}}>Mrs.</option>
																			<option value="Miss." {{(!empty($data->userDetail) && ($data->userDetail->title == "Miss."))?'selected':''}}>Miss.</option>
																			<option value="Dr." {{(!empty($data->userDetail) && ($data->userDetail->title == "Dr."))?'selected':''}}>Dr.</option>
																			<option value="Others" {{(!empty($data->userDetail) && ($data->userDetail->title == "Others"))?'selected':''}}>Others</option>

																		</select>
																	</div>
																	@error('title')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>

																<div class="form-group col-md-2">
																	<label>First Name*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-user-tie"></i></span>
																		</div>
																		<input name="first_name" type="text" id="first_name" class="form-control form-control-sm @error('first_name') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->first_name:old('first_name') }}" required autocomplete="first_name" autofocus>
																	</div>
																	@error('first_name')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>

																<div class="form-group col-md-2">
																	<label>Last Name</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
																		</div>
																		<input name="last_name" type="text" id="last_name" class="form-control form-control-sm @error('last_name') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->last_name:old('last_name') }}" required autocomplete="last_name" autofocus>
																	</div>
																	@error('last_name')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>

																<div class="form-group col-md-2">
																	<label>DOB*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
																		</div>
																		<input name="dob" type="text" autocomplete="off" id="dob" class="form-control form-control-sm @error('dob') is-invalid @enderror hasDatepicker" value="{{ (!empty($data->userDetail) && $data->userDetail->dob != '')?date('d/m/Y', strtotime($data->userDetail->dob)):old('dob') }}" required autofocus>
																	</div>
																	@error('dob')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Join Date*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
																		</div>
																		<input name="join_date" type="text" autocomplete="off" id="join_date" class="form-control form-control-sm @error('join_date') is-invalid @enderror hasDatepicker" value="{{ (!empty($data->userDetail) && $data->userDetail->join_date != '')?date('d/m/Y', strtotime($data->userDetail->join_date)):old('join_date') }}" required autofocus>
																	</div>
																	@error('join_date')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Leaving Date</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
																		</div>
																		<input name="leaving_date" type="text" autocomplete="off" id="leaving_date" class="form-control form-control-sm @error('leaving_date') is-invalid @enderror hasDatepicker" value="{{ (!empty($data->userDetail) && $data->userDetail->leaving_date != '')?date('d/m/Y', strtotime($data->userDetail->leaving_date)):old('leaving_date') }}" autofocus>
																	</div>
																	@error('leaving_date')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Reporting User</label>
																	<select id='reporting_user_id' class="reporting_user_id form-control @error('reporting_user_id') is-invalid @enderror" value="{{ old('reporting_user_id') }}" autocomplete="reporting_user_id" autofocus name="reporting_user_id" style='width:100%;'>
																		<option value="" selected hidden disabled>-- Reporting User --</option>
																	</select>
																	@error('reporting_user_id')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-3">
																	<label>Profile*</label>
																	<input id="profile" type="file" class="form-control @error('profile') is-invalid @enderror" name="profile" value="{{ old('profile') }}" autofocus>
																	@if($data->profile_photo_path != "")
																		<img src="{{asset('/images/user/'.$data->profile_photo_path)}}" width="30px" height="30px" class="img-rounded">
																	@endif
																	@error('profile')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class=" form-group col-md-3">
																	<label for="roles" class="col-sm-2  col-form-label">Role</label>
																	
																	<select id="roles" data-style="select-with-transition" class="form-control selectpicker @error('roles') is-invalid @enderror" name="roles">
																		<option value="">Select Role</option>
																		@if(count($roles) > 0)
																		@foreach($roles as $k=>$v)
																		<option {{ ($userRole[0] == $v)?"selected":""}}>{{ $v }}</option>
																		@endforeach
																		@endif
																	</select>
																	@error('roles')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
															</div>

														</div>
													</div>
												</div>
												<div class="col-md-12">
													<div class="card card-info">
														<div class="card-header">
															<h3 class="card-title"><i class="fas fa-address-book"></i>&nbsp;Contact Detail</h3>
														</div>
														<div class="card-body">
															<div class="row">
																<div class="form-group col-md-4">
																	<label>Address*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-address-book"></i></span>
																		</div>
																		<input name="address" type="text" autocomplete="off" id="address" class="form-control form-control-sm @error('address') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->address:old('address') }}" autofocus>
																	</div>
																	@error('address')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Post Code</label>
																	<input name="pincode" type="text" autocomplete="off" maxlength="10" id="pincode" class="form-control form-control-sm @error('pincode') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->pincode:old('pincode') }}" autofocus oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
																	@error('pincode')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Country Name*</label>
																	<select id='country_id' class="country_id form-control @error('country_id') is-invalid @enderror" value="{{ old('country_id') }}" required autocomplete="country_id" autofocus name="country_id" style='width:100%;' onchange="get_State(this.value)">
																		<option value="" selected hidden disabled>-- Choose Country --</option>
																	</select>
																	@error('country_id')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>State Name*</label>
																	<select id='state_id' class="state_id form-control @error('state_id') is-invalid @enderror" value="{{ old('state_id') }}" required autocomplete="state_id" autofocus name="state_id" style='width:100%;' onchange="get_City(this.value)">
																		<option value="" selected hidden disabled>-- Choose State --</option>
																	</select>
																	@error('state_id')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>City Name*</label>
																	<select id='city_id' class="city_id form-control @error('city_id') is-invalid @enderror" value="{{ old('city_id') }}" required autocomplete="city_id" autofocus name="city_id" style='width:100%;'>
																		<option value="" selected hidden disabled>-- Choose City --</option>
																	</select>
																	@error('city_id')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-3">
																	<label>Official Email*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-envelope"></i></span>
																		</div>
																		<input name="official_email" type="email" autocomplete="off" maxlength="100" id="official_email" class="form-control form-control-sm @error('official_email') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->official_email:old('official_email') }}" autofocus>
																	</div>
																	@error('official_email')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-3">
																	<label>Personal Email*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-envelope"></i></span>
																		</div>
																		<input name="personal_email" type="email" autocomplete="off" maxlength="100" id="personal_email" class="form-control form-control-sm @error('personal_email') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->personal_email:old('personal_email') }}" autofocus>
																	</div>
																	@error('personal_email')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Official Contact No</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-phone"></i></span>
																		</div>
																		<input name="official_contact_no" type="text" autocomplete="off" maxlength="20" id="official_contact_no" class="form-control form-control-sm @error('official_contact_no') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->official_contact_no:old('official_contact_no') }}" autofocus oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
																	</div>
																	@error('official_contact_no')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Personal Contact No*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-phone"></i></span>
																		</div>
																		<input name="personal_contact_no" type="text" autocomplete="off" maxlength="20" id="personal_contact_no" class="form-control form-control-sm @error('personal_contact_no') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->personal_contact_no:old('personal_contact_no') }}" autofocus oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
																	</div>
																	@error('personal_contact_no')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-2">
																	<label>Emergency Contact No</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-phone"></i></span>
																		</div>
																		<input name="emergency_contact_no" type="text" autocomplete="off" maxlength="20" id="emergency_contact_no" class="form-control form-control-sm @error('emergency_contact_no') is-invalid @enderror" value="{{ !empty($data->userDetail)?$data->userDetail->emergency_contact_no:old('emergency_contact_no') }}" autofocus oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
																	</div>
																	@error('emergency_contact_no')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
															</div>
														</div>
													</div>
												</div>

												<div class="col-md-12">
													<div class="card card-danger">
														<div class="card-header">
															<h3 class="card-title"><i class="fas fa-lock-open"></i>&nbsp;System Access Detail</h3>
														</div>
														<div class="card-body">
															<div class="row">
																<div class="form-group col-md-4">
																	<label>User Name*</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-user-check"></i></span>
																		</div>
																		<input name="user_name" type="text" autocomplete="off" maxlength="50" id="user_name" class="form-control form-control-sm @error('user_name') is-invalid @enderror" value="{{ !empty($data)?$data->username:old('user_name') }}" autofocus>
																	</div>
																	@error('user_name')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-4">
																	<label>Password* (Max length 15)</label>
																	<div class="input-group">
																		<div class="input-group-prepend">
																			<span class="input-group-text"><i class="fas fa-lock"></i></span>
																		</div>
																		<input name="password" type="password" autocomplete="off" maxlength="15" id="password" class="form-control form-control-sm @error('password') is-invalid @enderror" value="{{ old('password') }}" autofocus>
																	</div>
																	@error('password')
																	<span class="invalid-feedback" role="alert">
																		<strong>{{ $message }}</strong>
																	</span>
																	@enderror
																</div>
																<div class="form-group col-md-1  text-center">
																	<label>Active</label>
																	<br>
																	<input id="status" type="checkbox" name="status" value="1"  {{ ($data->status == 1)?'checked':'' }} class="form-control form-control-sm @error('status') is-invalid @enderror" value="{{ $data->status }}" autocomplete="status" autofocus>
																</div>
															</div>
														</div>
													</div>
												</div>

												<div class="form-group col-lg-12 text-center">
													<input type="submit" value="Update User" class="btn btn-success btn-sm">
												</div>
												</form>
											</div>

										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container-fluid -->
</section>
<!-- /.content -->


@endsection
@section('script')
<script>
	$(function() {
		$('.hasDatepicker').daterangepicker({
			autoUpdateInput: false,
			singleDatePicker: true,
			showDropdowns: true,
			minYear: 1901,
			maxYear: parseInt(moment().format('YYYY'), 10),
			locale: {
				format: 'DD/MM/YYYY'
			}
		}, function(start, end, label) {
			// var years = moment().diff(start, 'years');
		}).on("apply.daterangepicker", function(e, picker) {
			picker.element.val(picker.startDate.format(picker.locale.format));
		});
	});
	
</script>
<script>
    var country_edit = "";
    var state_edit = "";
    var city_edit = "";
    var reporting_user_id_edit = "";
</script>
    @if(!empty($data->userDetail->countryName->country_id))
        @if($data->userDetail->countryName->country_id != "" && $data->userDetail->countryName->country_name != "")
            <script>country_edit = '<option value="{{$data->userDetail->countryName->country_id}}" selected="selected">{{$data->userDetail->countryName->country_name}}</option>';</script>
        @endif
        @if($data->userDetail->stateName->state_id != "" && $data->userDetail->stateName->state_name != "")
            <script>state_edit = '<option value="{{$data->userDetail->stateName->state_id}}" selected="selected">{{$data->userDetail->stateName->state_name}}</option>';</script>
        @endif
        @if($data->userDetail->cityName->city_id != "" && $data->userDetail->cityName->city_name != "")
            <script>city_edit = '<option value="{{$data->userDetail->cityName->city_id}}" selected="selected">{{$data->userDetail->cityName->city_name}}</option>';</script>
        @endif
        @if($data->userDetail->reportUser->id != "" && $data->userDetail->reportUser->name != "")
            <script>reporting_user_id_edit = '<option value="{{$data->userDetail->reportUser->id}}" selected="selected">{{$data->userDetail->reportUser->name}}</option>';</script>
        @endif
    @endif

<script>
	//Select 2 country, state, city
	var $country_id = $('#country_id');
	var $state = $('#state_id');
    var $city = $('#city_id');

	$country_id.select2({
		tokenSeparators: [","],
		minimumInputLength: 0,
		ajax: {
			type: 'POST',
			url: "{{ route('country') }}",
			dataType: 'json',
			data: function(term) {
				var query = {
					term: term,
					search: term.term,
					page: term.page || 1
				}
				return query;

			},
			processResults: function(data) {
				console.log(data);
				return {
					results: $.map(data.items, function(item) {
						//console.log(item);
						return {
							text: item.name,
							id: item.id
						}

					})
				};
			}
		}
	});

	$country_id.append(country_edit);
	$country_id.trigger('change');

	
	function state_select2() {
		$state.select2({
			tokenSeparators: [","],
			minimumInputLength: 0,
			ajax: {
				type: 'POST',
				url: "{{ route('state') }}",
				dataType: 'json',
				data: function(term) {
					var query = {
						term: term,
						search: term.term,
						country_id: $('#country_id').val(),
						page: term.page || 1
					}
					return query;

				},
				processResults: function(data) {
					return {
						results: $.map(data.items, function(item) {
							//console.log(item);
							return {
								text: item.name,
								id: item.id
							}

						})
					};
				}
			}
		});
	}

	state_select2();
	$state.append(state_edit);
	$state.trigger('change');

	function city_select2() {
		$city.select2({
			tokenSeparators: [","],
			minimumInputLength: 0,
			ajax: {
				type: 'POST',
				url: "{{ route('city') }}",
				dataType: 'json',
				data: function(term) {
					var query = {
						term: term,
						search: term.term,
						state_id: $('#state_id').val(),
						page: term.page || 1
					}
					return query;

				},
				processResults: function(data) {
					return {
						results: $.map(data.items, function(item) {
							//console.log(item);
							return {
								text: item.name,
								id: item.id
							}

						})
					};
				}
			}
		});
	}

	city_select2();
	$city.append(city_edit);
	$city.trigger('change');

	function get_State(value){
		$("body").find("#select2-state_id-container").html("-- Choose State --");
		$("body").find("#state_id").val("");
		state_select2();
		$state.trigger('change');
	}
	function get_City(value){
		$("body").find("#select2-city_id-container").html("-- Choose City --");
		$("body").find("#city_id").val("");
		city_select2();
		$city.trigger('change');
	}

</script>

<script>
	var $reporting_user_id = $('#reporting_user_id');
	$reporting_user_id.select2({
		tokenSeparators: [","],
		minimumInputLength: 0,
		ajax: {
			type: 'POST',
			url: "{{ route('reporting-user') }}",
			dataType: 'json',
			data: function(term) {
				var query = {
					term: term,
					search: term.term,
					page: term.page || 1
				}
				return query;

			},
			processResults: function(data) {
				return {
					results: $.map(data.items, function(item) {
						return {
							text: item.name,
							id: item.id
						}

					})
				};
			}
		}
	});

	$reporting_user_id.append(reporting_user_id_edit);
	$reporting_user_id.trigger('change');

</script>
<script>
	$(function() {
        $(document).ready(function() {
            $.validator.methods.isJSON = function(value, element) {
                if (typeof(value) !== 'string') {
                    return false;
                }
                try {
                    JSON.parse(value);
                    return true;
                } catch (e) {
                    return false;
                }
            }
            $("#addForm").validate({
                rules: {
					profile: {
						required: {{($data->profile_photo_path == "")?true:false}},
						accept: "image/jpg,image/jpeg,image/png"
					},
					roles: {
						required: true,
					},
                    country_id: {
                        required: true
                    },
                    state_id: {
                        required: true,
                    },
                    city_id: {
                        required: true,
                    },
                    
                    currency_id: {
                        required: true,
                    },
                    
                    name: {
                        required: true,
                    },
                    
                    support_no: {
                        required: true,
                    },
                    
                    
                },
                messages: {
                    name: {
                        required: "Please provide a name"
                    },
                },
                errorElement: "em",
                errorPlacement: function(error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
                }
            });
        });
    });
</script>
@endsection