<div class="border-0 shadow-none" x-data="{
    open: @entangle('showSearch'),
    serverKeySuccess: [],
    serverKeyWaitingSend: [],
    loading: false,
    allKeys: @entangle('resultsServerkeyArr'),
    serverKeySelectAll() {
        console.log('test');
        this.allKeys.forEach(key => {
            if (!this.serverKeyWaitingSend.some(item => item.id == key.ID)) {
                this.serverKeyWaitingSend.push({ id: key.ID, value: key.SNKEY });
            }
        });
    },
    serverKeySelect(id, value) {
        if (!this.serverKeyWaitingSend.some(item => item.id == id)) {
            this.serverKeyWaitingSend.push({ id, value });
        }
    },
    removeServerKey(id) {
        this.serverKeyWaitingSend = this.serverKeyWaitingSend.filter(item => item.id !== id);
    },
    sendPatch() {
        this.loading = true;
        Livewire.emit('sendPatch', this.serverKeyWaitingSend);
        this.serverKeyWaitingSend = [];
    }
}">
    <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="mt-5  mb-2 flex h-8 place-content-center px-4 " x-data="{ serverKeyWaitingSend2: @entangle('serverKeyWaitingSend') }">
        <h2 class="text-xl  text-slate-800">
            Send Patch to Customer
        </h2>
        <h2 @click="serverKeySuccess = [], serverKeyWaitingSend2= [] "
            class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4 cursor-pointer">
            Send
        </h2>
        <h2 class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4 cursor-pointer">
            <a href="{{ route('patch.edit', ['editPid' => $PID]) }}" target="_blank">
                {{ $patchName }}
            </a>
        </h2>
    </div>
    <a href="/send-patch" type="button" class="btn ml-1 my-3 text-white bg-primary px-3 py-2">Back</a>
    <div class="rounded-md">
        <div class="" x-data="{ tomGReady: false }" x-show="true">
            <div class="mb-4">
                <div class="grid grid-cols-12 gap-2 ">
                    <div class="col-span-3 p-6 rounded-lg shadow-md card">
                        <!-- Server Information Group -->
                        <div class="mb-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Server Key</h3>
                            <div class="grid grid-cols-1  gap-4">
                                <div class="relative">
                                    <div class="relative flex items-center w-full">
                                        <input type="text"
                                            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"
                                 
                                            wire:model.debounce.1000ms="serverkey" placeholder="Search for a server key">
                                        <span wire:loading
                                            wire:target="serverkey, selectedOwnerType, company, db_type, cur_ver, selectAllResults"
                                            class="absolute right-3">
                                            <svg class="animate-spin h-5 w-5 text-black"
                                                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>

                                    @if ($showSearch)
                                        <ul x-show="open" @click.away="open = false"
                                            class="absolute left-0 right-0  border border-gray-200 rounded-md max-h-64 overflow-auto z-50 bg-white">
                                            <li class="p-2 bg-gray-200 hover:bg-gray-300 cursor-pointer font-semibold"
                                                {{-- wire:click="selectAllResults" --}} @click="serverKeySelectAll()">
                                                Select All
                                            </li>
                                            @forelse($resultsServerkey as $result)
                                                <li class="p-2 hover:bg-gray-100 cursor-pointer active:bg-[#065f46]"
                                                    @click="serverKeySelect('{{ $result->ID }}', '{{ $result->SNKEY }}')"
                                                    value="{{ $result->SNKEY }}">
                                                    {{ $result->SNKEY }}
                                                </li>
                                            @empty
                                                <li class="p-2 text-gray-500">No results found</li>
                                            @endforelse
                                        </ul>
                                    @endif
                                </div>

                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Server Information</h3>
                            <div class="grid grid-cols-1  gap-4">
                                <div>
                                    <select id="server_of" name="server_of" wire:model="selectedOwnerType"
                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                        <option value="">Please Select</option>
                                        @foreach ($ownerType as $type)
                                            <option value="{{ $type->owntype_code }}">
                                                {{ $type->owntype_description }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                        </div>
                        <div class="mb-6 ">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Company Information </h3>
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <input type="text" id="company" name="company" wire:model='company'
                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                </div>
                            </div>
                        </div>
                        <div class="mb-6 ">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Database </h3>
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <input type="text" id="db_type" name="db_type" wire:model='db_type'
                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                </div>
                            </div>
                        </div>
                        <div class="mb-6 ">
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Current Version</h3>
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <input type="text" id="cur_ver" name="cur_ver" wire:model='cur_ver'
                                        class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card  p-6 rounded-lg shadow-md col-span-4">
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Server key waiting to send</h3>
                        <div id="serverkey-list" class="overflow-y-auto max-h-[70vh]">
                            <div class="bg-gray m-3">
                                <template x-for="(serverkey, index) in serverKeyWaitingSend" :key="index">
                                    <div class="flex items-center bg-[#3d6a4d] text-white w-full px-4 py-2 rounded m-1">
                                        <span class="flex-grow" x-text="serverkey.value"></span>
                                        <button @click="removeServerKey(serverkey.id)" class="ml-2">
                                            <i aria-hidden="true" class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 place-items-center">
                        <div class="rounded-lg">
                            <div class="flex justify-center items-center mb-4 space-x-2">
                                <button type="button" @click="sendPatch" x-show="!loading"
                                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>

                                <span x-show="loading" class="relative ">
                                    <svg class="animate-spin h-8 w-8 text-black" 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="#1B4332" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="#1B4332"
                                            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>

                    </div>
                    <div class="card  p-6 rounded-lg shadow-md col-span-4">
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Server key send success</h3>
                        <div x-init="Livewire.on('patchSent', server => {
                            loading = false;
                            serverKeySuccess.push(server);
                        });">
                            <template x-for="server in serverKeySuccess" :key="server.id">
                                <div class="bg-[#009332] text-white p-2 rounded mb-2">
                                    Success: <span x-text="server.value"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>


            <div class="mb-1">
                <h3 class="text-xl font-medium leading-6 text-black my-3"><i aria-hidden="true" aria-hidden="true"
                        class="fa fa-server mr-3"></i>Server list</h3>
            </div>

            <div class="is-scrollbar-hidden min-w-full table-responsive card p-4 mb-4">
                <div class="flex justify-between">
                    <div class="flex items-center justify-start mb-3">
                        <span class="cursor-pointer text-black p-2 rounded-lg hover:bg-primary hover:text-white mr-3"
                            onclick="confirmDeleteSelected()"><i class="fa fa-trash" aria-hidden="true"></i>
                            Delete</span>
                        <span class="cursor-pointer text-black p-2 rounded-lg hover:bg-primary hover:text-white"
                            wire:click="export"><i class="fa fa-download" aria-hidden="true"></i> Export</span>
                        <span wire:loading wire:target="export,deleteSelected" class="relative ">
                            <svg class="animate-spin h-5 w-5 text-black" 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 class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
                        <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="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">
                                <option value="SNKEY">Server Key</option>
                                <option value="COMPANY">Company</option>
                            </select>
                        </span>
                    </div>
                </div>

                <table aria-describedby="mydesc"
                    class="min-w-full is-hoverable table w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Choose</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Server ID</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Company</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Serverkey</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Status</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Task Date</th>
                            <th scope="col"
                                class="px-6 py-3 bg-slate-300 text-left text-xs font-medium text-black uppercase tracking-wider">
                                Action</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach ($results as $server)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <label class="inline-flex items-center space-x-2">
                                        @if ($server->TaskStatus == '999')
                                        @else
                                            <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" wire:model.defer="selectedPenddings"
                                                value="{{ $server->ServerID }}"
                                                data-serverId = "{{ $server->ServerID }}" />
                                        @endif


                                    </label>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $server->ServerID }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $server->COMPANY }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $server->STATUS }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ $server->TaskDate }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    @if ($server->TaskStatus == '999')
                                        <button type="button" wire:click="resendPatch({{ $server->ServerID }})"
                                            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 fa-repeat" aria-hidden="true"></i></button>
                                    @else
                                        <button type="button" wire:click="deletePatch({{ $server->ServerID }})"
                                            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 fa-trash" aria-hidden="true"></i></button>
                                    @endif

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="mt-4">
                    {{ $results->links('livewire.paginate-custom') }}
                </div>
            </div>
            <div>
                &nbsp;
            </div>
        </div>
    </div>
</div>
