@extends('layouts.app')
@section('title', 'User List')
@section('content')
<style type="text/css">
	.dropdown-item span:hover
	{
		color: #f9fafb!important;
	}
	.moveall ,
.removeall ,.move ,.remove {
border: 1px solid #ccc !important;
color: black;
}
.moveall::after ,.move ::after{
content: attr(title);

}
.removeall::after,.remove::after {
content: attr(title);
}
.accordion-button  ,.accordion-button:not(.collapsed) {
color: #212529!important;
background-color: rgba(0,0,0,.03)!important;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%)!important;
}
</style>
<script src="{{asset('app-assets/js/jquery.bootstrap-duallistbox.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css/bootstrap-duallistbox.css')}}">
<div class="container-fluid mt-4">
	<div class="row">
		<div class="col-lg-12" >
			<div class="card" style="box-shadow: 0px 3px 6px #00000029;">
				<div class="card-header" style="background: #D1FFD2 0% 0% no-repeat padding-box;box-shadow: 0px 3px 6px #00000029;opacity: 1;">
					<h5 class="mt-0 text-left" style="font-weight: bold;font-size: 18px;">
					<a href="{{ route('masters_user') }}" style="text-decoration:none;">
						<img class="menuicon" src="{{asset('app-assets/images/orgicons/organname.png')}}" style="width:2.1rem;height:2.1rem;">
					</a>
					<img class="menuicon" src="{{asset('app-assets/images/orgicons/user.svg')}}">&nbsp;User </h5>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-4">
							<img class="icon" src="{{asset('app-assets/images/orgicons/people.svg')}}" height="15px" width="15px">&nbsp;<span class="org">User Name:</span>&nbsp;
							<span class="orgdetail">{{$user_dt->first_name}} {{$user_dt->last_name}}</span>
						</div>
						<div class="col-md-4">
							<img class="icon" src="{{asset('app-assets/images/orgicons/phone.svg')}}"><span class="org">&nbsp;Phone Number:</span>&nbsp;<span class="orgdetail">{{$user_dt->phone_no}}</span>
						</div>
						<div class="col-md-4">
							<img class="icon" src="{{asset('app-assets/images/orgicons/email.svg')}}"><span class="org">&nbsp; Email:</span>&nbsp;<span class="orgdetail">{{$user_dt->email}}</span>
						</div>
					</div>
					<div class="row shadow mt-3" style="line-height: 2.5rem;">
						<ul class="nav nav-tabs innerTab" id="allTab" role="tablist">
							<li class="nav-item" role="presentation">
								<button class="nav-link " id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab" aria-controls="users" aria-selected="false" href="#users"><img class="menuicon" src="{{asset('app-assets/images/orgicons/user.svg')}}" >&nbsp;General info</button>
							</li>
							<li class="nav-item" role="presentation">
								<button class="nav-link"  id="production-tab" data-bs-toggle="tab" href="#production" data-bs-target="#production" type="button" data-toggle="tab" role="tab" aria-controls="production" aria-selected="false"  href="#production"><img class="menuicon" src="{{asset('app-assets/images/orgicons/production.svg')}}" >&nbsp;Clients</button>
							</li>
							<li class="nav-item" role="service">
								<button class="nav-link"  id="services-tab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false"  href="#services"><img class="menuicon" src="{{asset('app-assets/images/orgicons/services.svg')}}">&nbsp;Services</button>
							</li>
						</ul>
					</div>
					<div class="tab-content" id="walletContent">

						<div class="tab-pane " id="users" role="tabpanel" aria-labelledby="users-tab">
							<div class="card-body" style="height: 17.89rem;">
								<div id="displayForm" >
									@foreach($users as $user)
									<div class="row" id="edit">
										<a href="javascript:void(0)"  id="edit">
											<img class="editdicon" src="{{asset('app-assets/images/orgicons/edit.svg')}}" style=" float: right;height: 20px; width: 20px;">
										</a>
									</div>
									<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">{{ $user->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">{{ $user->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">{{ $user->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">{{ $user->phone_no}}</p>
										</div>
									</div>
									<hr>
									<div class="row">

										<div class="col-sm-2">
											<p class="mb-0">Designation</p>
										</div>
										<div class="col-sm-4">
											<p class="text-muted mb-0">{{ $user->designation}}</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">
												@foreach($usertype as $userstype)
												@if($userstype->id==$user->user_type_id) {{ $userstype->user_types }} @endif
											@endforeach</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"><input id="isactive" required name="isactive" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" checked> Is Active? <span class="text-danger">  <span></label></p>
										</div>
									</div>
									<br />
								</div>
								<div id="inputForm" style="display:none;">
									<form method="post" name="userUpdateForm" id="userUpdateForm" role="form" enctype="multipart/form-data">
										@csrf
										<input type="hidden" name="id" id="id" value="{{ $user->id}}">
										<div class="row">
											<div class="col-sm-2">
												<p class="mb-0">First Name <span class="text-danger">  *<span></p>
											</div>
											<div class="col-sm-4">
												<p class="text-muted mb-0"><input id="firstname" value="{{ $user->first_name}}" name="firstname" type="text" class="form-control" autocomplete="off" placeholder="Enter Firstname" required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$"></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"><input id="lastname" value="{{ $user->last_name}}" name="lastname" type="text" class="form-control" autocomplete="off" placeholder="Enter Lastname" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$"></p>
											</div>
										</div>
										<hr>
										<div class="row">
											<div class="col-sm-2">
												<p class="mb-0">Email <span class="text-danger">  *<span></p>
											</div>
											<div class="col-sm-4">
												<p class="text-muted mb-0"><input id="email" value="{{ $user->email}}" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" required=""></p>
											</div>
											<div class="col-sm-2">
												<p class="mb-0">New Password</p>
											</div>
											<div class="col-sm-4">
												
													<p class="text-muted mb-0">
														<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"
													>
													<span class="errorspannewpassinput" style="font-weight: 400;"></span></p>
																
											</div>
										<!-- </div>
										<hr>
										<div class="row"> -->
											
										</div>
										<hr>
										<div class="row">

											<div class="col-sm-2">
												<p class="mb-0">Designation</p>
											</div>
											<div class="col-sm-4">
												<p class="text-muted mb-0"><input id="designation" value="{{ $user->designation}}" name="designation" type="text" class="form-control" autocomplete="off" placeholder="Enter Designation"></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"><select id="usertype" name="usertype" type="text" class="form-control" required>
													<option value="">Select Usertype</option>
													@foreach($usertype as $userstype)
													<option value="{{ $userstype->id }}" @if($userstype->id==$user->user_type_id) selected @endif >{{ $userstype->user_types }}</option>
													@endforeach
												</select></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"><input id="contactnumber" value="{{ $user->phone_no}}" name="contactnumber" type="text" class="form-control" autocomplete="off" placeholder="Enter Phone Number" data-parsley-type="number" data-parsley-trigger="change"></p>
											</div>
											<div class="col-sm-2">
												<p class="mb-0">Status</p>
											</div>
											<div class="col-sm-4">
												<p class="text-muted mb-0"><input id="isactive" required name="isactive" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" checked> Is Active? <span class="text-danger">  <span></label></p>
											</div>


										</div><br />
										<div class="row" style="float:right;">
											<div class="col-sm-12">
												<button type="button" class="btn btn-danger" name="submit" id="submit" style="background:#19381A;color:#fff;border:#19381A;" onclick="userUpdate();">Submit</button>
											</div>
										</div>
									</form>
								</div>
								@endforeach
							</div>
						</div>
						<div class="tab-pane" id="services" role="tabpanel" aria-labelledby="services-tab">
							<div class="row mt-4">
								<form id="user_product_mapping" type="post"  enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
									@csrf
									<input type="hidden" name="userId" id="userId" value="{{$admin_user_id}}">

									<div class="accordion" id="accordionExample">
										<div id="checkbox-errors" class="h4 text-center" style=""></div>
										@foreach($client_list as $k=> $org)
										<div class="accordion-item mt-1">
											<div class="accordion-header" id="heading{{$org->id}}"  >
												<button class="accordion-button col-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$org->id}}" aria-expanded="true" aria-controls="collapse">
												<b> {{$org->org_name}}</b>
												</button>
											</div>
											<div id="collapse{{$org->id}}" class="accordion-collapse collapse show " aria-labelledby="heading{{$org->id}}" data-bs-parent="#accordionExample">
												<div class="accordion-body">
													<div class="row">
														<div class="col-lg-5 col-sm-12 col-md-5 col-xs-12">
															<div class="row">
																@forelse($org->getOrgProductMapping as $j=> $org_mapp)
																
																@php	$sub_prod = $org_mapp->getSubProductType @endphp
																<div class="col-sm-12 col-md-4 col-lg-3 mt-1">
																	<div class="card mb-1 p-1 align-items-center" style="background: #F5FEFF 0% 0% no-repeat padding-box;
																		box-shadow: 0px 3px 6px #00000029;
																		border-radius: 8px;
																		opacity: 1;width: 100%;
																		height: 100%;text-align: center">
																		@php
                                                                        $cm = $org_mapp['User_product_mapping'];
																		if($cm != Null)
																		{
																			$sub_prod_type_id = $cm['sub_product_type_id'];
																			$ven_id = $cm['org_id'];
																		}
																		else {
																			$sub_prod_type_id = "";
																			$ven_id = "";
																		}
																		@endphp
																		<input type="checkbox" name="subproducttypeids[{{$org->id}}][]" style="margin-left:60px;width:20px;" value="{{$sub_prod->id}}"
																		@if($k == 0 && $j ==0) required  data-parsley-mincheck="1" data-parsley-errors-container="#checkbox-errors" data-parsley-error-message="select at least one subproduct"  data-parsley-required="true"  @endif data-parsley-multiple="checkbox" @if(!empty($cm) && $sub_prod_type_id == $sub_prod->id && $ven_id == $org->id)
																		checked
																		@endif>
																		@if($sub_prod->sub_product_icon == "" || $sub_prod->sub_product_icon ==  NULL)
																		<img src="{{asset('app-assets/images/orgicons/services.svg')}}" style='width:1rem;height:1rem; object-fit: contain'>
																		@else

																		<img src="data:{{$sub_prod->icon_type}};base64,{{base64_encode($sub_prod->sub_product_icon)}}"  style='width:1rem;height:1rem; object-fit: contain'>
																		@endif
																		<span class="card-text" style="font-size: 8px;font-weight:bold">{{$sub_prod->subproduct_type_name}}</span>
																		<!-- {{$cm}} -->
																	</div>

																</div>
																@empty
																@endforelse

															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										@endforeach
									</div>
									<div class="text-center mt-2">

										<button type="submit" class="btn btn-danger" name="update_services" id="update_services" style="background:#19381A;color:#fff;border:#19381A;" >Save</button>
									</div>
								</form>
							</div>

						</div>
						<div class="tab-pane" id="production" role="tabpanel" aria-labelledby="production-tab">
							<div class="row">
								<form method="post" id="clientmappingfrm" name="clientmappingfrm" id="sizeForm" role="form" action=''>
									@csrf
									<input type="hidden" name="userId" id="userId" value="{{$admin_user_id}}">
									<div class="row mt-3">
										@php  $orgIds = explode(',',$user_dt->org_ids); @endphp

										<select multiple="multiple" size="10" id="client_ids" name="client_ids[]" title="client_ids[]" >
											@forelse($orglist as $org)
											<option value="{{$org->id}}" @if(in_array($org->id,$orgIds)) selected @endif>{{$org->org_name}}</option>
											@empty
											@endforelse
										</select>

									</div>
									<div class="card-footer text-center mt-2">
										<button type="submit" class="btn btn-danger " name="submit" id="submit_sdoc" style="background:#19381A;color:#fff;border:#19381A;" >Save</button>
									</div>
								</form>


							</div>
						</div>




					</div>
					</br />
				</div>
				<div class="card-footer">


				</div>
			</div>
		</div>
	</div>
</div>
<script>
$(document).ready(function() {

 $('button[data-bs-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });

    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#allTab button[href="' + activeTab + '"]').tab('show');
        localStorage.removeItem('activeTab');
    }
    else
    {
    	 $('#allTab button[href="#users"]').tab('show');
    }

var demo1 = $('select[name="client_ids[]"]').bootstrapDualListbox({
	nonSelectedListLabel: 'Non-selected Client',
selectedListLabel: 'Selected Client',
moveOnSelect: false,
moveAllLabel:"",
removeAllLabel:"",
removeSelectedLabel:""
});
$('#clientmappingfrm').on('submit', function(event)
{
	event.preventDefault();

	$role_id=$('#client_ids').val();
	if( $role_id == "")
	{
		new PNotify({
				title: 'Error',
				text:  "Please select at least one client",
				type: 'error'
				});
	}
	else
			{
				var url = '{{ route("add_user_client_mapping") }}';
						$.ajax({
							type: "post",
							url: url,
							data: $(this).serialize(),
							// processData: false,
							// contentType: false,
							success: function(response)
							{
								if(response.data =='success')
								{
									new PNotify({
										title: 'Success',
										text:  response.msg,
										type: 'success'
										});
								}
								else
								{
									new PNotify({
									title: 'Error',
									text:  response.msg,
									type: 'error'
									});
								}
								localStorage.setItem('activeTab',"#production");
								setTimeout(function(){  location.reload(); }, 1000);

							},

						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'
								});

							},
						});
				}

});
$('#user_product_mapping').on('submit', function(event)
{
	event.preventDefault();
		if($('#user_product_mapping').parsley().isValid())
		{
			var url = '{{ route("add_user_product_mapping") }}';
					$.ajax({
						type: "post",
						url: url,
						data: $(this).serialize(),
						success: function(response)
						{
							if(response.data =='success')
							{
								new PNotify({
									title: 'Success',
									text:  response.msg,
									type: 'success'
									});
							}
							else
							{
								new PNotify({
								title: 'Error',
								text:  response.msg,
								type: 'error'
								});
							}
							localStorage.setItem('activeTab',"#services");
							setTimeout(function(){  location.reload(); }, 1000);
						},

					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'
							});

						},
					});

					}
});


});
function openCity(evt, cityName)
{
	var i, tabcontent, tablinks;
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}
	document.getElementById(cityName).style.display = "block";
	evt.currentTarget.className += " active";
}


