@php
    $groups = $permissionData['groups'] ?? [];
    $suffixOrder = $permissionData['suffixOrder'] ?? [];
    $orphans = $permissionData['orphans'] ?? collect();
    $rolePermissions = $rolePermissions ?? [];
    $readonly = $readonly ?? false;
@endphp

<div class="perm-matrix-wrap mb-3" data-perm-matrix>
    @unless($readonly)
        <div class="perm-matrix-toolbar no-print">
            <div class="flex-grow-1" style="min-width: 220px; max-width: 360px;">
                <input type="search" class="form-control form-control-sm js-perm-search" placeholder="{{ __('Search modules...') }}">
            </div>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-secondary js-perm-select-all">{{ __('Select all') }}</button>
                <button type="button" class="btn btn-outline-secondary js-perm-clear-all">{{ __('Clear all') }}</button>
            </div>
        </div>
    @endunless

    <div class="table-responsive">
        <table class="table table-sm table-hover mb-0 perm-matrix-table">
            <thead class="thead-light">
            <tr>
                <th style="min-width: 180px;">{{ __('Module') }}</th>
                @foreach($suffixOrder as $suffix)
                    <th class="text-center small" style="min-width: 72px;">
                        @if($suffix === 'list') {{ __('Read') }}
                        @elseif($suffix === 'Approve') {{ __('Approve') }}
                        @else {{ __(ucfirst($suffix)) }}
                        @endif
                    </th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @forelse($groups as $module => $actions)
                @php
                    $moduleDisplay = \App\Support\ModulePermissions::moduleDisplay($module);
                @endphp
                <tr data-module-row data-module-name="{{ $moduleDisplay['search'] }}">
                    <td class="perm-module-name align-middle">{{ __($moduleDisplay['label']) }}</td>
                    @foreach($suffixOrder as $suffix)
                        <td class="perm-check-cell align-middle">
                            @isset($actions[$suffix])
                                @if($readonly)
                                    @if(isset($rolePermissions[$actions[$suffix]->id]))
                                        <span class="perm-readonly-yes">✓</span>
                                    @else
                                        <span class="perm-readonly-no">—</span>
                                    @endif
                                @else
                                    <label class="mb-0 d-inline-flex align-items-center justify-content-center" style="min-height: 1.5rem;">
                                        <input type="checkbox" name="permission[]" value="{{ $actions[$suffix]->id }}"
                                               class="permission-checkbox"
                                            {{ isset($rolePermissions[$actions[$suffix]->id]) ? 'checked' : '' }}>
                                    </label>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endisset
                        </td>
                    @endforeach
                </tr>
            @empty
                <tr>
                    <td colspan="{{ count($suffixOrder) + 1 }}" class="text-center text-muted py-4">{{ __('No permissions found.') }}</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($orphans->isNotEmpty())
    <div class="mb-2 d-flex flex-wrap align-items-center justify-content-between">
        <p class="mb-0 font-weight-bold">{{ __('Other permissions') }}</p>
        @unless($readonly)
            <span class="small text-muted">{{ __('Additional permissions outside the standard module matrix') }}</span>
        @endunless
    </div>
    <div class="d-flex flex-wrap border rounded p-2 bg-light" style="gap: 0.5rem;" data-orphan-perms>
        @foreach($orphans as $p)
            @if($readonly)
                @if(isset($rolePermissions[$p->id]))
                    <span class="role-badge">{{ $p->name }}</span>
                @endif
            @else
                <label class="mb-0 small border rounded px-2 py-1 bg-white">
                    <input type="checkbox" name="permission[]" value="{{ $p->id }}" class="permission-checkbox"
                        {{ isset($rolePermissions[$p->id]) ? 'checked' : '' }}>
                    {{ $p->name }}
                </label>
            @endif
        @endforeach
    </div>
@endif

@unless($readonly)
    @push('script')
        <script>
            (function () {
                document.querySelectorAll('[data-perm-matrix]').forEach(function (wrap) {
                    var search = wrap.querySelector('.js-perm-search');
                    var rows = wrap.querySelectorAll('[data-module-row]');
                    if (search) {
                        search.addEventListener('input', function () {
                            var q = this.value.trim().toLowerCase();
                            rows.forEach(function (row) {
                                var name = row.getAttribute('data-module-name') || '';
                                row.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';
                            });
                        });
                    }
                    var selectAll = wrap.querySelector('.js-perm-select-all');
                    var clearAll = wrap.querySelector('.js-perm-clear-all');
                    if (selectAll) {
                        selectAll.addEventListener('click', function () {
                            document.querySelectorAll('.permission-checkbox').forEach(function (cb) { cb.checked = true; });
                        });
                    }
                    if (clearAll) {
                        clearAll.addEventListener('click', function () {
                            document.querySelectorAll('.permission-checkbox').forEach(function (cb) { cb.checked = false; });
                        });
                    }
                });
            })();
        </script>
    @endpush
@endunless