<x-app-layout-sideblock title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6">
            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="/">Home</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
                <li> Configuration </li>
                <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <li class="flex items-center space-x-2">
                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                        href="{{ route('configurations.user-group') }}">User Group</a>
                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </li>
            </ul>
        </div>
        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
            <form action="{{ route('configurations.user-group.update', $example['id']) }}" method="POST">
                @method('PUT')
                @csrf
                <input type="hidden" name="id" value="{{ $example['id'] }}">

                <div class="card pb-4">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2
                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            <i class="fa-solid fa-edit text-primary"></i>  Edit
                        </h2>
                    </div>

                    <div class="w-3/4 px-3 space-y-3 m-auto mb-4">
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Group name:</span>
                            </label>
                            <span class="relative flex w-full">
                                <input
                                    class="form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Group name" type="text" />
                            </span>
                        </div>
                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Company:</span>
                            </label>
                            <span class="relative flex  w-full">
                                <select name="company"
                                    class="form-select w-2/4 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                    <option value="netbay1">Netbay1</option>
                                    <option value="netbay1">Netbay2</option>
                                    <option value="netbay1">Netbay3</option>
                                    <option value="netbay1">Netbay4</option>
                                </select>
                            </span>
                        </div>


                        <div class="flex items-center">
                            <label class="w-2/12 mr-2">
                                <span>Admin group</span>
                            </label>
                            <span class="relative flex  w-full">
                                <label class="inline-flex items-center space-x-2">
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="admin_group" type="radio" />
                                    <p>Y</p>
                                    <input
                                        class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                        name="admin_group" type="radio" />
                                    <p>N</p>
                                </label>
                            </span>
                        </div>
                        <div x-data="{ showCustomize: false }" class="w-3/5">
                            <div class="flex items-center">
                                <label class="w-2/12 mr-2">
                                    <span>Profile group</span>
                                </label>
                                <span class="relative flex  w-full">
                                    <label class="inline-flex items-center space-x-2">
                                        <input
                                            class="form-radio is-basic h-4 w-4 rounded-full border-2 border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                            name="profile_group" type="radio" x-on:click="showCustomize = false" />
                                        <p>Default</p>
                                    </label>
                                    <label class="inline-flex items-center space-x-2 mx-3">
                                        <input
                                            class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                            name="profile_group" type="radio" x-on:click="showCustomize = true" />
                                        <p>Customize</p>
                                    </label>
                                </span>
                            </div>
                            <div x-data="{ activeTab: 'tabPermission' }" class="tabs flex flex-col mt-6 border-2 px-4 py-1 ">
                                <div
                                    class="is-scrollbar-hidden overflow-x-auto  text-slate-600 dark:bg-navy-800 dark:text-navy-200">
                                    <div class="tabs-list flex">

                                        <button @click="activeTab = 'tabProfileAndMenu'" x-on:click.prevent
                                            :class="activeTab === 'tabProfileAndMenu' ?
                                                'bg-white active:text-primary focus:text-primary hover:text-primary border-b-4 border-wid  border-primary rounded-b-none dark:bg-navy-500 dark:text-navy-100' :
                                                'hover:text-slate-800  focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                                            class="btn shrink-0 px-3 py-1.5 font-medium">
                                            {{-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6zM7.5 6h.008v.008H7.5V6zm2.25 0h.008v.008H9.75V6z" />
                                            </svg> --}}
                                            <span class="ml-2 ">Config
                                                Profile&Menu</span>
                                        </button>
                                        <button @click="activeTab = 'tabPermission'" x-on:click.prevent
                                            :class="activeTab === 'tabPermission' ?
                                                'bg-white active:text-primary focus:text-primary hover:text-primary border-b-4  border-primary rounded-b-none dark:bg-navy-500 dark:text-navy-100' :
                                                'hover:text-slate-800   focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                                            class="btn shrink-0 px-3 py-1.5 font-medium">
                                            {{-- <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                class="w-4 h-4">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6zM7.5 6h.008v.008H7.5V6zm2.25 0h.008v.008H9.75V6z" />
                                            </svg> --}}
                                            <span class="ml-2 ">Permisison</span>
                                        </button>
                                        <div class="flex-initial w-full"></div>
                                    </div>
                                </div>
                                <div class="tab-content p-4 ">
                                    <div x-show="activeTab === 'tabProfileAndMenu'"
                                        x-transition:enter="transition-all duration-500 easy-in-out"
                                        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                                        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
                                        <div>
                                            <div class=" col-start-2 col-span-4 p-2" x-show="showCustomize"
                                                id="customize">
                                                <span class="m-3"><b> :: Config Group Profile
                                                        level ::</b></span>
                                                <ul class="mt-2 mx-5 px-5  space-y-1.5 font-inter font-medium">
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>AXFL</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>HAHB</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>ASEM</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>AZJP</p>
                                                        </label>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class=" col-start-2 col-span-4 p-2">
                                                <span class="m-3"><b> :: Menu Control Panel > Control at group
                                                        level ::</b></span>
                                                <ul class="mt-2 mx-5 px-5  space-y-1.5 font-inter font-medium">
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>Primary</p>
                                                        </label>
                                                        <ul class="mt-2 mx-5 px-5  space-y-1.5 font-inter font-medium">
                                                            <li>
                                                                <label class="inline-flex items-center space-x-2">
                                                                    <input
                                                                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                        type="checkbox" />
                                                                    <p>Primary</p>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label class="inline-flex items-center space-x-2">
                                                                    <input
                                                                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                        type="checkbox" />
                                                                    <p>Primary</p>
                                                                </label>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>Primary</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>Primary</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>Primary</p>
                                                        </label>
                                                    </li>
                                                    <li>
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                                type="checkbox" />
                                                            <p>Primary</p>
                                                        </label>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>
                                    <div x-show="activeTab === 'tabPermission'"
                                        x-transition:enter="transition-all duration-500 easy-in-out"
                                        x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                                        x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
                                        <div>
                                            <div class=" col-start-2 col-span-4 p-2">
                                                <div class="flex items-center">
                                                    <label class="w-64 mr-2">
                                                        <span>Actions Customize</span>
                                                    </label>
                                                    <span class="relative flex  w-full">
                                                        <label class="inline-flex items-center space-x-2">
                                                            <input
                                                                class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                                                name="action_customize" type="radio" />
                                                            <p>Y</p>
                                                        </label>
                                                        <label class="inline-flex items-center space-x-2 mx-3">
                                                            <input
                                                                class="form-radio is-basic h-4 w-4 rounded-full border-slate-400/70 checked:!border-success checked:bg-success hover:!border-success focus:!border-success dark:border-navy-400"
                                                                name="action_customize" type="radio" />
                                                            <p>N</p>
                                                        </label>
                                                    </span>
                                                </div>
                                                <label class="inline-flex items-center space-x-2 py-4">
                                                    <input
                                                        class="form-checkbox is-basic h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
                                                        type="checkbox" />
                                                    <p>Check/Uncheck All</p>
                                                </label>
                                                <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                                                    <table class="w-full text-left">
                                                        <tbody x-data="{ expanded: false }">
                                                            <tr class="border-y border-transparent hover:cursor-pointer hover: "
                                                                :class="expanded ? '' : ''"
                                                                @click="expanded = !expanded">
                                                                <td class="whitespace-nowrap py-3">
                                                                    <label class="inline-flex items-center space-x-2">
                                                                        <input
                                                                            class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                            type="checkbox" />
                                                                        <p>IMPORTDECLARATIONCONTROL</p>
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                            <tr
                                                                class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                                                <td colspan="100" class="px-5">
                                                                    <div x-show="expanded" x-collapse
                                                                        class="flex flex-col space-y-2">
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                        <tbody x-data="{ expanded: false }">
                                                            <tr class="border-y border-transparent hover:cursor-pointer"
                                                                @click="expanded = !expanded">
                                                                <td class="whitespace-nowrap py-3">
                                                                    <label class="inline-flex items-center space-x-2">
                                                                        <input
                                                                            class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                            type="checkbox" />
                                                                        <p>IMINVOICECONTROL</p>
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                            <tr
                                                                class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                                                <td colspan="100" class="px-5">
                                                                    <div x-show="expanded" x-collapse>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                        <tbody x-data="{ expanded: false }">
                                                            <tr class="border-y border-transparent hover:cursor-pointer"
                                                                @click="expanded = !expanded">
                                                                <td class="whitespace-nowrap py-3">
                                                                    <label class="inline-flex items-center space-x-2">
                                                                        <input
                                                                            class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                            type="checkbox" />
                                                                        <p>IMINVOICEITEM</p>
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                            <tr
                                                                class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                                                <td colspan="100" class="px-5">
                                                                    <div x-show="expanded" x-collapse>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                        <label
                                                                            class="inline-flex items-center space-x-2 px-5">
                                                                            <input
                                                                                class="form-checkbox is-basic z-40 h-4 w-4 rounded  border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:focus:border-accent no-hover-style"
                                                                                type="checkbox" />
                                                                            <p>Primary</p>
                                                                        </label>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-8 justify-center space-x-2 pt-4">
                            <a href="{{ route('configurations.user-group') }}"
                                class="col-start-3 btn  border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                Cancel
                            </a>
                            <button type="submit"
                                class="btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </main>

</x-app-layout-sideblock>
