@extends('admin.layouts.app')

@section('title', __('admin.menu.roles'))
@section('page-title', $record->exists ? __('admin.actions.edit').' — '.$record->name : __('admin.actions.create'))

@section('content')
    @php $assigned = old('permissions', $record->exists ? $record->permissions->pluck('name')->all() : []); @endphp

    <x-admin.form :record="$record" :route="$route" :multipart="false">
        <x-admin.input name="name" :label="__('admin.fields.name')" :value="$record->name" required col="col-md-6" />

        <div class="col-12">
            <label class="form-label">{{ __('admin.fields.permissions') }}</label>

            <div class="row g-3">
                @foreach ($permissions as $group => $items)
                    <div class="col-md-4">
                        <div class="card h-100">
                            <div class="card-header d-flex justify-content-between align-items-center py-2">
                                <span class="small text-uppercase">{{ $group }}</span>
                                <div class="form-check form-check-inline m-0">
                                    <input class="form-check-input group-toggle" type="checkbox" data-group="{{ $group }}">
                                </div>
                            </div>
                            <div class="card-body py-2">
                                @foreach ($items as $permission)
                                    <div class="form-check">
                                        <input class="form-check-input perm-{{ $group }}" type="checkbox"
                                               name="permissions[]" value="{{ $permission->name }}"
                                               id="perm-{{ $permission->id }}"
                                               @checked(in_array($permission->name, $assigned, true))>
                                        <label class="form-check-label small" for="perm-{{ $permission->id }}">
                                            {{ $permission->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </x-admin.form>
@endsection

@push('scripts')
    <script>
        $('.group-toggle').on('change', function () {
            $('.perm-' + $(this).data('group')).prop('checked', this.checked);
        });
    </script>
@endpush