@csrf
@if(isset($role)) @method('put') @endif

<div class="row g-4">
    <div class="col-lg-5">
        <div class="mb-3">
            <label class="form-label small text-navy-300">Role Name</label>
            <input type="text" name="name" value="{{ old('name', $role->name ?? '') }}"
                   class="form-control @error('name') is-invalid @enderror"
                   @if(isset($role) && $role->is_system) readonly @endif required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label class="form-label small text-navy-300">Description</label>
            <textarea name="description" rows="4" class="form-control @error('description') is-invalid @enderror">{{ old('description', $role->description ?? '') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" name="status" value="1" id="statusSwitch"
                   {{ old('status', $role->status ?? true) ? 'checked' : '' }}>
            <label class="form-check-label small text-navy-300" for="statusSwitch">Active</label>
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-check2"></i> {{ isset($role) ? 'Update Role' : 'Create Role' }}</button>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
    </div>

    <div class="col-lg-7">
        <label class="form-label small text-navy-300 mb-2">Module Permissions</label>
        <div class="panel p-3" style="max-height:480px; overflow-y:auto;">
            @foreach ($permissions as $module => $modulePermissions)
                <div class="mb-3">
                    <div class="d-flex align-items-center justify-content-between mb-1">
                        <span class="fw-semibold text-heading text-capitalize">{{ str_replace('_', ' ', $module) }}</span>
                        <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input module-toggle" data-module="{{ $module }}">
                            <label class="form-check-label small text-navy-300">All</label>
                        </div>
                    </div>
                    <div class="row row-cols-2 row-cols-md-3">
                        @foreach ($modulePermissions as $permission)
                            <div class="col mb-1">
                                <div class="form-check">
                                    <input class="form-check-input perm-checkbox" data-module="{{ $module }}" type="checkbox"
                                           name="permissions[]" value="{{ $permission->name }}" id="perm-{{ $permission->id }}"
                                           {{ in_array($permission->name, old('permissions', $assigned ?? [])) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="perm-{{ $permission->id }}">
                                        {{ str_replace($module.'.', '', $permission->name) }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
document.querySelectorAll('.module-toggle').forEach((toggle) => {
    const module = toggle.dataset.module;
    const boxes = document.querySelectorAll(`.perm-checkbox[data-module="${module}"]`);
    toggle.checked = Array.from(boxes).every(b => b.checked);
    toggle.addEventListener('change', () => boxes.forEach(b => b.checked = toggle.checked));
});
</script>
@endpush