<div class="border-0 shadow-none"  x-data="{ open: @entangle('showSearch'), serverKeySuccess: []  ,serverKeyWaitingSend: @entangle('serverKeyWaitingSend').defer }">
    <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>
    </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.500ms="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 mt-2 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">
                                                Select All
                                            </li>
                                            @forelse($resultsServerkey as $result)
                                                <li class="p-2 hover:bg-gray-100 cursor-pointer"
                                                    wire:click="selectResult('{{ $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>

                        <!-- Company Select Group -->
                        {{-- <div>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">Company Selection</h3>
                            <div>
                                <label for="company_select"
                                    class="block text-sm font-medium text-gray-700">Company</label>
                                <select id="company_select" name="company_select"
                                    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>Please select company</option>
                                    <!-- Options -->
                                </select>
                            </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">
                                @foreach ($serverKeyWaitingSend as $key => $serverkey)
                                    <div class="flex items-center bg-blue-500 text-white w-full px-4 py-2 rounded m-1">
                                        <span class="flex-grow">{{ $serverkey['key'] }}</span>
                                        <button wire:click="removeServerKey('{{ $serverkey['key'] }}')" class="ml-2">
                                            <i aria-hidden="true" class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                @endforeach
                            </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" wire:click="sendPatch"
                                    class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus">Send</button>
                            </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 => {
                            serverKeySuccess.push(server);
                        });">
                            <template x-for="server in serverKeySuccess" :key="server.id">
                                <div class="bg-green-100 text-green-700 p-2 rounded mb-2">
                                    Patch Sent: <span x-text="server.key"></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 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="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">
                            <option value="SNKEY">Server Key</option>
                            <option value="COMPANY">Company</option>
                        </select>
                    </span>
                </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">
                                    <input type="checkbox"
                                        class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
                                </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>
