<div x-data=" {
     selectedPatch: [],
     selectedPatchByPage: {},
     allSelectPatches: [],
     allSelectPatchName: [],
     currentPage: @entangle('page'), // Bind currentPage to Livewire 'page' variable
     init() {
         this.$watch('currentPage', (value) => {
             this.loadSelectedPatch();
             this.resetCheckAllCheckbox();
         });
         this.loadSelectedPatch();
         Livewire.on('removePatchSelected', (patch) => {
             const checkboxes = document.querySelectorAll('.individual-checkbox');

             checkboxes.forEach(checkbox => {
                 if (checkbox.value === patch) {
                     checkbox.checked = false;
                     this.updatePatchSelection(checkbox.value, checkbox.getAttribute('data-patchname'), false);
                 }
             });

             this.updateSelectedPatchList();
         });
         Livewire.on('updateSelectPatchAfterDeleted', () => {
             this.clearAllSelections();
         });
     },
     toggleAllCheckboxes(event) {
         const checkboxes = document.querySelectorAll('.individual-checkbox');
         const isChecked = event.target.checked;

         checkboxes.forEach(checkbox => {
             checkbox.checked = isChecked;
             // Livewire.emit('updateSelectedPatches', checkbox.value);
             const patchName = checkbox.getAttribute('data-patchname');
             this.updatePatchSelection(checkbox.value, patchName, isChecked);
         });
         this.updateSelectedPatchList();
     },
     updateSelectedPatch(event) {
         const patchName = event.target.getAttribute('data-patchname');
         this.updatePatchSelection(event.target.value, patchName, event.target.checked);
         this.updateSelectedPatchList();
     },
     updatePatchSelection(patch, patchName, isSelected) {
         const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
         if (isSelected) {
             if (!pagePatches.includes(patch)) {
                 pagePatches.push(patch);
                 this.allSelectPatches.push(patch);
                 this.allSelectPatchName.push(patchName);
             }
         } else {
             const indexPage = pagePatches.indexOf(patch);
             const indexAll = this.allSelectPatches.indexOf(patch);
             if (indexPage !== -1) {
                 pagePatches.splice(indexPage, 1);
             }
             if (indexAll !== -1) {
                 this.allSelectPatches.splice(indexAll, 1);
                 this.allSelectPatchName.splice(indexAll, 1);
             }
         }
         Livewire.emit('updateDeletedPatches', this.allSelectPatches, this.allSelectPatchName);
         this.selectedPatchByPage[this.currentPage] = pagePatches;
     },
     clearAllSelections() {
         this.allSelectPatches = [];
         this.allSelectPatchName = [];

     },
     updateSelectedPatchList() {
         this.selectedPatch = Object.values(this.selectedPatchByPage).flat();
     },
     loadSelectedPatch() {
         const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
         const checkboxes = document.querySelectorAll('.individual-checkbox');

         checkboxes.forEach(checkbox => {
             checkbox.checked = pagePatches.includes(checkbox.value);
         });
         this.updateSelectedPatchList();
     },
     resetCheckAllCheckbox() {
         const checkAllCheckbox = document.getElementById('check-all');
         const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
         const checkboxes = document.querySelectorAll('.individual-checkbox');
         checkAllCheckbox.checked = checkboxes.length > 0 && pagePatches.length === checkboxes
             .length;
     }
 }" x-init="$watch('selectedPatch', () => resetCheckAllCheckbox())" class="w-full mb-6">
 
    <div class="p-6 bg-white shadow-md rounded-lg">
        <div x-show="true" class="">
            <div class="flex justify-end mb-5">
                <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-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="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-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>
                            <button type="button" class="bg-primary text-white px-4 py-2 rounded"
                                wire:click="search">Search</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-3 ">
                <div class="is-scrollbar-hidden min-w-full table-responsive">

                   <table aria-describedby="mydesc"  class="is-hoverable table 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">
                                    <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" id="check-all" @click="toggleAllCheckboxes" />
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Patch ID
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Patch Name
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Description
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Server
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Date
                                </th>
                                <th scope="col" 
                                    class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                                    Remark
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($results as $patch)
                                <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
                                                class="form-checkbox individual-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" @click="updateSelectedPatch" value="{{ $patch->PID }}"
                                                data-patchname = "{{ $patch->PATCHNAME }}" />
                                        </label>
                                    </td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PID }}</td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2" data-id="{{ $patch->PID }}">
                                        {{ \Illuminate\Support\Str::limit($patch->PATCHNAME, 40) }}
                                    </td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2">
                                        {{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->server }}
                                    </td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}
                                    </td>
                                    <td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="justify-center flex">
                        <span wire:loading>
                            <svg class="animate-spin h-16 w-16 text-primary m-2 " xmlns="http://www.w3.org/2000/svg"
                                fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                </path>
                            </svg>
                        </span>
                    </div>

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