@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">ROLE MAPPING  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=" ">Action 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> 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>SL</th>
                                    <th>STEP</th>
                                    <th>STEP SERIAL</th>
                                    <th>ROLE</th>
                                    <th>USERS</th>
                                    <th>IS REQUIRED</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->name}}</option>
                                                @empty
                                                @endforelse
                                            </select>
                                        </th>
                                        <th><input  type="checkbox" class="" name="is_required[{{$step->id}}]" value="1"></th>
                                    </tr>
                            @empty
                            @endforelse
                                     
                                                                                 
                               
                            </tbody>
                        </table>
                    </div>
                </form>
            </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].name+`</option>`;
                    }
                    
                }   
            }
        }
        $("#admin_id"+row_id).html(str);
        
    }
    </script>
@stop