Get data from the parent form and display it a modal/slide over.

filament-access-parent-data-from-modal.php

<?php

/*

I have a feeling I've overcomplicated something
that should be simple. Help me out.

What I'm trying to do is create a modal/slidover. 
It's going to be a debug window for a complex form. 
- It will include the current values at the top. 
- Next will be a div/text area that displays logs
when the form is dispatched. 


Tried (I suck at javascript/front end still, I know)
- $get('../../email')
- Numerous javascript methods
- Many failed Livewire/Alpine methods

*/

// Here is the latest failed attempt. (Ignore all the extra layout/schema, this is just a skeleton of a much larger form

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Grid::make('support_case_form')
                    ->schema([
                        Section::make('Case Details')
                            ->schema([
                                Grid::make('email_section')
                                    ->schema([
                                        TextInput::make('email')
                                            ->email()
                                            ->extraAttributes(['x-ref' => 'emailField', 'data-debug-watch' => 'true']), // Watch this field using Alpine
                                    ]),
                            ]),
                    ])
                    ->columns(1)
                    ->columnSpan(9),

                Grid::make('support_case_meta')
                    ->schema([
                        Actions::make([
                            Action::make('debugDrawer')
                                ->label('Debug Drawer')
                                ->icon('heroicon-m-bug-ant')
                                ->iconButton()
                                ->color('danger')
                                ->size(ActionSize::ExtraSmall)
                                ->extraAttributes([
                                    'x-data' => "{ showDebug: false }", // Basic Alpine for state handling
                                    'x-on:click' => "captureDebug()", // Attach Alpine function call
                                    'class' => 'flex ml-[90%] border w-8 z-25 rounded-full shadow-sm hover:shadow-md fixed top-0 left-0 right-0',
                                ])
                                ->form([
                                    // Using a div instead of a textarea
                                    Placeholder::make('debugOutput')
                                        ->content(new HtmlString('<div id="debugOutput" style="border:1px solid #ccc; padding:10px; height:100px; overflow:auto;">Debug info will appear here.</div>')),

                                    Actions::make([
                                        Action::make('reset')
                                            ->label('Reset')
                                            ->button()
                                            ->extraAttributes(['x-on:click' => "document.querySelector('#debugOutput').textContent = '';"]),
                                    ]),
                                ])
                                ->modalWidth(MaxWidth::TwoExtraLarge)
                                ->slideOver()
                                ->modalSubmitAction(false),
                        ])->fullWidth()->columns(12)->columnSpanFull(),
                    ])
                    ->columns(1)
                    ->columnSpan(3),
            ])
            ->columns(12);
    }

I figured it out. I knew it was going to be simple.

// Just need $livewire->data['parent_field_key_here']

->modalContent(function ($livewire) {
    // Dynamically fetch and display form state (e.g., email) in the modal
    return new HtmlString('<div>Current Email: ' . ($livewire->data['email'] ?? 'No Email') . '</div>');
})