@php
    $fieldPrefix = $fieldPrefix ?? 'admin_role_';
    $rolePermissions = collect(old('permissions', $adminRole->permissions ?? []))->filter(fn ($value) => filled($value))->values()->all();
@endphp

@once
    @push('head')
        <style>
            .admin-role-permissions-shell {
                border: 1px solid rgba(148, 163, 184, 0.18);
                border-radius: 1rem;
                background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.94));
            }

            .admin-role-permissions-header {
                padding: 1rem 1rem 0.75rem;
                border-bottom: 1px solid rgba(148, 163, 184, 0.14);
            }

            .admin-role-permissions-body {
                padding: 1rem;
                max-height: 30rem;
                overflow-y: auto;
            }

            .admin-role-group {
                border: 1px solid rgba(148, 163, 184, 0.18);
                border-radius: 0.9rem;
                background: rgba(255, 255, 255, 0.88);
                overflow: hidden;
            }

            .admin-role-group-toggle {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                padding: 0.9rem 1rem;
                border: 0;
                background: transparent;
                color: #0f172a;
                font-size: 0.84rem;
                font-weight: 700;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }

            .admin-role-group-toggle i {
                transition: transform 0.2s ease;
            }

            .admin-role-group-toggle[aria-expanded="true"] i {
                transform: rotate(180deg);
            }

            .admin-role-group-panel {
                padding: 0 1rem 1rem;
            }

            .admin-role-permission-item {
                border: 1px solid rgba(148, 163, 184, 0.18);
                border-radius: 0.85rem;
                padding: 0.9rem;
                display: flex;
                gap: 0.75rem;
                align-items: flex-start;
                height: 100%;
                background: rgba(255, 255, 255, 0.95);
            }

            .admin-role-permission-item .form-check-input {
                margin-top: 0.2rem;
            }

            html[data-theme="dark"] .admin-role-permissions-shell {
                background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.94));
                border-color: rgba(148, 163, 184, 0.14);
            }

            html[data-theme="dark"] .admin-role-permissions-header {
                border-bottom-color: rgba(148, 163, 184, 0.12);
            }

            html[data-theme="dark"] .admin-role-group {
                background: rgba(30, 41, 59, 0.78);
                border-color: rgba(148, 163, 184, 0.14);
            }

            html[data-theme="dark"] .admin-role-group-toggle {
                color: #e2e8f0;
            }

            html[data-theme="dark"] .admin-role-permission-item {
                background: rgba(15, 23, 42, 0.78);
                border-color: rgba(148, 163, 184, 0.14);
            }

            @media (max-width: 991.98px) {
                .admin-role-permissions-body {
                    max-height: 24rem;
                }
            }

            @media (max-width: 767.98px) {
                .admin-role-permissions-body {
                    max-height: 20rem;
                    padding: 0.85rem;
                }

                .admin-role-group-toggle {
                    padding: 0.8rem 0.9rem;
                    font-size: 0.78rem;
                }

                .admin-role-group-panel {
                    padding: 0 0.9rem 0.9rem;
                }
            }
        </style>
    @endpush
@endonce

<div class="row g-3">
    <div class="col-md-6">
        <label class="form-label" for="{{ $fieldPrefix }}name">Role Name</label>
        <input id="{{ $fieldPrefix }}name" name="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $adminRole->name) }}" required>
        @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label" for="{{ $fieldPrefix }}is_active">Status</label>
        <select id="{{ $fieldPrefix }}is_active" name="is_active" class="form-select @error('is_active') is-invalid @enderror" required>
            <option value="1" @selected((string) old('is_active', (int) $adminRole->is_active) === '1')>Active</option>
            <option value="0" @selected((string) old('is_active', (int) $adminRole->is_active) === '0')>Inactive</option>
        </select>
        @error('is_active')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12">
        <label class="form-label" for="{{ $fieldPrefix }}description">Description</label>
        <input id="{{ $fieldPrefix }}description" name="description" type="text" class="form-control @error('description') is-invalid @enderror" value="{{ old('description', $adminRole->description) }}" placeholder="Optional short note about this role">
        @error('description')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12">
        <div class="admin-role-permissions-shell">
            <div class="admin-role-permissions-header">
                <div class="fw-semibold mb-1">Role Permissions</div>
                <div class="text-muted small">These permissions will be inherited by every sub admin assigned to this role.</div>
            </div>

            <div class="admin-role-permissions-body">
                <div class="d-grid gap-3">
                    @foreach ($permissionGroups as $group)
                        @php($collapseId = $fieldPrefix . 'rolePermissionGroup_' . $loop->index)
                        <div class="admin-role-group">
                            <button
                                class="admin-role-group-toggle"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#{{ $collapseId }}"
                                aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                aria-controls="{{ $collapseId }}"
                            >
                                <span>{{ $group['label'] }}</span>
                                <i class="bi bi-chevron-down" aria-hidden="true"></i>
                            </button>
                            <div class="collapse {{ $loop->first ? 'show' : '' }}" id="{{ $collapseId }}">
                                <div class="admin-role-group-panel">
                                    <div class="row g-3">
                                        @foreach ($group['permissions'] as $permissionKey)
                                            @php($permission = $permissionDefinitions[$permissionKey] ?? null)
                                            @if ($permission)
                                                <div class="col-md-6">
                                                    <label class="admin-role-permission-item">
                                                        <input type="checkbox" name="permissions[]" value="{{ $permissionKey }}" class="form-check-input" @checked(in_array($permissionKey, $rolePermissions, true))>
                                                        <span>
                                                            <span class="fw-semibold d-block">{{ $permission['label'] }}</span>
                                                            <span class="text-muted small">{{ $permission['description'] }}</span>
                                                        </span>
                                                    </label>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @error('permissions')
                    <div class="text-danger small mt-3">{{ $message }}</div>
                @enderror
                @error('permissions.*')
                    <div class="text-danger small mt-3">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
</div>