/* modal-example.blade.php */

<x-modal>
    
    <x-slot name="trigger">
        
        <x-button color="primary" content="Open Modal" />
    </x-slot>
                
    <x-title class="mb-3" content="Refund Payment">
                
    <x-text size="sm" class="mb-5" content="The refund will be reflected in the customer’s bank account 2 to 3 business days after processing.">
                
    <x-form class="mb-6">
        
        <x-label content="amount" for="amount-input">
                    
        <x-input type="number" placeholder="$0.00" id="amount-input" />
    </x-form>
                
    <x-modal-close class="flex justify-end space-x-2">
        
        <x-button content="Cancel" />
                    
        <x-button color="primary" content="Refund" />
    </x-modal-close>
</x-modal>

/* modal-events-example.blade.php */

<x-button color="primary" content="Open Modal" x-data="" x-on:click.prevent="$dispatch('open-modal', 'example-modal')" />
            
<x-modal size="lg" name="example-modal">
    
    <x-title class="mb-3" content="Refund Payment">
                
    <x-text size="sm" class="mb-5" content="The refund will be reflected in the customer's bank account 2 to 3 business days after processing.">
                
    <x-form class="mb-6">
        
        <x-label content="amount" for="amount-input">
                    
        <x-input type="number" placeholder="$0.00" id="amount-input" />
    </x-form>
                
    <x-modal-close class="flex justify-end space-x-2">
        
        <x-button content="Cancel" />
                    
        <x-button color="primary" content="Refund" />
    </x-modal-close>
</x-modal>

/* views/example.blade.php */

<x-button color="primary" content="Open Modal" 

            x-data="" 

            x-on:click.prevent="

            $dispatch('open-modal', 'example-modal');

            Livewire.dispatch('openExampleModal', { id: 123 });

            " />
            
<livewire:example-modal />

/* Livewire\ExampleModal.php */

<?php

namespace App\Livewire;

use Livewire\Attributes\Locked;
use Livewire\Component;

class ExampleModal extends Component
{

    #[Locked]
    public ?int $id = null;

    public bool $isLoaded = false;

    protected $listeners = ['openExampleModal'];

    public function render()
    {
        return view('livewire.example-modal');
    }

    public function openExampleModal(int $id)
    {
        $this->id = $id;
        $this->isLoaded = false;
        // Simulate data loading
        sleep(1);
        $this->isLoaded = true;
    }
}

/* livewire\example-modal.blade.php */

<x-modal size="lg" name="example-modal" closeable="1">
    
    <div wire:loading.block="">
        
        <x-spinner size="xl" class="my-8 mx-auto" />
    </div>
                
    <div wire:loading.remove="">
        
        <x-title class="mb-3" content="Refund Payment <?php echo e($id); ?>" />
                    
        <x-text size="sm" class="mb-5" content="The refund will be reflected in the customer's bank account 2 to 3 business days after processing." />
                    
        <x-form class="mb-6">
            
            <x-label content="amount" for="amount-input" />
                        
            <x-input type="number" placeholder="$0.00" id="amount-input" />
        </x-form>
                    
        <x-modal-close class="flex justify-end space-x-2">
            
            <x-button content="Cancel" />
                        
            <x-button color="primary" content="Refund" />
        </x-modal-close>
    </div>
</x-modal>