@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 ">
    	<div class="card-header bg-card-dark-blue with-border">
        	<h3 class="card-title">Add vertex id</h3>
		</div>
        <form class="" role="form" method="POST" action="{{ url('/admin/storemtid') }}" 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">
							<label for="name" class="col-sm-2 control-label">User Name<span class="required-mark">*</span> : </label>
							<div class="col-sm-10">
								<select id="userid" name="userid" class="form-control select2 hei45">
									@foreach($userspass as $user)
									<option value="{{$user->id}}">{{$user->name}} ({{$user->email}})</option>
									@endforeach
								</select> 
							</div>
						</div>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">Select Group<span class="required-mark">*</span> </label>
							<div class="col-sm-10">
								<select id="group" name="groupname" class="form-control hei45">
								
                                <option value="">Please select Vertex group</option>	
                                <!-- @foreach($groups as $group) 
									<option value="{{$group->mtgroup}}">{{$group->name}}</option>
									@endforeach -->
								</select> 
							</div>
						</div>						
						<div class="form-group">
							<label for="mtid" class="col-sm-2 control-label">vertex id<span class="required-mark">*</span> </label>
							<div class="col-sm-10">
								<input type="text" class="form-control hei45" id="mtid" name="mtid" placeholder="1111,2222" value={{ old('mtid') }}>
								<span>Enter comma separated value for multiple account.</span>
								@if ($errors->has('mtid'))
								<span class="help-block">{{ $errors->first('mtid') }}</span>
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="card-footer">
				<button class="btn btn-primary mrgn-right10" type="submit">Submit</button>
				<button class="btn btn-primary" type="reset">Reset</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);
				
			} else {
				const defaultOption = "<option value=''>Please select Vertex group</option>"
				$('#group').empty();
				$("#group").append(defaultOption);				
			}
		})
	});
	
</script>
@endsection