<form action="<?php echo e(route('super-admin.roles.store')); ?>" method="POST" role="form" id="formCreate">
    <?php echo csrf_field(); ?>
    <div class="row">
        <div class="col-md-3 mb-3">
            <label for="roleName" class="form-label fw-bold mb-2"><?php echo e(__('messages.role_name')); ?><span
                    class="text-danger">*</span></label>
            <input type="text" class="form-control" name="name" id="roleName"
                   placeholder="Enter Role" required/>
        </div>
        <div class="col-md-9 ps-4">
            <div class="row">
                <label class="form-label fw-bold mb-2"><?php echo e(__('messages.service_entry')); ?></label>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="inseminated_by" id="inseminated_by">
                        <label class="title-label-select" for="inseminated_by">Inseminated
                            By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="calving_by" id="calving_by">
                        <label class="title-label-select" for="calving_by">Calving By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="abortion_by" id="abortion_by">
                        <label class="title-label-select" for="abortion_by">Abortion By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="milking_by" id="milking_by">
                        <label class="title-label-select" for="milking_by">Milking By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="vaccinated_by" id="vaccinated_by">
                        <label class="title-label-select" for="vaccinated_by">Vaccinated By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="deworming_by" id="deworming_by">
                        <label class="title-label-select" for="deworming_by">Deworming By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="treatment_by" id="treatment_by">
                        <label class="title-label-select" for="treatment_by">Treatment By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="food_entry_by" id="food_entry_by">
                        <label class="title-label-select" for="food_entry_by">Food Entry By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="sold_by"
                               id="sold_by">
                        <label class="title-label-select" for="sold_by">Sold By</label>
                    </div>
                </div>
                <div class="row-20">
                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="user_by[]"
                               value="disposal_by" id="disposal_by">
                        <label class="title-label-select" for="disposal_by">Disposal By</label>
                    </div>
                </div>
            </div>
        </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="checkPermissionAll">
                <label class="title-label-select" for="checkPermissionAll">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(); ?>
            <div class="hidden-permission-div">
                <div class="row tree">
                    <div class="col-md-6 tree-leader">
                        <div class="form-check mt-4 mb-3 tree-item">
                            <input tabindex="5" 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); ?>-management" value="<?php echo e($group->name); ?>" onchange="selectChild(this)">
                            <label for="<?php echo e($i); ?>-management"
                                   class="title-label-select tree-header-text"><?php echo e(ucwords(str_replace('.', ' ', $group->name))); ?></label>
                        </div>
                    </div>
                    <?php
                        $permissions = App\Models\User::getpermissionsByGroupName($group->name);
                        $j = 1;
                    ?>
                    <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 tabindex="5" 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); ?>"
                                       value="<?php echo e($permission->name); ?>"
                                       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); ?>"
                                       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">
        <button type="button" class="btn  me-2" data-bs-dismiss="modal"
                style="background: #EAECF0;"><?php echo e(__('messages.close')); ?>

        </button>
        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('role.create')): ?>
            <button type="submit" class="btn btn-primary"><?php echo e(__('messages.save')); ?>

            </button>
        <?php endif; ?>
    </div>
</form>
<script type="text/javascript">
    $('#checkPermissionAll').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 trees = $('.tree');
    $.each(trees, 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/create.blade.php ENDPATH**/ ?>