Need Help with the Javascript for Passing A session Message from Livewire Component to a Blade page

I am trying to pass a session message from my Livewire Component to a blade page where there is a “Toast” javascript that displays the message in a floating toast box. But it is not working.



This is my Livewire component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class DutyStatusToggle extends Component
{
    public $notifierid;
    public $dutyStatus;

    public function mount()
    {
        $this->notifierid = Auth::id();
        
        // Fetch the current "duty_status" value from the database
        $user = User::find($this->notifierid);
        if ($user) {
            $this->dutyStatus = $user->duty_status;
        } else {
            // Handle the case where the user is not found
            // You can set a default value or take other appropriate action.
        }
    }

    public function updateDutyStatus($newStatus)
    {
        User::where('id', $this->notifierid)->update(['duty_status' => $newStatus]);
    
        // Update the duty status property to reflect the new status
        $this->dutyStatus = $newStatus;
    
        // Determine the message based on the newStatus
        $message = ($newStatus === 1) ? 'Your DUTY STATUS has been updated to "On Duty".' : 'Your DUTY STATUS has been updated to "Off Duty".';
 
        // Send the success message to the Livewire component
        $this->emit('showMessage', ['type' => 'message', 'message' => $message]);
    }

    public function render()
    {
        return view('livewire.duty-status-toggle');
    }

    public function updateSessionMessage($data)
        {
            session()->flash('message', $data['message']);
        }
}

This is my Livewire view:

<form class="">
    @csrf
    <input type="hidden" wire:model="notifierid" name="notifierid">
    <input type="hidden" wire:model="type" name="type" value="on_duty">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-lg custom-btn-color p-1 @if($dutyStatus === 0) active @endif" style="width:80px">
            <input type="radio" wire:model="dutyStatus" value="0" wire:click="updateDutyStatus(0)"> Off Duty
        </label>
        <label class="btn btn-lg custom-btn-color p-1 @if($dutyStatus === 1) active @endif" style="width:80px">
            <input type="radio" wire:model="dutyStatus" value="1" wire:click="updateDutyStatus(1)"> On Duty
        </label>
    </div>
</form

This is my blade component that displays the “Toast” message on the blade page for message that usually come from the Laravel controllers:




@if(session()->has('message'))
<div class="position-fixed bottom-0 end-0 p-3" style="position: absolute; top: 20px; right: 10px;z-index:1000;width:350px;" >
  <div role="alert" aria-live="assertive" aria-atomic="true" class="toast"  data-delay="12000" style="background-color:#3e5872;color:white">
      <div class="toast-header">
        <img src="{{ asset('/media/images/fireops_logo_red.png') }}" class="rounded mr-2" alt="..." width="20px;">
        <strong class="mr-auto">ALERT</strong>
        {{-- <small>11 mins ago</small> --}}
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
          {!! session('message') !!}
      </div>
    </div>
  </div>

@endif

I need help with the javascript that is needed on the blade page to receive the emit code below

$this->emit('showMessage', ['type' => 'message', 'message' => $message]);

I would like to pass the message to the existing "Toast" code shown above.