@extends('layouts.app')

@section('style')
<style>

    input[type=checkbox] {
        display:none;
    }

    input[type=checkbox] + label
    {
        background-image: url('/css/images/x-mark.ico');
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
    input[type=checkbox]:checked + label
    {
        background-image: url('/css/images/check-mark.ico');
        height: 16px;
        width: 16px;
        display:inline-block;
        padding: 0 0 0 0px;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{__('texte.roles_arr.create.create_role')}}</h3>
                <div class="pull-right">
                    <a class="btn btn-primary back-btn" href="{{route('roles.index')}}" @cannot('list_roles') disabled="disabled" @endcannot>{{__('texte.roles_arr.create.roles')}}</a>
                </div>
            </div>

            <div class="panel-body">
                <form id="role_create" method="POST" action="{{ route('roles.store') }}" class="form form-horizontal">
                    {{ csrf_field() }}

                    <div class="form-group row {{ $errors->has('name') ? ' has-error' : '' }}">
                        <label for="name" class="col-sm-2 col-form-label required">{{__('texte.roles_arr.create.name')}}</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name" value="{{old('name')}}"/>
                            @if ($errors->has('name'))
                                    <span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                        </div>
                    </div>     
                    
                    <div class="form-group row {{ $errors->has('permissions[]') ? ' has-error' : '' }}">                            
                        <label for="permissions" class="col-sm-2 col-form-label">{{__('texte.roles_arr.create.permissions')}}</label>
                        <div class="col-sm-8"> 
                            @if ($errors->has('permissions[]'))
                                <span class="help-block"><strong>{{ $errors->first('permissions[]') }}</strong></span>
                            @endif
                            <div class="errorBox"></div>
                            <table id="myTable" class="table table-striped table-bordered table-hover dataTables-example dataTable" width="100%">
                                <thead>
                                    <tr>
                                        <th><button style="margin-right:5px;" type="button" class='btn btn-primary' onclick="check_all()">{{__('texte.roles_arr.create.select_all')}}</button><button type="button" class='btn btn-warning' onclick="uncheck_all()">{{__('texte.roles_arr.create.deselect_all')}}</button></th>
                                        <th style="text-align: center;">{{__('texte.roles_arr.create.creation')}}</th>
                                        <th style="text-align: center;">{{__('texte.roles_arr.create.reading')}}</th>
                                        <th style="text-align: center;">{{__('texte.roles_arr.create.edition')}}</th>
                                        <th style="text-align: center;">{{__('texte.roles_arr.create.deletion')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($parent_groups as $parent_group)
                                    <tr>
                                        <td><h3>{{$parent_group->name}}</h3></td>
                                        <td style="text-align: center;"><input class="ckbox create" type="checkbox" id="create_{{$parent_group->id}}" data-id="{{$parent_group->id}}"/><label for="create_{{$parent_group->id}}"></label></td>
                                        <td style="text-align: center;"><input class="ckbox read" type="checkbox" id="read_{{$parent_group->id}}" data-id="{{$parent_group->id}}"/><label for="read_{{$parent_group->id}}"></label></td>
                                        <td style="text-align: center;"><input class="ckbox edit" type="checkbox" id="edit_{{$parent_group->id}}" data-id="{{$parent_group->id}}"/><label for="edit_{{$parent_group->id}}"></label></td>
                                        <td style="text-align: center;"><input class="ckbox delete" type="checkbox" id="delete_{{$parent_group->id}}" data-id="{{$parent_group->id}}"/><label for="delete_{{$parent_group->id}}"></label></td>
                                    </tr>
                                        @foreach($parent_group->children as $group)
                                        <tr>
                                            <td><h4 style="text-align: center;">{{$group->name}}</h4></td>
                                            @foreach($group->permissions as $permission)        
                                            <td style="text-align: center;"><input class="ckbox {{$permission->order==1 ? 'child_create' : ($permission->order==2 ? 'child_read' : ($permission->order==3 ? 'child_edit' : 'child_delete'))}}" type="checkbox" data_group="{{$parent_group->id}}" name="permissions[]" value="{{$permission->id}}" title="{{$permission->title}}" id="permission_{{$permission->id}}" {{ !empty(old('permissions')) && in_array($permission->id,old('permissions')) ? 'checked' : ''}}/><label for="permission_{{$permission->id}}"></label></td>
                                            @endforeach
                                        </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-12" style='text-align: center;'>
                            <button type="submit" class="btn btn-primary">{{__('texte.roles_arr.create.add')}}</button>
                        </div>
                    </div>

                </form>
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>
</div>


<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>

<script type="text/javascript" charset="utf-8">
function check_all(){
    $('.ckbox').prop('checked',true);
}
function uncheck_all(){
    $('.ckbox').prop('checked',false);
}

$('.create').on('click',function(){
   var checked = $(this).is(':checked');
   $('.ckbox.child_create[data_group="'+$(this).attr('data-id')+'"]').prop('checked', checked);
});

$('.read').on('click',function(){
   var checked = $(this).is(':checked');
   $('.ckbox.child_read[data_group="'+$(this).attr('data-id')+'"]').prop('checked', checked);
});

$('.edit').on('click',function(){
   var checked = $(this).is(':checked');
   $('.ckbox.child_edit[data_group="'+$(this).attr('data-id')+'"]').prop('checked', checked);
});

$('.delete').on('click',function(){
   var checked = $(this).is(':checked');
   $('.ckbox.child_delete[data_group="'+$(this).attr('data-id')+'"]').prop('checked', checked);
});
</script>

@endsection