Formulario de editar

<x-layout.default>

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

    <div x-data="editarUsuarios">

        <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>Editar 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">Editar usuario</h5>

            </div>

            <div class="mb-5">

                <form class="space-y-5" action="{{ route('usuarios.update', $user->id) }}" method="POST">

                    @csrf

                    @method('PUT')

                    <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" required value="{{ $user->name }}" 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" required value="{{ $user->username }}" 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>

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

                        <div class="mb-5">

                            <label for="dependencia_id">Dependencia</label>

                            <select id="dependencia_id" name="dependencia_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                                @foreach($dependencias as $dependencia)

                                    <option value="{{ $dependencia->id }}" {{ $user->dependencia_id == $dependencia->id ? 'selected' : '' }}>{{ $dependencia->nombre }}</option>

                                @endforeach

                            </select>

                        </div>

                        <div class="mb-5">

                            <label for="role">Rol</label>

                            <select id="role" name="role" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                                @foreach($roles as $role)

                                    <option value="{{ $role->name }}" {{ $user->hasRole($role->name) ? 'selected' : '' }}>{{ $role->name }}</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" {{ $user->active ? 'checked' : '' }} />

                                <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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <link rel="stylesheet" href="/assets/css/jquery.toast.css">

    <script src="/assets/js/jquery.toast.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);

            NiceSelect.bind(document.getElementById("role"), 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("editarUsuarios", () => ({

                // 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);

                            });

                        });

                    }

                }

            }));

        });

        function showToast(message, heading, icon) {

            $.toast({

                heading: heading,

                text: message,

                showHideTransition: 'slide',

                icon: icon,

                position: 'top-right',

                loader: false,

                hideAfter: 10000, 

                allowToastClose: true,

                textColor: '#676767',

            });

        }

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

            @if($errors->any())

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

                    showToast(`{{ $error }}`, 'Error', 'error');

                @endforeach

            @endif

        });

    </script>

</x-layout.default>

 No newline at end of file