Creating Toggle (active/inactive) button using livewire in Laravel

Livewire Toggle Component.md

First create livewire component

php artisan make:livewire ToggleButton

Second Open ToggleButton component file and add this line of code

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Database\Eloquent\Model;

class ToggleButton extends Component
{
    public Model $model;
    public string $field;
    public bool $active;

    public function mount()
    {
        $this->active = (bool) $this->model->getAttribute($this->field);
    }

    public function updating($field, $value)
    {
        // dd($value, $this->field);
        $this->model->setAttribute($this->field, $value)->save();
        $this->emit('statusUpdated'); // this emit is used for show status changed message for this import or use cdn of Alpine Js also
    }

    /* This below commented function is not working so don't use it*/
    // public function toggleUpdate($id)
    // {
    //     // dd($this->active);
    //     $rowValue = $this->model::findOrFail($id);
    //     $value = ($rowValue === true) ? false : true;
    //     $rowValue->update([
    //         $this->field = $value,
    //     ]);
    //     dd($value);
    // }

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

Third open toggle-button blade file also and add this line of code

<div>
    {{-- <a href="#" wire:click="toggleUpdate({{ $rfq->id }})" id="{{ $rfq->id }}" >
        <i class="fas {{ ($this->active) ? 'fa-toggle-on' : 'fa-toggle-off' }} fa-3x"></i>
    </a> --}}
    <label class="switch">
        <input onclick="confirm('Are you sure?') || event.stopImmediatePropagation()" type="checkbox" wire:model="active">
        <span class="slider round"></span>
    </label>
    <div class="font-italic mt-1"
    x-data="{shown: false}"
    x-show.transition.opacity.out.duration.1500ms="shown"
    x-show="shown"
    x-init="@this.on('statusUpdated', () => {
        shown = true;
        setTimeout(() => shown = false, 2000)
    })"
    style="display: none">
        Data Saved
    </div>
</div>
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s,
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s,
    }

    input:checked+.slider {
        background-color: #68D391 !important;
    }

    input:focus+.slider {
        box-shadow: #68D391 !important;
        /* background-color: #000!important; */
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

    /* Rounded slider */
    .slider.round {
        border-radius: 17px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

</style>

Final part import toggle-button component in file where you need it

@forelse($companies as $company)
  <tr>
      <td>{{ $company->name }}</td>
      <td>
          @livewire('toggle-button', [
              'model' => $company,
              'field' => 'isActive',
          ])
          OR
          <livewire:toggle-button :model="$company" :field="isActive>
      </td>
  </tr>
  @endforelse