@push('css')
    <link href="{{ asset('assets/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
@endpush
<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Role</label>
            {!! Form::text('name',@$role->name, ['class' => 'form-control', 'placeholder' => 'input role']) !!}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Deskripsi/Title</label>
            {!! Form::text('title',@$role->title, ['class' => 'form-control', 'placeholder' => 'input title...']) !!}
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Parent Role</label>
            {!! Form::select('parent_role_id',$roleParents,@$role->parentRole->parent_role_id,['class'=>'form-control role','placeholder'=>'pilih atasan']) !!}
        </div>
    </div>
</div>
<div class="row mb-3">
    <div class="col-md-2">
        <div class="form-check form-switch form-switch-md" dir="ltr">
            <input class="form-check-input" type="checkbox" name="pakai_divisi" id="pakai_divisi" @if(@$role->pakai_divisi ?? false) checked @endif>
            <label class="form-check-label" for="pakai_divisi">Pakai Departement</label>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-check form-switch form-switch-md" dir="ltr">
            <input class="form-check-input" type="checkbox" name="pakai_perusahaan" id="pakai_perusahaan" @if(@$role->pakai_perusahaan ?? false) checked @endif>
            <label class="form-check-label" for="pakai_perusahaan">Pakai Perusahaan</label>
        </div>
    </div>
</div>
{{-- <div class="row">
	
	<div class="col-lg-12">
		<div class="mb-3">
			<label>Can Submit</label>
			{!! Form::select('can_submit',['1'=>'Ya','0'=>'Tidak'],null,['class'=>'form-control','placeholder'=>'pilih']) !!}
		</div>
	</div>
</div> --}}
<div class="row">
    <div class="col-md-12 flex">
        <h4>Permission</h4>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="checkAll" id="checkAll">
            <label class="form-check-label" for="checkAll">
                Check All
            </label>
        </div>
    </div>
	<div class="col-lg-12">
		<hr>
	</div>
</div>
@foreach ($groupPermissions as $group)
    <div class="row">
        <div class="col-lg-12">
            <b>{{ $group->name }}</b>
        </div>
    </div>
    <div class="row">
        @foreach ($group->permissions as $permission)
            <div class="col-md-3">
                <div class="form-check">
                    <input class="form-check-input select-permission" type="checkbox" name="permission_id[]" value="{{ $permission->id }}" {{ (isset($role) && $role->hasPermission($permission->name)) ? 'checked' : '' }}
                        id="permission-{{ $permission->id }}">
                    <label class="form-check-label" for="permission-{{ $permission->id }}">
                        {{ $permission->name }}
                    </label>
                </div>
            </div>
        @endforeach
        <div class="col-lg-12">
            <hr>
        </div>
    </div>
@endforeach

@push('js')
    <script src="{{ asset('assets/libs/admin-resources/bootstrap-filestyle/bootstrap-filestyle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <script type="text/javascript">
        $('.role').select2({
            width: '100%',
            placeholder: 'pilih role',
        });

        $(document).ready(function() {
            $('.group-span-filestyle').find('label').removeClass('btn-secondary').addClass('btn-primary');

			$("#checkAll").on('click', function() {
				$(".select-permission").prop('checked', $(this).prop('checked'));
			});
        });
    </script>
@endpush