@extends('layouts.master')
@section('title',trans('roles'))

@section('header')
@endsection
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <form action="{{route('admin.roles.store')}}" method="post">
                    @csrf
                    <div class="card">
                        <div class="card-content">
                            <div class="card-body p-0 p-md-1">
                                <div class="row">
                                    <div class="col-8 mx-auto">
                                        <div class="form-group">
                                            <label for="name">@lang('role name')</label>
                                            <input name="name" type="text" class="form-control"
                                                   id="name" value="{{old('name')}}"
                                                   placeholder="@lang('example') : super_admin">
                                        </div>
                                        <div class="form-group">
                                            <label for="label">@lang('role description')</label>
                                            <input name="label" type="text" class="form-control"
                                                   id="label" value="{{old('label')}}"
                                                   placeholder="@lang('example') : @lang('super admin')">
                                        </div>

                                        <div class="form-group">
                                            <label for="icon">@lang('permissions')</label>
                                            <select class="form-control" name="permission_id[]"
                                                    title="@lang('select')" multiple>
                                                @foreach($permissions as $permission)
                                                    <option value="{{$permission->id}}">{{$permission->label}}
                                                        - {{$permission->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input type="submit" class="btn btn-outline-success" value="@lang('submit')">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </section>

@endsection

@section('footer')
    <script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/translations/fa.js"></script>

    <script>
        var allEditors = document.querySelectorAll('.editor');
        for (var i = 0; i < allEditors.length; ++i) {
            ClassicEditor
                .create(allEditors[i], {
                    language: 'fa'
                })
                .then(editor => {
                    editor.ui.view.editable.element.style.height = '150px';
                })
                .catch(error => {
                    console.error(error);
                });
        }
    </script>
@endsection