@extends('layouts.admin_template')
@section('content')
<!-- <section class="content-header">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
			<h4 class="mainsection-title"><i class="fa fa-user"></i>&nbsp;&nbsp; User Management</h4>
		</div>
	</div>
</section> -->
<section class="content">
	<div class="flash-message mrgn-top15">
		@foreach (['danger', 'warning', 'success', 'info'] as $msg)
		@if(Session::has('alert-' . $msg))
		<div class="alert alert-{{ $msg }} alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><h4>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</h4> {{ Session::get('alert-' . $msg) }}</div>
		@endif
		@endforeach
	</div> 
    <div class="card  rounded-3 box-shadow">
    	<div class="card-header bg-card-dark-blue with-border">
        	<h3 class="card-title">Add User Vertex ID</h3>
		</div>
        <form class="" role="form" method="POST" action="{{ url('/admin/user/storevertexid') }}" enctype="multipart/form-data">
			{{ csrf_field() }}
        	<div class="card-body">
				<div class="row">
					<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
						<div class="form-group {{ $errors->has('userid') ? ' has-error' : '' }}">
							<label for="name" class="col-sm-12 control-label">Select Client Name<span class="required-mark">*</span> : </label>
							<div class="col-sm-10">
								<select name="userid" id="userid" class="form-control  select2 @error('userid') is-invalid @enderror">
									<option value="">Please select Vertex user</option>
									@foreach($userspass as $user)
									<option value="{{$user->id}}">{{$user->name}}({{$user->email}})</option>
									@endforeach
								</select> 
								@if ($errors->has('userid'))
                            <span class="invalid-feedback">{{ $errors->first('userid') }}</span>
                            @endif
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-12 control-label">Select Group<span class="required-mark">*</span> : </label>
							<div class="col-sm-10">
								<select name="group" class="form-control  @error('group') is-invalid @enderror" id="group">
								<option value="">Please select Vertex group</option>
									<!-- @foreach($groups as $group) 
									<option value="{{$group->mtgroup}}">{{$group->name}}</option>
									@endforeach -->
								</select> 
								@if ($errors->has('group'))
                            <span class="invalid-feedback">{{ $errors->first('group') }}</span>
                            @endif
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="card-footer">
				<button class="btn btn-primary mrgn-right10" type="submit" id="submit-btn" disabled>Submit</button>
			</div>
		</form>          
	</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

	$(document).ready(function(){
		$('#userid').change(function(event){
			const id = $(this).val();
			const users = {!! json_encode($userspass) !!};
			const filteredUser = users.find((obj)=> obj.id == id);

			if (filteredUser) {
				const groups = {!! json_encode($groups) !!};
				const { group_id } = filteredUser ? filteredUser : {};

				const findedGroup = groups.find((obj) => obj.mtgroup == group_id);
				const { name } = findedGroup ? findedGroup : {};
				$('#group').empty();
				const option = "<option value='"+group_id+"'>"+name+"</option>"; 
				$("#group").append(option);
				$("#submit-btn").prop("disabled", false);
			} else {
				const defaultOption = "<option value=''>Please select Vertex group</option>"
				$('#group').empty();
				$("#group").append(defaultOption);
				$("#submit-btn").prop("disabled", true);
			}
		})
	});
	
</script>
@endsection