<!-- example-component.blade.php -->
<div x-data="patchManager()" x-init="$watch('selectedPatch', () => resetCheckAllCheckbox())">
    <style>
        .animate-spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <div class="max-w-full mx-auto p-6 bg-gray-100">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif

        <div class="flex flex-wrap -mx-3">
            <div class="w-full md:w-2/3 px-3 mb-6">
                <div class="p-6 bg-white shadow-md rounded-lg">
                    <div x-show="true" class="">
                        <div class="flex justify-between mb-5">
                            <h2
                                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                                Send Multi Patch
                            </h2>
                            <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-stone-700 text-white px-4 py-2 rounded"
                                            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">
                               <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" x-model="selectedPatch"
                                                            value="{{ $patch->PID }}"
                                                            wire:click="updateSelectedPatch" />
                                                    </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>
                            <livewire:delete-modal />
                            {{ $results->links('livewire.paginate-custom') }}
                        </div>
                    </div>
                </div>
            </div>
            <livewire:pages.send-patch.send-multi-patch-box>
        </div>
    </div>

    {{-- <div x-show="showModal" x-data="{ showModal: false }" @patchInserted.window="showModal = true"
        x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
        class="fixed z-10 inset-0 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="showModal" class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div x-show="showModal"
                class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                <div>
                    <div class="mt-3 text-center sm:mt-5">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            Inserted Patch IDs
                        </h3>
                        <div class="mt-2">
                            <ul>
                                @foreach ($insertedIds as $id)
                                    <li>{{ $id }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mt-5 sm:mt-6">
                    <button @click="showModal = false" type="button"
                        class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:text-sm">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div> --}}

    <script>
        function patchManager() {
            return {
                selectedPatch: [],
                selectedPatchByPage: {},
                currentPage: @entangle('page'), // Bind currentPage to Livewire 'page' variable
                // init() {
                //     this.$watch('currentPage', (value) => {
                //         this.loadSelectedPatch();
                //         this.resetCheckAllCheckbox();
                //     });
                //     this.$watch('selectedPatch.length', () => {
                //         this.resetCheckAllCheckbox();
                //     });
                //     this.loadSelectedPatch();
                // },
                toggleAllCheckboxes(event) {
                    const checkboxes = document.querySelectorAll('.individual-checkbox');
                    const isChecked = event.target.checked;
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = isChecked;
                        @this.call('updateSelectedPatch', checkbox.value);
                        // this.updatePatchSelection(checkbox.value, isChecked);
                    });
                    this.updateSelectedPatchList();
                },
                // updateSelectedPatch(event) {
                //     this.updatePatchSelection(event.target.value, event.target.checked);
                //     this.updateSelectedPatchList();
                // },
                // updatePatchSelection(patch, isSelected) {
                //     const pagePatches = this.selectedPatchByPage[this.currentPage] || [];
                //     if (isSelected) {
                //         if (!pagePatches.includes(patch)) {
                //             pagePatches.push(patch);
                //         }
                //     } else {
                //         const index = pagePatches.indexOf(patch);
                //         if (index !== -1) {
                //             pagePatches.splice(index, 1);
                //         }
                //     }
                //     this.selectedPatchByPage[this.currentPage] = pagePatches;
                // },
                // 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;
                // },
                // sendSelectedPatches() {
                //     @this.call('setPagePatches', this.selectedPatch);
                //     @this.call('sendPatch');
                // }
            }
        }
    </script>
</div>
