php-flasher/docs/_layouts/livewire.html

---
layout: default
---

<div class="max-w-7xl mx-auto">
    <!-- Main Content with Styled Sections -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <!-- Table of contents - Desktop -->
        <div class="w-full bg-white border-b border-slate-100 shadow-sm">
            <div class="px-6 py-4 flex items-center gap-4 overflow-x-auto no-scrollbar">
                <a href="#requirements" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
                    <i class="fa-solid fa-list-check mr-1.5 text-purple-500"></i> Requirements
                </a>
                <span class="text-slate-300">|</span>
                <a href="#installation" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
                    <i class="fa-solid fa-download mr-1.5 text-purple-500"></i> Installation
                </a>
                <span class="text-slate-300">|</span>
                <a href="#usage" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
                    <i class="fa-solid fa-code mr-1.5 text-purple-500"></i> Usage
                </a>
                <span class="text-slate-300">|</span>
                <a href="#events" class="text-sm font-medium text-slate-700 hover:text-purple-600 whitespace-nowrap transition-colors">
                    <i class="fa-solid fa-bolt mr-1.5 text-purple-500"></i> Events
                </a>
            </div>
        </div>

        <!-- Content area with custom styling -->
        <div class="prose prose-slate max-w-none p-6 md:p-8">
            <!-- Requirements Section -->
            <div id="requirements" class="scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
                    <span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
                        <i class="fa-solid fa-list-check"></i>
                    </span>
                    Requirements
                </h2>
                <p class="mb-4">
                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    works seamlessly with <strong class="text-purple-700">Livewire v3</strong>, bringing dynamic flash notifications to your reactive components.
                </p>

                <!-- Version requirements -->
                <div class="mb-5">
                    <!-- Requirements Cards Container -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- PHP Card -->
                        <div class="group relative bg-white rounded-lg border border-indigo-200 shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1">
                            <!-- Subtle accent line -->
                            <div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-indigo-500 to-indigo-600"></div>

                            <div class="p-3">
                                <div class="flex items-center">
                                    <div class="bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-full h-10 w-10 flex items-center justify-center shadow-sm group-hover:shadow transition-all">
                                        <i class="fa-brands fa-php text-white text-lg"></i>
                                    </div>

                                    <div class="ml-3">
                                        <div class="text-xs uppercase tracking-wider text-indigo-500 font-semibold">Required</div>
                                        <h4 class="font-bold text-slate-800">PHP Version</h4>
                                        <div class="inline-block px-2 py-0.5 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">
                                            v8.2 or higher
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Livewire Card -->
                        <div class="group relative bg-white rounded-lg border border-purple-200 shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md hover:-translate-y-1">
                            <!-- Subtle accent line -->
                            <div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-purple-500 to-purple-600"></div>

                            <div class="p-3">
                                <div class="flex items-center">
                                    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-full h-10 w-10 flex items-center justify-center shadow-sm group-hover:shadow transition-all">
                                        <i class="fa-solid fa-bolt text-white text-lg"></i>
                                    </div>

                                    <div class="ml-3">
                                        <div class="text-xs uppercase tracking-wider text-purple-500 font-semibold">Required</div>
                                        <h4 class="font-bold text-slate-800">Livewire</h4>
                                        <div class="inline-block px-2 py-0.5 bg-purple-100 text-purple-700 text-xs font-medium rounded-full">
                                            v3.0 or higher
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Legacy version note -->
                    <div class="bg-amber-50 border-l-4 border-amber-300 rounded-r-lg p-3 mt-3">
                        <div class="flex">
                            <div class="flex-shrink-0 flex items-center justify-center">
                                <i class="fa-solid fa-lightbulb text-amber-500"></i>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-sm font-medium text-amber-800">Using older PHP or Livewire versions?</h4>
                                <p class="text-xs text-amber-700">
                                    If you need to use PHP &lt; v8.2 or Livewire &lt; v3.0, use
                                    <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span> v1</strong> instead.
                                    It supports PHP ≥ v5.3 and earlier Livewire versions.
                                    <a href="https://php-flasher.github.io/" class="text-amber-800 underline hover:text-amber-900">
                                        Check out the v1 documentation here
                                    </a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Installation Section -->
            <div id="installation" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
                    <span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
                        <i class="fa-solid fa-download"></i>
                    </span>
                    Installation
                </h2>
                <p class="mb-4">
                    To use <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> with Livewire, follow the same installation steps as in the
                    <a href="/laravel" class="text-purple-600 hover:text-purple-800">Laravel Installation</a> guide.
                </p>

                <!-- Terminal code block -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-4">
                    <div class="bg-slate-800 p-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1 mr-4">
                                <div class="w-3 h-3 rounded-full bg-red-400"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
                                <div class="w-3 h-3 rounded-full bg-green-400"></div>
                            </div>
                            <span class="text-slate-400 text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Installation</div>
                    </div>

                    <div class="p-6 bg-slate-900">
                        <div class="flex flex-col gap-4">
                            <div class="relative">
                                <div class="flex items-center mb-2">
                                    <div class="w-5 h-5 bg-purple-800 text-white rounded-full flex items-center justify-center mr-2 text-xs">
                                        <i class="fa-solid fa-bolt"></i>
                                    </div>
                                    <span class="text-slate-300 text-sm">Livewire Installation</span>
                                </div>
                                <pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-laravel</code></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <p class="mb-4">After installing, run this command to set up the required assets:</p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 p-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="flex space-x-1 mr-4">
                                <div class="w-3 h-3 rounded-full bg-red-400"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
                                <div class="w-3 h-3 rounded-full bg-green-400"></div>
                            </div>
                            <span class="text-slate-400 text-sm">Terminal</span>
                        </div>
                        <div class="text-slate-400 text-sm">Setup Assets</div>
                    </div>

                    <div class="p-6 bg-slate-900">
                        <pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">php artisan flasher:install</code></pre>
                    </div>
                </div>

                <!-- Integration callout -->
                <div class="bg-purple-50 border-l-4 border-purple-400 rounded-r-lg p-5 mb-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-bolt-lightning text-purple-500"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-purple-800">Zero Configuration for Livewire</h4>
                            <p class="text-sm text-purple-700 mt-1">
                                PHPFlasher automatically integrates with Livewire. No additional configuration needed - flash notifications work instantly across component updates and page refreshes.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Section -->
            <div id="usage" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
                    <span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
                        <i class="fa-solid fa-code"></i>
                    </span>
                    Usage
                </h2>

                <p class="mb-4">
                    Using <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong>
                    in Livewire components is simple. Just call the <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">flash()</code>
                    helper function in your component methods.
                </p>

                <!-- Basic Usage Example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>
                <p class="mb-4">Dispatch notifications from your Livewire components:</p>

                <!-- PHP Example -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">UserComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;

