{{--
    Shared form partial for role create/edit.
    Expects: $role (null|Role), $groupedPermissions (array), $rolePermissions (array of names),
             $users (Collection of User), $assignedUsers (array of user ids),
             $formAction (string), $formMethod ('POST'|'PUT').
--}}
<div class="card">
    <div class="section-head">
        <h2>{{ $role ? 'Edit Role' : 'Create Role' }}</h2>
        <a href="{{ route('access.roles.index') }}" class="btn">Cancel</a>
    </div>
    <div class="card-pad">
        <form method="POST" action="{{ $formAction }}">
            @csrf
            @if($formMethod === 'PUT')
                @method('PUT')
            @endif

            @php
                $oldUsers = collect(old('users', $assignedUsers))->map(fn ($id) => (int) $id)->all();
            @endphp

            <div class="mb-4">
                <div class="grid grid-2" style="gap:16px;max-width:736px">
                    <div>
                        @if($role)
                            <label class="label">Role</label>
                            <div class="field" style="max-width:360px;background:var(--bg);display:flex;align-items:center">
                                {{ old('name', $role->name) }}
                            </div>
                            <input type="hidden" name="name" value="{{ old('name', $role->name) }}">
                        @else
                            <label class="label" for="role_name">Role</label>
                            <input
                                id="role_name"
                                class="field"
                                type="text"
                                name="name"
                                value="{{ old('name') }}"
                                required
                                maxlength="125"
                                style="max-width:360px"
                                placeholder="e.g. Accountant"
                            >
                        @endif
                    </div>

                    <div>
                        <label class="label" for="role_users">Assign to Users</label>
                        <select
                            id="role_users"
                            name="users[]"
                            class="field"
                            style="max-width:360px"
                        >
                            <option value="">Select user</option>
                            @foreach($users as $user)
                                <option value="{{ $user->id }}" {{ in_array((int) $user->id, $oldUsers, true) ? 'selected' : '' }}>
                                    {{ $user->name }} - {{ $user->email }}
                                </option>
                            @endforeach
                        </select>
                        @if($users->isEmpty())
                            <p class="muted text-xs" style="margin-top:6px">No users available to assign.</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Permissions grouped by module --}}
            @if($role?->name !== 'Super Admin')
                <div class="mb-4">
                    <label class="label">Permissions</label>
                    <p class="muted text-xs mb-3">Select the permissions this role grants. Group-select all permissions in a module using the module header checkbox.</p>

                    <div class="grid grid-3" style="gap:16px">
                        @foreach($groupedPermissions as $module => $group)
                            @php
                                $moduleLabel = $group['label'];
                                $permissions = $group['permissions'];
                            @endphp
                            <div class="card card-pad" style="background:var(--bg)">
                                <label class="flex items-center gap-2 mb-2" style="cursor:pointer;font-weight:700;font-size:13px">
                                    <input
                                        type="checkbox"
                                        class="module-toggle"
                                        data-module="{{ \Illuminate\Support\Str::slug($module) }}"
                                        {{ collect($permissions)->pluck('name')->every(fn($p) => in_array($p, $rolePermissions)) ? 'checked' : '' }}
                                    >
                                    {{ $moduleLabel }}
                                </label>
                                <div class="space-y-1">
                                    @foreach($permissions as $permission)
                                        <label class="flex items-center gap-2" style="cursor:pointer;font-size:13px">
                                            <input
                                                type="checkbox"
                                                name="permissions[]"
                                                value="{{ $permission->name }}"
                                                class="perm-check perm-module-{{ \Illuminate\Support\Str::slug($module) }}"
                                                {{ in_array($permission->name, $rolePermissions) ? 'checked' : '' }}
                                            >
                                            {{ $permission->name }}
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <div class="mb-4">
                    <div class="status">
                        The <strong>Super Admin</strong> role bypasses all permission checks via the application gate. No explicit permissions need to be assigned.
                    </div>
                </div>
            @endif

            <button type="submit" class="btn btn-primary">
                {{ $role ? 'Update Role' : 'Create Role' }}
            </button>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Module-level "select all" toggle
    document.querySelectorAll('.module-toggle').forEach(function(toggle) {
        toggle.addEventListener('change', function() {
            var module = this.dataset.module;
            document.querySelectorAll('.perm-module-' + module).forEach(function(cb) {
                cb.checked = toggle.checked;
            });
        });
    });

    // Update module checkbox when individual perms change
    document.querySelectorAll('.perm-check').forEach(function(cb) {
        cb.addEventListener('change', function() {
            var classes = Array.from(this.classList);
            var moduleClass = classes.find(function(c) { return c.startsWith('perm-module-'); });
            if (!moduleClass) return;
            var module = moduleClass.replace('perm-module-', '');
            var all = document.querySelectorAll('.perm-module-' + module);
            var allChecked = Array.from(all).every(function(c) { return c.checked; });
            var toggle = document.querySelector('.module-toggle[data-module="' + module + '"]');
            if (toggle) toggle.checked = allChecked;
        });
    });
</script>
@endpush