@extends('layouts.app')
@section('title', 'Profile')
@section('content')
<style type="text/css">
	p{
		font-weight: 600;
	}
</style>
<div class="container-fluid mt-4">
	<div class="card shadow-lg">
		<div class="card-header card_header" >
			<h6 class="mt-0 text-left"> Profile </h6>
		</div></br>
		<div class="card-body p-0 ">
			<div class="d-flex flex-row-reverse bd-highlight ml-2" >
				<div class="text-right mx-4">
					<span class="edit_profile" style="cursor:pointer;"><i class="fa-solid fa-pen-to-square"></i>&nbsp; Edit</span>
					<span class="back_profile d-none" >
						<a href="{{ route('profile') }}" style="text-decoration: none;color: #212529!important;">
							<i class="fa-solid fa-circle-arrow-left"></i>&nbsp;Back
						</a>
					</span>
				</div>
			</div>
			<div class="row mt-3 display_div mx-3">

				
				<div class="col-lg-4">
					<div class="card mb-4 ">
						<div class="card-body text-center">
							
							@if($users->photo != "" || $users->photo = NULL )
							
							<img src="data:image;base64,{{base64_encode($users->photo)}}" alt="avatar"
							class="rounded-circle img-fluid" style="width: 150px; height: 150px; ">
							@else
							<img src="{{asset('app-assets/images/user-1.png')}}" alt="avatar"
							class="rounded-circle img-fluid" style="width: 150px; height: 150px;">
							@endif
							<h5 class="my-3">{{$users->first_name}}  {{$users->last_name}}</h5>
							
						</div>
					</div>
					
				</div>
				<div class="col-lg-8">
					<div class="card mb-4">
						<div class="card-body" style="height: 14.89rem;">
							<div class="row">
								<div class="col-sm-2">
									<p class="mb-0">First Name</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">{{$users->first_name}}  </p>
								</div>
								<div class="col-sm-2">
									<p class="mb-0">Last Name</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">  {{$users->last_name}}</p>
								</div>
							</div>
							<hr>
							<div class="row">
								<div class="col-sm-2">
									<p class="mb-0">Email</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">{{$users->email}}</p>
								</div>
							<!-- </div>
							<hr>
							<div class="row"> -->
								<div class="col-sm-2">
									<p class="mb-0">Phone</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">{{$users->phone_no}}</p>
								</div>
							</div>
							<hr>
							<div class="row">
								<div class="col-sm-2">
									<p class="mb-0">Orgnization</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">@if($organization !=""){{$org_names }} @endif</p>
								</div>

								<div class="col-sm-2">
									<p class="mb-0">Designation</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">{{$users->designation}}</p>
								</div>
							</div>
							<hr>
							<div class="row">
								<div class="col-sm-2">
									<p class="mb-0">Status</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">@if($users->is_active == 1) Active @else Inactive @endif</p>
								</div>
							
								<div class="col-sm-2">
									<p class="mb-0">User Type</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">
										@if($user_type_id !=""){{ $user_type_id->user_types }}@endif
									</p>
								</div>
							</div>

						
						</div>
					</div>
					
					
				</div>
			</div>
			<div class="row mt-3 edit_div d-none mx-3" >

				<script type="text/javascript">
				
					    $(function () {
							@if(Session::has('success'))
							new PNotify({
							title: 'Success',
							text:  "{{Session::get('success')}}",
							type: 'success'
							});
									
							@endif
							@if ($errors->any())
								
							 @foreach ($errors->all() as $error)
	       						
								new PNotify({
								title: 'Error',
								text:  "{{ $error }}",
								type: 'error'
								});
								@endforeach
								
							@endif
						});
				</script>
				<form id="update_profile" method="POST" action="{{route('update_profile')}}" enctype="multipart/form-data" data-parsley-validate>
						@csrf
						<input type="hidden" name="id" value="{{$users->id}}">
						<div class="row">
					<div class="col-lg-4">
						<div class="card mb-4">
							<div class="card-body text-center">
								
								 <input type="file" name="photo" id="photo" class="dropify" data-height="260">
								
							</div>
						</div>
						
					</div>
					<div class="col-lg-8">	
						<div class="card mb-4">	
								<div class="card-body">
									<div class="row">
										<div class="col-sm-2">
											<p class="mb-0 mt-2">First Name</p>
										</div>
										<div class="col-sm-4">
											<input id="firstname" name="firstname" type="text" class="form-control" autocomplete="off" placeholder="Enter Firstname" value="{{$users->first_name}}" required>

										</div>
										<div class="col-sm-2">
											<p class="mb-0 mt-2">Last Name</p>
										</div>
										<div class="col-sm-4">
											<input id="lastname" name="lastname" type="text" class="form-control" autocomplete="off" placeholder="Enter Lastname" value="{{$users->last_name}}" >
												
										</div>
									</div>
										<hr>
									
									<div class="row">
										<div class="col-sm-2">
											<p class="mb-0 mt-2">Email</p>
										</div>
										<div class="col-sm-4">
											<input id="email" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" value="{{$users->email}}" >

										</div>
										<!-- 	</div>
										<hr>
										<div class="row"> -->
										<div class="col-sm-2">
											<p class="mb-0 mt-2">Phone</p>
										</div>
										<div class="col-sm-4">
											<input id="contactnumber" name="contactnumber" type="text" class="form-control" autocomplete="off" required placeholder="Enter Phone Number" value="{{$users->phone_no}}">
										</div>
									</div>
										<hr>
									<div class="row">
										<!-- <div class="col-sm-2">
											<p class="mb-0 mt-2">Orgnization</p>
										</div>
										<div class="col-sm-4">
											<select class="form-select form-control-sm" name="org_id" id="org_id"  disabled>

												@forelse($organization_list as $ty)
												<option value="{{$ty->id}}" @if($ty->id == $users->org_id) selected @endif>{{$ty->org_name}}</option>
												@empty

												@endforelse
											</select>
										</div> -->
										<!-- </div>
										<hr>
										<div class="row"> -->
										<div class="col-sm-2">
											<p class="mb-0 mt-2">Designation</p>
										</div>
										<div class="col-sm-4">
											<input id="designation" name="designation" type="text" class="form-control" autocomplete="off" placeholder="Enter Designation"  value="{{$users->designation}}" >
										</div>
										<div class="col-sm-2">
											<p class="mb-0 mt-2">New Password</p>
										</div>
										<div class="col-sm-4">
											<input id="password" name="password" type="text" class="form-control" autocomplete="off" placeholder="Enter Password" >
										</div>
									</div>
										<hr>
									<div class="row">
										
											
										<div class="col-sm-2 ">
											<p class="mb-0 mt-2">User Type</p>
										</div>
										<div class="col-sm-4">
										<input id="usertype" name="usertype" type="text" class="form-control" value="{{$user_type_id->user_types}}" readonly>
											<!--<select id="usertype" name="usertype" type="text" class="form-control">
												<option value="">Select Usertype</option>
												@forelse($usertype as $userstype)
												<option value="{{ $userstype->id }}"  @if($userstype->id == $users->user_type_id) selected @endif>{{ $userstype->user_types }}</option>
												@empty
												
												@endforelse
											</select>-->
										</div>
										<div class="col-sm-2">
												<p class="mb-0 mt-2">Status</p>
											</div>
											<div class="col-sm-4">
													<input id="isactive" name="isactive" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" @if($users->is_active ==1) checked @endif> Is Active? <span class="text-danger">  </span></label>
											</div>

									</div>
										<hr>
										<div class="row">
											
									</div>					
								</div>
						</div>
					</div>
					<div class=" text-center mb-4">
						<a href="{{ route('profile') }}"><button type="button" class="btn btn-secondary btn-sm cancel_btn"  >CANCEL</button></a>
						<button type="submit" class="btn  btn-sm submit_btn" >SUBMIT			</button>
					</div>	
				</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){

		 $('.dropify').dropify({
            messages: {
                'default': 'Upload Photo<br/>Or</br>Drag it Here<br>Image dimension should be max 250 X 250 ',
            }
        });
		$(".edit_profile").click(function()
		{
			$(".display_div").addClass('d-none');
			$(".edit_div").removeClass('d-none');
			$(".edit_profile").addClass('d-none');
			$(".back_profile").removeClass('d-none');

		});

	$('#update_profile').parsley();
		$('#update_profile').on('submit', function(event){
			event.preventDefault();
			if($('#update_profile').parsley().isValid())
  			{
				var url = '{{ route("update_profile") }}';
				$.ajax({
					type: "post",
					url: url,
					data: new FormData($("#update_profile")[0]),
					processData: false,
					contentType: false,
					success: function(response) 
					{
						if(response.data =='success')
						{
							new PNotify({
								title: 'Success',
								text:  response.msg,
								type: 'success'
								});
							location.reload();
						}
						else
						{
							new PNotify({
							title: 'Error',
							text:  response.msg,
							type: 'error'
							});
						}
						
						
					},
						
				    error: function(response) {
				    	var err = "";
				         $.each(response.responseJSON.errors,function(field_name,error){
                        
                       	err = err +'<br>' + error;
                    	});
				         new PNotify({
						title: 'Error',
						text:  err,
						type: 'error'
						});

				        
				    },	
				});
			}
		});

	});
</script>
@endsection