use Livewire\Component;

class UserComponent extends Component
{
    public function save()
    {
        // Save user logic here...

        // Show success notification
        flash()->success('User saved successfully!');
    }

    public function render()
    {
        return view('livewire.user');
    }
}</code></pre>
                    </div>
                </div>

                <!-- Pro tip box -->
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg p-5 mb-6 border border-purple-100">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-lightbulb text-amber-500 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-sm font-medium text-purple-800">Pro Tip: Notifications Persist Across Livewire Updates</h4>
                            <p class="text-sm text-purple-700 mt-1">
                                PHPFlasher automatically handles Livewire component updates and page refreshes. Notifications will display correctly even during partial page updates.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Complete component example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Complete Component Example</h3>
                <p class="mb-4">Here's a more complete example of a Livewire component with form handling and notifications:</p>

                <!-- PHP Example -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">ContactForm.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;

use Livewire\Component;
use App\Models\Contact;

class ContactForm extends Component
{
    public $name = '';
    public $email = '';
    public $message = '';

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'message' => 'required|min:10',
    ];

    public function submit()
    {
        $this->validate();

        try {
            Contact::create([
                'name' => $this->name,
                'email' => $this->email,
                'message' => $this->message,
            ]);

            // Success notification
            flash()->success('Your message has been sent!', 'Thank you');

            // Reset form
            $this->reset(['name', 'email', 'message']);

        } catch (\Exception $e) {
            // Error notification
            flash()->error('There was a problem sending your message.');
        }
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}</code></pre>
                    </div>
                </div>

                <!-- Related Blade view -->
                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">The Blade View</h3>
                <p class="mb-4">Here's the corresponding Blade view for the component:</p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">contact-form.blade.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html">&lt;div&gt;
    &lt;form wire:submit.prevent="submit" class="space-y-4"&gt;
        &lt;div&gt;
            &lt;label for="name" class="block text-sm font-medium text-gray-700"&gt;Name&lt;/label&gt;
            &lt;input type="text" id="name" wire:model="name"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;
            @error('name') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label for="email" class="block text-sm font-medium text-gray-700"&gt;Email&lt;/label&gt;
            &lt;input type="email" id="email" wire:model="email"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;
            @error('email') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;label for="message" class="block text-sm font-medium text-gray-700"&gt;Message&lt;/label&gt;
            &lt;textarea id="message" wire:model="message" rows="4"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"&gt;&lt;/textarea&gt;
            @error('message') &lt;span class="text-red-500 text-xs"&gt;{% raw %}{{ $message }}{% endraw %}&lt;/span&gt; @enderror
        &lt;/div&gt;

        &lt;div&gt;
            &lt;button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent
                shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"&gt;
                &lt;div wire:loading wire:target="submit" class="mr-2"&gt;
                    &lt;svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"&gt;
                        &lt;circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"&gt;&lt;/circle&gt;
                        &lt;path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"&gt;&lt;/path&gt;
                    &lt;/svg&gt;
                &lt;/div&gt;
                Send Message
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>

                <!-- Notification Types -->
                <h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">All Notification Types</h3>
                <p class="mb-4">You can use all the standard notification types in your Livewire components:</p>

                <!-- Notification types showcase -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
                    <div class="group p-4 border border-green-200 bg-gradient-to-b from-green-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center gap-3 mb-2 text-green-700">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center group-hover:bg-green-500 group-hover:text-white transition-colors">
                                <i class="fa-solid fa-circle-check"></i>
                            </div>
                            <strong>Success</strong>
                        </div>
                        <p class="text-green-600 text-sm">flash()->success('Record updated successfully!')</p>
                    </div>

                    <div class="group p-4 border border-red-200 bg-gradient-to-b from-red-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center gap-3 mb-2 text-red-700">
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center group-hover:bg-red-500 group-hover:text-white transition-colors">
                                <i class="fa-solid fa-circle-exclamation"></i>
                            </div>
                            <strong>Error</strong>
                        </div>
                        <p class="text-red-600 text-sm">flash()->error('An error occurred while saving.')</p>
                    </div>

                    <div class="group p-4 border border-amber-200 bg-gradient-to-b from-amber-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center gap-3 mb-2 text-amber-700">
                            <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center group-hover:bg-amber-500 group-hover:text-white transition-colors">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                            </div>
                            <strong>Warning</strong>
                        </div>
                        <p class="text-amber-600 text-sm">flash()->warning('Unsaved changes will be lost.')</p>
                    </div>

                    <div class="group p-4 border border-blue-200 bg-gradient-to-b from-blue-50 to-white rounded-lg transition-transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center gap-3 mb-2 text-blue-700">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center group-hover:bg-blue-500 group-hover:text-white transition-colors">
                                <i class="fa-solid fa-circle-info"></i>
                            </div>
                            <strong>Info</strong>
                        </div>
                        <p class="text-blue-600 text-sm">flash()->info('Your session will expire in 5 minutes.')</p>
                    </div>
                </div>
            </div>

            <!-- Events Section -->
            <div id="events" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
                    <span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
                        <i class="fa-solid fa-bolt"></i>
                    </span>
                    Events
                </h2>

                <p class="mb-4">
                    PHPFlasher integrates with Livewire's event system, allowing you to listen for notification events in your components.
                    This is particularly useful for interactive notifications like SweetAlert confirmations.
                </p>

                <h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">SweetAlert Events</h3>
                <p class="mb-4">
                    For SweetAlert, you can listen to <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:confirmed</code>,
                    <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:denied</code>, and
                    <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">sweetalert:dismissed</code> events within your component.
                </p>

                <!-- Interactive example -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">UserDeleteComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class UserComponent extends Component
{
    public function render()
    {
        return <<<'HTML'
            <div>
                <button wire:click="deleteUser">Delete User</button>
            </div>
        HTML;
    }

    public function deleteUser()
    {
        sweetalert()
            ->showDenyButton()
            ->info('Are you sure you want to delete the user?');
    }

    #[On('sweetalert:confirmed')]
    public function onConfirmed(array $payload): void
    {
        // Delete the user here

        flash()->info('User successfully deleted.');
    }

    #[On('sweetalert:denied')]
    public function onDeny(array $payload): void
    {
        flash()->info('Deletion cancelled.');
    }
}</code></pre>
                    </div>
                </div>

                <h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Event Payload</h3>
                <p class="mb-4">Each listener method accepts an <code class="bg-slate-100 px-2 py-1 rounded text-purple-600">array $payload</code> parameter, which contains:</p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                                        <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">PayloadStructure.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">public function sweetalertConfirmed(array $payload)
{
    // Access the payload data
    $promise = $payload['promise'];
    $envelope = $payload['envelope'];

    // $promise - Contains the resolved promise data from SweetAlert
    // $envelope - Contains the notification where the event happened

    // You can use this data for further processing
    $userId = $envelope->getOption('userId'); // If you had set this option
}</code></pre>
                    </div>
                </div>

                <!-- Best practices -->
                <div class="bg-green-50 border-l-4 border-green-400 rounded-r-lg p-5 mb-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-check-circle text-green-500"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-sm font-medium text-green-800">Best Practice: Use Attributes for Events</h4>
                            <p class="text-sm text-green-700 mt-1">
                                With Livewire 3, use the new <code class="bg-slate-100 px-1 py-0.5 rounded text-purple-600">#[On('event')]</code> attribute syntax
                                for cleaner event handling. This makes your code more readable and follows modern PHP practices.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Advanced example -->
                <h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Advanced Example: CRUD Operations</h3>
                <p class="mb-4">Here's a more complete example showing how to implement CRUD operations with confirmations:</p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">TasksComponent.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;

