@extends('layouts.app')
@section('title', 'User')
@section('content')
</style>
<div class="container-fluid mt-1">
	@include('settings.common_tabs')
		<div class="col-lg-12">
			<div class="card">
				<div class="card-body">
					<div class="p-0">
						<table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
							<thead>
								<tr>
									<th>Sl No</th>
									<th>Name</th>
									<th>Email</th>
									<th>User Role</th>
									<th> Status</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								@forelse($userList as $k=> $userDt)
								<tr>
									<td> {{++$k}}</td>
									<td> {{$userDt->first_name}}  {{$userDt->last_name}}</td>
									<td> {{$userDt->email}}</td>
									<td> {{$userDt->getUserRoles['user_roles']}}</td>
									<td>
										<div class="custom-control custom-switch">
											<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $userDt->id }}"  value="{{ $userDt->id }}" onclick="userStatus(this.value)" @if($userDt->is_active==1) checked @endif>
											<label class="custom-control-label" for="customSwitch{{ $userDt->id }}">@if($userDt->is_active==1) Active @else Inactive @endif</label>
										</div>
									</td>
									<td> <span class="edit_user ml-2"  data-id="{{ $userDt->id }}"><img class="menuicon tbl_editbtn" src="{{asset("app-assets/assets/images/edit.svg")}}" >&nbsp;</span>
									</td>
								</tr>
								@empty
								@endforelse
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="useraddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Add user</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="userfrm" name="userfrm"  data-parsley-validate data-parsley-trigger="keyup">
					@csrf
					<div class="modal-body">
						<div class="row">
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label"> User Role <span class="text-danger"> * </span></label>
								<Select required class="form-control select_role" name="user_role_id" id="user_role_id">
									<option selected value="">Select Role</option>
									@forelse($rolesList as $roledt)
									<option value="{{$roledt->id}}"> {{$roledt->user_roles}}</option>
									@empty
									@endforelse
								</Select>
							</div>
							<div class="col-lg-4">
								<label for="example-firstname-input" class="col-form-label">First Name <span class="text-danger"> * </span></label>
								<input required name="first_name" value="" id="first_name" type="text" class="form-control" placeholder="Enter First Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$" />
							</div>
							<div class="col-lg-4">
								<label for="example-firstname-input" class="col-form-label">Last Name</label>
								<input autocomplete="off"  value="" name="last_name" id="last_name" type="text" class="form-control" placeholder="Enter Last Name" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$"/>
							</div>
						</div>
						<div class="row mt-1">
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label">Email <span class="text-danger"> * </span></label>
								<input autocomplete="off" required value="" name="email" id="email" type="email" class="form-control" placeholder="Enter Email"/>
							</div>
							
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label"> Password<span class="text-danger"> * </span> </label>
								
								<input id="password" name="password" type="text" class="form-control" autocomplete="off" 	placeholder="Enter Password"  required 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-required>
								<span class="errorspannewpassinput" style="font-weight: 400;"></span>
							</div>
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label">NT login id </label>
								<input  name="nt_login_id" id="nt_login_id" type="text" value="" class="form-control" placeholder="Enter NT login id" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z 0-9][A-Za-z 0-9]*$" />
							</div>
						</div>
						<div class="row">
							<div class="col-lg-4" id="customer_select">
								<label for="example-text-input" class="col-form-label">Customer <span class="text-danger"> * </span></label>
								<select class="form-control" name="customer_id" id="customer_id">
									<option value="">Select Customer</option>
									@forelse($getCustomers as $customer_list)
									<option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4" id="company_select">
								<label for="company_select" class="col-form-label"> Company <span class="text-danger"> * </span></label>
								<select class="form-control" name="company_id" id="company_id">
									<option value="">Select Company</option>
									@forelse($companyList as $compDt)
									<option value="{{$compDt->id}}"> {{$compDt->company_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4" id="client_select">
								<label for="company_select" class="col-form-label"> Client <span class="text-danger"> * </span></label>
								<select class="form-control" name="client_id" id="client_id">
									<option value="">Select Client</option>
									@forelse($clientList as $clit)
									<option value="{{$clit->id}}"> {{$clit->client_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label">Is Active ?</label><br>
								<input type="checkbox" checked value="1" id="is_active" name="is_active" />
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Submit</button>
					</div>
				</form>
			</div>
		</div> 
	</div>
	<div class="modal fade" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Edit user</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form method="post" id="updateuserfrm" name="updateuserfrm"  data-parsley-validate>
					@csrf
					<input  name="user_id" value="" id="ed_user_id" type="hidden"  />
					<div class="modal-body">
						<div class="row">
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label"> User Role <span class="text-danger"> * </span></label>
								<Select required class="form-control select_role" name="user_role_id" id="user_role_id_ed">
									<option selected value="">Select Role</option>
									@forelse($rolesList as $roledt)
									<option value="{{$roledt->id}}"> {{$roledt->user_roles}}</option>
									@empty
									@endforelse
								</Select>
							</div>
							<div class="col-lg-4">
								<label for="example-firstname-input" class="col-form-label">First Name <span class="text-danger"> * </span></label>
								<input required name="first_name" value="" id="first_name_ed" type="text" class="form-control" placeholder="Enter First Name" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$" />
							</div>
							<div class="col-lg-4">
								<label for="example-firstname-input" class="col-form-label">Last Name</label>
								<input autocomplete="off"  value="" name="last_name" id="last_name_ed" type="text" class="form-control" placeholder="Enter Last Name" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$"/>
							</div>
						</div>
						<div class="row mt-1">
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label">Email <span class="text-danger"> * </span></label>
								<input autocomplete="off" required value="" name="email" id="email_ed" type="email" class="form-control" placeholder="Enter Email" data-parsley-type="email" data-parsley-trigger="keyup" placeholder="Enter a valid e-mail"/>
							</div>
							
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label"> Password </label>
								
								<input id="password_ed" name="password" type="text" class="form-control" autocomplete="off" 	placeholder="Enter Password"   data-parsley-minlength="8"
								data-parsley-errors-container=".errorspannewpassinput1"
								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"
								>
								<span class="errorspannewpassinput1" ></span>
							</div>
							<div class="col-lg-4">
								<label for="example-email-input" class="col-form-label"> NT login id </label>
								<input  name="nt_login_id" id="nt_login_id_ed" type="text" value="" class="form-control" placeholder="Enter NT login id" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z 0-9][A-Za-z 0-9]*$"/>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-4" id="company_select_ed">
								<label for="company_select" class="col-form-label"> Company <span class="text-danger"> * </span></label>
								<select class="form-control" name="company_id" id="company_id_ed">
									<option value="">Select Company</option>
									@forelse($companyList as $compDt)
									<option value="{{$compDt->id}}"> {{$compDt->company_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4" id="customer_select_ed">
								<label for="example-text-input" class="col-form-label">Customer <span class="text-danger"> * </span></label>
								<select class="form-control" name="customer_id" id="customer_id_ed">
									<option value="">Select Customer</option>
									@forelse($getCustomers as $customer_list)
									<option value="{{$customer_list->id}}"> {{$customer_list->customer_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4" id="client_select_ed">
								<label for="company_select" class="col-form-label"> Client <span class="text-danger"> * </span></label>
								<select class="form-control" name="client_id" id="client_id_ed">
									<option value="">Select Client</option>
									@forelse($clientList as $clit)
									<option value="{{$clit->id}}"> {{$clit->client_name}}</option>
									@empty
									@endforelse
								</select>
							</div>
							<div class="col-lg-4">
								<label for="" class="col-form-label">Is Active ?</label><br>
								<input type="checkbox"  value="1" id="is_active_ed" name="is_active" />
							</div>
							
							
						</div>
						
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">Update</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
$(function () {
	@if(Session::has('success'))
	new PNotify({
	title: 'Success',
	delay: 500,
	text:  "{{Session::get('success')}}",
	type: 'success'
	});
			
	@endif
	@if ($errors->any())
	var err = "";
	@foreach ($errors->all() as $error)
	
		new PNotify({
		title: 'Error',
		text: "{{$error}}",
		delay: 800,
		type: 'error'
		});
		@endforeach
	@endif
});
		
$(document).ready(function()
{
	$("#customer_select").hide();
	$("#company_select").hide();

	$("#client_select").hide()
	$(".odtabs").not("#tab1").addClass('btn-outline-secondary');
	$("#tab1").addClass('btn-secondary');

	$('.modal').on('hidden.bs.modal', function() {
		$(this).find('form')[0].reset();
		$(this).find('form').parsley().reset();
	});

	$("#user_role_id").on('change', function() {
		var selected = $(this).val();
		if(selected == 2 || selected == 6 || selected == 7) {
			$("#company_select").show();
			$("#customer_select").hide();
			$("#client_select").hide()
		} else if(selected == 3 || selected == 4 ) {
			$("#customer_select").show();
			$("#company_select").hide();
			$("#client_select").hide()
		}
		else if(selected == 8 || selected == 9 ) 
		{
			$("#customer_select").hide();
			$("#company_select").hide();
			$("#client_select").show()
		}
		else
		{
			$("#customer_select").hide();
			$("#company_select").hide();
			$("#client_select").hide()
		}

	});

	$("#user_role_id_ed").on('change', function() {
		var selected = $(this).val();
		if(selected == 2 || selected == 6 || selected == 7) {
			$("#company_select_ed").show();
			$("#customer_select_ed").hide();
			$("#client_select_ed").hide();
		}  else if(selected == 3 || selected == 4 ) {
			$("#customer_select_ed").show();
			$("#company_select_ed").hide();
			$("#client_select_ed").hide();
		}
		else if(selected == 8 || selected == 9 ) 
		{
			$("#customer_select_ed").hide();
			$("#company_select_ed").hide();
			$("#client_select_ed").show();
		}
		else
		{
			$("#customer_select").hide();
			$("#company_select").hide();
			$("#client_select").hide()
		}
	});


	var table = $('#datatable').DataTable({
		responsive: true,
		dom: 'l<"toolbar">Bfrtip',
		buttons: [
			'excel'
		],
		initComplete: function(){
			$("div.toolbar").html('<button   type="button" class=" ml-2 btn btn-primary" data-toggle="modal" data-target="#useraddModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add User</button><br />');
		}
	});
	$('#userfrm').on('submit', function(event){
		event.preventDefault();
		if($('#userfrm').parsley().isValid())
		{
			var url = '{{ route("addUser") }}';
			var data = $("#userfrm").serialize();
			$.ajax({
				type: "post",
				url: url,
				data: data,
				success: function(response) {
					console.log(response);
					if(response.data =='success')
					{
						new PNotify({
							title: 'Success',
							text:  response.msg,
							type: 'success'
							});
						setTimeout(function(){  location.reload(); }, 800);
					}
					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'
					});
				},
			});
		}
	});
	$('#datatable').on('click','.edit_user',function () {
		var id = $(this).data('id');
		var url = '{{ route("edit_user") }}';
		$.ajax({
			type: "post",
			url: url,
			data: { id:id , _token: '{{csrf_token()}}'},
			success: function(response)
			{
				var res =response.data[0];
				$("#ed_user_id").val(res['id']);
				$("#company_id_ed").val(res['company_id']).change();
				$("#first_name_ed").val(res['first_name']);
				$("#last_name_ed").val(res['last_name']);
				$("#email_ed").val(res['email']);
				$("#nt_login_id_ed").val(res['nt_login_id']);
				$("#user_role_id_ed").val(res['user_role_id']);
				$("#customer_id_ed").val(res['customer_id']);
				$("#company_id_ed").val(res['company_id']);
				$("#client_id_ed").val(res['client_id']);

				// var clientstg = res['client_ids'];
				// if(clientstg != null )
				// {
				// 	var clientyArray = clientstg.split(",");
					// $.each(clientyArray, function(index, value)
					//  { 
					//     $("#client_ids_ed option[value='" + value + "']").prop("selected", true);
					// });
					 // $('#client_ids_ed').select2('val',[1,2]).trigger("change");
				// 	 $('#client_ids_ed').val(clientyArray).trigger('change'); 
				// }

				if(res['user_role_id'] == 2 || res['user_role_id'] == 6 || res['user_role_id'] == 7)
				{
					$("#company_select_ed").show();
					$("#customer_select_ed").hide();
					$("#client_select_ed").hide();
				}
				if(res['user_role_id'] == 8 || res['user_role_id'] == 9 )
				{
					$("#customer_select_ed").hide();
					$("#company_select_ed").hide();
					$("#client_select_ed").show();
				}
				 else {
					$("#customer_select_ed").show();
					$("#company_select_ed").hide();
					$("#client_select_ed").hide();
				}
				
				if(res['is_active'] == 1)
				{
					$( "#is_active_ed" ).attr('checked', 'checked');
				}
				else
				{
					$( "#is_active_ed" ).removeAttr('checked', 'checked');
				}
				$("#userEditModal").modal('show');
			}
		});
	});
	$('#updateuserfrm').on('submit', function(event){
		event.preventDefault();
		if($('#updateuserfrm').parsley().isValid()){
			var url = '{{ route("updateUser") }}';
			var data = $("#updateuserfrm").serialize();
			$.ajax({
				type: "post",
				url: url,
				data: data,
				success: function(response) {
					new PNotify({
						title: 'Success',
						text:  response.msg,
						type: 'success'
					});
					setTimeout(function(){  location.reload(); }, 800);
				},
				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',
						delay: 2000
					});
				}
			});
		}
	});
});
function userStatus(value)
{
window.location.href = '/userStatus/' + value;
}
$(document).ready(function()
{
	//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.'
	  }
	});

	$(function(){
		$('.select_role').change(function(){
			var val = $(this).val();	
			
		  $('#client_ids').val('').trigger("change");
		  $('#client_ids_ed').val('').trigger("change");
			if(val == 3 || val == 4)
			{
				var select = jQuery(".mul_select");
				console.log(!select.prop("multiple"));
				select.prop("multiple", false);
				select.trigger('change');  
				
			} 
			else 
			{
				var select = jQuery(".mul_select");
				select.attr('multiple', true);
				select.trigger('change');  
			}  
			    
		});
	});
});
</script>
@endsection