Delete User Modal

dialog.blade.php

<x-modal z="{{$z}}">
    <div class="md:flex max-w-md">
        <div class="flex justify-center flex-shrink-0 mx-auto text-red-400">
            <x-heroicon-o-ban class="w-16 h-16"/>
        </div>
        <div class="mt-4 md:mt-0 md:ml-6 text-center md:text-left">
            <p class="font-bold">{{$title??''}}</p>
            <p class="text-sm text-gray-700 mt-1">
                {{$slot}}
            </p>
        </div>
    </div>
    <div class="text-center md:text-right mt-4 md:flex md:justify-end">
        <button wire:click.prevent="confirm" class="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-red-200 text-red-700 rounded-lg font-semibold text-sm md:ml-2 md:order-2">
            Confirm
        </button>
        <button wire:click.prevent="close" class="block w-full md:inline-block md:w-auto px-4 py-3 md:py-2 bg-gray-200 rounded-lg font-semibold text-sm mt-4
          md:mt-0 md:order-1">Cancel
        </button>
    </div>
</x-modal>

DialogUserDelete.php

<?php

namespace App\Http\Livewire\Modals;

use App\Http\Controllers\UserController;
use App\Models\User;
use App\View\Components\Modal;
use Livewire\Component;

class DialogUserDelete extends Component
{
    public $z;
    public $user;

    protected $listeners = [
        'open',
        'close',
    ];

    public function open(User $user): void
    {
        $this->user = $user;
        $this->z = Modal::incrementZ();
    }


    public function confirm()
    {
        if ($this->user->id == auth()->user()->id) {
            $this->emit('error', 'You can not delete yourself.');
        } else {
            (new UserController())->destroy($this->user->id);
            $this->emit('user-updated');
            $this->emit('success', 'User ' . $this->user->name . ' has been deleted.');
        }

        $this->close();

    }

    public function close(): void
    {
        $this->reset();
        $this->resetErrorBag();
        $this->resetValidation();
    }

    public function render()
    {
        return <<<'blade'
            <div>
                @if(auth()->user()->can('Delete Users') && $this->user)
                    <x-dialog z="{{$z}}" title="Archive User">
                        Are you sure you want to archive <strong>{{ $this->user->name }}</strong>?
                    </x-dialog>
                @endif
            </div>
        blade;
    }
}

modal.blade.php

@props([
    'z' => 50,
    'title' => ''
])
<div class="modal fixed w-full h-full top-0 left-0 flex items-start justify-center overflow-y-auto" style="z-index: {{$z}}">
    <div wire:click="close" class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>

    <div class="modal-container bg-white max-w-screen-lg mx-auto rounded shadow-lg"
         style="z-index: {{$z}}">

        <div class="modal-content py-4 text-left px-6">
            <!--Title-->
            <div class="flex justify-between items-center pb-4">
                @if($title)
                    <p class="text-2xl font-bold">{{$title}}</p>

                    <div wire:click.prevent="close" class="modal-close cursor-pointer">
                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18"
                             height="18"
                             viewBox="0 0 18 18">
                            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                        </svg>
                    </div>
                @endif
            </div>

            {{$slot}}
        </div>
    </div>
</div>

Modal.php

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Session;
use Illuminate\View\Component;

class Modal extends Component
{


    public static function incrementZ() {
        $z = max(Session::get('z'), 50);
        Session::put('z', ++$z);
        return $z;
    }

    public function render(): View|Closure|string
    {
        return view('components.modal');
    }
}