@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
{{-- <div class="row" style="justify-content: center;">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>@lang('admin.name')</strong>
            {!! Form::text('name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
        </div>
    </div>
   
    <div class="col-xs-12 col-sm-12 col-md-12" style="margin-top:30px">
        <div class="form-group">
            <strong>@lang('admin.permissions')</strong>
            <br />
            @if (isset($package))
                <select name="permission[]" class="js-example-basic-multiple" multiple="multiple">
                    @foreach ($permissions as $value)
                        <option value="{{ $value->name }}"
                            {{ in_array($value->id, $packagePermissions) ? 'selected' : '' }}>{{ $value->name }}</option>
                    @endforeach
                </select>
            @else
                <select name="permission[]" class="js-example-basic-multiple" multiple="multiple">
                    @foreach ($permissions as $value)
                        <option value="{{ $value->name }}">{{ $value->name }}</option>
                    @endforeach
                </select>
            @endif
        </div>
    </div>
</div> --}}

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <strong>@lang('admin.name')</strong>
            {!! Form::text('name', null, ['placeholder' => 'Name', 'class' => 'form-control']) !!}
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group mt-5">
            <strong>@lang('admin.permissions')</strong>
            <br />
            <div class="row mt-5" style="justify-content: space-evenly;">
                <div class="form-group col-sm-3">
                    {!! Form::button('Select All', [
                        'class' => 'btn btn-info',
                        'onClick' => 'select_all("permission", "1")',
                    ]) !!}
                </div>

                <div class="form-group col-sm-3">
                    {!! Form::button('Clear All', [
                        'class' => 'btn btn-danger',
                        'onClick' => 'select_all("permission", "0")',
                    ]) !!}
                </div>
            </div>
            <br />
            @php
                $groupedPermissions = [];
                foreach ($permissions as $permission) {
                    $name = strtok($permission->name, '-');
                    $groupedPermissions[$name][] = $permission;
                }
            @endphp
            <div class="row" style="margin-top: 40px;">
                @foreach ($groupedPermissions as $name => $permissionGroup)
                    <div class="form-group col-md-4 row mt-3">
                        <h4>{{ ucfirst($name) }}</h4>
                        @foreach ($permissionGroup as $permission)
                            <label>{{ Form::checkbox('permission[]', $permission->name, isset($packagePermissions) && in_array($permission->id, $packagePermissions) ? true : false, ['class' => 'name']) }}
                                {{ ucfirst($permission->name) }}</label>
                            <br />
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
    var formblock;
    var forminputs;

    function prepare() {
        formblock = document.getElementById('form_id');
        forminputs = formblock.getElementsByTagName('input');
    }

    function select_all(name, value) {
        for (i = 0; i < forminputs.length; i++) {
            // regex here to check name attribute
            var regex = new RegExp(name, "i");
            if (regex.test(forminputs[i].getAttribute('name'))) {
                if (value == '1') {
                    forminputs[i].checked = true;
                } else {
                    forminputs[i].checked = false;
                }
            }
        }
    }

    if (window.addEventListener) {
        window.addEventListener("load", prepare, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", prepare)
    } else if (document.getElementById) {
        window.onload = prepare;
    }
</script>