Vista de crear un contacto

<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">

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

            </li>

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

                <span>Crear contacto</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">

                <div class="mb-5" x-data="{ activeTab: 1}">

                    <div class="inline-block w-full">

                        <ul class="mb-5 grid grid-cols-6">

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 1}" @click="activeTab = 1">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 1}" @click="activeTab = 1">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Datos personales</span>

                                </a>

                            </li>

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 2}" @click="activeTab = 2">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 2}" @click="activeTab = 2">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Domicilio oficial</span>

                                </a>

                            </li>

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 3}" @click="activeTab = 3">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 3}" @click="activeTab = 3">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Domicilio particular</span>

                                </a>

                            </li>

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 4}" @click="activeTab = 4">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 4}" @click="activeTab = 4">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Teléfonos</span>

                                </a>

                            </li>

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 5}" @click="activeTab = 5">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 5}" @click="activeTab = 5">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Redes Sociales</span>

                                </a>

                            </li>

                            <li>

                                <a href="javascript:;" :class="{'text-primary': activeTab === 6}" @click="activeTab = 6">

                                    <div class="bg-[#f3f2ee] dark:bg-[#1b2e4b] flex justify-center items-center p-2.5 rounded-full" :class="{'!bg-primary text-white': activeTab === 6}" @click="activeTab = 6">

                                        <svg> ... </svg>

                                    </div>

                                    <span class="text-center block mt-2">Correos electrónicos</span>

                                </a>

                            </li>

                        </ul>

                        <div>

                            <template x-if="activeTab === 1">

                                <p class="mb-5">Try the keyboard navigation by clicking arrow left or right!</p>

                            </template>

                            <template x-if="activeTab === 2">

                                <p class="mb-5">The next and previous buttons help you to navigate through your content.</p>

                            </template>

                            <template x-if="activeTab === 3">

                                <p class="mb-5">Wonderful transition effects.</p>

                            </template>

                            <template x-if="activeTab === 4">

                                <p class="mb-5">Wonderful transition effects.</p>

                            </template>

                            <template x-if="activeTab === 5">

                                <p class="mb-5">Wonderful transition effects.</p>

                            </template>

                            <template x-if="activeTab === 6">

                                <p class="mb-5">Wonderful transition effects.</p>

                            </template>

                        </div>

                        <div class="flex justify-between">

                            <button type="button" class="btn btn-primary" :disabled="activeTab === 1" @click="activeTab--">Atras</button>

                            <button type="button" class="btn btn-primary" :disabled="activeTab === 6" @click="activeTab++">Siguiente</button>

                        </div>

                    </div>

                </div>

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

                            });

                        });

                    }

                }

            }));

        });

        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