@extends('layouts.panel')

@section('title', $title)

@push('css')
@endpush

@section('breadcrumb')
<x-admin.breadcrumb />
@endsection

@section('content')
<x-admin.panel-card>
    @slot('title')
    <h5>{{$title}}</h5>
    @endslot
    <form action="{{ route('roles.permission-assign', $role->id) }}" method="post"> @csrf
    <div class="row">
        <div class="col-md-8 mt-3">
            <div class="row">
                @foreach ($permissions as $group)
                <div class="col-md-12">
                    <label for="{{ $group['group'] }}" class="form-check-label">
                        <input class="form-check-input permission_group" type="checkbox" id="{{ $group['group'] }}" @if($role->name == ROLE_SUPERADMIN) checked disabled @endif>
                        <strong class="text-secondary">{{ __("Manage") }} {{ trans(Str::of($group['name'])->title()->__toString()) }}</strong>
                    </label>
                    <div class="text-dark mb-4">
                        <div class="row ms-3 mb-2">
                        @foreach ($group['items'] as $permission)
                            <div class="form-group col-md-6 col-lg-4 mt-3">
                                <label for="{{ $permission->name }}" class="form-check-label">
                                    <input class="form-check-input permission_name" type="checkbox" @if($role->name == ROLE_SUPERADMIN) checked disabled @endif
                                        name="{{ $permission->name }}" id="{{ $permission->name }}"
                                        data-group="{{ $permission->group }}" {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}/>
                                    {{ $permission->permission_name }}
                                </label>
                            </div>
                        @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <hr>
    @if($role->name == ROLE_SUPERADMIN)
    <a class="btn btn-primary" href="{{route('roles.index')}}"> @lang('Back') </a>
    @else
    <button class="btn btn-primary" type="submit"> @lang('Save') </button>
    @endif
    </form>
</x-admin.panel-card>
@endsection

@push('js')
<script>
    $(function(jq) {
        jq('.permission_group').on('click', function() {
            const groupName = $(this).attr('id');
            if($(this).prop('checked')){
                jq(`[data-group="${groupName}"]`).prop('checked', true);
                return;
            }
            jq(`[data-group="${groupName}"]`).prop('checked', false);
        });
        jq('.permission_group').each(function(index, element){
            const groupName = $(element).attr('id');
            const checkedLength = jq(`[data-group="${groupName}"]:checked`).length;
            const uncheckedLength = jq(`[data-group="${groupName}"]`).length;
            console.log({checkedLength, uncheckedLength});
            if (checkedLength == uncheckedLength) {
                $(element).prop('checked', true);
            }
        });
    });
</script>
@endpush