use App\Models\Task;
use Livewire\Attributes\On;
use Livewire\Component;

class TasksComponent extends Component
{
    public $tasks = [];
    public $taskToDelete = null;

    public $title = '';
    public $description = '';

    protected $rules = [
        'title' => 'required|min:3',
        'description' => 'required',
    ];

    public function mount()
    {
        $this->tasks = Task::latest()->get();
    }

    public function saveTask()
    {
        $this->validate();

        Task::create([
            'title' => $this->title,
            'description' => $this->description,
        ]);

        $this->reset(['title', 'description']);
        $this->tasks = Task::latest()->get();

        flash()->success('Task created successfully!');
    }

    public function confirmDelete($taskId)
    {
        $this->taskToDelete = $taskId;

        sweetalert()
            ->showDenyButton()
            ->option('confirmButtonText', 'Yes, delete it!')
            ->option('denyButtonText', 'Cancel')
            ->option('taskId', $taskId) // Store taskId in the options
            ->warning('Are you sure you want to delete this task?', 'Confirm Deletion');
    }

    #[On('sweetalert:confirmed')]
    public function deleteTask(array $payload)
    {
        $task = Task::find($this->taskToDelete);

        if ($task) {
            $task->delete();
            $this->tasks = Task::latest()->get();
            flash()->success('Task deleted successfully!');
        } else {
            flash()->error('Task not found.');
        }

        $this->taskToDelete = null;
    }

