Filament v3, calculation in form using alpine.js

                            Section::make('Base')
                                ->schema([
                                    Forms\Components\TextInput::make('base_qty')
                                        ->label('Quantity')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'base_qty',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('base_price')
                                        ->label('Rate')
                                        ->prefix('RM')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'base_price',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('base')
                                        ->label('Total')
                                        ->prefix('RM')
                                        ->readonly()
                                        ->extraAttributes(function ($component) {
                                            $statePath = $component->getStatePath();
                                            return [
                                                'x-effect' => "\$wire.set('$statePath', base)",
                                            ];
                                        }),

                                ])
                                ->columns(3),
                            Section::make('mode')
                                ->schema([
                                    Forms\Components\TextInput::make('mode_qty')
                                        ->label('Quantity')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'mode_qty',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('mode_price')
                                        ->label('Rate')
                                        ->prefix('RM')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'mode_price',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('mode')
                                        ->label('Total')
                                        ->prefix('RM')
                                        ->readonly()
                                        ->extraAttributes(function ($component) {
                                            $statePath = $component->getStatePath();
                                            return [
                                                'x-effect' => "\$wire.set('$statePath', mode)",
                                            ];
                                        }),

                                ])
                                ->columns(3),
                            Section::make('best')
                                ->schema([
                                    Forms\Components\TextInput::make('best_qty')
                                        ->label('Quantity')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'best_qty',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('best_price')
                                        ->label('Rate')
                                        ->prefix('RM')
                                        ->required()
                                        ->extraAttributes([
                                            'x-model' => 'best_price',
                                            '@input' => 'calculateTotal()',
                                        ]),
                                    Forms\Components\TextInput::make('best')
                                        ->label('Total')
                                        ->prefix('RM')
                                        ->readonly()
                                        ->extraAttributes(function ($component) {
                                            $statePath = $component->getStatePath();
                                            return [
                                                'x-effect' => "\$wire.set('$statePath', best)",
                                            ];
                                        }),

                                ])
                                ->columns(3),
                            Forms\Components\Textarea::make('basej')
                                ->columnSpanFull(),


                        ])
                        ->extraAttributes(function ($component, $get, $record) {
                            $statePath = $component->getStatePath();
                            return [
                                'x-data' => "{
                                    base_qty: ".($record->base_qty ?? 0).",
                                    base_price: ".($record->base_price ?? 0).",
                                    base: ".($record->base ?? 0).",
                                    mode_qty: ".($record->mode_qty ?? 0).",
                                    mode_price: ".($record->mode_price ?? 0).",
                                    mode: ".($record->mode ?? 0).",
                                    best_qty: ".($record->best_qty ?? 0).",
                                    best_price: ".($record->best_price ?? 0).",
                                    best: ".($record->best ?? 0).",
                                    calculateTotal() {
                                        this.base = this.base_qty * this.base_price;
                                        this.mode = this.mode_qty * this.mode_price;
                                        this.best = this.best_qty * this.best_price;
                                        Alpine.nextTick(() => {
                                            console.log('Reactivity ensured, Total:', this.base);
                                        });
                                    }
                                }",
                            ];
                        })