@extends('backend.includes.panel')

@section('page_css')
<link href="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.css' }}" rel="stylesheet">
@stop

@section('page_title','Feature Access')

@section('inner_page_link')
    <li class="breadcrumb-item active">Access Of System Features</li>
@stop

@section('main_content')
	<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {{ Form::open(['route' => 'feature_access.store','class'=>'form-horizontal form-material','data-parsley-validate'=>'','id'=>'module_acess_form','method'=>'POST','autocomplete'=>'off']) }}
                    <h4 class="card-title">System Feature's Access
                        <button type="reset" style="float: right;" onclick="window.location.href='{{ route('category.index') }}'" class="btn btn-warning waves-effect waves-light m-r-10">Cancel</button>
                        <button type="submit" style="float: right;" class="btn btn-success waves-effect waves-light m-r-10">Submit</button>
                    </h4>
                    <h6 class="card-subtitle">Details of <code>Access To System's Features </code></h6>
                    <div class="form-group m-b-40 " >
                        <div class="col-sm-6">
                            <label class="form-control-label" for="name">Users</label>
                            <select class="select2 form-control" id="users" name="user_id" data-parsley-required="true">
                                <option value="">Select User</option>
                                @if(isset($users) && !empty($users))
                                    @php $last_role_id = ''; @endphp
                                    @foreach($users as $index_key => $user)
                                        @if($last_role_id != $user->role_id)
                                            @if($index_key > 0)
                                                </optgroup>
                                            @endif
                                            <optgroup label="{{ $user->role->name }}">
                                        @endif
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @php $last_role_id = $user->role_id; @endphp
                                        @if(count($users) == ($index_key+1))
                                            </optgroup>
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                            @if(isset($errors) && $errors->first('user_id'))
                            <code>{{ $errors->first('user_id') }}</code>
                            @endif
                            <span class="user_access_loader text-red"></span>
                        </div>                        
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive m-t-10">
                                <table id="module-table" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Feature</th>
                                            <th>Tag</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if(isset($modules) && !empty($modules))
                                            @foreach($modules as $key => $module)                                        
                                                <tr id="feature_{{ $module->id }}" class="bt-switch">
                                                    <td>
                                                        {{ Form::checkbox('module[]',$module->id,null,['data-on-color'=>'info','data-off-color'=>'danger','class'=>'access_toggle '.(!empty($module->subModules) && count($module->subModules) > 0 ? 'toggle_submodules' : '' )]) }}
                                                    </td>
                                                    <td>{{ $module->display_name }}</td>
                                                    <td>{{ $module->name }}</td>
                                                </tr>
                                                @if(!empty($module->subModules) && count($module->subModules) > 0 )
                                                    @foreach($module->subModules as $innerKey => $submodule)
                                                        <tr class="hide sub_module bt-switch feature_{{ $module->id }}" id="feature_{{ $submodule->id }}">
                                                            <td class="hide text-center">
                                                                {{ Form::checkbox('module[]',$submodule->id,null,['data-on-color'=>'info','data-off-color'=>'danger','class'=>'access_toggle toggle_submodules_access']) }}
                                                            </td>
                                                            <td class="hide">{{ $submodule->display_name }}</td>
                                                            <td class="hide">{{ $submodule->name }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_script')
<script src="{{ BE_URL.'plugins/bootstrap-switch/bootstrap-switch.min.js' }}"></script>
<script type="text/javascript">
    $(".bt-switch input[type='checkbox'], .bt-switch input[type='radio']").bootstrapSwitch();
    $(".select2").select2();

    function setAccessState(modules){
        setAllAccessToOff();
        $.each(modules,function(i,val){
            if($('#feature_'+val.module_id).length){
                $('#feature_'+val.module_id).find('.access_toggle').prop('checked',true);
                $('#feature_'+val.module_id).find('.access_toggle').bootstrapSwitch('state', true, true);
                if($('#feature_'+val.module_id).find('.toggle_submodules').length){
                    $('.'+$('#feature_'+val.module_id).attr('id')).show();
                    $('.'+$('#feature_'+val.module_id).attr('id')).find('td').slideDown();
                }
            }
        })
    }

    function setAllAccessToOff(){
        $('.toggle_submodules:checked').each(function(){
            var feature_row_id = $(this).closest('tr').attr('id');
            $(this).prop('checked',false);
            $(this).bootstrapSwitch('state', false, true);  
            $('.'+feature_row_id).find('td').slideUp();
            $('.'+feature_row_id).hide(400);
            $('.'+feature_row_id).find('.toggle_submodules_access:checked').each(function(){
                $(this).prop('checked',false);
                $(this).bootstrapSwitch('state', false, true);
            });
        })
    }

    $(document).on('change','#users',function(){
        if($(this).val()){
            $('.user_access_loader').text('Loading...');
            var URL = '{{ route("fetch.user.access",["ID"]) }}';
            $.ajax({
                url:URL.replace('ID',$(this).val()),
                dataType:'JSON',
                success:function(res){
                    $('.user_access_loader').text('');
                    if(res.result){
                        setAccessState(res.data.access);
                    }
                },
                error:function(res){
                    $('.user_access_loader').text('');
                }
            })
        }else{
            setAllAccessToOff();
        }
    })

    // Toggle sub modules according to its availibility to parent module
    $(document).on('switchChange.bootstrapSwitch','.toggle_submodules',function(){
        var feature_row_id = $(this).closest('tr').attr('id');
        if(!$(this).is(':checked')){
            $(this).removeClass('active');
            $('.'+feature_row_id).find('td').slideUp();
            $('.'+feature_row_id).hide(400);
        }else{
            $(this).addClass('active');
            $('.'+feature_row_id).show();
            $('.'+feature_row_id).find('td').slideDown();
        }
    });

    /* Save & Update */
    $(document).on('submit','#module_acess_form',function(e){
        e.preventDefault();
        if($(this).parsley('isValid')){
            $.ajax({
                url:'{{ route("feature_access.store") }}',
                type:'POST',
                data:$(this).serialize(),
                dataType:'JSON',
                success:function(res){
                    if(res.result){
                        flash(res.message,'success');
                    }else{
                        flash('Access not updated. Try again!','error');
                    }
                },
                error:function(response){
                    response = response.responseJSON;
                    if(response.errors && response.message){
                        var errorMessage = '';
                        $.each(response.errors,function(i,val){
                            if($('.'+i+'-custom-error').length){
                                $('.'+i+'-custom-error').html(val[0]);
                            }else{
                                $('#module_acess_form').find('select[name='+i+']').after('<code class="custom-errors text-danger '+i+'-custom-error">'+val[0]+'</code>');
                            }
                            if(!errorMessage){                      
                                errorMessage = val[0];
                            }
                        });
                        flash(response.message,'error',errorMessage);
                    }else{
                        flash('Access not updated. Try again!','error');
                    }
                }
            })
        }
    });

</script>
@stop