cms-laravel/resources/views/livewire/user-management/create.blade.php

<div class="container">
    <div class="card border" style="border-color: #E6ECF5;">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Add User</h2>
            <div>
                <button wire:click="create" class="btn btn-primary me-2" wire:loading.attr="disabled" wire:target="create">Submit</button>
                <a href="{{ route('user-management') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success mb-3" role="alert">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger mb-3" role="alert">
                    {{ session('error') }}
                </div>
            @endif

            <form wire:submit.prevent="create">
                <div class="row mb-3">
                    <label for="username" class="col-sm-2 col-form-label">Username</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control @error('username') is-invalid @enderror" wire:model="username" id="username" placeholder="User name">
                        @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="firstname" class="col-sm-2 col-form-label">First Name</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control @error('firstname') is-invalid @enderror" wire:model="firstname" id="firstname" placeholder="First Name">
                        @error('firstname') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="lastname" class="col-sm-2 col-form-label">Last Name</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control @error('lastname') is-invalid @enderror" wire:model="lastname" id="lastname" placeholder="Last Name">
                        @error('lastname') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="email" class="col-sm-2 col-form-label">Email Address</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control @error('email') is-invalid @enderror" wire:model="email" id="email" placeholder="Email Address">
                        @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-2 col-form-label">Status</label>
                    <div class="col-sm-6">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" wire:model="status" id="status_active" value="active">
                            <label class="form-check-label" for="status_active">Active</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" wire:model="status" id="status_inactive" value="inactive">
                            <label class="form-check-label" for="status_inactive">Inactive</label>
                        </div>
                        @error('status') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-2 col-form-label">User Role</label>
                    <div class="col-sm-6">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" wire:model="role" id="role_admin" value="1">
                            <label class="form-check-label" for="role_admin">System Admin</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" wire:model="role" id="role_marketing" value="2">
                            <label class="form-check-label" for="role_marketing">Marketing Personnel</label>
                        </div>
                        @error('role') <div class="text-danger">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="password" class="col-sm-2 col-form-label">Default Password</label>
                    <div class="col-sm-6">
                        <div class="input-group">
                            <input type="text" class="form-control @error('password') is-invalid @enderror" wire:model="password" id="password" readonly>
                            <button type="button" class="btn btn-outline-secondary" wire:click="generatePassword" wire:loading.attr="disabled" wire:target="generatePassword" {{ $isGenerated ? 'disabled' : '' }}>
                                <span wire:loading wire:target="generatePassword">Generating...</span>
                                <span wire:loading.remove wire:target="generatePassword">Generate</span>
                            </button>
                            @if($password)
                                <button type="button" class="btn btn-outline-secondary" wire:click="copyPassword">Copy</button>
                            @endif
                        </div>
                        @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('copy-password', function (event) {
        navigator.clipboard.writeText(event.detail.password).then(() => {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Password successfully copied.',
            });
        });
    });
</script>

@if(session('success'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        Swal.fire({
            icon: 'success',
            title: 'Success',
            text: '{{ session('success') }}',
        });
    </script>
@endif

@if(session('error'))
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: '{{ session('error') }}',
        });
    </script>
@endif