@extends('layouts.master')
@section('main-body')
<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-8">
                <h3>Create Role</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="/roles">Role</a></li>
                    <li class="breadcrumb-item active">Create</li>
                </ol>
                <span class="pull-right">
                    <button class="btn btn-secondary" onclick="confirmBack('role')">Cancel</button>
                    @if($loggedUser->can('create-roles'))
                    <button class="btn btn-primary action-btn" onclick="confirmation('role')" id="action-btn" disabled value="role">Save</button>
                    @endif
                </span>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid" id="referenceId" value="">
    {!! Form::open(['route' => 'roles.store', 'method' => 'POST', 'id' => 'role-form']) !!}
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5>Form</h5>
                </div>
                <div class="card-body">
                    <div class="col-lg-12">
                        <div class="form-group">
                            {!! Form::label('role_name', 'Role Name') !!}
                            {!! Form::text('role_name', '', ['class' => 'form-control', 'required' => 'required', 'maxlength' => '255', 'id' => 'roleId', 'onfocusout' => 'checkValidation(this)', 'onkeyup' => 'checkValidation(this)']) !!}
                            <p class="help-block" style="color:red;" id="rolenameValidation" class="field-validation"></p>
                        </div>
                        <div class="form-group">
                            {!! Form::label('description', 'Description') !!}
                            {!! Form::textarea('description', '', ['class' => 'form-control', 'maxlength' => '1000', 'id' => 'descriptionId']) !!}
                            <p class="help-block" style="color:red;" id="descriptionValidation" class="field-validation"></p>
                        </div>
                        @if($loggedUser->can('set-permissions'))
                        <div class="form-group">
                            <input class="form-check-input" type="checkbox" id="chck-all" onchange="checkAll('module')">
                            {!! Form::label('permission', 'Permissions') !!}
                            @foreach($modules as $module)
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <input style="z-index: 5" class="form-check-input module position-absolute m-20 fs-6 chck-{!! $module->name !!}" type="checkbox" onchange="checkModule('{!! $module->name !!}')">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#create-module-{{$module->id}}" aria-expanded="false" aria-controls="collapseTwo">
                                        <p class="px-4">{!! $module->name !!}</p>
                                    </button>
                                </h2>
                                <div id="create-module-{{$module->id}}" class="accordion-collapse collapse" aria-labelledby="create-heading{{$module->id}}">
                                    <div class="accordion-body">
                                        <div class="row">
                                            @foreach($module->permissions as $permission)
                                            <div class="col-sm-6">
                                                <div class="card">
                                                    <div class="card-body bg-primary">
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input {!! $module->name !!} permissions" type="checkbox" onchange="isChecked('permissions','{!! $module->name !!}')" name="permission[]" value="{{$permission->id}}">
                                                            <label class="form-check-label">
                                                                <h6>{!! $permission->permission !!}</h6>
                                                            </label>
                                                        </div>
                                                        <p class="mb-3">{!! $permission->description !!}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}
</div>
@include('modals.confirmation')
@endsection

@section('import-scripts')
<script src="/assets/js/field-validations.js"></script>
<script src="/assets/js/checkbox.js"></script>

@endsection

@section('page-script')

function confirmation(module) {
    $('#confirmation-body').html("Are you sure you want to create this " + module + "?" );
    $('#submit-btn').val(module);
    $('#confirmationModal').modal('show');
}

function submitForm(elem) {
    $('#'+elem.value+'-form').submit();
}

function confirmBack(module) {
    $('#cancel-body').html("Are you sure you want to cancel the creation of this " + module + "?" );
    $('#cancel-btn').val(module);
    $('#cancelModal').modal('show');
}

function cancelForm(elem) {
    window.location.replace('/roles')
}


@include('notifications.index')

@endsection