Vista de listar los contactos

<x-layout.default>

    <script src="/assets/js/simple-datatables.js"></script>

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

    <script src="/assets/js/swiper-bundle.min.js"></script>

    <div x-data="contactos">

        <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>Contactos</span>

            </li>

        </ul>

        <div class="panel mt-6">

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

                    <a href="{{ route('contacto.create') }}" type="button" class="btn btn-success btn-sm m-1">

                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

                        <circle cx="10" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"/>

                        <path d="M21 10H19M19 10H17M19 10L19 8M19 10L19 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                        <path d="M17.9975 18C18 17.8358 18 17.669 18 17.5C18 15.0147 14.4183 13 10 13C5.58172 13 2 15.0147 2 17.5C2 19.9853 2 22 10 22C12.231 22 13.8398 21.8433 15 21.5634" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                    </svg>

                        Crear nuevo contacto

                    </a>

            </div>

            <table id="myTable" class="whitespace-nowrap table-hover">

                <thead></thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

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

    <script src="/assets/js/highlight.min.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>

        const contactos = @json($contactos);

        const data = contactos.map(user => [user.username, user.name, user.roles[0].name, user.dependencia.nombre, renderIsActive(user.active), renderActions(user.id, user.name)]);

        function renderActions(id, nombre) {

            return `

                <div class="flex space-x-2">

                    <form action="{{ route('usuarios.destroy', '') }}/${id}" method="POST" class="inline-block">

                        @csrf

                        @method('DELETE')

                        <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>

                    </form>

                    <a href="/administracion/usuarios/${id}/editar" class="btn btn-primary btn-sm">Editar</a>

                </div>`;

        }

        function renderIsActive(bool) {

            if(bool === 0){

                return `<span class="badge whitespace-nowrap bg-danger">No</span>`;

            }else{

                return `<span class="badge whitespace-nowrap bg-success">Si</span>`;

            }

        }

        document.addEventListener('DOMContentLoaded', () => {

            const datatable = new simpleDatatables.DataTable('#myTable', {

                data: {

                    headings: ['Usuario', 'Nombre', 'Tipo', 'Dependencia', 'Activo', 'Acciones'],

                    data: data

                },

                perPage: 10,

                perPageSelect: [10, 20, 30, 50, 100],

                columns: [{

                        select: 0,

                        sort: 'asc'

                    },

                ],

                firstLast: true,

                firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

                labels: {

                    placeholder: "Buscar...",

                    perPage: "{select}",

                    noRows: "No hay filas para mostrar",

                    info: "Mostrando {start} a {end} de {rows} filas",

                },

            });

        });

        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(session('success'))

            // Muestra el mensaje de éxito utilizando showMessage

                showToast("{{ session('success') }}", 'Exito.', 'success')

            @endif

            @if($errors->any())

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

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

                @endforeach

            @endif

        });

    </script>

</x-layout.default>

 No newline at end of file