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

    <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 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"
                    wire:click="$emit('menuClicked', 'Role')">Role Management</a>
            </li>
        </ul>
    </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.selectedRolesAlpine.includes(groupId)) {
                        this.selectedRolesAlpine.push(groupId);
                    }
                } else {
                    this.selectedRolesAlpine = this.selectedRolesAlpine.filter(id => id !== groupId);
                }
            },
            selectedRolesAlpine: [],
            selectedRoles: @entangle('selectedRoles')
        }" class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">

            <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">
                        Role Management
                    </h2>
                </div>


                {{-- @include('components/search-by', ['searchBy' => $searchBy ?? []]) --}}
                <div class="flex justify-between">

                    <div class="px-2 ml-4">
                        @if (Auth::user()->hasPermissions(['add-role']))
                        <button wire:click="showRoleCreateForm()"
                            class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs 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">
                            <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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z">
                                </path>
                            </svg>
                            <span>Create</span>
                        </button>
                        @endif
                        @if (Auth::user()->hasPermissions(['delete-role']))
                        <a @click.prevent="if (selectedRolesAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
                            class="btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs 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">
                            <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>
                        @endif
                    </div>
                    <div class="inline-flex flex-initial">
                        <div x-data="{ isInputActive: true }">
                            <div class="flex gap-4 px-5 items-center">
                                <button @click="isInputActive = !isInputActive"
                                    class="btn  h-8 w-14 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">
                                        Permission
                                    </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 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 $role)
                                    <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" 
                                                    value="{{ $role->id }}" />
                                            </label>
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $role->name }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                            <ul>
                                                @php
                                                    $permissions = $role->permissions->take(5); // Take the first 5 permissions
                                                    $remainingCount =
                                                        $role->permissions->count() - $permissions->count();
                                                @endphp

                                                @foreach ($permissions 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
                                            </ul>
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $role->created_at }}</td>
                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
                                            <div class="flex justify-center space-x-2">
                                                @if (Auth::user()->hasPermissions(['edit-role']))
                                                    <a wire:click="showRoleEditForm({{ $role->id }})"
                                                        class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                                        <i aria-hidden="true" class="fa fa-edit"></i>
                                                    </a>
                                                @endif
                                                @if (Auth::user()->hasPermissions(['delete-role']))
                                                    <div>
                                                        <a @click="$wire.emit('showDeleteModal', {{ $role->id }})"
                                                            class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
                                                            <i aria-hidden="true" class="fa fa-trash-alt"></i>
                                                        </a>
                                                    </div>
                                                @endif
                                            </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="selectedRolesAlpine.length"></span> roles?
                                    </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', selectedRolesAlpine ); showDeleteListModal = false; selectedRolesAlpine = []"
                                        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.role.role-create :permissions="$permissions" wire:key="role-create" />
    @elseif($action === 'edit')
        <livewire:pages.role.role-edit :permissions="$permissions" :editRoleId="$editRoleId" wire:key="role-edit" />
    @endif
</div>
