@extends('admin.layout.master')
@section('title','ROLE MAPPING MANAGEMENT')
@section ('content')
        <div class="card sina-card">
            <div class="card-header card-header-s d-flex flex-wrap align-items-center">
                <h4 class="col-6 pl-0">{{__('obs.role')}} {{__('obs.mapping')}}  {{__('obs.create')}}</h4> 
            </div>
			<div class="card-body"> 
				<form action="{{route('role_mapping.store')}}" method="post">
					@csrf
					<div class="d-flex justify-content-center mt-2">
						<div class="col-1"></div>
						<div class="col-2 pr-0">
							<label for="name" class=" ">{{__('obs.action')}} {{__('obs.name')}}</label>
						</div>
						<div class="col-6" style="margin-left: -75px">
							{{-- <input type="text" name="name" id="name" class="form-control" required> --}}
							<select name="name" id="name" class="form-control name">
								@forelse ($actions as $action)
									<option value="{{$action->id}}">{{$action->name}}</option>
								@empty
									
								@endforelse
							</select>
						</div>
						<div class="col-2 pl-2">
							<button style="position: fixed;top:50%;right:2px;" class="btn-sina-submit" type="submit"><i class="fa fa-save"></i> {{__('obs.save')}} </button>
						</div>
					</div>
					<div class="table-responsive">
						<div id="tree" class="tree treeview"></div>
					</div>
					<br>
					<div class="table-responsive">
						<table id="protable" class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>{{__('obs.sl')}}</th>
									<th>{{__('obs.step')}}</th>
									<th>{{__('obs.step')}} {{__('obs.serial')}}</th>
									<th>{{__('obs.role')}}</th>
									<th>{{__('obs.users')}}</th>
									<th>{{__('obs.is_required')}}</th>
									<th>{{__('obs.amount_range')}}</th>
									<th>{{__('obs.is_final')}}</th>
									<th>{{__('obs.forward_to')}}</th>
								</tr>
							</thead>
							<tbody>
							@php
								$i=0;
							@endphp
								@forelse($steps as $key=> $step)
									<tr>
										<th>{{($key+1)}}</th>
										<th>
											<div class="checkbox">
												<input  type="checkbox" class="{{strtolower($step->id)}}-select" name="asigned_step[]" value="{{$step->id}}">
												<label for="demo-form-checkbox">{{$step->name}}</label>
											</div>
										</th>
										<th><input type="number" name="order_sl[{{$step->id}}]" id="order_sl{{$step->id}}"></th>
										<th>
											<select name="role_id[{{$step->id}}]" id="role_id{{$step->id}}" class="select_2" onchange="getUserOption('{{$step->id}}',this.value)">
												{{-- <option value="">{{'SELECT ROLE'}}</option> --}}
												@forelse ($roles as $role)
													<option value="{{$role->id}}">{{$role->name}}</option>
												@empty
													
												@endforelse
											</select>
										</th>
										<th>
											<select name="admin_id[{{$step->id}}][]" id="admin_id{{$step->id}}" class="select_2" multiple>
												<option value="">{{'SELECT USER'}}</option>
												@forelse ($admins as $admin)
													<option value="{{$admin->id}}">{{$admin->email}}</option>
												@empty
												@endforelse
											</select>
										</th>
										<th><input type="checkbox" class="" name="is_required[{{$step->id}}]" value="1"></th>
										<th>
											<input type="number" title="From" class="form-control" name="amount_from[{{$step->id}}]" value="">
											<input type="number" title="To" class="form-control" name="amount_to[{{$step->id}}]" value="">
										</th>
										<th><input type="checkbox" class="" name="is_final[{{$step->id}}]" value="1"></th>
										<th><input type="number" title="forward_to" class="form-control" name="forward_to[{{$step->id}}]" value=""></th>
									</tr>
							@empty
							@endforelse
							</tbody>
						</table>
					</div>
				</form>
			</div>  
        </div>
    </div> 
@endsection
@section('script')
    <!-- page script -->
    <script type="text/javascript">
   let roles=@json($roles);
    $(document).ready(function(){
        $('.name').select2({
            tags: true
        });
        $('.select_2').select2();
    })

    function getUserOption(row_id,role_id){
        var str='';
        $("#admin_id"+row_id+" option").each(function(){
            console.log($(this));
            if($(this).attr('selected')){
                alert();
                str+=`<option selected="selected" value="`+$(this).val()+`">`+$(this).text()+`</option>`;
            }
        });
        console.log(str);
        for (let i = 0; i < roles.length; i++) {
            if((roles[i].id==role_id) && (roles[i].admins.length>0)){
               var admins=roles[i].admins;
                for (let index = 0; index < admins.length; index++) {
                    if(admins[index]){
                        str+=`<option value="`+admins[index].id+`">`+admins[index].email+`</option>`;
                    }
                    
                }   
            }
        }
        $("#admin_id"+row_id).html(str);
        
    }
    </script>
@stop