<div x-cloak>
    @include('components.no-permission')

    <div wire:loading.class="flex" wire:loading.class.remove="hidden" wire:target="showCompanyList"
        class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
        <div class="app-preloader grid h-full w-full place-content-center">
            <div class="app-preloader-inner relative inline-block h-48 w-48"></div>
        </div>
    </div>
    <div class="my-5 flex h-8 place-content-center px-4 ">
        <h2 class="text-xl  text-slate-800">
            Group 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>
    @if ($action === 'list')
        <div x-data="{ show: @entangle('showMessage'), message: '' }" x-init="window.addEventListener('show-message', event => {
        
            show = true;
            message = event.detail.message;
            console.log(show, message);
            setTimeout(() => { show = false, console.log(show, message); }, 3000);
        });">
            <div 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>
        <div x-data="{
            showDeleteListModal: @entangle('showDeleteListModal'),
            showAlert: false,
            toggleGroup(event) {
                const groupId = event.target.value;
                if (event.target.checked) {
                    if (!this.selectedGroupsAlpine.includes(groupId)) {
                        this.selectedGroupsAlpine.push(groupId);
                    }
                } else {
                    this.selectedGroupsAlpine = this.selectedGroupsAlpine.filter(id => id !== groupId);
                }
            },
            selectedGroupsAlpine: [],
            selectedGroups: @entangle('selectedGroups')
        }" class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">

            <div class="card py-4">
                <div class="flex justify-between">
                    <div class="flex ">
                        <div class="px-1 ml-5">
                            <button type="button"
                                class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus"
                                wire:click="showGroupCreateForm"><i aria-hidden="true" aria-hidden="true"
                                    class="fa fa-add fa-solid"></i>Add</button>
                        </div>
                        <div class=" ml-1">
                            <a @click.prevent="if (selectedGroupsAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
                                class="py-2 px-3 bg-primary rounded-md text-white hover:bg-primary-focus flex items-center space-x-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
                                    </path>
                                </svg>
                                <span>Delete</span>
                            </a>
                        </div>
                    </div>

                    <div class="inline-flex flex-initial">
                        <div x-data="{ isInputActive: true }">
                            <div class="flex gap-3 px-5 items-center">
                                <button @click="isInputActive = !isInputActive"
                                    class="btn  h-8 w-10 rounded-full p-0  hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 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="currentColor">
                                        <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="keyword" />
                                </span>
                                <span class="w-52" x-show="isInputActive === true">
                                    <select wire:model="searchSelected"
                                        class="form-select h-9  w-full rounded-lg border border-slate-300 bg-white 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>
                            </div>
                        </div>
                    </div>
                </div>
                @include('livewire.select-atleast-modal')
                <div class="mx-3 mt-3 px-4">
                    <div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
                       <table aria-describedby="mydesc"  class="is-hoverable w-full text-left">
                            <thead>
                                <tr>
                                    <th scope="col" 
                                        class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        #
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Name
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Role
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Create Date
                                    </th>
                                    <th scope="col" 
                                        class="whitespace-nowrap text-center rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($results as $group)
                                    <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 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="selectedGroups"
                                                    value="{{ $group->id }}" />
                                            </label>
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $group->name }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                            @php
                                                $roles = $group->roles->take(5); // Take the first 5 roles
                                                $remainingCount = $group->roles->count() - $roles->count();
                                            @endphp

                                            @foreach ($roles as $permission)
                                                <li
                                                    class="inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs">
                                                    {{ $permission->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
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $group->created_at }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                            <div class="flex justify-center space-x-1">
                                                <a wire:click="showGroupEditForm({{ $group->id }})"
                                                    class="btn h-8 w-8 p-0  hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                                    <i aria-hidden="true" class="fa fa-edit"></i>
                                                </a>
                                                <div>
                                                    <a @click="$wire.emit('showDeleteModal', {{ $group->id }})"
                                                        class="btn h-8 w-8 p-0  hover:text-white focus:text-white active:bg-error/25">
                                                        <i aria-hidden="true" class="fa fa-trash-alt"></i>
                                                    </a>
                                                </div>
                                            </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="selectedGroupsAlpine.length"></span> groups?
                                    </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', selectedGroups ); 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.group.group-create :roles="$roles" :users="$users" :companies="$companies"
            wire:key="group-create" />
    @elseif($action === 'edit')
        <livewire:pages.group.group-edit :roles="$roles" :users="$users" :companies="$companies" :editGroupId="$editGroupId"
            wire:key="group-edit" />
    @endif
</div>
