@extends('layout.app')


@section('content')


<div class="card">

    <div class="card-body">
        <form action="{{ route('permissionUpdate',$role->id) }}" method="POST">
            @method('PUT')
            @csrf

            
            <h2 class="page-header">Role Name :
              
                {{ $role->name }}</h2>

                {{-- {{dd($role)}} --}}
                <div class="">
                <table class="table table-border table-striped">
                  {{-- <tr>
                    
                    <th>ID</th>
                    <th>Permission Name</th>
                    <th></th>
                  </tr> --}}

                  <input type="hidden" name="name" value="{{ $role->name }}">
                  <input type="hidden" name="id" value="{{ $role->id }}">
                  <div class="row">

                  @if(!empty($display_grouped) && $permisssions_grouped)
                    @foreach($permisssions_grouped as $groupName => $permissions)
                    @php $groupSlug = \Illuminate\Support\Str::slug($groupName); @endphp
                    <div class="col-12 permission-group mt-3" data-group="{{ $groupSlug }}">
                      <div class="d-flex align-items-center border-bottom pb-2 mb-2">
                        <div class="custom-control custom-checkbox mr-2">
                          <input type="checkbox" class="custom-control-input group-select-all" id="group-{{ $groupSlug }}" data-group="{{ $groupSlug }}" aria-label="Select all {{ $groupName }}">
                          <label class="custom-control-label font-weight-bold" for="group-{{ $groupSlug }}">{{ $groupName }}</label>
                        </div>
                        <small class="text-muted">(Select all)</small>
                      </div>
                      <div class="row">
                    @foreach($permissions as $p)
                    <div class="col-md-3">
                      <div class="form-group" style="padding-top:15px;display:inline-block">
                        <div class="custom-control custom-switch">
                          <input class="pcheck custom-control-input" id="permission{{$p->id}}" name="permissions[]" type="checkbox" value="{{ $p->id }}" data-group="{{ $groupSlug }}"
                            @if($role->hasPermissionTo($p->id)) checked @endif>
                          <label class="custom-control-label" for="permission{{$p->id}}"></label>
                        </div>
                      </div>
                      <span style="margin-left:90px">({{ $p->id }}) {{ $p->name }}</span>
                    </div>
                    @endforeach
                      </div>
                    </div>
                    @endforeach
                  @else
                    @foreach($permisssions ?? [] as $p)
                    <div class="col-md-3">
                      <div class="form-group" style="padding-top:15px;display:inline-block">
                        <div class="custom-control custom-switch">
                          <input class="pcheck custom-control-input" id="permission{{$p->id}}" name="permissions[]" type="checkbox" value="{{ $p->id }}"
                            @if($role->hasPermissionTo($p->id)) checked @endif>
                          <label class="custom-control-label" for="permission{{$p->id}}"></label>
                        </div>
                      </div>
                      <span style="margin-left:90px">({{ $p->id }}) {{ $p->name }}</span>
                    </div>
                    @endforeach
                  @endif
                </div>

                </table>
                </div>

           



            <div class="form-group">
                <a href="{{route('roles.index')}}" class="btn btn-default"><i class="fa fa-arrow-left"></i> Back</a>
                <input type="submit" class="btn btn-primary float-right"
                value="Assign Permission">
            </div>


        </form>
    </div>
</div>

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Group "select all" checkbox: toggle all permissions in the same group
    document.querySelectorAll('.group-select-all').forEach(function(groupCheckbox) {
        var groupId = groupCheckbox.getAttribute('data-group');
        var container = document.querySelector('.permission-group[data-group="' + groupId + '"]');
        if (!container) return;

        groupCheckbox.addEventListener('change', function() {
            var checked = this.checked;
            container.querySelectorAll('.pcheck[data-group="' + groupId + '"]').forEach(function(cb) {
                cb.checked = checked;
            });
        });

        // Update group checkbox when individual permissions change
        container.querySelectorAll('.pcheck[data-group="' + groupId + '"]').forEach(function(permCheckbox) {
            permCheckbox.addEventListener('change', function() {
                var all = container.querySelectorAll('.pcheck[data-group="' + groupId + '"]');
                var checked = container.querySelectorAll('.pcheck[data-group="' + groupId + '"]:checked');
                groupCheckbox.checked = checked.length === all.length;
                groupCheckbox.indeterminate = checked.length > 0 && checked.length < all.length;
            });
        });
    });

    // Set initial state of group checkboxes (checked / unchecked / indeterminate)
    document.querySelectorAll('.permission-group').forEach(function(container) {
        var groupId = container.getAttribute('data-group');
        var groupCheckbox = document.getElementById('group-' + groupId);
        if (!groupCheckbox) return;
        var all = container.querySelectorAll('.pcheck[data-group="' + groupId + '"]');
        var checked = container.querySelectorAll('.pcheck[data-group="' + groupId + '"]:checked');
        groupCheckbox.checked = checked.length === all.length;
        groupCheckbox.indeterminate = checked.length > 0 && checked.length < all.length;
    });
});
</script>
@endpush

@endsection