    #[On('sweetalert:denied')]
    public function cancelDelete()
    {
        $this->taskToDelete = null;
        flash()->info('Task deletion cancelled.');
    }

    public function render()
    {
        return view('livewire.tasks', [
            'tasks' => $this->tasks
        ]);
    }
}</code></pre>
                    </div>
                </div>

                <!-- Tips for working with Livewire component -->
                <div class="bg-slate-50 border border-slate-200 rounded-xl p-6 mb-6">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 p-2 bg-purple-100 rounded-full">
                            <i class="fa-solid fa-wand-magic-sparkles text-purple-600"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-lg font-semibold text-slate-800">Tips for Livewire Integration</h4>
                            <ul class="mt-2 space-y-2 text-slate-600">
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Use <code class="bg-slate-100 px-1.5 py-0.5 rounded text-purple-600">wire:ignore</code> on notification container elements if you're manually placing them</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Notifications persist across Livewire updates and work with both full page refreshes and SPA navigation</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>You can pass dynamic data to your notifications using component properties</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa-solid fa-check text-green-500 mr-2 mt-1"></i>
                                    <span>Store temporary state (like IDs for confirmation dialogs) in component properties</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- SPA Mode -->
                <h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Working with Livewire SPA Mode</h3>
                <p class="mb-4">
                    PHPFlasher works seamlessly with Livewire's SPA (Single Page Application) mode, ensuring notifications are displayed correctly
                    during page transitions without reloading.
                </p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">nav-link.blade.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-html">&lt;a href="{% raw %}{{ route('dashboard') }}{% endraw %}" wire:navigate&gt;Dashboard&lt;/a&gt;