function userUpdate()
{
	if ($("#userUpdateForm").parsley()) {
	if ($("#userUpdateForm").parsley().validate()) {
	event.preventDefault();
	if ($(userUpdateForm).parsley().isValid()) {
				$.ajax({
			type: "POST",
			cache:false,
			async: false,
			url: "{{ url('/updateUser') }}",
			data: new FormData($("#userUpdateForm")[0]),
			processData: false,
			contentType: false,
			success: function(response) {
				new PNotify({
					title: 'Success',
					text:  response.msg,
					type: 'success',
					delay: 500,
					});
					localStorage.setItem('activeTab', "#users");
					setTimeout(function(){  location.reload(); }, 1000);
					// $('#production-tab').prop('disabled', false);
					// $('#production').addClass('active');
					// $('#production-tab').addClass('active');
					// $('#users-tab').removeClass('active');
					// $('#users').removeClass('active');
			},
			error:function(response) {
				var errors = response.responseJSON;
				new PNotify({
					title: 'Error',
					text:  errors.msg,
					type: 'error'
					});
				return false;
			}
			});
			}
		}
	}
	return false;
}

function userStatus(value)
{
	window.location.href = '/userStatus/' + value;
}
function editUser(userid)
{
	$.ajax({
		url: "/editUser/" + userid,
		success: function(data) {

		}
	})
}
$("#edit").click(function()
{
	$("#displayForm").hide();
	$("#inputForm").show();
});
$(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.'
	  }
	});
});
</script>
@endsection