vista pricipal de subgrupos

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

        <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>Catálogos</span>

            </li>

            <li>

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

            </li>

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

                <span>Subgrupos</span>

            </li>

        </ul>

        <div class="panel mt-6">

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

                    <a href="{{ route('usuarios.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="9" cy="9" r="2" stroke="#1C274C" stroke-width="1.5"/>

                        <path d="M13 15C13 16.1046 13 17 9 17C5 17 5 16.1046 5 15C5 13.8954 6.79086 13 9 13C11.2091 13 13 13.8954 13 15Z" stroke="#1C274C" stroke-width="1.5"/>

                        <path d="M22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C21.298 5.64118 21.5794 6.2255 21.748 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                        <path d="M19 12H15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                        <path d="M19 9H14" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                        <path d="M19 15H16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>

                    </svg>

                        Crear nuevo subgrupo

                    </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 subgrupos = @json($subgrupos);

        const data = subgrupos.map(subgrupo => [subgrupo.subgruponame, subgrupo.name, subgrupo.roles[0].name, subgrupo.dependencia.nombre, renderIsActive(subgrupo.active), renderActions(subgrupo.id, subgrupo.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: ['Nombre', 'Grupo', 'Subgrupo', '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