Formulario de crear usuario

<x-layout.default>

    <link rel='stylesheet' type='text/css' href='{{ Vite::asset("resources/css/nice-select2.css") }}'>

    <div x-data="crearUsuarios">

        <ul class="flex space-x-2 rtl:space-x-reverse">

            <li>

                <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>

            </li>

            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">

                <span>Administración</span>

            </li>

            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">

                <a href="{{ route('usuarios.get') }}" class="text-primary hover:underline">Usuarios</a>

            </li>

            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">

                <span>Crear usuario</span>

            </li>

        </ul>

        <div class="panel mt-6">

            <div class="flex items-center justify-between mb-5">

                <h5 class="font-semibold text-lg dark:text-white-light">Crear nuevo usuario</h5>

            </div>

            <div class="mb-5">

                <form class="space-y-5" action="{{ route('usuarios.store') }}" method="POST">

                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                        <div>

                            <label for="name">Nombre</label>

                            <input id="name" name="name" type="text" placeholder="Ingresa el nombre" class="form-input" />

                        </div>

                        <div>

                            <label for="username">Usuario</label>

                            <div class="flex">

                                <div class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">

                                    @</div>

                                <input id="username" name="username" type="text" placeholder="Ingresa el usuario" class="form-input ltr:rounded-l-none rtl:rounded-r-none" />

                            </div>

                        </div>

                        <div>

                            <label for="password">Contraseña</label>

                            <input id="password" name="password" type="password" placeholder="Ingresa la contraseña" class="form-input" />

                        </div>

                        <div>

                            <label for="password_confirmation">Repetir contraseña</label>

                            <input id="password_confirmation" name="password_confirmation" type="password" placeholder="Repite la contraseña" class="form-input" />

                        </div>

                        <div class="mb-5">

                        <select id="dependencia_id" name="dependencia_id">

                            @foreach($dependencias as $dependencia)

                                <option value="{{ $dependencia->id }}">{{ $dependencia->nombre }}</option>

                            @endforeach

                        </select>

                        </div>

                        <div class="flex items-center">

                            <span class="mr-2">¿Activar usuario?</span>

                            <label class="w-12 h-6 relative">

                                <input type="checkbox" class="custom_switch absolute w-full h-full opacity-0 z-10 cursor-pointer peer" id="active" name="active" />

                                <span for="active" class="bg-[#ebedf2] dark:bg-dark block h-full rounded-full before:absolute before:left-1 before:bg-white dark:before:bg-white-dark dark:peer-checked:before:bg-white before:bottom-1 before:w-4 before:h-4 before:rounded-full peer-checked:before:left-7 peer-checked:bg-primary before:transition-all before:duration-300"></span>

                            </label>

                        </div>

                    </div>

                    <button type="submit" class="btn btn-primary !mt-6">Guardar</button>

                </form>

            </div>

        </div>

    </div>

    <link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">

    <script src="/assets/js/highlight.min.js"></script>

    <script src="/assets/js/nice-select2.js"></script>

    <script>

        document.addEventListener("DOMContentLoaded", function(e) {

            // default

            var els = document.querySelectorAll(".selectize");

            els.forEach(function(select) {

                NiceSelect.bind(select);

            });

            // seachable

            var options = {

                searchable: true

            };

            NiceSelect.bind(document.getElementById("dependencia_id"), options);

            document.querySelectorAll('.nice-select .current').forEach(el => {

                if (el.textContent.trim() === 'Select an option') {

                    el.textContent = 'Selecciona una opción';

                }

            });

            document.querySelectorAll('.nice-select .list .option').forEach(el => {

                if (el.textContent.trim() === 'Select an option') {

                    el.textContent = 'Selecciona una opción';

                }

            });

            var searchInputs = document.querySelectorAll('.nice-select-search');

            searchInputs.forEach(function(input) {

                input.placeholder = 'Buscar...';

            });

        });

        document.addEventListener("alpine:init", () => {

            Alpine.data("crearUsuarios", () => ({

                // highlightjs

                codeArr: [],

                toggleCode(name) {

                    if (this.codeArr.includes(name)) {

                        this.codeArr = this.codeArr.filter((d) => d != name);

                    } else {

                        this.codeArr.push(name);

                        setTimeout(() => {

                            document.querySelectorAll('pre.code').forEach(el => {

                                hljs.highlightElement(el);

                            });

                        });

                    }

                }

            }));

        });

        showMessage = (msg = 'Example notification text.', position = 'top-end', showCloseButton = true, closeButtonHtml = '', duration = 3000, type = 'success') => {

            const toast = window.Swal.mixin({

                toast: true,

                position: position || 'top-end',

                showConfirmButton: false,

                timer: duration,

                showCloseButton: showCloseButton,

                customClass: {

                    container: 'custom-swal-container',

                    popup: 'custom-swal-popup',

                    title: 'custom-swal-title',

                }

            });

            // Define el color y el icono según el tipo de mensaje

            let color;

            let icon;

            if (type === 'success') {

                color = '#4caf50'; // Color verde para éxito

                icon = 'success'; // Icono de éxito

            } else if (type === 'error') {

                color = '#f44336'; // Color rojo para error

                icon = 'error'; // Icono de error

            }

            // Aplica el estilo al mensaje

            toast.fire({

                title: msg,

                icon: icon,

                showClass: {

                    popup: 'swal2-noanimation',

                },

                hideClass: {

                    popup: '',

                },

                customClass: {

                    title: 'swal2-title',

                    popup: 'swal2-popup',

                    icon: 'swal2-icon',

                },

                timerProgressBar: true,

                timerProgressBarColor: color,

                timerProgressBarHeight: 3,

                background: color,

                iconColor: 'white',

            });

        };

        document.addEventListener('DOMContentLoaded', function() {

            @if(session('success'))

            // Muestra el mensaje de éxito utilizando showMessage

            showMessage("{{ session('success') }}", 'top-end', true, '', 3000, 'success');

            @endif

            @if($errors -> any())

            @foreach($errors -> all() as $error)

            console.log("{{$error}}");

            showMessage("{{$error}}", 'top-end', true, '', 3000, 'error');

            @endforeach

            @endif

        });

    </script>

</x-layout.default>

 No newline at end of file