<form action="<?php echo e(route('super-admin.roles.update',$role->id)); ?>" method="POST" role="form"
      id="formEdit">
    <?php echo csrf_field(); ?>
    <div class="row">
        <div class="col-md-3 mb-3">
            <label for="roleNameEdit" class="form-label fw-bold mb-2"><?php echo e(__('messages.role_name')); ?></label>
            <input type="text" class="form-control" name="name" value="<?php echo e($role->name); ?>"
                   id="roleNameEdit" placeholder="<?php echo e(__('messages.role_name')); ?>"/>
        </div>
        <hr class="form-separator">
        <div class="col-md-3">
            <label class="form-label fw-bold mb-2"><?php echo e(__('messages.permissions')); ?></label>
            <div class="form-check">
                <input type="checkbox" class="form-check-input"
                       id="checkPermissionAllEdit" <?php echo e(App\Models\User::roleHasPermissions($role, $all_permissions) ? 'checked' : ''); ?>>
                <label class="title-label-select" for="checkPermissionAllEdit">All</label>
            </div>
        </div>
        <hr class="form-separator">
        <?php $i =1; ?>
        <div class="col-md-4 custom-design-column first-column"></div>
        <div class="col-md-4 custom-design-column second-column"></div>
        <div class="col-md-4 custom-design-column third-column"></div>
        <?php $__currentLoopData = $permission_groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php
                $permissions = App\Models\User::getpermissionsByGroupName($group->name);
                $j = 1;
            ?>
            <div class="hidden-permission-div">
                <div class="row tree tree-edit">
                    <div class="col-md-6 tree-leader">
                        <div class="form-check mt-4 mb-3 tree-item">
                            <input type="checkbox"
                                   class="form-check-input permissions permission-header-input <?php echo e(count(explode(' ',$group->name)) > 1 ? explode(' ',$group->name)[0].explode(' ',$group->name)[1] : explode(' ',$group->name)[0]); ?>-header-input"
                                   id="<?php echo e($i); ?>ManagementEdit" value="<?php echo e($group->name); ?>"
                                   onchange="selectChild(this)" <?php echo e(App\Models\User::roleHasPermissions($role, $permissions) ? 'checked' : ''); ?>>
                            <label for="<?php echo e($i); ?>ManagementEdit"
                                   class="title-label-select tree-header-text"><?php echo e($group->name); ?></label>
                        </div>
                    </div>
                    <div class="col-md-6 tree-member role-<?php echo e($i); ?>-management-checkbox">
                        <?php $__currentLoopData = $permissions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $permission): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="form-check mt-4 mb-3 tree-item">
                                <input type="checkbox"
                                       class="form-check-input permissions permission-member-input <?php echo e(strrchr($permission->name,'delete') === 'delete' ? 'form-check-danger' : ""); ?> <?php echo e(count(explode(' ',$permission->group_name)) > 1 ? explode(' ',$permission->group_name)[0].explode(' ',$permission->group_name)[1] : explode(' ',$permission->group_name)[0]); ?>-member-input"
                                       name="permissions[]" id="checkPermission<?php echo e($permission->id); ?>Edit"
                                       value="<?php echo e($permission->name); ?>"
                                       <?php echo e($role->hasPermissionTo($permission->name) ? 'checked' : ''); ?>  head="<?php echo e(count(explode(' ',$permission->group_name)) > 1 ? explode(' ',$permission->group_name)[0].explode(' ',$permission->group_name)[1] : explode(' ',$permission->group_name)[0]); ?>"
                                       onchange="selectHead(this)">
                                <label for="checkPermission<?php echo e($permission->id); ?>Edit"
                                       class="title-label-select <?php echo e(strrchr($permission->name,'delete') === 'delete' ? 'text-danger' : ""); ?>"><?php echo e(ucwords(str_replace('.', ' ', $permission->name))); ?> </label>
                            </div>
                            <?php $j++; ?>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                    <?php $i++; ?>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
    <div class="mt-3 d-flex justify-content-end">
        <a type="button" class="btn  me-2" data-bs-dismiss="modal"
           style="background: #EAECF0;"><?php echo e(__('messages.close')); ?></a>
        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('role.create')): ?>
            <button type="submit" class="btn btn-primary">
                <?php echo e(__('messages.update')); ?>

            </button>
        <?php endif; ?>
    </div>
</form>

<script type="text/javascript">

    $('#checkPermissionAllEdit').change(function () {
        if ($(this).is(':checked')) {
            $('input[type=checkbox].permissions ').prop('checked', true);
        } else {
            $('input[type=checkbox].permissions ').prop('checked', false);
        }
    });

    function selectChild(thisElement) {
        let value = $(thisElement).val().split(" "),
            text = value.length > 1 ? value[0] + value[1] : value[0];
        if ($(thisElement).is(':checked')) {
            $('input[type=checkbox].' + text + '-member-input').prop('checked', true);
        } else {
            $('input[type=checkbox].' + text + '-member-input').prop('checked', false);
        }
    }

    function selectHead(thisElement) {
        let text = $(thisElement).attr('head');
        if ($(thisElement).is(':checked')) {
            $('input[type=checkbox].' + text + '-header-input').prop('checked', true);
        } else {
            if ($('.' + text + '-member-input:checked').length === 0) {
                $('input[type=checkbox].' + text + '-header-input').prop('checked', false);
            }
        }
    }

    <?php $column = count($permission_groups); ?>
    var divs = $('.hidden-permission-div'),
        columns = <?php echo e($column); ?>,
        rows = Math.floor(columns / 3);
    $.each(divs, function (index, element) {
        if (index <= (rows + 1)) {
            $('.first-column').append($(element).html());
        }
        if ((rows + 1) < index && index <= (rows * 2 + 1)) {
            $('.second-column').append($(element).html());
        }
        if ((rows * 2 + 1) < index && index <= (rows * 3)) {
            $('.third-column').append($(element).html());
        }
    })
    divs.remove();

    var treesEdit = $('.tree-edit');
    $.each(treesEdit, function (index, tree) {
        var member = $(tree).children('.tree-member'),
            items = $(member).children('.tree-item'),
            itemFirstOffset = member.children('.tree-item:nth-child(1)').offset(),
            itemLastOffset = member.children('.tree-item:nth-last-child(1)').offset(),
            before = $(member).prepend('<span class="tree-member-before"></span>'),
            height = itemLastOffset.top - itemFirstOffset.top,
            leader = $(tree).children('.tree-leader'),
            leaderItemWidth = $(leader).children('.tree-item').width(),
            leaderBefore = $(leader).children('.tree-item').append('<span class="tree-leader-before before-y"></span> <span class="tree-leader-before before-x"></span>'),
            headerTextWidth = $(leader).children('.tree-item').children('.tree-header-text').width();
        $(before).children('.tree-member-before').css({
            'height': height + 'px',
        })
        $(leaderBefore).children('.before-y').css({
            'height': (height / 2) - 11 + 'px',
            'left': (headerTextWidth / 2) + 20 + 'px',
        })
        let width, left;
        if ($(items).length > 1) {
            width = leaderItemWidth - ((headerTextWidth / 2) + 2);
            left = (headerTextWidth / 2) + 20;
        } else {
            width = leaderItemWidth - ((headerTextWidth) + 10);
            left = headerTextWidth + 28;
        }
        $(leaderBefore).children('.before-x').css({
            'top': (height / 2) + 11 + 'px',
            'width': width + 'px',
            'left': left + 'px',
        })
    })

</script>

<?php /**PATH D:\laragon\www\hr_and_att\resources\views/backend/user/role/edit.blade.php ENDPATH**/ ?>