&lt;!-- In your component --&gt;
&lt;script&gt;
// PHPFlasher's notifications will persist during SPA navigation
Livewire.hook('commit', ({ component }) => {
    // Any custom code that needs to run after component updates
    // PHPFlasher will automatically handle the notifications
});
&lt;/script&gt;</code></pre>
                    </div>
                </div>

                <!-- Event chaining with confirmations -->
                <h3 class="text-xl font-semibold text-slate-700 mt-8 mb-3">Chaining Notifications with Events</h3>
                <p class="mb-4">
                    You can create complex interaction flows by chaining notifications with events:
                </p>

                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
                    <div class="bg-slate-800 px-4 py-3 flex items-center">
                        <div class="flex space-x-1.5 mr-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-white opacity-80 text-xs font-medium">PublishArticle.php</div>
                    </div>
                    <div>
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class PublishArticle extends Component
{
    public $article;

    public function confirmPublish()
    {
        sweetalert()
            ->option('title', 'Publish article?')
            ->option('text', 'This will make the article visible to all users')
            ->option('icon', 'question')
            ->option('showCancelButton', true)
            ->option('confirmButtonText', 'Yes, publish it!')
            ->option('cancelButtonText', 'Not yet')
            ->fire();
    }

    #[On('sweetalert:confirmed')]
    public function publishArticle()
    {
        // Publish the article
        $this->article->published = true;
        $this->article->save();

        // First notification
        flash()->success('Article published successfully!');

        // Second notification (after a delay)
        sweetalert()
            ->timer(3000)
            ->option('title', 'Would you like to share it?')
            ->option('showCancelButton', true)
            ->option('confirmButtonText', 'Yes, share it!')
            ->option('cancelButtonText', 'No thanks')
            ->option('actionType', 'share') // Custom option to identify action
            ->fire();
    }

    #[On('sweetalert:confirmed')]
    public function handleConfirmation(array $payload)
    {
        $envelope = $payload['envelope'];
        $actionType = $envelope->getOption('actionType');

        if ($actionType === 'share') {
            // Show sharing UI
            $this->dispatch('show-share-modal', articleId: $this->article->id);
        }
    }

    public function render()
    {
        return view('livewire.publish-article');
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Additional Integration section -->
            <div id="additional-integrations" class="mt-10 scroll-mt-20">
                <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
                    <span class="p-1.5 bg-gradient-to-br from-purple-50 to-purple-100 text-purple-600 rounded-lg shadow-sm">
                        <i class="fa-solid fa-plug"></i>
                    </span>
                    Additional Integrations
                </h2>

                <p class="mb-4">
                    PHPFlasher works with other popular Livewire plugins and Laravel features.
                </p>

                <!-- Alpine.js integration -->
                <div class="grid md:grid-cols-2 gap-6 mb-6">
                    <div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8.11 20.259L14.997 3.75l1.305.75-6.888 16.509z"></path>
                                    <path d="M2.783 9.75L7.875 4.658 9.292 6.08 4.205 11.17zM14.713 17.926l5.091-5.092 1.424 1.425-5.091 5.091z"></path>
                                </svg>
                            </div>
                            <h3 class="font-semibold text-slate-800">Alpine.js Integration</h3>
                        </div>
                        <p class="text-slate-600 text-sm mb-3">
                            PHPFlasher works perfectly with Alpine.js directives in your Livewire components.
                        </p>
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-html">&lt;div x-data="{ show: false }"&gt;
    &lt;button x-on:click="show = true; $wire.showToast()"&gt;
        Show Toast
    &lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="bg-white rounded-lg p-5 border border-slate-200 shadow-sm">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12.4217 4L17.5 12.9429L12.4217 18.0571H7.49975L2.5 11.9429L7.49975 4H12.4217ZM11.3929 5.71429H8.44647L5.5 11.0143L8.44647 16.3429H11.3929L14.4643 11.0143L11.3929 5.71429Z"></path>
                                    <path d="M15.5 5.71429L18.5 11.0143L15.5 16.3429H21.5L18.5 11.0143L21.5 5.71429H15.5Z"></path>
                                </svg>
                            </div>
                            <h3 class="font-semibold text-slate-800">Laravel Blade Integration</h3>
                        </div>
                        <p class="text-slate-600 text-sm mb-3">
                            Mix Blade directives with Livewire and PHPFlasher notifications.
                        </p>
<pre class="bg-slate-50 rounded-lg p-3 text-xs overflow-x-auto"><code class="language-php">@if (session('status'))
    &lt;script&gt;
        document.addEventListener('livewire:initialized', () => {
            flasher.success('{% raw %}{{ session('status') }}{% endraw %}');
        });
    &lt;/script&gt;
@endif</code></pre>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Footer CTA -->
    <div class="mt-8 mb-12">
        <div
            class="bg-gradient-to-tr from-purple-600 to-indigo-700 rounded-xl p-8 md:p-12 border border-purple-500 shadow-md text-center md:text-left">
            <div class="flex flex-col md:flex-row md:items-center">
                <div class="md:w-3/4">
                    <h3 class="text-3xl font-bold text-white mb-3">Ready to enhance your Livewire UI?</h3>
                    <p class="text-purple-100 mb-6 md:mb-0 text-lg">Start using <strong><span
                        class="text-white">PHP<span class="text-purple-200">Flasher</span></span></strong> today and
                        give your users beautiful notifications in minutes!</p>
                </div>
                <div class="md:w-1/4 md:text-right">
                    <a href="#installation"
                       class="inline-block bg-white text-purple-700 font-medium px-6 py-3 rounded-lg hover:bg-purple-50 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-transform">
                        Get Started Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    .animate-spin-slow {
        animation: spin 20s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .animate-pulse-delayed {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) 1s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    .animate-fade-in {
        animation: fadeIn 1s ease-out forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
</style>