@props([
    'action',
    'method' => 'POST',
    'role' => null,
    'matrixGroups' => [],
    'assignedIds' => [],
    'submitLabel',
])

<form method="POST" action="{{ $action }}" data-permission-matrix novalidate>
    @csrf
    @if (strtoupper($method) !== 'POST')
        @method($method)
    @endif

    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <x-ui.form.input
                        name="name"
                        :label="__('rbac.roles.name')"
                        :value="old('name', $role?->name)"
                        required
                    />
                </div>
                <div class="col-md-6 d-flex align-items-end pb-2">
                    <x-ui.form.checkbox
                        name="is_active"
                        :label="__('rbac.roles.active')"
                        :checked="old('is_active', $role?->is_active ?? true)"
                        :disabled="$role?->slug === 'owner'"
                    />
                </div>
                <div class="col-12">
                    <label for="description" class="form-label">{{ __('rbac.roles.description') }}</label>
                    <textarea id="description" name="description" rows="3"
                        class="form-control @error('description') is-invalid @enderror">{{ old('description', $role?->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white d-flex flex-wrap align-items-center justify-content-between gap-2">
            <strong>{{ __('rbac.roles.permissions') }}</strong>
            <span class="text-muted small" data-perm-total-count></span>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-3">
                <div class="col-md-5">
                    <label for="permission-search" class="form-label">{{ __('permissions.matrix.search') }}</label>
                    <input id="permission-search" type="search" class="form-control"
                        placeholder="{{ __('permissions.matrix.search_placeholder') }}" data-perm-search>
                </div>
                <div class="col-md-7 d-flex flex-wrap gap-2 justify-content-md-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-perm-expand-all>
                        {{ __('permissions.matrix.expand_all') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-perm-collapse-all>
                        {{ __('permissions.matrix.collapse_all') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary" data-perm-select-visible>
                        {{ __('permissions.matrix.select_all_visible') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-perm-clear-visible>
                        {{ __('permissions.matrix.clear_all') }}
                    </button>
                </div>
            </div>

            <div class="d-flex flex-column gap-2">
                @foreach ($matrixGroups as $group)
                    @php
                        $groupDomKey = preg_replace('/[^a-z0-9_-]/i', '-', $group['key']);
                        $groupDomId = 'perm-group-'.$groupDomKey;
                    @endphp
                    <div class="border rounded" data-perm-group>
                        <div class="d-flex align-items-center justify-content-between gap-2 px-3 py-2 bg-light">
                            <button class="btn btn-link text-decoration-none p-0 text-start" type="button"
                                data-bs-toggle="collapse" data-bs-target="#{{ $groupDomId }}"
                                aria-expanded="false">
                                <span class="fw-semibold" data-perm-group-label>{{ $group['label'] }}</span>
                                <span class="badge bg-secondary-subtle text-secondary-emphasis ms-1"
                                    data-perm-group-count></span>
                            </button>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-link btn-sm p-0" data-perm-group-select>
                                    {{ __('permissions.matrix.select_module') }}
                                </button>
                                <button type="button" class="btn btn-link btn-sm p-0 text-muted" data-perm-group-clear>
                                    {{ __('permissions.matrix.clear_all') }}
                                </button>
                            </div>
                        </div>
                        <div class="collapse" id="{{ $groupDomId }}" data-perm-collapse>
                            <div class="p-3 border-top row g-2">
                                @foreach ($group['permissions'] as $perm)
                                    @php
                                        $labelKey = 'permissions.abilities.'.$perm->slug;
                                        $label = __($labelKey);
                                        $displayLabel = $label !== $labelKey ? $label : $perm->name;
                                    @endphp
                                    <div class="col-md-6" data-perm-row
                                        data-search="{{ \Illuminate\Support\Str::lower($displayLabel.' '.$perm->slug) }}">
                                        <label class="d-flex align-items-start gap-2 small mb-0">
                                            <input type="checkbox" name="permission_ids[]" value="{{ $perm->id }}"
                                                class="form-check-input mt-1 flex-shrink-0" data-perm-checkbox
                                                @checked(in_array($perm->id, old('permission_ids', $assignedIds), true))>
                                            <span>{{ $displayLabel }}<code class="text-muted d-block">{{ $perm->slug }}</code></span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @error('permission_ids')
                <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-4">
        <x-ui.buttons.secondary :href="route('settings.roles.index')">{{ __('common.cancel') }}</x-ui.buttons.secondary>
        <x-ui.buttons.primary type="submit" icon="fe fe-save">{{ $submitLabel }}</x-ui.buttons.primary>
    </div>
</form>

@vite(['resources/js/modules/rbac/main.js'])
