@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 two_card">
					<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;padding: 2px;height: 150px;border: 3px solid black; ">
							@else
							<img src="{{asset('app-assets/images/user-1.png')}}" alt="avatar"
							class="rounded-circle img-fluid" style="width: 150px;padding: 2px;height: 150px;border: 3px solid black;">
							@endif
							<h5 class="my-3">{{$users->first_name}}  {{$users->last_name}}</h5>
							
						</div>
					</div>
					
				</div>
				<div class="col-lg-8 two_card">
					<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">Client</p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0">@if($organization !=""){{ $organization->org_name }} @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  h-100">
							<div class="card-body text-center ">
								
								 <input type="file" name="photo" id="photo" class="dropify " data-height="260" accept="image/*"ata-parsley-trigger="keyup" accept=".jpg,.png,.svg" data-parsley-fileextension='jpg,png,svg,jpeg' data-parsley-errors-container="#startTimeErrorContainer" data-parsley-trigger="change">
                                                <div id="startTimeErrorContainer"></div>
								
							</div>
						</div>
						
					</div>
					<div class="col-lg-8">	
						<div class="card mb-4 h-100 ">	
								<div class="card-body ">
									<div class="row">
										<div class="col-sm-2">
											<p class="mb-0 mt-2">First Name<span class="text-danger"> * <span></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 data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">

										</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}}" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
												
										</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<span class="text-danger"> * <span></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}}" data-parsley-type="number" data-parsley-trigger="change">
										</div>
									</div>
										<hr>
									<div class="row">
										<div class="col-sm-2">
											<p class="mb-0 mt-2">Client</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}}" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$" >
										</div>
									</div>
										<hr>
									<div class="row">
										<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" data-parsley-minlength="8"
											    data-parsley-errors-container=".errorspannewpassinput"
											    data-parsley-required-message="Please enter your new password."
											    data-parsley-uppercase="1"
											    data-parsley-lowercase="1"
											    data-parsley-number="1"
											    data-parsley-special="1"
											    data-parsley-trigger="keyup">
											<span class="errorspannewpassinput" style="font-weight: 400;"></span>
										</div>
											
										<div class="col-sm-2 ">
											<p class="mb-0 mt-2">User Type</p>
										</div>
										<div class="col-sm-4">
										<input id="usertype" name="usertypenm" type="text" class="form-control" value="{{$user_type_id->user_types}}" readonly>
										<input id="usertype" name="usertype" type="hidden" class="form-control" value="{{$users->user_type_id}}" 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>
										<hr>
										<div class="row">
											<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>					
								</div>
						</div>
					</div>
					<div class=" text-center mb-4 pt-2">
						<a href="{{ route('profile') }}"><button type="button" class="btn btn-secondary "  >CANCEL</button></a>
						<button type="submit" class="btn  btn-success" >SUBMIT			</button>
					</div>	
				</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
	// alert();
		//has uppercase
window.Parsley.addValidator('uppercase', {
  requirementType: 'number',
  validateString: function(value, requirement) {
    var uppercases = value.match(/[A-Z]/g) || [];
    return uppercases.length >= requirement;
  },
  messages: {
    en: 'Your password must contain at least (%s) uppercase letter.'
  }
});

//has lowercase
window.Parsley.addValidator('lowercase', {
  requirementType: 'number',
  validateString: function(value, requirement) {
    var lowecases = value.match(/[a-z]/g) || [];
    return lowecases.length >= requirement;
  },
  messages: {
    en: 'Your password must contain at least (%s) lowercase letter.'
  }
});

//has number
window.Parsley.addValidator('number', {
  requirementType: 'number',
  validateString: function(value, requirement) {
    var numbers = value.match(/[0-9]/g) || [];
    return numbers.length >= requirement;
  },
  messages: {
    en: 'Your password must contain at least (%s) number.'
  }
});

//has special char
window.Parsley.addValidator('special', {
  requirementType: 'number',
  validateString: function(value, requirement) {
    var specials = value.match(/[^a-zA-Z0-9]/g) || [];
    return specials.length >= requirement;
  },
  messages: {
    en: 'Your password must contain at least (%s) special characters.'
  }
});

});
	  $(document).ready(function() {
    window.ParsleyValidator
        .addValidator('fileextension', function (value, requirement) {
           var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
                        var arr=[];
                        $.each(tagslistarr,function(i,val){
                         arr.push(val);
                        });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');

    $("form").parsley();
});
	$(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