Filament Popup Modal on condation

To achieve the behavior you're looking for in Filament, you can use Livewire to listen for changes on the dropdown and conditionally trigger a modal based on the selected value. Here's a step-by-step solution:

1. Create a Livewire component for your table or form.
2. Add a property to your Livewire component to track the status value.
3. Listen for changes to the status dropdown and update the property accordingly.
4. Use the updated property to conditionally render a modal with a text input field.

Here's an example of how you might implement this:

// In your Livewire component

use Livewire\Component;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Modal;

class YourLivewireComponent extends Component
{
    public $status;
    public $showModal = false;
    public $reasonForCancellation;

    protected $listeners = ['statusUpdated'];

    public function render()
    {
        return view('livewire.your-livewire-component');
    }

    public function statusUpdated($value)
    {
        if ($value === 'Cancelled') {
            $this->showModal = true;
        } else {
            $this->showModal = false;
        }
    }

    public function saveCancellationReason()
    {
        // Save the reason for cancellation to the database or perform other actions
        $this->showModal = false;
    }
}

In your Blade template, you would have something like this:

<div>
    {{ $this->form }}

    <x-filament::modal
        :visible="$showModal"
        @close="$set('showModal', false)"
    >
        <x-slot name="header">
            Cancellation Reason
        </x-slot>

        <x-slot name="body">
            <x-filament::text-input
                wire:model.defer="reasonForCancellation"
                placeholder="Enter the reason for cancellation"
            />
        </x-slot>

        <x-slot name="footer">
            <x-filament::button
                wire:click="saveCancellationReason"
            >
                Save
            </x-filament::button>
        </x-slot>
    </x-filament::modal>
</div>

And in your form definition, you would have something like this:

Select::make('status')
    ->options([
        'Active' => 'Active',
        'Cancelled' => 'Cancelled',
        // ... other status options
    ])
    ->reactive()
    ->afterStateUpdated(fn ($state) => $this->emit('statusUpdated', $state)),

Make sure to include the necessary Livewire and Filament scripts and styles in your layout.

This example assumes you have a Livewire component set up and that you're using Filament's form components. Adjust the code to fit your specific setup and requirements.