StocksNew/Modules/User/resources/views/partials/role/action.blade.php

<div class="row gy-4">

  <div class="col-lg-4">
    {{ html()->label('Name')->class('form-label') }}
    {{ html()->text('name')->class('form-control')->placeholder('Enter Role Name')->required() }}
  </div>

  <div class="col-lg-4">
    {{ html()->label('Guard Name')->class('form-label') }}
    {{ html()->text('guard_name', 'web')->class('form-control')->isReadonly($readonly = true) }}
  </div>

  <div class="col-lg-2">
    <div class="form-check form-switch form-switch-lg mt-3">
      {{ html()->checkbox('all_permissions_check')->class('form-check-input')->id('all-check') }}
      {{ html()->label('Select All')->class('form-check-label')->for('all-check') }}
    </div>
    {{ html()->p()->text('Enable all Permissions for this role')->class('fs-6 text-muted mt-1') }}
  </div>

  <div class="col-lg-2">
    <x-form-buttons :editable=$editable label='Assign' />
  </div>

  @foreach ($permissionLists as $key => $permission)
    <div class="col-lg-4">
      {{-- <p class="justify-center text-soft-success"> --}}
      <div class="form-check form-switch form-switch-custom form-switch-success mb-3">
        <input class="form-check-input parent-switch" type="checkbox" role="switch" id="check_{{ $key }}">
        <label class="form-check-label ms-2" for="{check_{$key}}">{{ Str::ucfirst($key) }}</label>
      </div>
      {{-- {{ Str::ucfirst($key) }}
            </p> --}}
      <fieldset class="rounded-2 p-3">
        <legend class="fs-5">Permissions</legend>
        <div class="row">

          @foreach ($permission as $index => $item)
            <div class="col-lg-12">
              <div class="form-check form-check-success">
                {{ html()->checkbox('permissions[]')->id('permission_' . $index)->value($index)->class('form-check-input child-checkbox')->checked($editable && in_array($index, $permissionIDsArray)) }}
                {{ html()->label(Str::ucfirst($item))->for('permission_' . $index)->class('form-check-label ms-2') }}
              </div>
            </div>
          @endforeach

        </div>
      </fieldset>
    </div>
  @endforeach
</div>


@push('js')
  <script type="text/javascript">
    // $(document).ready(function() {

    //     // Cache selectors
    //     const childCheckboxes = $('.child-checkbox');
    //     const parentSwitches = $('.parent-switch');
    //     const allCheck = $('#all-check');

    //     // Initial selection (optional, can be removed if not needed)
    //     childCheckboxes.trigger('change');

    //     // Parent switch and child checkbox change handler (combined)
    //     $('.child-checkbox, .parent-switch').change(function() {
    //         const currentCol = $(this).closest('.col-lg-4');
    //         const currentSwitch = currentCol.find('.parent-switch');
    //         const currentChildren = currentCol.find(childCheckboxes);

    //         let allChecked = true;
    //         currentChildren.each(function() {
    //             if (!$(this).prop('checked')) {
    //                 allChecked = false;
    //                 return false;
    //             }
    //         });

    //         currentSwitch.prop('checked', allChecked);
    //         allCheck.prop('checked', childCheckboxes.prop(
    //         'checked')); // Check all checkbox state
    //     });

    //     // "all-check" change handler
    //     allCheck.change(function() {
    //         childCheckboxes.prop('checked', this.checked).trigger('change');
    //     });

    // });

    $(document).ready(function() {

      $('.child-checkbox').trigger('change');

      $('.parent-switch').change(function() {
        let childCheckboxes = $(this).closest('.col-lg-4').find('.child-checkbox');
        childCheckboxes.prop('checked', this.checked);
      });

      $('.child-checkbox').change(function() {
        let parentSwitch = $(this).closest('.col-lg-4').find('.parent-switch');
        let childCheckboxes = $(this).closest('.col-lg-4').find('.child-checkbox');
        let allChecked = true;
        childCheckboxes.each(function() {
          if (!$(this).prop('checked')) {
            allChecked = false;
            return false;
          }
        });
        parentSwitch.prop('checked', allChecked);
      });

      $('#all-check').change(function() {
        let childCheckboxes = $('.child-checkbox');
        childCheckboxes.prop('checked', this.checked);

        childCheckboxes.prop('checked', this.checked).trigger('change');
      });

      $('.child-checkbox, .parent-switch').change(function() {
        let allCheck = $('#all-check');
        let childCheckboxes = $('.child-checkbox');
        let allChecked = true;

        childCheckboxes.each((index, checkBox) => {
          if (!$(checkBox).prop('checked')) {
            allChecked = false;
            return false;
          }
        });

        allCheck.prop('checked', allChecked);
      });

    });
  </script>
@endpush