<div class="border-0 shadow-none" x-cloak>
    <div wire:loading.class="" wire:loading.class.remove="hidden" wire:target="save"
        class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
        <div class="flex justify-center items-center ">
            <div class="items-center h-100vh" style="align-content: center;">
                <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
            </div>

        </div>
    </div>
    <div class="my-5 flex h-8 place-content-center px-4 ">
        <h2 class="text-xl  text-slate-800">
            User Management
        </h2>
        <h2 class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4">
            {{ $action === 'create' ? 'Create' : ($action === 'edit' ? 'Edit' : '') }}
        </h2>
    </div>
    <div class="m-2" x-data="{
        showDeleteListModal: @entangle('showDeleteListModal') }">
        @if ($action === 'list')
            @if ($message)
                <div class="alert alert-success">
                    <div wire:ignore x-data="{ show: true }" x-init="setTimeout(() => show = false, 3000)"
                        x-show.transition.duration.500ms="show"
                        class="fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg">
                        {{ $message }}
                    </div>
                </div>
            @endif
            <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-main-container rounded-md">
           
                <div class="pb-4 pt-5 bg-white rounded-lg  shadow-lg">
                    <div class="flex justify-between">
                        <div class="px-2 ml-4">
                            <button type="button"
                                class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
                                wire:click="showUserAddForm">Add</button>
                        </div>
                        <div class="inline-flex flex-initial">
                            <div x-data="{ isInputActive: true }">
                                <div class="flex flex-wrap gap-4 px-5 items-center">
                                    <button @click="isInputActive = !isInputActive"
                                        class="btn  h-8 w-10 rounded-full p-0  hover:bg-primary-focus hover:text-main-container active:text-main-container focus:text-main-container primary-focus hover:text-main-container active:text-main-container focus:text-main-container  dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
                                            viewBox="0 0 24 24" stroke="black">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                        </svg>
                                    </button>
                                    <span class="w-64" x-show="isInputActive === true">
                                        <input
                                            class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2  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="Search Keyword" type="text" wire:model.defer="keyword" />
                                    </span>
                                    <span class="w-52" x-show="isInputActive === true">
                                        <select wire:model.defer="searchSelected"
                                            class="form-select h-9  w-full rounded-lg border border-slate-300 bg-main-container px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
                                            @foreach ($searchBy as $key => $by)
                                                <option value="{{ $key }}">{{ $by }}</option>
                                            @endforeach
                                        </select>
                                    </span>
                                    <button type="button"
                                        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
                                        wire:click="search">Search</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mx-3 mt-3 px-4">
                        <div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
                           <table aria-describedby="mydesc"  class="is-hoverable table w-full text-left border-b text-black">
                                <thead>
                                    <tr>
                                        <th scope="col" 
                                            class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            ID
                                        </th>
                                        <th scope="col" 
                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            Name
                                        </th>
                                        <th scope="col" 
                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            Email
                                        </th>
                                        <th scope="col" 
                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            Group
                                        </th>
                                        <th scope="col" 
                                            class="whitespace-nowrap bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            Create Date
                                        </th>
                                        <th scope="col" 
                                            class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                            Action
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach ($results as $index => $user)
                                        <tr
                                            class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                                {{-- <label for="selectedUsers-{{ $user->id }}"
                                                    class="inline-flex items-center space-x-2">
                                                    <input @change="toggleGroup($event)"
                                                        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" wire:model.defer="selectedUsers"
                                                        id="selectedUsers-{{ $user->id }}"
                                                        value="{{ $user->id }}" />
                                                </label> --}}
                                                {{ $user->id }}
                                            </td>
                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $user->username }}</td>
                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $user->email }}</td>
                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                                <ul>
                                                    @php
                                                        $groups = $user->groups->take(5);
                                                        $remainingCount = $user->groups->count() - $groups->count();
                                                    @endphp

                                                    @foreach ($groups as $group)
                                                        <li
                                                            class="inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs">
                                                            {{ $group->name }}</li>
                                                    @endforeach

                                                    @if ($remainingCount > 0)
                                                        <li
                                                            class="inline-block px-2 py-1 bg-gray-300 text-gray-700 rounded">
                                                            +
                                                            {{ $remainingCount }} more</li>
                                                    @endif
                                                </ul>
                                            </td>
                                            <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $user->created_at }}
                                            </td>
                                            <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                                <div class="flex justify-center space-x-1">
                                                    <a wire:click="showUserEditForm({{ $user->id }})"
                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
                                                        <i aria-hidden="true" class="fa fa-edit"></i>
                                                    </a>
                                                    <a wire:click="showConfigManualResponseForm({{ $user->id }})"
                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
                                                        <i class="fa-solid fa-sliders"></i>
                                                    </a>
                                                    <a @click="$wire.emit('showDeleteModal', {{ $user->id }})"
                                                        class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
                                                        <i aria-hidden="true" class="fa fa-trash"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <template x-if="showDeleteListModal">
                            <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                @keydown.window.escape="showDeleteListModal = false">
                                <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                    @click="showDeleteListModal = false"></div>
                                <div
                                    class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="inline h-28 w-28 text-error"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>
                                    <div class="mt-4 mx-5">
                                        <h2 class="text-2xl text-slate-700 dark:text-navy-100">
                                            Are you sure <br> you want to delete <span
                                                x-text="selectedUsersAlpine.length"></span> users?
                                        </h2>
                                        <p class="mt-2"></p>
                                        <button @click="showDeleteListModal = false"
                                            class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">
                                            Close
                                        </button>
                                        <button
                                            @click="$wire.emitSelf('deleteSelected', selectedUsers ); showDeleteListModal = false"
                                            class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
                                            Confirm
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <livewire:delete-modal />
                        {{ $results->links('livewire.paginate-custom') }}

                    </div>
                </div>
            </div>
        @elseif($action === 'create')
            <livewire:pages.user.user-create wire:key="user-create" />
        @elseif($action === 'edit')
            <livewire:pages.user.user-edit :editUserId="$editUserId" wire:key="user-edit" />
        @elseif($action === 'configManualResponse')
            <livewire:pages.user.config-manual-response :editUserId="$editUserId"/>
        @else
            <div></div>
        @endif
    </div>
</div>
